Add bold font to selected nav items

Author: qheaden-stack

docs/product/components/navigation.html

@@ -39,7 +39,7 @@
 {% highlight html %}
 <nav aria-label="…">
     <ul class="s-navigation">
-        <li><a href="…" class="s-navigation--item is-selected">…</a></li>
+        <li><a href="…" class="s-navigation--item is-selected" data-text="..."">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
@@ -51,7 +51,7 @@
             <p class="ff-mono mb8" id="horizontal-full-width-nav">Full width</p>
             <nav class="mb32" aria-label="horizontal full width navigation">
                 <ul class="s-navigation">
-                    <li><a href="#" class="s-navigation--item is-selected">Product</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Product">Product</a></li>
                     <li><a href="#" class="s-navigation--item">Email</a></li>
                     <li><a href="#" class="s-navigation--item">Content</a></li>
                     <li><a href="#" class="s-navigation--item">Brand</a></li>
@@ -62,7 +62,7 @@
             <p class="ff-mono mb8" id="horizontal-nav-wrapped">Wrapped</p>
             <nav class="wmx2" aria-labelledby="horizontal wrapped navigation">
                 <ul class="s-navigation">
-                    <li><a href="#" class="s-navigation--item is-selected">Product</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Product">Product</a></li>
                     <li><a href="#" class="s-navigation--item">Email</a></li>
                     <li><a href="#" class="s-navigation--item">Content</a></li>
                     <li><a href="#" class="s-navigation--item">Brand</a></li>
@@ -77,7 +77,7 @@
 {% highlight html %}
 <nav aria-label="…">
     <ul class="s-navigation s-navigation__muted">
-        <li><a href="…" class="s-navigation--item is-selected">…</a></li>
+        <li><a href="…" class="s-navigation--item is-selected" data-text="..."">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
@@ -89,7 +89,7 @@
             <p class="ff-mono mb8" id="muted-nav-full-width">Full width</p>
             <nav class="mb32" aria-label="muted full width navigation">
                 <ul class="s-navigation s-navigation__muted">
-                    <li><a href="#" class="s-navigation--item is-selected">Product</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Product">Product</a></li>
                     <li><a href="#" class="s-navigation--item">Email</a></li>
                     <li><a href="#" class="s-navigation--item">Content</a></li>
                     <li><a href="#" class="s-navigation--item">Brand</a></li>
@@ -100,7 +100,7 @@
             <p class="ff-mono mb8" id="muted-nav-wrapped">Wrapped</p>
             <nav class="wmx2" aria-label="muted wrapped navigation">
                 <ul class="s-navigation s-navigation__muted">
-                    <li><a href="#" class="s-navigation--item is-selected">Product</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Product">Product</a></li>
                     <li><a href="#" class="s-navigation--item">Email</a></li>
                     <li><a href="#" class="s-navigation--item">Content</a></li>
                     <li><a href="#" class="s-navigation--item">Brand</a></li>
@@ -115,7 +115,7 @@
 {% highlight html %}
 <nav aria-label="…">
     <ul class="s-navigation s-navigation__scroll">
-        <li><a href="…" class="s-navigation--item is-selected">…</a></li>
+        <li><a href="…" class="s-navigation--item is-selected" data-text="...">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
@@ -126,7 +126,7 @@
         <div class="stacks-preview--example">
             <nav class="wmx3" aria-label="scrolling navigation">
                 <ul class="s-navigation s-navigation__scroll">
-                    <li><a href="#" class="s-navigation--item is-selected">Product</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Product">Product</a></li>
                     <li><a href="#" class="s-navigation--item">Email</a></li>
                     <li><a href="#" class="s-navigation--item">Content</a></li>
                     <li><a href="#" class="s-navigation--item">Brand</a></li>
@@ -141,7 +141,7 @@
 {% highlight html %}
 <nav aria-label="…">
     <ul class="s-navigation s-navigation__scroll">
-        <li><a href="…" class="s-navigation--item is-selected">…</a></li>
+        <li><a href="…" class="s-navigation--item is-selected" data-text="...">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item s-navigation--item__dropdown">…</a></li>
     </ul>
@@ -150,7 +150,7 @@
         <div class="stacks-preview--example">
             <nav class="wmx3" aria-label="dropdown navigation">
                 <ul class="s-navigation s-navigation__scroll">
-                    <li><a href="#" class="s-navigation--item is-selected">Product</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Product">Product</a></li>
                     <li><a href="#" class="s-navigation--item">Email</a></li>
                     <li><a href="#" class="s-navigation--item s-navigation--item__dropdown">More</a></li>
                 </ul>
@@ -163,7 +163,7 @@
 {% highlight html %}
 <nav aria-label="…">
     <ul class="s-navigation s-navigation__sm">
-        <li><a href="…" class="s-navigation--item is-selected">…</a></li>
+        <li><a href="…" class="s-navigation--item is-selected" data-text="...">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
@@ -174,7 +174,7 @@
         <div class="stacks-preview--example">
             <nav aria-label="small navigation">
                 <ul class="s-navigation s-navigation__sm">
-                    <li><a href="#" class="s-navigation--item is-selected">Product</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Product">Product</a></li>
                     <li><a href="#" class="s-navigation--item">Email</a></li>
                     <li><a href="#" class="s-navigation--item">Content</a></li>
                     <li><a href="#" class="s-navigation--item">Brand</a></li>
@@ -194,7 +194,7 @@
 {% highlight html %}
 <nav aria-label="…">
     <ul class="s-navigation s-navigation__vertical">
-        <li><a href="…" class="s-navigation--item is-selected">…</a></li>
+        <li><a href="…" class="s-navigation--item is-selected" data-text="..."">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
@@ -205,7 +205,7 @@
         <div class="stacks-preview--example">
             <nav class="ws2" aria-label="vertical default navigation">
                 <ul class="s-navigation s-navigation__vertical">
-                    <li><a href="#" class="s-navigation--item is-selected">Product</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Product">Product</a></li>
                     <li><a href="#" class="s-navigation--item">Email</a></li>
                     <li><a href="#" class="s-navigation--item">Content</a></li>
                     <li><a href="#" class="s-navigation--item">Brand</a></li>
@@ -221,7 +221,7 @@
 <nav aria-label="…">
     <ul class="s-navigation s-navigation__vertical">
         <li class="s-navigation--title">…</li>
-        <li><a href="…" class="s-navigation--item is-selected">…</a></li>
+        <li><a href="…" class="s-navigation--item is-selected" data-text="...">…</a></li>
         <li><a href="…" class="s-navigation--item">…</a></li>
 
         <li class="s-navigation--title">…</li>
@@ -237,7 +237,7 @@
             <nav class="ws2" aria-label="titles navigation">
                 <ul class="s-navigation s-navigation__vertical">
                     <li class="s-navigation--title">Resources</li>
-                    <li><a href="#" class="s-navigation--item is-selected">Icons</a></li>
+                    <li><a href="#" class="s-navigation--item is-selected" data-text="Icons">Icons</a></li>
                     <li><a href="#" class="s-navigation--item">Spot illustrations</a></li>
 
                     <li class="s-navigation--title">Base</li>
@@ -259,7 +259,7 @@
 {% highlight html %}
 <nav aria-label="…">
     <div role="tablist" class="s-navigation">
-        <button type="button" class="s-navigation--item is-selected" role="tab" aria-selected="true">…</button>
+        <button type="button" class="s-navigation--item is-selected" data-text="..." role="tab" aria-selected="true">…</button>
         <button type="button" class="s-navigation--item" role="tab" aria-selected="false">…</button>
         <button type="button" class="s-navigation--item" role="tab" aria-selected="false">…</button>
     </div>
@@ -268,7 +268,7 @@
     <div class="stacks-preview--example">
         <nav aria-label="button navigation">
             <div role="tablist" class="s-navigation">
-                <button type="button" class="s-navigation--item is-selected" role="tab" aria-selected="true">Current revision</button>
+                <button type="button" class="s-navigation--item is-selected" data-text="Current revision" role="tab" aria-selected="true">Current revision</button>
                 <button type="button" class="s-navigation--item" role="tab" aria-selected="false">Side-by-side diff</button>
                 <button type="button" class="s-navigation--item" role="tab" aria-selected="false">Inline diff</button>
             </div>
@@ -413,7 +413,8 @@
                 id="tab-question"
                 aria-selected="true"
                 aria-controls="panel-question"
-                class="s-navigation--item is-selected">Task</button>
+                class="s-navigation--item is-selected"
+                data-text="Task">Task</button>
         <button type="button"
                 role="tab"
                 id="tab-answers"
@@ -436,7 +437,7 @@
 
             <nav class="mb8" aria-label="example tablist navigation">
                 <div class="s-navigation" role="tablist" data-controller="s-navigation-tablist">
-                    <button type="button" role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1" class="s-navigation--item is-selected">Task</button>
+                    <button type="button" role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1" class="s-navigation--item is-selected" data-text="Task">Task</button>
                     <button type="button" role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2" tabindex="-1" class="s-navigation--item">Answers</button>
                     <button type="button" role="tab" id="tab-3" aria-selected="false" aria-controls="panel-3" tabindex="-1" class="s-navigation--item">Duplicate A</button>
                     <button type="button" role="tab" id="tab-4" aria-selected="false" aria-controls="panel-4" tabindex="-1" class="s-navigation--item">Duplicate B</button>

lib/components/navigation/navigation.less

@@ -63,6 +63,20 @@
             --_na-item-fc-hover: var(--_na-item-fc);
             --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
 
+            display: inline-flex;
+            flex-direction: column;
+            font-weight: bold;
+
+            &:before {
+                content: attr(data-text);
+                content: attr(data-text) / "";
+                font-weight: bold;
+                height: 0;
+                pointer-events: none;
+                user-select: none;
+                visibility: hidden;
+            }
+
             .highcontrast-mode({
                 text-decoration: none;
             });