@aurodesignsystem-dev/auro-nav 0.0.0-pr133.0 → 0.0.0-pr135.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/demo/api.md +106 -98
  2. package/demo/api.min.js +1 -912
  3. package/demo/auro-nav.min.js +914 -0
  4. package/demo/index.md +80 -76
  5. package/demo/index.min.js +1 -912
  6. package/package.json +1 -1
  7. package/demo/readme.md +0 -134
package/demo/api.md CHANGED
@@ -84,29 +84,31 @@ the current page the user is on. It should reflect a disabled hyperlink and the
84
84
  **Mobile Behavior**: On mobile viewports (576px and under), `auro-nav` will collapse to show only the previous page `auro-breadcrumb` with a back arrow.
85
85
 
86
86
  <div class="exampleWrapper">
87
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/breadcrumb.html) -->
88
- <!-- The below content is automatically added from ./../apiExamples/breadcrumb.html -->
89
- <auro-nav>
90
- <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</auro-breadcrumb>
91
- <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</auro-breadcrumb>
92
- <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</auro-breadcrumb>
93
- <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</auro-breadcrumb>
94
- <auro-breadcrumb>Current</auro-breadcrumb>
95
- </auro-nav>
96
- <!-- AURO-GENERATED-CONTENT:END -->
87
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/breadcrumb.html) -->
88
+ <!-- The below content is automatically added from ./../apiExamples/breadcrumb.html -->
89
+ <auro-nav>
90
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</auro-breadcrumb>
91
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</auro-breadcrumb>
92
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</auro-breadcrumb>
93
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</auro-breadcrumb>
94
+ <auro-breadcrumb>Current</auro-breadcrumb>
95
+ </auro-nav>
96
+ <!-- AURO-GENERATED-CONTENT:END -->
97
97
  </div>
98
98
  <auro-accordion alignRight>
99
- <span slot="trigger">See code</span>
99
+ <span slot="trigger">See code</span>
100
100
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/breadcrumb.html) -->
101
101
  <!-- The below code snippet is automatically added from ./../apiExamples/breadcrumb.html -->
102
102
 
103
- <pre class="language-html"><code class="language-html">&lt;auro-nav&gt;
104
- &lt;auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav"&gt;Home&lt;/auro-breadcrumb&gt;
105
- &lt;auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav"&gt;Level 2&lt;/auro-breadcrumb&gt;
106
- &lt;auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav"&gt;Level 3&lt;/auro-breadcrumb&gt;
107
- &lt;auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav"&gt;Level 4&lt;/auro-breadcrumb&gt;
108
- &lt;auro-breadcrumb&gt;Current&lt;/auro-breadcrumb&gt;
109
- &lt;/auro-nav&gt;</code></pre>
103
+ ```html
104
+ <auro-nav>
105
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</auro-breadcrumb>
106
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</auro-breadcrumb>
107
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</auro-breadcrumb>
108
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</auro-breadcrumb>
109
+ <auro-breadcrumb>Current</auro-breadcrumb>
110
+ </auro-nav>
111
+ ```
110
112
  <!-- AURO-GENERATED-CONTENT:END -->
111
113
  </auro-accordion>
112
114
 
@@ -115,9 +117,9 @@ the current page the user is on. It should reflect a disabled hyperlink and the
115
117
  This example shows a user how set up an `auro-nav` component using `auro-anchorlinks` to efficiently jump to different points in the content.
116
118
 
117
119
  <div class="exampleWrapper">
118
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/anchornav.html) -->
119
- <!-- The below content is automatically added from ./../apiExamples/anchornav.html -->
120
- <style>
120
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/anchornav.html) -->
121
+ <!-- The below content is automatically added from ./../apiExamples/anchornav.html -->
122
+ <style>
121
123
  .anchorNavWithContentContainer {
122
124
  display: flex;
123
125
  flex-direction: row;
@@ -141,56 +143,57 @@ This example shows a user how set up an `auro-nav` component using `auro-anchorl
141
143
  .contentWrapper {
142
144
  margin-right: 100px;
143
145
  }
144
- </style>
145
- <div class="anchorNavWithContentContainer">
146
- <div class="contentWrapper">
146
+ </style>
147
+ <div class="anchorNavWithContentContainer">
148
+ <div class="contentWrapper">
147
149
  This is example content. Scrolling the content inside this box will automatically make selections in the menu on the right.
148
- <div class="anchorNavContentContainer">
149
- <h2 id="sectionOne">Section 1</h2>
150
+ <div class="anchorNavContentContainer">
151
+ <h2 id="sectionOne">Section 1</h2>
150
152
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id nibh tortor id aliquet lectus. Consequat interdum varius sit amet mattis vulputate. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Eget nunc lobortis mattis aliquam faucibus purus in. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Pellentesque sit amet porttitor eget dolor morbi non arcu. Turpis egestas maecenas pharetra convallis posuere morbi leo. Sagittis nisl rhoncus mattis rhoncus urna. Ut tellus elementum sagittis vitae. Viverra adipiscing at in tellus integer feugiat scelerisque.
151
- <h2 id="sectionTwo">Section 2</h2>
153
+ <h2 id="sectionTwo">Section 2</h2>
152
154
  Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed euismod nisi porta lorem mollis aliquam ut. Ac turpis egestas sed tempus urna et. Lectus urna duis convallis convallis tellus. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Dictum sit amet justo donec enim diam. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sociis natoque penatibus et magnis dis. Aliquam purus sit amet luctus venenatis. Sed elementum tempus egestas sed sed risus pretium quam.
153
- <h3 id="sectionTwoOne">Section 2.1</h3>
155
+ <h3 id="sectionTwoOne">Section 2.1</h3>
154
156
  Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin ac orci phasellus egestas tellus. Dictum sit amet justo donec enim. Quam quisque id diam vel quam elementum pulvinar. In mollis nunc sed id semper risus in. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id.
155
- <h2 id="sectionThree">Section 3</h2>
157
+ <h2 id="sectionThree">Section 3</h2>
156
158
  Scelerisque viverra mauris in aliquam sem. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Augue interdum velit euismod in pellentesque massa. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Adipiscing elit ut aliquam purus. Non sodales neque sodales ut etiam. Amet commodo nulla facilisi nullam vehicula ipsum a. Nunc sed blandit libero volutpat sed cras. Vestibulum sed arcu non odio euismod lacinia at quis. Sagittis eu volutpat odio facilisis. Ipsum suspendisse ultrices gravida dictum fusce ut. Ut sem nulla pharetra diam sit amet nisl. Nec tincidunt praesent semper feugiat nibh. Urna neque viverra justo nec ultrices dui.
157
- <h2 id="sectionFour">Section 4</h2>
159
+ <h2 id="sectionFour">Section 4</h2>
158
160
  Massa sapien faucibus et molestie ac feugiat. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Ultrices mi tempus imperdiet nulla malesuada pellentesque. A diam sollicitudin tempor id eu nisl nunc. Morbi non arcu risus quis varius. Aliquam eleifend mi in nulla. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sit amet facilisis magna etiam tempor orci eu lobortis. Tellus cras adipiscing enim eu turpis egestas. Odio euismod lacinia at quis risus. Posuere lorem ipsum dolor sit amet. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. At volutpat diam ut venenatis tellus in metus vulputate. Vivamus at augue eget arcu dictum varius duis at. Dictum sit amet justo donec enim diam vulputate ut. Euismod in pellentesque massa placerat duis ultricies lacus sed. Vitae nunc sed velit dignissim sodales ut eu sem integer.
159
- <h2 id="sectionFive">Section 5</h2>
161
+ <h2 id="sectionFive">Section 5</h2>
160
162
  Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin ac orci phasellus egestas tellus. Dictum sit amet justo donec enim. Quam quisque id diam vel quam elementum pulvinar. In mollis nunc sed id semper risus in. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id.
161
- </div>
162
- </div>
163
- <auro-nav anchorNavContent=".anchorNavContentContainer">
164
- <span slot="label">Anchor Navigation</span>
165
- <span slot="mobileToggleCollapsed">View More</span>
166
- <span slot="mobileToggleExpanded">View Less</span>
167
- <auro-anchorlink href="#sectionOne" fluid="false" small>Section 1</auro-anchorlink>
168
- <auro-anchorlink href="#sectionTwo" fluid="false" small>Section 2</auro-anchorlink>
169
- <auro-anchorlink href="#sectionTwoOne" fluid="false" small>Section 2.1</auro-anchorlink>
170
- <auro-anchorlink href="#sectionThree" fluid="false" small>Section 3</auro-anchorlink>
171
- <auro-anchorlink href="#sectionFour" fluid="false" small>Section 4 <em>- with really long text - Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor.</em></auro-anchorlink>
172
- <auro-anchorlink href="#sectionFive" fluid="false" small>Section 5</auro-anchorlink>
173
- </auro-nav>
174
- </div>
175
- <!-- AURO-GENERATED-CONTENT:END -->
163
+ </div>
164
+ </div>
165
+ <auro-nav anchorNavContent=".anchorNavContentContainer">
166
+ <span slot="label">Anchor Navigation</span>
167
+ <span slot="mobileToggleCollapsed">View More</span>
168
+ <span slot="mobileToggleExpanded">View Less</span>
169
+ <auro-anchorlink href="#sectionOne" fluid="false" small>Section 1</auro-anchorlink>
170
+ <auro-anchorlink href="#sectionTwo" fluid="false" small>Section 2</auro-anchorlink>
171
+ <auro-anchorlink href="#sectionTwoOne" fluid="false" small>Section 2.1</auro-anchorlink>
172
+ <auro-anchorlink href="#sectionThree" fluid="false" small>Section 3</auro-anchorlink>
173
+ <auro-anchorlink href="#sectionFour" fluid="false" small>Section 4 <em>- with really long text - Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor.</em></auro-anchorlink>
174
+ <auro-anchorlink href="#sectionFive" fluid="false" small>Section 5</auro-anchorlink>
175
+ </auro-nav>
176
+ </div>
177
+ <!-- AURO-GENERATED-CONTENT:END -->
176
178
  </div>
177
179
  <auro-accordion alignRight>
178
- <span slot="trigger">See code</span>
180
+ <span slot="trigger">See code</span>
179
181
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/anchornav.html) -->
180
182
  <!-- The below code snippet is automatically added from ./../apiExamples/anchornav.html -->
181
183
 
182
- <pre class="language-html"><code class="language-html">&lt;style&gt;
184
+ ```html
185
+ <style>
183
186
  .anchorNavWithContentContainer {
184
187
  display: flex;
185
188
  flex-direction: row;
186
- ​
189
+
187
190
  }
188
- ​
191
+
189
192
  .contentWrapper,
190
193
  auro-nav {
191
194
  flex: 1;
192
195
  }
193
- ​
196
+
194
197
  .anchorNavContentContainer {
195
198
  max-height: 200px;
196
199
  overflow-y: auto;
@@ -199,41 +202,42 @@ This example shows a user how set up an `auro-nav` component using `auro-anchorl
199
202
  position: relative;
200
203
  padding: 10px;
201
204
  }
202
- ​
205
+
203
206
  .contentWrapper {
204
207
  margin-right: 100px;
205
208
  }
206
- &lt;/style&gt;
207
- &lt;div class="anchorNavWithContentContainer"&gt;
208
- &lt;div class="contentWrapper"&gt;
209
+ </style>
210
+ <div class="anchorNavWithContentContainer">
211
+ <div class="contentWrapper">
209
212
  This is example content. Scrolling the content inside this box will automatically make selections in the menu on the right.
210
- &lt;div class="anchorNavContentContainer"&gt;
211
- &lt;h2 id="sectionOne"&gt;Section 1&lt;/h2&gt;
213
+ <div class="anchorNavContentContainer">
214
+ <h2 id="sectionOne">Section 1</h2>
212
215
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id nibh tortor id aliquet lectus. Consequat interdum varius sit amet mattis vulputate. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Eget nunc lobortis mattis aliquam faucibus purus in. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Pellentesque sit amet porttitor eget dolor morbi non arcu. Turpis egestas maecenas pharetra convallis posuere morbi leo. Sagittis nisl rhoncus mattis rhoncus urna. Ut tellus elementum sagittis vitae. Viverra adipiscing at in tellus integer feugiat scelerisque.
213
- &lt;h2 id="sectionTwo"&gt;Section 2&lt;/h2&gt;
216
+ <h2 id="sectionTwo">Section 2</h2>
214
217
  Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed euismod nisi porta lorem mollis aliquam ut. Ac turpis egestas sed tempus urna et. Lectus urna duis convallis convallis tellus. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Dictum sit amet justo donec enim diam. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sociis natoque penatibus et magnis dis. Aliquam purus sit amet luctus venenatis. Sed elementum tempus egestas sed sed risus pretium quam.
215
- &lt;h3 id="sectionTwoOne"&gt;Section 2.1&lt;/h3&gt;
218
+ <h3 id="sectionTwoOne">Section 2.1</h3>
216
219
  Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin ac orci phasellus egestas tellus. Dictum sit amet justo donec enim. Quam quisque id diam vel quam elementum pulvinar. In mollis nunc sed id semper risus in. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id.
217
- &lt;h2 id="sectionThree"&gt;Section 3&lt;/h2&gt;
220
+ <h2 id="sectionThree">Section 3</h2>
218
221
  Scelerisque viverra mauris in aliquam sem. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Augue interdum velit euismod in pellentesque massa. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Adipiscing elit ut aliquam purus. Non sodales neque sodales ut etiam. Amet commodo nulla facilisi nullam vehicula ipsum a. Nunc sed blandit libero volutpat sed cras. Vestibulum sed arcu non odio euismod lacinia at quis. Sagittis eu volutpat odio facilisis. Ipsum suspendisse ultrices gravida dictum fusce ut. Ut sem nulla pharetra diam sit amet nisl. Nec tincidunt praesent semper feugiat nibh. Urna neque viverra justo nec ultrices dui.
219
- &lt;h2 id="sectionFour"&gt;Section 4&lt;/h2&gt;
222
+ <h2 id="sectionFour">Section 4</h2>
220
223
  Massa sapien faucibus et molestie ac feugiat. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Ultrices mi tempus imperdiet nulla malesuada pellentesque. A diam sollicitudin tempor id eu nisl nunc. Morbi non arcu risus quis varius. Aliquam eleifend mi in nulla. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sit amet facilisis magna etiam tempor orci eu lobortis. Tellus cras adipiscing enim eu turpis egestas. Odio euismod lacinia at quis risus. Posuere lorem ipsum dolor sit amet. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. At volutpat diam ut venenatis tellus in metus vulputate. Vivamus at augue eget arcu dictum varius duis at. Dictum sit amet justo donec enim diam vulputate ut. Euismod in pellentesque massa placerat duis ultricies lacus sed. Vitae nunc sed velit dignissim sodales ut eu sem integer.
221
- &lt;h2 id="sectionFive"&gt;Section 5&lt;/h2&gt;
224
+ <h2 id="sectionFive">Section 5</h2>
222
225
  Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin ac orci phasellus egestas tellus. Dictum sit amet justo donec enim. Quam quisque id diam vel quam elementum pulvinar. In mollis nunc sed id semper risus in. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id.
223
- &lt;/div&gt;
224
- &lt;/div&gt;
225
- &lt;auro-nav anchorNavContent=".anchorNavContentContainer"&gt;
226
- &lt;span slot="label"&gt;Anchor Navigation&lt;/span&gt;
227
- &lt;span slot="mobileToggleCollapsed"&gt;View More&lt;/span&gt;
228
- &lt;span slot="mobileToggleExpanded"&gt;View Less&lt;/span&gt;
229
- &lt;auro-anchorlink href="#sectionOne" fluid="false" small&gt;Section 1&lt;/auro-anchorlink&gt;
230
- &lt;auro-anchorlink href="#sectionTwo" fluid="false" small&gt;Section 2&lt;/auro-anchorlink&gt;
231
- &lt;auro-anchorlink href="#sectionTwoOne" fluid="false" small&gt;Section 2.1&lt;/auro-anchorlink&gt;
232
- &lt;auro-anchorlink href="#sectionThree" fluid="false" small&gt;Section 3&lt;/auro-anchorlink&gt;
233
- &lt;auro-anchorlink href="#sectionFour" fluid="false" small&gt;Section 4 &lt;em&gt;- with really long text - Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor.&lt;/em&gt;&lt;/auro-anchorlink&gt;
234
- &lt;auro-anchorlink href="#sectionFive" fluid="false" small&gt;Section 5&lt;/auro-anchorlink&gt;
235
- &lt;/auro-nav&gt;
236
- &lt;/div&gt;</code></pre>
226
+ </div>
227
+ </div>
228
+ <auro-nav anchorNavContent=".anchorNavContentContainer">
229
+ <span slot="label">Anchor Navigation</span>
230
+ <span slot="mobileToggleCollapsed">View More</span>
231
+ <span slot="mobileToggleExpanded">View Less</span>
232
+ <auro-anchorlink href="#sectionOne" fluid="false" small>Section 1</auro-anchorlink>
233
+ <auro-anchorlink href="#sectionTwo" fluid="false" small>Section 2</auro-anchorlink>
234
+ <auro-anchorlink href="#sectionTwoOne" fluid="false" small>Section 2.1</auro-anchorlink>
235
+ <auro-anchorlink href="#sectionThree" fluid="false" small>Section 3</auro-anchorlink>
236
+ <auro-anchorlink href="#sectionFour" fluid="false" small>Section 4 <em>- with really long text - Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor.</em></auro-anchorlink>
237
+ <auro-anchorlink href="#sectionFive" fluid="false" small>Section 5</auro-anchorlink>
238
+ </auro-nav>
239
+ </div>
240
+ ```
237
241
  <!-- AURO-GENERATED-CONTENT:END -->
238
242
  </auro-accordion>
239
243
 
@@ -244,29 +248,31 @@ This example shows a user how set up an `auro-nav` component using `auro-anchorl
244
248
  Use the `noHomeIcon` attribute to remove the home icon from the `auro-nav` component with `auro-breadcrumbs`.
245
249
 
246
250
  <div class="exampleWrapper">
247
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-home-icon.html) -->
248
- <!-- The below content is automatically added from ./../apiExamples/no-home-icon.html -->
249
- <auro-nav noHomeIcon>
250
- <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</auro-breadcrumb>
251
- <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</auro-breadcrumb>
252
- <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</auro-breadcrumb>
253
- <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</auro-breadcrumb>
254
- <auro-breadcrumb>Current</auro-breadcrumb>
255
- </auro-nav>
256
- <!-- AURO-GENERATED-CONTENT:END -->
251
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-home-icon.html) -->
252
+ <!-- The below content is automatically added from ./../apiExamples/no-home-icon.html -->
253
+ <auro-nav noHomeIcon>
254
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</auro-breadcrumb>
255
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</auro-breadcrumb>
256
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</auro-breadcrumb>
257
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</auro-breadcrumb>
258
+ <auro-breadcrumb>Current</auro-breadcrumb>
259
+ </auro-nav>
260
+ <!-- AURO-GENERATED-CONTENT:END -->
257
261
  </div>
258
262
  <auro-accordion alignRight>
259
- <span slot="trigger">See code</span>
263
+ <span slot="trigger">See code</span>
260
264
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-home-icon.html) -->
261
265
  <!-- The below code snippet is automatically added from ./../apiExamples/no-home-icon.html -->
262
266
 
263
- <pre class="language-html"><code class="language-html">&lt;auro-nav noHomeIcon&gt;
264
- &lt;auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav"&gt;Home&lt;/auro-breadcrumb&gt;
265
- &lt;auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav"&gt;Level 2&lt;/auro-breadcrumb&gt;
266
- &lt;auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav"&gt;Level 3&lt;/auro-breadcrumb&gt;
267
- &lt;auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav"&gt;Level 4&lt;/auro-breadcrumb&gt;
268
- &lt;auro-breadcrumb&gt;Current&lt;/auro-breadcrumb&gt;
269
- &lt;/auro-nav&gt;</code></pre>
267
+ ```html
268
+ <auro-nav noHomeIcon>
269
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</auro-breadcrumb>
270
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</auro-breadcrumb>
271
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</auro-breadcrumb>
272
+ <auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</auro-breadcrumb>
273
+ <auro-breadcrumb>Current</auro-breadcrumb>
274
+ </auro-nav>
275
+ ```
270
276
  <!-- AURO-GENERATED-CONTENT:END -->
271
277
  </auro-accordion>
272
278
 
@@ -277,11 +283,12 @@ The component may be restyled by changing the values of the following token(s).
277
283
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
278
284
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
279
285
 
280
- <pre class="language-scss"><code class="language-scss">/* stylelint-disable */
281
- ​
286
+ ```scss
287
+ /* stylelint-disable */
288
+
282
289
  @use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
283
290
  @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
284
- ​
291
+
285
292
  :host {
286
293
  --ds-auro-anchornav-label-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
287
294
  --ds-auro-anchornav-mobile-background-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.0001) 0%, rgba(255, 255, 255, 0.00874633) 6.67%, rgba(255, 255, 255, 0.0356065) 13.33%, rgba(255, 255, 255, 0.0817517) 20%, rgba(255, 255, 255, 0.147497) 26.67%, rgba(255, 255, 255, 0.231852) 33.33%, rgba(255, 255, 255, 0.331951) 40%, rgba(255, 255, 255, 0.442747) 46.67%, rgba(255, 255, 255, 0.557353) 53.33%, rgba(255, 255, 255, 0.668149) 60%, rgba(255, 255, 255, 0.768248) 66.67%, rgba(255, 255, 255, 0.852603) 73.33%, rgba(255, 255, 255, 0.918348) 80%, rgba(255, 255, 255, 0.964494) 86.67%, rgba(255, 255, 255, 0.991354) 93.33%, #FFFFFF 100%);
@@ -293,5 +300,6 @@ The component may be restyled by changing the values of the following token(s).
293
300
  --ds-auro-breadcrumb-chevron-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
294
301
  --ds-auro-breadcrumb-icon-color: var(--ds-advanced-color-hyperlink-text, #{v.$ds-advanced-color-hyperlink-text});
295
302
  --ds-auro-breadcrumb-last-link-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
296
- }</code></pre>
303
+ }
304
+ ```
297
305
  <!-- AURO-GENERATED-CONTENT:END -->