primer · simurai · Jan 24, 2020 · Nov 12, 2019 · Dec 18, 2019 · Dec 18, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,27 @@
+## 14.2.0
+
+### :rocket: Enhancements
+- [#1006](https://github.com/primer/css/pull/1006) Use ARIA attributes for states
+- [#1014](https://github.com/primer/css/pull/1014) Add aria-disabled state
+- [#1001](https://github.com/primer/css/pull/1001) Add Inter bold font file
+- [#982](https://github.com/primer/css/pull/982) Applies .selected styles to [aria-selected=true]
+
+### :bug: Bug fixes
+- [#1002](https://github.com/primer/css/pull/1002) Fix marketing utilities
+- [#1005](https://github.com/primer/css/pull/1005) Add .selected back to the .UnderlineNav
+
+### :memo: Documentation
+- [#1012](https://github.com/primer/css/pull/1012) Improve margin/padding docs
+- [#1013](https://github.com/primer/css/pull/1013) Fix docs links
+- [#1004](https://github.com/primer/css/pull/1004) rm deprecated flash-banner component from docs
+
+### Committers
+- [@flavianunes](https://github.com/flavianunes)
+- [@ktravers](https://github.com/ktravers)
+- [@simurai](https://github.com/simurai)
+
+## 14.1.0
+
 ### :rocket: Enhancements
 - [#994](https://github.com/primer/css/pull/994) Responsive line-height utilities
 - [#995](https://github.com/primer/css/pull/995) Add bold weight to marketing font variables

diff --git a/deprecations.js b/deprecations.js
@@ -4,6 +4,17 @@
  * array and a "message" string.
  */
 const versionDeprecations = {
+  '14.2.0': [
+    {
+      selectors: [
+        '.subnav-item.selected:hover',
+        '.subnav-item.selected:focus',
+        '.autocomplete-item[aria-selected="true"]',
+        '.autocomplete-item[aria-selected="true"] *'
+      ],
+      message: `These selectors are not needed anymore.`
+    }
+  ],
   '14.0.0': [
     {
       selectors: [

diff --git a/docs/content/components/box.md b/docs/content/components/box.md
@@ -447,7 +447,7 @@ Use `Counter--gray-dark` for a counter with a dark gray background and white tex
 
 To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
 
-Use [flexbox utilities](/css/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
+Use [flexbox utilities](/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
 
 ```html live
 <div class="Box Box--condensed">
@@ -554,7 +554,7 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
 </div>
 ```
 
-When a box is all by itself centered on a page you can use [column widths](/css/objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/css/utilities/typography) instead of the built in box title styles.
+When a box is all by itself centered on a page you can use [column widths](/objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/utilities/typography) instead of the built in box title styles.
 
 ```html live
 <div class="Box Box--spacious col-6 mx-auto text-center">
@@ -575,4 +575,4 @@ When a box is all by itself centered on a page you can use [column widths](/css/
 </div>
 ```
 
-Box patterns can also be made with, and modified with [border utilities](/css/utilities/borders).
+Box patterns can also be made with, and modified with [border utilities](/utilities/borders).
diff --git a/docs/content/components/breadcrumb.md b/docs/content/components/breadcrumb.md
@@ -17,9 +17,9 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
 ```html live
 <nav aria-label="Breadcrumb">
   <ol>
-    <li class="breadcrumb-item text-small"><a href="https://github.com/business">Business</a></li>
-    <li class="breadcrumb-item text-small"><a href="https://github.com/business/customers">Customers</a></li>
-    <li class="breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current="page">MailChimp</li>
+    <li class="breadcrumb-item"><a href="https://github.com/business">Business</a></li>
+    <li class="breadcrumb-item"><a href="https://github.com/business/customers">Customers</a></li>
+    <li class="breadcrumb-item" aria-current="page">MailChimp</li>
   </ol>
 </nav>
 ```
diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
@@ -75,28 +75,28 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
 
 ## Disabled state
 
-Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
+Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
 
 ```html live
-<button class="btn mr-2" type="button" disabled>Disabled button</button>
-<a class="btn disabled" href="#url" role="button">Disabled button</a>
+<button class="btn mr-2" type="button" aria-disabled="true">Disabled button</button>
+<a class="btn" href="#url" role="button" aria-disabled="true">Disabled button</a>
 ```
 
 Similar styles are applied to primary, danger, and outline buttons:
 
 ```html live
-<button class="btn btn-primary mr-2" type="button" disabled>Disabled button</button>
-<a class="btn btn-primary disabled" href="#url" role="button">Disabled button</a>
+<button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled button</button>
+<a class="btn btn-primary" href="#url" role="button" aria-disabled="true">Disabled button</a>
 ```
 
 ```html live
-<button class="btn btn-danger mr-2" type="button" disabled>Disabled button</button>
-<a class="btn btn-danger disabled" href="#url" role="button">Disabled button</a>
+<button class="btn btn-danger mr-2" type="button" aria-disabled="true">Disabled button</button>
+<a class="btn btn-danger" href="#url" role="button" aria-disabled="true">Disabled button</a>
 ```
 
 ```html live
-<button class="btn btn-outline mr-2" type="button" disabled>Disabled button</button>
-<a class="btn btn-outline disabled" href="#url" role="button">Disabled button</a>
+<button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled button</button>
+<a class="btn btn-outline" href="#url" role="button" aria-disabled="true">Disabled button</a>
 ```
 
 ## Block button

diff --git a/docs/content/components/flash-banner.md b/docs/content/components/flash-banner.md
diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md
@@ -145,7 +145,7 @@ Use the `Counter` in navigation to indicate the number of items without the user
 ```html live title="Counter in tabs"
 <div class="tabnav">
   <nav class="tabnav-tabs" aria-label="Foo bar">
-    <a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab <span class="Counter">23</a>
+    <a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
     <a href="#url" class="tabnav-tab">Bar tab</a>
   </nav>
 </div>

diff --git a/docs/content/components/loaders.md b/docs/content/components/loaders.md
@@ -22,5 +22,5 @@ It can also be used in combination with other components.
 <h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
 <span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
 <span class="Label bg-blue mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
-<button class="btn mt-3" disabled><span>Loading</span><span class="AnimatedEllipsis"></span></button>
+<button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button>
 ```