@aurodesignsystem-dev/auro-drawer 0.0.0-pr131.1 → 0.0.0-pr131.10

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 (16) hide show
  1. package/README.md +70 -82
  2. package/demo/api.html +1 -0
  3. package/demo/api.js +2 -2
  4. package/demo/api.md +1004 -982
  5. package/demo/api.min.js +4131 -33
  6. package/demo/index.html +1 -0
  7. package/demo/index.md +54 -58
  8. package/demo/index.min.js +4095 -1
  9. package/demo/keyboard-audit.html +1 -1
  10. package/demo/readme.md +175 -0
  11. package/dist/{auro-drawer-DO1aEUoF.js → auro-drawer-B8D4pC9e.js} +39 -38
  12. package/dist/index.d.ts +24 -2
  13. package/dist/index.js +1 -1
  14. package/dist/registered.js +1 -1
  15. package/package.json +7 -7
  16. package/demo/auro-drawer.min.js +0 -3585
package/demo/api.md CHANGED
@@ -20,9 +20,11 @@ The `auro-drawer` element provides users a way to implement an expandable drawer
20
20
 
21
21
  ### Methods
22
22
 
23
- | Name | Parameters | Return | Description |
24
- | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
25
- | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
23
+ | Name | Parameters | Return | Description |
24
+ | -------- | -------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
25
+ | hide | `eventType` (any) | | Closes the native dialog. |
26
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
27
+ | show | None | | Opens the native dialog inside the bib.<br><br>- `modal && !nested`: `showModal()` for native focus containment and top-layer rendering.<br>- `nested` or `!modal`: `showPopover()` to keep positional CSS intact<br> and allow free keyboard flow to background content (WCAG 2.1.2). |
26
28
 
27
29
  ### Events
28
30
 
@@ -42,70 +44,77 @@ The `auro-drawer` element provides users a way to implement an expandable drawer
42
44
 
43
45
  ### CSS Shadow Parts
44
46
 
45
- | Name | Description |
46
- | --------------- | ----------------------------------------------------- |
47
- | close-button | to style the close button. |
48
- | drawer-backdrop | to style the backdrop behind the the content wrapper. |
49
- | drawer-content | to style the container of the drawer content. |
50
- | drawer-footer | to style the footer. |
51
- | drawer-header | to style the header. |
52
- | drawer-wrapper | to style the content wrapper. |
47
+ | Name | Description |
48
+ | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
49
+ | close-button | to style the close button. |
50
+ | drawer-backdrop | DEPRECATED - To migrate to the token approach, set `display: none` on this part and use the `--auro-drawer-backdrop-*` CSS custom properties instead. |
51
+ | drawer-content | to style the container of the drawer content. |
52
+ | drawer-footer | to style the footer. |
53
+ | drawer-header | to style the header. |
54
+ | drawer-wrapper | to style the content wrapper. |
55
+
56
+ ### CSS Custom Properties
57
+
58
+ | Name | Description |
59
+ | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
60
+ | --auro-drawer-backdrop-background | Background of the `::backdrop` pseudo-element. In modal/backdrop mode the component sets this to the design-system scrim token; consumers can override it. |
61
+ | --auro-drawer-backdrop-filter | `backdrop-filter` applied to the `::backdrop` pseudo-element (e.g. `blur(4px)`). |
62
+ | --auro-drawer-backdrop-opacity | Opacity of the `::backdrop` pseudo-element. |
63
+ | --auro-drawer-backdrop-transition | Transition applied to the `::backdrop` pseudo-element (e.g. `opacity 0.3s ease`). |
53
64
  <!-- AURO-GENERATED-CONTENT:END -->
54
65
 
55
66
  ## Basic
56
67
 
57
68
  <div class="exampleWrapper">
58
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
59
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
60
- <div>
61
- <auro-button id="openBasic">Open default drawer</auro-button>
62
- </div>
63
- <auro-drawer id="defaultDrawer">
64
- <span slot="header">Default Drawer</span>
65
- <div slot="content">
66
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
67
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
68
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
69
- <ul>
70
- <li>Caerphilly croque monsieur fondue</li>
71
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
72
- <li>Cheddar cheese and biscuits chalk and cheese</li>
73
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
74
- </ul>
75
- </div>
76
- <div slot="footer">
77
- <auro-button secondary id="closeBasic">Close</auro-button>
78
- </div>
79
- </auro-drawer>
80
- <!-- AURO-GENERATED-CONTENT:END -->
69
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
70
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
71
+ <div>
72
+ <auro-button id="openBasic">Open default drawer</auro-button>
73
+ </div>
74
+ <auro-drawer id="defaultDrawer">
75
+ <span slot="header">Default Drawer</span>
76
+ <div slot="content">
77
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
78
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
79
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
80
+ <ul>
81
+ <li>Caerphilly croque monsieur fondue</li>
82
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
83
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
84
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
85
+ </ul>
86
+ </div>
87
+ <div slot="footer">
88
+ <auro-button secondary id="closeBasic">Close</auro-button>
89
+ </div>
90
+ </auro-drawer>
91
+ <!-- AURO-GENERATED-CONTENT:END -->
81
92
  </div>
82
93
  <auro-accordion alignRight>
83
- <span slot="trigger">See code</span>
94
+ <span slot="trigger">See code</span>
84
95
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
85
96
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
86
97
 
87
- ```html
88
- <div>
89
- <auro-button id="openBasic">Open default drawer</auro-button>
90
- </div>
91
- <auro-drawer id="defaultDrawer">
92
- <span slot="header">Default Drawer</span>
93
- <div slot="content">
94
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
95
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
96
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
97
- <ul>
98
- <li>Caerphilly croque monsieur fondue</li>
99
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
100
- <li>Cheddar cheese and biscuits chalk and cheese</li>
101
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
102
- </ul>
103
- </div>
104
- <div slot="footer">
105
- <auro-button secondary id="closeBasic">Close</auro-button>
106
- </div>
107
- </auro-drawer>
108
- ```
98
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
99
+ &lt;auro-button id="openBasic"&gt;Open default drawer&lt;/auro-button&gt;
100
+ &lt;/div&gt;
101
+ &lt;auro-drawer id="defaultDrawer"&gt;
102
+ &lt;span slot="header"&gt;Default Drawer&lt;/span&gt;
103
+ &lt;div slot="content"&gt;
104
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
105
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
106
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
107
+ &lt;ul&gt;
108
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
109
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
110
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
111
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
112
+ &lt;/ul&gt;
113
+ &lt;/div&gt;
114
+ &lt;div slot="footer"&gt;
115
+ &lt;auro-button secondary id="closeBasic"&gt;Close&lt;/auro-button&gt;
116
+ &lt;/div&gt;
117
+ &lt;/auro-drawer&gt;</code></pre>
109
118
  <!-- AURO-GENERATED-CONTENT:END -->
110
119
  </auro-accordion>
111
120
 
@@ -117,171 +126,169 @@ If the drawer is customized to have a dark background, the close button may not
117
126
  You can change the button's appearance by using `closeButtonAppearance` property (`close-button-appearance` attribute).
118
127
 
119
128
  <div class="exampleWrapper">
120
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/close-button-appearance.html) -->
121
- <!-- The below content is automatically added from ./../apiExamples/close-button-appearance.html -->
122
- <style>
129
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/close-button-appearance.html) -->
130
+ <!-- The below content is automatically added from ./../apiExamples/close-button-appearance.html -->
131
+ <style>
123
132
  #inverseCloseButtonAppearance ::part(drawer-wrapper) {
124
133
  background: black;
125
134
  --ds-auro-drawer-text-color: white;
126
135
  width: 50%;
127
136
  }
128
- </style>
129
- <div>
130
- <auro-button id="openInverseCloseButtonAppearance">Open inverse CloseButtonAppearance drawer</auro-button>
131
- </div>
132
- <auro-drawer id="inverseCloseButtonAppearance" close-button-appearance="inverse">
133
- <span slot="header">Default Drawer</span>
134
- <div slot="content">
135
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
136
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
137
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
138
- <ul>
139
- <li>Caerphilly croque monsieur fondue</li>
140
- <auro-radio-group appearance="inverse">
141
- <span slot="legend">Accordion Test</span>
142
- <auro-radio
137
+ </style>
138
+ <div>
139
+ <auro-button id="openInverseCloseButtonAppearance">Open inverse CloseButtonAppearance drawer</auro-button>
140
+ </div>
141
+ <auro-drawer id="inverseCloseButtonAppearance" close-button-appearance="inverse">
142
+ <span slot="header">Default Drawer</span>
143
+ <div slot="content">
144
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
145
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
146
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
147
+ <ul>
148
+ <li>Caerphilly croque monsieur fondue</li>
149
+ <auro-radio-group appearance="inverse">
150
+ <span slot="legend">Accordion Test</span>
151
+ <auro-radio
143
152
  id="basicGroupRadio1"
144
153
  label="Credit or debit card"
145
154
  name="creditordebit"
146
155
  value="credit"
147
156
  ></auro-radio>
148
- <auro-radio
157
+ <auro-radio
149
158
  id="basicGroupRadio2"
150
159
  label="Apple Pay"
151
160
  name="applePay"
152
161
  value="applePay"
153
162
  ></auro-radio>
154
- <auro-radio
163
+ <auro-radio
155
164
  id="basicGroupRadio3"
156
165
  label="Alaska Airlines Commercial Account"
157
166
  name="alaskaCommercial"
158
167
  value="alaskaCommercial"
159
168
  ></auro-radio>
160
- </auro-radio-group>
161
- <auro-input placeholder="John Doe" bordered required appearance="inverse">
162
- <span slot="label">Full name</span>
163
- <span slot="helptext">Please enter your full name.</span>
164
- </auro-input>
165
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
166
- <li>Cheddar cheese and biscuits chalk and cheese</li>
167
- <auro-checkbox-group appearance="inverse">
168
- <span slot="legend">Form label goes here</span>
169
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1"
169
+ </auro-radio-group>
170
+ <auro-input placeholder="John Doe" bordered required appearance="inverse">
171
+ <span slot="label">Full name</span>
172
+ <span slot="helptext">Please enter your full name.</span>
173
+ </auro-input>
174
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
175
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
176
+ <auro-checkbox-group appearance="inverse">
177
+ <span slot="legend">Form label goes here</span>
178
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1"
170
179
  >Checkbox option</auro-checkbox
171
180
  >
172
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
181
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
173
182
  >Checkbox option</auro-checkbox
174
183
  >
175
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3"
184
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3"
176
185
  >Checkbox option</auro-checkbox
177
186
  >
178
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4"
187
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4"
179
188
  >Checkbox option</auro-checkbox
180
189
  >
181
- </auro-checkbox-group>
182
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
183
- </ul>
184
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
185
- <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
186
- <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
187
- <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
188
- <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
189
- <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
190
- <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
191
- <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
192
- <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
193
- <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
194
- </div>
195
- <div slot="footer">
196
- <auro-button secondary id="closeInverseCloseButtonAppearance" appearance="inverse">Close</auro-button>
197
- </div>
198
- </auro-drawer>
199
- <!-- AURO-GENERATED-CONTENT:END -->
190
+ </auro-checkbox-group>
191
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
192
+ </ul>
193
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
194
+ <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
195
+ <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
196
+ <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
197
+ <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
198
+ <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
199
+ <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
200
+ <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
201
+ <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
202
+ <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
203
+ </div>
204
+ <div slot="footer">
205
+ <auro-button secondary id="closeInverseCloseButtonAppearance" appearance="inverse">Close</auro-button>
206
+ </div>
207
+ </auro-drawer>
208
+ <!-- AURO-GENERATED-CONTENT:END -->
200
209
  </div>
201
210
  <auro-accordion alignRight>
202
- <span slot="trigger">See code</span>
211
+ <span slot="trigger">See code</span>
203
212
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/close-button-appearance.html) -->
204
213
  <!-- The below code snippet is automatically added from ./../apiExamples/close-button-appearance.html -->
205
214
 
206
- ```html
207
- <style>
215
+ <pre class="language-html"><code class="language-html">&lt;style&gt;
208
216
  #inverseCloseButtonAppearance ::part(drawer-wrapper) {
209
217
  background: black;
210
218
  --ds-auro-drawer-text-color: white;
211
219
  width: 50%;
212
220
  }
213
- </style>
214
- <div>
215
- <auro-button id="openInverseCloseButtonAppearance">Open inverse CloseButtonAppearance drawer</auro-button>
216
- </div>
217
- <auro-drawer id="inverseCloseButtonAppearance" close-button-appearance="inverse">
218
- <span slot="header">Default Drawer</span>
219
- <div slot="content">
220
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
221
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
222
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
223
- <ul>
224
- <li>Caerphilly croque monsieur fondue</li>
225
- <auro-radio-group appearance="inverse">
226
- <span slot="legend">Accordion Test</span>
227
- <auro-radio
221
+ &lt;/style&gt;
222
+ &lt;div&gt;
223
+ &lt;auro-button id="openInverseCloseButtonAppearance"&gt;Open inverse CloseButtonAppearance drawer&lt;/auro-button&gt;
224
+ &lt;/div&gt;
225
+ &lt;auro-drawer id="inverseCloseButtonAppearance" close-button-appearance="inverse"&gt;
226
+ &lt;span slot="header"&gt;Default Drawer&lt;/span&gt;
227
+ &lt;div slot="content"&gt;
228
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
229
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
230
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
231
+ &lt;ul&gt;
232
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
233
+ &lt;auro-radio-group appearance="inverse"&gt;
234
+ &lt;span slot="legend"&gt;Accordion Test&lt;/span&gt;
235
+ &lt;auro-radio
228
236
  id="basicGroupRadio1"
229
237
  label="Credit or debit card"
230
238
  name="creditordebit"
231
239
  value="credit"
232
- ></auro-radio>
233
- <auro-radio
240
+ &gt;&lt;/auro-radio&gt;
241
+ &lt;auro-radio
234
242
  id="basicGroupRadio2"
235
243
  label="Apple Pay"
236
244
  name="applePay"
237
245
  value="applePay"
238
- ></auro-radio>
239
- <auro-radio
246
+ &gt;&lt;/auro-radio&gt;
247
+ &lt;auro-radio
240
248
  id="basicGroupRadio3"
241
249
  label="Alaska Airlines Commercial Account"
242
250
  name="alaskaCommercial"
243
251
  value="alaskaCommercial"
244
- ></auro-radio>
245
- </auro-radio-group>
246
- <auro-input placeholder="John Doe" bordered required appearance="inverse">
247
- <span slot="label">Full name</span>
248
- <span slot="helptext">Please enter your full name.</span>
249
- </auro-input>
250
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
251
- <li>Cheddar cheese and biscuits chalk and cheese</li>
252
- <auro-checkbox-group appearance="inverse">
253
- <span slot="legend">Form label goes here</span>
254
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1"
255
- >Checkbox option</auro-checkbox
256
- >
257
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
258
- >Checkbox option</auro-checkbox
259
- >
260
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3"
261
- >Checkbox option</auro-checkbox
262
- >
263
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4"
264
- >Checkbox option</auro-checkbox
265
- >
266
- </auro-checkbox-group>
267
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
268
- </ul>
269
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
270
- <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
271
- <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
272
- <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
273
- <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
274
- <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
275
- <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
276
- <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
277
- <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
278
- <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
279
- </div>
280
- <div slot="footer">
281
- <auro-button secondary id="closeInverseCloseButtonAppearance" appearance="inverse">Close</auro-button>
282
- </div>
283
- </auro-drawer>
284
- ```
252
+ &gt;&lt;/auro-radio&gt;
253
+ &lt;/auro-radio-group&gt;
254
+ &lt;auro-input placeholder="John Doe" bordered required appearance="inverse"&gt;
255
+ &lt;span slot="label"&gt;Full name&lt;/span&gt;
256
+ &lt;span slot="helptext"&gt;Please enter your full name.&lt;/span&gt;
257
+ &lt;/auro-input&gt;
258
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
259
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
260
+ &lt;auro-checkbox-group appearance="inverse"&gt;
261
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
262
+ &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"
263
+ &gt;Checkbox option&lt;/auro-checkbox
264
+ &gt;
265
+ &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
266
+ &gt;Checkbox option&lt;/auro-checkbox
267
+ &gt;
268
+ &lt;auro-checkbox value="value3" name="basic" id="checkbox-basic3"
269
+ &gt;Checkbox option&lt;/auro-checkbox
270
+ &gt;
271
+ &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"
272
+ &gt;Checkbox option&lt;/auro-checkbox
273
+ &gt;
274
+ &lt;/auro-checkbox-group&gt;
275
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
276
+ &lt;/ul&gt;
277
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.&lt;/p&gt;
278
+ &lt;p&gt;Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.&lt;/p&gt;
279
+ &lt;p&gt;Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.&lt;/p&gt;
280
+ &lt;p&gt;Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.&lt;/p&gt;
281
+ &lt;p&gt;Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.&lt;/p&gt;
282
+ &lt;p&gt;Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.&lt;/p&gt;
283
+ &lt;p&gt;Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.&lt;/p&gt;
284
+ &lt;p&gt;Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.&lt;/p&gt;
285
+ &lt;p&gt;Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.&lt;/p&gt;
286
+ &lt;p&gt;Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.&lt;/p&gt;
287
+ &lt;/div&gt;
288
+ &lt;div slot="footer"&gt;
289
+ &lt;auro-button secondary id="closeInverseCloseButtonAppearance" appearance="inverse"&gt;Close&lt;/auro-button&gt;
290
+ &lt;/div&gt;
291
+ &lt;/auro-drawer&gt;</code></pre>
285
292
  <!-- AURO-GENERATED-CONTENT:END -->
286
293
  </auro-accordion>
287
294
 
@@ -291,63 +298,61 @@ On mobile view, adding the `fullscreenBreakpoint="{breakpoint-token}"` will swit
291
298
  The default breakpoint is `sm`.
292
299
 
293
300
  <div class="exampleWrapper">
294
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
295
- <!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
296
- <div>
297
- <auro-button id="openSmLg">Open drawer</auro-button>
298
- </div>
299
- <auro-drawer id="smLgDrawer" size="sm" fullscreenBreakpoint="lg">
300
- <span slot="header">Small Drawer</span>
301
- <div slot="content">
302
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
303
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
304
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
305
- <ul>
306
- <li>Caerphilly croque monsieur fondue</li>
307
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
308
- <li>Cheddar cheese and biscuits chalk and cheese</li>
309
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
310
- </ul>
311
- </div>
312
- <div slot="footer">
313
- <auro-button id="closeSmLg">
301
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
302
+ <!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
303
+ <div>
304
+ <auro-button id="openSmLg">Open drawer</auro-button>
305
+ </div>
306
+ <auro-drawer id="smLgDrawer" size="sm" fullscreenBreakpoint="lg">
307
+ <span slot="header">Small Drawer</span>
308
+ <div slot="content">
309
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
310
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
311
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
312
+ <ul>
313
+ <li>Caerphilly croque monsieur fondue</li>
314
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
315
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
316
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
317
+ </ul>
318
+ </div>
319
+ <div slot="footer">
320
+ <auro-button id="closeSmLg">
314
321
  I understand
315
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
316
- </auro-button>
317
- </div>
318
- </auro-drawer>
319
- <!-- AURO-GENERATED-CONTENT:END -->
322
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
323
+ </auro-button>
324
+ </div>
325
+ </auro-drawer>
326
+ <!-- AURO-GENERATED-CONTENT:END -->
320
327
  </div>
321
328
  <auro-accordion alignRight>
322
- <span slot="trigger">See code</span>
329
+ <span slot="trigger">See code</span>
323
330
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen-breakpoint.html) -->
324
331
  <!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
325
332
 
326
- ```html
327
- <div>
328
- <auro-button id="openSmLg">Open drawer</auro-button>
329
- </div>
330
- <auro-drawer id="smLgDrawer" size="sm" fullscreenBreakpoint="lg">
331
- <span slot="header">Small Drawer</span>
332
- <div slot="content">
333
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
334
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
335
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
336
- <ul>
337
- <li>Caerphilly croque monsieur fondue</li>
338
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
339
- <li>Cheddar cheese and biscuits chalk and cheese</li>
340
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
341
- </ul>
342
- </div>
343
- <div slot="footer">
344
- <auro-button id="closeSmLg">
333
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
334
+ &lt;auro-button id="openSmLg"&gt;Open drawer&lt;/auro-button&gt;
335
+ &lt;/div&gt;
336
+ &lt;auro-drawer id="smLgDrawer" size="sm" fullscreenBreakpoint="lg"&gt;
337
+ &lt;span slot="header"&gt;Small Drawer&lt;/span&gt;
338
+ &lt;div slot="content"&gt;
339
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
340
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
341
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
342
+ &lt;ul&gt;
343
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
344
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
345
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
346
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
347
+ &lt;/ul&gt;
348
+ &lt;/div&gt;
349
+ &lt;div slot="footer"&gt;
350
+ &lt;auro-button id="closeSmLg"&gt;
345
351
  I understand
346
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
347
- </auro-button>
348
- </div>
349
- </auro-drawer>
350
- ```
352
+ &lt;auro-icon category="interface" name="check-lg" emphasis appearance="inverse"&gt;&lt;/auro-icon&gt;
353
+ &lt;/auro-button&gt;
354
+ &lt;/div&gt;
355
+ &lt;/auro-drawer&gt;</code></pre>
351
356
  <!-- AURO-GENERATED-CONTENT:END -->
352
357
  </auro-accordion>
353
358
 
@@ -358,141 +363,139 @@ The auro-drawer supports a modal drawer state that will lock a user into interac
358
363
  When using this state, the modal drawer must include a button action to dismiss the modal drawer as the closing icon will not be available and the user will not be able to click outside the modal drawer to dismiss.
359
364
 
360
365
  <div class="exampleWrapper">
361
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/modal.html) -->
362
- <!-- The below content is automatically added from ./../apiExamples/modal.html -->
363
- <div>
364
- <auro-button id="openDefaultModal">Open default modal</auro-button>
365
- <auro-button id="openMediumModal">Open medium modal</auro-button>
366
- <auro-button id="openSmallModal">Open small modal</auro-button>
367
- </div>
368
- <auro-drawer id="defaultModalDrawer" modal>
369
- <span slot="header">Default Modal Drawer</span>
370
- <div slot="content">
371
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
372
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
373
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
374
- <ul>
375
- <li>Caerphilly croque monsieur fondue</li>
376
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
377
- <li>Cheddar cheese and biscuits chalk and cheese</li>
378
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
379
- </ul>
380
- </div>
381
- <div slot="footer">
382
- <auro-button id="closeDefaultModal">I understand
383
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
384
- </auro-button>
385
- </div>
386
- </auro-drawer>
387
- <auro-drawer id="mediumModalDrawer" size="md" modal>
388
- <span slot="header">Medium Drawer</span>
389
- <div slot="content">
390
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
391
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
392
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
393
- <ul>
394
- <li>Caerphilly croque monsieur fondue</li>
395
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
396
- <li>Cheddar cheese and biscuits chalk and cheese</li>
397
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
398
- </ul>
399
- </div>
400
- <div slot="footer">
401
- <auro-button id="closeMediumModal">I understand
402
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
403
- </auro-button>
404
- </div>
405
- </auro-drawer>
406
- <auro-drawer id="smallModalDrawer" size="sm" modal>
407
- <span slot="header">Small Drawer</span>
408
- <div slot="content">
409
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
410
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
411
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
412
- <ul>
413
- <li>Caerphilly croque monsieur fondue</li>
414
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
415
- <li>Cheddar cheese and biscuits chalk and cheese</li>
416
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
417
- </ul>
418
- </div>
419
- <div slot="footer">
420
- <auro-button id="closeSmallModal">I understand
421
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
422
- </auro-button>
423
- </div>
424
- </auro-drawer>
425
- <!-- AURO-GENERATED-CONTENT:END -->
426
- </div>
427
- <auro-accordion alignRight>
428
- <span slot="trigger">See code</span>
429
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/modal.html) -->
430
- <!-- The below code snippet is automatically added from ./../apiExamples/modal.html -->
431
-
432
- ```html
366
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/modal.html) -->
367
+ <!-- The below content is automatically added from ./../apiExamples/modal.html -->
433
368
  <div>
434
- <auro-button id="openDefaultModal">Open default modal</auro-button>
435
- <auro-button id="openMediumModal">Open medium modal</auro-button>
436
- <auro-button id="openSmallModal">Open small modal</auro-button>
369
+ <auro-button id="openDefaultModal">Open default modal</auro-button>
370
+ <auro-button id="openMediumModal">Open medium modal</auro-button>
371
+ <auro-button id="openSmallModal">Open small modal</auro-button>
437
372
  </div>
438
373
  <auro-drawer id="defaultModalDrawer" modal>
439
- <span slot="header">Default Modal Drawer</span>
440
- <div slot="content">
441
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
442
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
443
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
444
- <ul>
445
- <li>Caerphilly croque monsieur fondue</li>
446
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
447
- <li>Cheddar cheese and biscuits chalk and cheese</li>
448
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
449
- </ul>
450
- </div>
451
- <div slot="footer">
452
- <auro-button id="closeDefaultModal">I understand
453
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
454
- </auro-button>
455
- </div>
374
+ <span slot="header">Default Modal Drawer</span>
375
+ <div slot="content">
376
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
377
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
378
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
379
+ <ul>
380
+ <li>Caerphilly croque monsieur fondue</li>
381
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
382
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
383
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
384
+ </ul>
385
+ </div>
386
+ <div slot="footer">
387
+ <auro-button id="closeDefaultModal">I understand
388
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
389
+ </auro-button>
390
+ </div>
456
391
  </auro-drawer>
457
392
  <auro-drawer id="mediumModalDrawer" size="md" modal>
458
- <span slot="header">Medium Drawer</span>
459
- <div slot="content">
460
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
461
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
462
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
463
- <ul>
464
- <li>Caerphilly croque monsieur fondue</li>
465
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
466
- <li>Cheddar cheese and biscuits chalk and cheese</li>
467
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
468
- </ul>
469
- </div>
470
- <div slot="footer">
471
- <auro-button id="closeMediumModal">I understand
472
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
473
- </auro-button>
474
- </div>
393
+ <span slot="header">Medium Drawer</span>
394
+ <div slot="content">
395
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
396
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
397
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
398
+ <ul>
399
+ <li>Caerphilly croque monsieur fondue</li>
400
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
401
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
402
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
403
+ </ul>
404
+ </div>
405
+ <div slot="footer">
406
+ <auro-button id="closeMediumModal">I understand
407
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
408
+ </auro-button>
409
+ </div>
475
410
  </auro-drawer>
476
411
  <auro-drawer id="smallModalDrawer" size="sm" modal>
477
- <span slot="header">Small Drawer</span>
478
- <div slot="content">
479
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
480
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
481
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
482
- <ul>
483
- <li>Caerphilly croque monsieur fondue</li>
484
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
485
- <li>Cheddar cheese and biscuits chalk and cheese</li>
486
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
487
- </ul>
488
- </div>
489
- <div slot="footer">
490
- <auro-button id="closeSmallModal">I understand
491
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
492
- </auro-button>
493
- </div>
494
- </auro-drawer>
495
- ```
412
+ <span slot="header">Small Drawer</span>
413
+ <div slot="content">
414
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
415
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
416
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
417
+ <ul>
418
+ <li>Caerphilly croque monsieur fondue</li>
419
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
420
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
421
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
422
+ </ul>
423
+ </div>
424
+ <div slot="footer">
425
+ <auro-button id="closeSmallModal">I understand
426
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
427
+ </auro-button>
428
+ </div>
429
+ </auro-drawer>
430
+ <!-- AURO-GENERATED-CONTENT:END -->
431
+ </div>
432
+ <auro-accordion alignRight>
433
+ <span slot="trigger">See code</span>
434
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/modal.html) -->
435
+ <!-- The below code snippet is automatically added from ./../apiExamples/modal.html -->
436
+
437
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
438
+ &lt;auro-button id="openDefaultModal"&gt;Open default modal&lt;/auro-button&gt;
439
+ &lt;auro-button id="openMediumModal"&gt;Open medium modal&lt;/auro-button&gt;
440
+ &lt;auro-button id="openSmallModal"&gt;Open small modal&lt;/auro-button&gt;
441
+ &lt;/div&gt;
442
+ &lt;auro-drawer id="defaultModalDrawer" modal&gt;
443
+ &lt;span slot="header"&gt;Default Modal Drawer&lt;/span&gt;
444
+ &lt;div slot="content"&gt;
445
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
446
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
447
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
448
+ &lt;ul&gt;
449
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
450
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
451
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
452
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
453
+ &lt;/ul&gt;
454
+ &lt;/div&gt;
455
+ &lt;div slot="footer"&gt;
456
+ &lt;auro-button id="closeDefaultModal"&gt;I understand
457
+ &lt;auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"&gt;&lt;/auro-icon&gt;
458
+ &lt;/auro-button&gt;
459
+ &lt;/div&gt;
460
+ &lt;/auro-drawer&gt;
461
+ &lt;auro-drawer id="mediumModalDrawer" size="md" modal&gt;
462
+ &lt;span slot="header"&gt;Medium Drawer&lt;/span&gt;
463
+ &lt;div slot="content"&gt;
464
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
465
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
466
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
467
+ &lt;ul&gt;
468
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
469
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
470
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
471
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
472
+ &lt;/ul&gt;
473
+ &lt;/div&gt;
474
+ &lt;div slot="footer"&gt;
475
+ &lt;auro-button id="closeMediumModal"&gt;I understand
476
+ &lt;auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"&gt;&lt;/auro-icon&gt;
477
+ &lt;/auro-button&gt;
478
+ &lt;/div&gt;
479
+ &lt;/auro-drawer&gt;
480
+ &lt;auro-drawer id="smallModalDrawer" size="sm" modal&gt;
481
+ &lt;span slot="header"&gt;Small Drawer&lt;/span&gt;
482
+ &lt;div slot="content"&gt;
483
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
484
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
485
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
486
+ &lt;ul&gt;
487
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
488
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
489
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
490
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
491
+ &lt;/ul&gt;
492
+ &lt;/div&gt;
493
+ &lt;div slot="footer"&gt;
494
+ &lt;auro-button id="closeSmallModal"&gt;I understand
495
+ &lt;auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"&gt;&lt;/auro-icon&gt;
496
+ &lt;/auro-button&gt;
497
+ &lt;/div&gt;
498
+ &lt;/auro-drawer&gt;</code></pre>
496
499
  <!-- AURO-GENERATED-CONTENT:END -->
497
500
  </auro-accordion>
498
501
 
@@ -501,81 +504,79 @@ When using this state, the modal drawer must include a button action to dismiss
501
504
  In case the drawer should sit inside of a container, not to the body, set `nested` attribute.
502
505
 
503
506
  <div class="exampleWrapper">
504
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nested.html) -->
505
- <!-- The below content is automatically added from ./../apiExamples/nested.html -->
506
- <div>
507
- <auro-button id="openNested">Open nested drawer</auro-button>
508
- </div>
509
- <div style="height: 400px">
510
- <auro-drawer id="nestedDrawer" nested>
511
- <span slot="header">Default Drawer</span>
512
- <div slot="content">
513
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
514
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
515
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
516
- <ul>
517
- <li>Caerphilly croque monsieur fondue</li>
518
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
519
- <li>Cheddar cheese and biscuits chalk and cheese</li>
520
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
521
- </ul>
522
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
523
- <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
524
- <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
525
- <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
526
- <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
527
- <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
528
- <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
529
- <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
530
- <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
531
- <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
532
- </div>
533
- <div slot="footer">
534
- <auro-button secondary id="closeNested">Close</auro-button>
535
- </div>
536
- </auro-drawer>
537
- </div>
538
- <!-- AURO-GENERATED-CONTENT:END -->
507
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nested.html) -->
508
+ <!-- The below content is automatically added from ./../apiExamples/nested.html -->
509
+ <div>
510
+ <auro-button id="openNested">Open nested drawer</auro-button>
511
+ </div>
512
+ <div style="height: 400px">
513
+ <auro-drawer id="nestedDrawer" nested>
514
+ <span slot="header">Default Drawer</span>
515
+ <div slot="content">
516
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
517
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
518
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
519
+ <ul>
520
+ <li>Caerphilly croque monsieur fondue</li>
521
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
522
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
523
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
524
+ </ul>
525
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
526
+ <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
527
+ <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
528
+ <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
529
+ <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
530
+ <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
531
+ <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
532
+ <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
533
+ <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
534
+ <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
535
+ </div>
536
+ <div slot="footer">
537
+ <auro-button secondary id="closeNested">Close</auro-button>
538
+ </div>
539
+ </auro-drawer>
540
+ </div>
541
+ <!-- AURO-GENERATED-CONTENT:END -->
539
542
  </div>
540
543
  <auro-accordion alignRight>
541
- <span slot="trigger">See code</span>
544
+ <span slot="trigger">See code</span>
542
545
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nested.html) -->
543
546
  <!-- The below code snippet is automatically added from ./../apiExamples/nested.html -->
544
547
 
545
- ```html
546
- <div>
547
- <auro-button id="openNested">Open nested drawer</auro-button>
548
- </div>
549
- <div style="height: 400px">
550
- <auro-drawer id="nestedDrawer" nested>
551
- <span slot="header">Default Drawer</span>
552
- <div slot="content">
553
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
554
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
555
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
556
- <ul>
557
- <li>Caerphilly croque monsieur fondue</li>
558
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
559
- <li>Cheddar cheese and biscuits chalk and cheese</li>
560
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
561
- </ul>
562
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
563
- <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
564
- <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
565
- <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
566
- <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
567
- <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
568
- <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
569
- <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
570
- <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
571
- <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
572
- </div>
573
- <div slot="footer">
574
- <auro-button secondary id="closeNested">Close</auro-button>
575
- </div>
576
- </auro-drawer>
577
- </div>
578
- ```
548
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
549
+ &lt;auro-button id="openNested"&gt;Open nested drawer&lt;/auro-button&gt;
550
+ &lt;/div&gt;
551
+ &lt;div style="height: 400px"&gt;
552
+ &lt;auro-drawer id="nestedDrawer" nested&gt;
553
+ &lt;span slot="header"&gt;Default Drawer&lt;/span&gt;
554
+ &lt;div slot="content"&gt;
555
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
556
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
557
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
558
+ &lt;ul&gt;
559
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
560
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
561
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
562
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
563
+ &lt;/ul&gt;
564
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.&lt;/p&gt;
565
+ &lt;p&gt;Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.&lt;/p&gt;
566
+ &lt;p&gt;Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.&lt;/p&gt;
567
+ &lt;p&gt;Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.&lt;/p&gt;
568
+ &lt;p&gt;Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.&lt;/p&gt;
569
+ &lt;p&gt;Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.&lt;/p&gt;
570
+ &lt;p&gt;Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.&lt;/p&gt;
571
+ &lt;p&gt;Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.&lt;/p&gt;
572
+ &lt;p&gt;Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.&lt;/p&gt;
573
+ &lt;p&gt;Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.&lt;/p&gt;
574
+ &lt;/div&gt;
575
+ &lt;div slot="footer"&gt;
576
+ &lt;auro-button secondary id="closeNested"&gt;Close&lt;/auro-button&gt;
577
+ &lt;/div&gt;
578
+ &lt;/auro-drawer&gt;
579
+ &lt;/div&gt;</code></pre>
579
580
  <!-- AURO-GENERATED-CONTENT:END -->
580
581
  </auro-accordion>
581
582
 
@@ -584,165 +585,163 @@ In case the drawer should sit inside of a container, not to the body, set `neste
584
585
  You can set the position where the drawer should sit by using the `placement` attribute. The default placement is `right`.
585
586
 
586
587
  <div class="exampleWrapper">
587
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placement.html) -->
588
- <!-- The below content is automatically added from ./../apiExamples/placement.html -->
589
- <div>
590
- <auro-button id="openDefaultSlide">Open default drawer</auro-button>
591
- <auro-button id="openLeftSlide">Open left drawer</auro-button>
592
- <auro-button id="openTopSlide">Open top drawer</auro-button>
593
- <auro-button id="openBottomSlide">Open Bottom drawer</auro-button>
594
- </div>
595
- <auro-drawer id="defaultSlideDrawer">
596
- <span slot="header">Default Drawer</span>
597
- <div slot="content">
598
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
599
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
600
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
601
- <ul>
602
- <li>Caerphilly croque monsieur fondue</li>
603
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
604
- <li>Cheddar cheese and biscuits chalk and cheese</li>
605
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
606
- </ul>
607
- </div>
608
- <div slot="footer">
609
- <auro-button secondary id="closeDefaultSlide">Close</auro-button>
610
- </div>
611
- </auro-drawer>
612
- <auro-drawer id="leftSlideDrawer" placement="left">
613
- <span slot="header">Left Drawer</span>
614
- <div slot="content">
615
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
616
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
617
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
618
- <ul>
619
- <li>Caerphilly croque monsieur fondue</li>
620
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
621
- <li>Cheddar cheese and biscuits chalk and cheese</li>
622
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
623
- </ul>
624
- </div>
625
- <div slot="footer">
626
- <auro-button secondary id="closeLeftSlide">Close</auro-button>
627
- </div>
628
- </auro-drawer>
629
- <auro-drawer id="topSlideDrawer" placement="top" size="sm">
630
- <span slot="header">Top Drawer</span>
631
- <div slot="content">
632
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
633
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
634
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
635
- <ul>
636
- <li>Caerphilly croque monsieur fondue</li>
637
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
638
- <li>Cheddar cheese and biscuits chalk and cheese</li>
639
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
640
- </ul>
641
- </div>
642
- <div slot="footer">
643
- <auro-button secondary id="closeTopSlide">Close</auro-button>
644
- </div>
645
- </auro-drawer>
646
- <auro-drawer id="bottomSlideDrawer" placement="bottom" size="md">
647
- <span slot="header">Bottom Drawer</span>
648
- <div slot="content">
649
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
650
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
651
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
652
- <ul>
653
- <li>Caerphilly croque monsieur fondue</li>
654
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
655
- <li>Cheddar cheese and biscuits chalk and cheese</li>
656
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
657
- </ul>
658
- </div>
659
- <div slot="footer">
660
- <auro-button secondary id="closeBottomSlide">Close</auro-button>
661
- </div>
662
- </auro-drawer>
663
- <!-- AURO-GENERATED-CONTENT:END -->
664
- </div>
665
- <auro-accordion alignRight>
666
- <span slot="trigger">See code</span>
667
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/placement.html) -->
668
- <!-- The below code snippet is automatically added from ./../apiExamples/placement.html -->
669
-
670
- ```html
588
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placement.html) -->
589
+ <!-- The below content is automatically added from ./../apiExamples/placement.html -->
671
590
  <div>
672
- <auro-button id="openDefaultSlide">Open default drawer</auro-button>
673
- <auro-button id="openLeftSlide">Open left drawer</auro-button>
674
- <auro-button id="openTopSlide">Open top drawer</auro-button>
675
- <auro-button id="openBottomSlide">Open Bottom drawer</auro-button>
591
+ <auro-button id="openDefaultSlide">Open default drawer</auro-button>
592
+ <auro-button id="openLeftSlide">Open left drawer</auro-button>
593
+ <auro-button id="openTopSlide">Open top drawer</auro-button>
594
+ <auro-button id="openBottomSlide">Open Bottom drawer</auro-button>
676
595
  </div>
677
596
  <auro-drawer id="defaultSlideDrawer">
678
- <span slot="header">Default Drawer</span>
679
- <div slot="content">
680
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
681
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
682
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
683
- <ul>
684
- <li>Caerphilly croque monsieur fondue</li>
685
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
686
- <li>Cheddar cheese and biscuits chalk and cheese</li>
687
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
688
- </ul>
689
- </div>
690
- <div slot="footer">
691
- <auro-button secondary id="closeDefaultSlide">Close</auro-button>
692
- </div>
597
+ <span slot="header">Default Drawer</span>
598
+ <div slot="content">
599
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
600
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
601
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
602
+ <ul>
603
+ <li>Caerphilly croque monsieur fondue</li>
604
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
605
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
606
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
607
+ </ul>
608
+ </div>
609
+ <div slot="footer">
610
+ <auro-button secondary id="closeDefaultSlide">Close</auro-button>
611
+ </div>
693
612
  </auro-drawer>
694
613
  <auro-drawer id="leftSlideDrawer" placement="left">
695
- <span slot="header">Left Drawer</span>
696
- <div slot="content">
697
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
698
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
699
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
700
- <ul>
701
- <li>Caerphilly croque monsieur fondue</li>
702
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
703
- <li>Cheddar cheese and biscuits chalk and cheese</li>
704
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
705
- </ul>
706
- </div>
707
- <div slot="footer">
708
- <auro-button secondary id="closeLeftSlide">Close</auro-button>
709
- </div>
614
+ <span slot="header">Left Drawer</span>
615
+ <div slot="content">
616
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
617
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
618
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
619
+ <ul>
620
+ <li>Caerphilly croque monsieur fondue</li>
621
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
622
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
623
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
624
+ </ul>
625
+ </div>
626
+ <div slot="footer">
627
+ <auro-button secondary id="closeLeftSlide">Close</auro-button>
628
+ </div>
710
629
  </auro-drawer>
711
630
  <auro-drawer id="topSlideDrawer" placement="top" size="sm">
712
- <span slot="header">Top Drawer</span>
713
- <div slot="content">
714
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
715
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
716
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
717
- <ul>
718
- <li>Caerphilly croque monsieur fondue</li>
719
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
720
- <li>Cheddar cheese and biscuits chalk and cheese</li>
721
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
722
- </ul>
723
- </div>
724
- <div slot="footer">
725
- <auro-button secondary id="closeTopSlide">Close</auro-button>
726
- </div>
631
+ <span slot="header">Top Drawer</span>
632
+ <div slot="content">
633
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
634
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
635
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
636
+ <ul>
637
+ <li>Caerphilly croque monsieur fondue</li>
638
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
639
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
640
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
641
+ </ul>
642
+ </div>
643
+ <div slot="footer">
644
+ <auro-button secondary id="closeTopSlide">Close</auro-button>
645
+ </div>
727
646
  </auro-drawer>
728
647
  <auro-drawer id="bottomSlideDrawer" placement="bottom" size="md">
729
- <span slot="header">Bottom Drawer</span>
730
- <div slot="content">
731
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
732
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
733
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
734
- <ul>
735
- <li>Caerphilly croque monsieur fondue</li>
736
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
737
- <li>Cheddar cheese and biscuits chalk and cheese</li>
738
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
739
- </ul>
740
- </div>
741
- <div slot="footer">
742
- <auro-button secondary id="closeBottomSlide">Close</auro-button>
743
- </div>
744
- </auro-drawer>
745
- ```
648
+ <span slot="header">Bottom Drawer</span>
649
+ <div slot="content">
650
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
651
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
652
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
653
+ <ul>
654
+ <li>Caerphilly croque monsieur fondue</li>
655
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
656
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
657
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
658
+ </ul>
659
+ </div>
660
+ <div slot="footer">
661
+ <auro-button secondary id="closeBottomSlide">Close</auro-button>
662
+ </div>
663
+ </auro-drawer>
664
+ <!-- AURO-GENERATED-CONTENT:END -->
665
+ </div>
666
+ <auro-accordion alignRight>
667
+ <span slot="trigger">See code</span>
668
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/placement.html) -->
669
+ <!-- The below code snippet is automatically added from ./../apiExamples/placement.html -->
670
+
671
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
672
+ &lt;auro-button id="openDefaultSlide"&gt;Open default drawer&lt;/auro-button&gt;
673
+ &lt;auro-button id="openLeftSlide"&gt;Open left drawer&lt;/auro-button&gt;
674
+ &lt;auro-button id="openTopSlide"&gt;Open top drawer&lt;/auro-button&gt;
675
+ &lt;auro-button id="openBottomSlide"&gt;Open Bottom drawer&lt;/auro-button&gt;
676
+ &lt;/div&gt;
677
+ &lt;auro-drawer id="defaultSlideDrawer"&gt;
678
+ &lt;span slot="header"&gt;Default Drawer&lt;/span&gt;
679
+ &lt;div slot="content"&gt;
680
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
681
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
682
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
683
+ &lt;ul&gt;
684
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
685
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
686
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
687
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
688
+ &lt;/ul&gt;
689
+ &lt;/div&gt;
690
+ &lt;div slot="footer"&gt;
691
+ &lt;auro-button secondary id="closeDefaultSlide"&gt;Close&lt;/auro-button&gt;
692
+ &lt;/div&gt;
693
+ &lt;/auro-drawer&gt;
694
+ &lt;auro-drawer id="leftSlideDrawer" placement="left"&gt;
695
+ &lt;span slot="header"&gt;Left Drawer&lt;/span&gt;
696
+ &lt;div slot="content"&gt;
697
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
698
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
699
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
700
+ &lt;ul&gt;
701
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
702
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
703
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
704
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
705
+ &lt;/ul&gt;
706
+ &lt;/div&gt;
707
+ &lt;div slot="footer"&gt;
708
+ &lt;auro-button secondary id="closeLeftSlide"&gt;Close&lt;/auro-button&gt;
709
+ &lt;/div&gt;
710
+ &lt;/auro-drawer&gt;
711
+ &lt;auro-drawer id="topSlideDrawer" placement="top" size="sm"&gt;
712
+ &lt;span slot="header"&gt;Top Drawer&lt;/span&gt;
713
+ &lt;div slot="content"&gt;
714
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
715
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
716
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
717
+ &lt;ul&gt;
718
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
719
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
720
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
721
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
722
+ &lt;/ul&gt;
723
+ &lt;/div&gt;
724
+ &lt;div slot="footer"&gt;
725
+ &lt;auro-button secondary id="closeTopSlide"&gt;Close&lt;/auro-button&gt;
726
+ &lt;/div&gt;
727
+ &lt;/auro-drawer&gt;
728
+ &lt;auro-drawer id="bottomSlideDrawer" placement="bottom" size="md"&gt;
729
+ &lt;span slot="header"&gt;Bottom Drawer&lt;/span&gt;
730
+ &lt;div slot="content"&gt;
731
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
732
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
733
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
734
+ &lt;ul&gt;
735
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
736
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
737
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
738
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
739
+ &lt;/ul&gt;
740
+ &lt;/div&gt;
741
+ &lt;div slot="footer"&gt;
742
+ &lt;auro-button secondary id="closeBottomSlide"&gt;Close&lt;/auro-button&gt;
743
+ &lt;/div&gt;
744
+ &lt;/auro-drawer&gt;</code></pre>
746
745
  <!-- AURO-GENERATED-CONTENT:END -->
747
746
  </auro-accordion>
748
747
 
@@ -755,129 +754,127 @@ For top and bottom drawers, size controls the height, and the width is always 10
755
754
 
756
755
  For mobile or small screen, read <a href="#fullscreenBreakpoint">`fullscreenBreakpoint`</a>
757
756
  <div class="exampleWrapper">
758
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size-options.html) -->
759
- <!-- The below content is automatically added from ./../apiExamples/size-options.html -->
760
- <div>
761
- <auro-button id="openDefaultSize">Open default drawer</auro-button>
762
- <auro-button id="openMediumSize">Open medium drawer</auro-button>
763
- <auro-button id="openSmallSize">Open small drawer</auro-button>
764
- </div>
765
- <auro-drawer id="defaultSizeDrawer">
766
- <span slot="header">Default Drawer</span>
767
- <div slot="content">
768
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
769
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
770
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
771
- <ul>
772
- <li>Caerphilly croque monsieur fondue</li>
773
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
774
- <li>Cheddar cheese and biscuits chalk and cheese</li>
775
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
776
- </ul>
777
- </div>
778
- <div slot="footer">
779
- <auro-button secondary id="closeDefaultSize">Close</auro-button>
780
- </div>
781
- </auro-drawer>
782
- <auro-drawer id="mediumSizeDrawer" size="md">
783
- <span slot="header">Medium Drawer</span>
784
- <div slot="content">
785
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
786
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
787
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
788
- <ul>
789
- <li>Caerphilly croque monsieur fondue</li>
790
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
791
- <li>Cheddar cheese and biscuits chalk and cheese</li>
792
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
793
- </ul>
794
- </div>
795
- <div slot="footer">
796
- <auro-button secondary id="closeMediumSize">Close</auro-button>
797
- </div>
798
- </auro-drawer>
799
- <auro-drawer id="smallSizeDrawer" size="sm">
800
- <span slot="header">Small Drawer</span>
801
- <div slot="content">
802
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
803
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
804
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
805
- <ul>
806
- <li>Caerphilly croque monsieur fondue</li>
807
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
808
- <li>Cheddar cheese and biscuits chalk and cheese</li>
809
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
810
- </ul>
811
- </div>
812
- <div slot="footer">
813
- <auro-button secondary id="closeSmallSize">Close</auro-button>
814
- </div>
815
- </auro-drawer>
816
- <!-- AURO-GENERATED-CONTENT:END -->
817
- </div>
818
- <auro-accordion alignRight>
819
- <span slot="trigger">See code</span>
820
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/size-options.html) -->
821
- <!-- The below code snippet is automatically added from ./../apiExamples/size-options.html -->
822
-
823
- ```html
757
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size-options.html) -->
758
+ <!-- The below content is automatically added from ./../apiExamples/size-options.html -->
824
759
  <div>
825
- <auro-button id="openDefaultSize">Open default drawer</auro-button>
826
- <auro-button id="openMediumSize">Open medium drawer</auro-button>
827
- <auro-button id="openSmallSize">Open small drawer</auro-button>
760
+ <auro-button id="openDefaultSize">Open default drawer</auro-button>
761
+ <auro-button id="openMediumSize">Open medium drawer</auro-button>
762
+ <auro-button id="openSmallSize">Open small drawer</auro-button>
828
763
  </div>
829
764
  <auro-drawer id="defaultSizeDrawer">
830
- <span slot="header">Default Drawer</span>
831
- <div slot="content">
832
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
833
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
834
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
835
- <ul>
836
- <li>Caerphilly croque monsieur fondue</li>
837
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
838
- <li>Cheddar cheese and biscuits chalk and cheese</li>
839
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
840
- </ul>
841
- </div>
842
- <div slot="footer">
843
- <auro-button secondary id="closeDefaultSize">Close</auro-button>
844
- </div>
765
+ <span slot="header">Default Drawer</span>
766
+ <div slot="content">
767
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
768
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
769
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
770
+ <ul>
771
+ <li>Caerphilly croque monsieur fondue</li>
772
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
773
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
774
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
775
+ </ul>
776
+ </div>
777
+ <div slot="footer">
778
+ <auro-button secondary id="closeDefaultSize">Close</auro-button>
779
+ </div>
845
780
  </auro-drawer>
846
781
  <auro-drawer id="mediumSizeDrawer" size="md">
847
- <span slot="header">Medium Drawer</span>
848
- <div slot="content">
849
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
850
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
851
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
852
- <ul>
853
- <li>Caerphilly croque monsieur fondue</li>
854
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
855
- <li>Cheddar cheese and biscuits chalk and cheese</li>
856
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
857
- </ul>
858
- </div>
859
- <div slot="footer">
860
- <auro-button secondary id="closeMediumSize">Close</auro-button>
861
- </div>
782
+ <span slot="header">Medium Drawer</span>
783
+ <div slot="content">
784
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
785
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
786
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
787
+ <ul>
788
+ <li>Caerphilly croque monsieur fondue</li>
789
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
790
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
791
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
792
+ </ul>
793
+ </div>
794
+ <div slot="footer">
795
+ <auro-button secondary id="closeMediumSize">Close</auro-button>
796
+ </div>
862
797
  </auro-drawer>
863
798
  <auro-drawer id="smallSizeDrawer" size="sm">
864
- <span slot="header">Small Drawer</span>
865
- <div slot="content">
866
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
867
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
868
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
869
- <ul>
870
- <li>Caerphilly croque monsieur fondue</li>
871
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
872
- <li>Cheddar cheese and biscuits chalk and cheese</li>
873
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
874
- </ul>
875
- </div>
876
- <div slot="footer">
877
- <auro-button secondary id="closeSmallSize">Close</auro-button>
878
- </div>
879
- </auro-drawer>
880
- ```
799
+ <span slot="header">Small Drawer</span>
800
+ <div slot="content">
801
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
802
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
803
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
804
+ <ul>
805
+ <li>Caerphilly croque monsieur fondue</li>
806
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
807
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
808
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
809
+ </ul>
810
+ </div>
811
+ <div slot="footer">
812
+ <auro-button secondary id="closeSmallSize">Close</auro-button>
813
+ </div>
814
+ </auro-drawer>
815
+ <!-- AURO-GENERATED-CONTENT:END -->
816
+ </div>
817
+ <auro-accordion alignRight>
818
+ <span slot="trigger">See code</span>
819
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/size-options.html) -->
820
+ <!-- The below code snippet is automatically added from ./../apiExamples/size-options.html -->
821
+
822
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
823
+ &lt;auro-button id="openDefaultSize"&gt;Open default drawer&lt;/auro-button&gt;
824
+ &lt;auro-button id="openMediumSize"&gt;Open medium drawer&lt;/auro-button&gt;
825
+ &lt;auro-button id="openSmallSize"&gt;Open small drawer&lt;/auro-button&gt;
826
+ &lt;/div&gt;
827
+ &lt;auro-drawer id="defaultSizeDrawer"&gt;
828
+ &lt;span slot="header"&gt;Default Drawer&lt;/span&gt;
829
+ &lt;div slot="content"&gt;
830
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
831
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
832
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
833
+ &lt;ul&gt;
834
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
835
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
836
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
837
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
838
+ &lt;/ul&gt;
839
+ &lt;/div&gt;
840
+ &lt;div slot="footer"&gt;
841
+ &lt;auro-button secondary id="closeDefaultSize"&gt;Close&lt;/auro-button&gt;
842
+ &lt;/div&gt;
843
+ &lt;/auro-drawer&gt;
844
+ &lt;auro-drawer id="mediumSizeDrawer" size="md"&gt;
845
+ &lt;span slot="header"&gt;Medium Drawer&lt;/span&gt;
846
+ &lt;div slot="content"&gt;
847
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
848
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
849
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
850
+ &lt;ul&gt;
851
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
852
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
853
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
854
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
855
+ &lt;/ul&gt;
856
+ &lt;/div&gt;
857
+ &lt;div slot="footer"&gt;
858
+ &lt;auro-button secondary id="closeMediumSize"&gt;Close&lt;/auro-button&gt;
859
+ &lt;/div&gt;
860
+ &lt;/auro-drawer&gt;
861
+ &lt;auro-drawer id="smallSizeDrawer" size="sm"&gt;
862
+ &lt;span slot="header"&gt;Small Drawer&lt;/span&gt;
863
+ &lt;div slot="content"&gt;
864
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
865
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
866
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
867
+ &lt;ul&gt;
868
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
869
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
870
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
871
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
872
+ &lt;/ul&gt;
873
+ &lt;/div&gt;
874
+ &lt;div slot="footer"&gt;
875
+ &lt;auro-button secondary id="closeSmallSize"&gt;Close&lt;/auro-button&gt;
876
+ &lt;/div&gt;
877
+ &lt;/auro-drawer&gt;</code></pre>
881
878
  <!-- AURO-GENERATED-CONTENT:END -->
882
879
  </auro-accordion>
883
880
 
@@ -892,49 +889,47 @@ This property can be used in combination of any other use case of the drawer, bu
892
889
  Within the scope of the auro-drawer there is `aria-labelledby="drawer-header"`. To make proper use of this, in an unformatted drawer, the developer is required to add `id="drawer-header"` to the content header within the drawer content.
893
890
 
894
891
  <div class="exampleWrapper">
895
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/unformatted.html) -->
896
- <!-- The below content is automatically added from ./../apiExamples/unformatted.html -->
897
- <div>
898
- <auro-button id="openUnformatted">Unformatted Medium Drawer</auro-button>
899
- </div>
900
- <auro-drawer id="unformattedDrawer" md lg>
901
- <span slot="header">Unformatted Drawer</span>
902
- <span slot="content">
903
- <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
904
- <div class="unformattedWrapper">
905
- <h1 id="drawer-header">This is a header</h1>
892
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/unformatted.html) -->
893
+ <!-- The below content is automatically added from ./../apiExamples/unformatted.html -->
894
+ <div>
895
+ <auro-button id="openUnformatted">Unformatted Medium Drawer</auro-button>
896
+ </div>
897
+ <auro-drawer id="unformattedDrawer" md lg>
898
+ <span slot="header">Unformatted Drawer</span>
899
+ <span slot="content">
900
+ <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
901
+ <div class="unformattedWrapper">
902
+ <h1 id="drawer-header">This is a header</h1>
906
903
  These are words that are slotted into the scope of the custom element.
907
- </div>
908
- </span>
909
- <div slot="footer">
910
- <auro-button secondary id="closeUnformatted">Close</auro-button>
911
- </div>
912
- </auro-drawer>
913
- <!-- AURO-GENERATED-CONTENT:END -->
904
+ </div>
905
+ </span>
906
+ <div slot="footer">
907
+ <auro-button secondary id="closeUnformatted">Close</auro-button>
908
+ </div>
909
+ </auro-drawer>
910
+ <!-- AURO-GENERATED-CONTENT:END -->
914
911
  </div>
915
912
  <auro-accordion alignRight>
916
- <span slot="trigger">See code</span>
913
+ <span slot="trigger">See code</span>
917
914
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/unformatted.html) -->
918
915
  <!-- The below code snippet is automatically added from ./../apiExamples/unformatted.html -->
919
916
 
920
- ```html
921
- <div>
922
- <auro-button id="openUnformatted">Unformatted Medium Drawer</auro-button>
923
- </div>
924
- <auro-drawer id="unformattedDrawer" md lg>
925
- <span slot="header">Unformatted Drawer</span>
926
- <span slot="content">
927
- <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
928
- <div class="unformattedWrapper">
929
- <h1 id="drawer-header">This is a header</h1>
917
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
918
+ &lt;auro-button id="openUnformatted"&gt;Unformatted Medium Drawer&lt;/auro-button&gt;
919
+ &lt;/div&gt;
920
+ &lt;auro-drawer id="unformattedDrawer" md lg&gt;
921
+ &lt;span slot="header"&gt;Unformatted Drawer&lt;/span&gt;
922
+ &lt;span slot="content"&gt;
923
+ &lt;img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" /&gt;
924
+ &lt;div class="unformattedWrapper"&gt;
925
+ &lt;h1 id="drawer-header"&gt;This is a header&lt;/h1&gt;
930
926
  These are words that are slotted into the scope of the custom element.
931
- </div>
932
- </span>
933
- <div slot="footer">
934
- <auro-button secondary id="closeUnformatted">Close</auro-button>
935
- </div>
936
- </auro-drawer>
937
- ```
927
+ &lt;/div&gt;
928
+ &lt;/span&gt;
929
+ &lt;div slot="footer"&gt;
930
+ &lt;auro-button secondary id="closeUnformatted"&gt;Close&lt;/auro-button&gt;
931
+ &lt;/div&gt;
932
+ &lt;/auro-drawer&gt;</code></pre>
938
933
  <!-- AURO-GENERATED-CONTENT:END -->
939
934
  </auro-accordion>
940
935
 
@@ -945,65 +940,63 @@ Within the scope of the auro-drawer there is `aria-labelledby="drawer-header"`.
945
940
  To customize the aria-label text for the close button, use the `ariaLabel.drawer.close` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
946
941
 
947
942
  <div class="exampleWrapper">
948
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label-slot.html) -->
949
- <!-- The below content is automatically added from ./../apiExamples/aria-label-slot.html -->
950
- <div>
951
- <auro-button id="openAriaLabelSlotDrawer">Open drawer</auro-button>
952
- </div>
953
- <auro-drawer id="ariaLabelSlotDrawer" size="sm" fullscreenBreakpoint="lg">
954
- <span slot="ariaLabel.drawer.close">This is the new aria-label for the close button</span>
955
- <span slot="header">Small Drawer</span>
956
- <div slot="content">
957
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
958
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
959
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
960
- <ul>
961
- <li>Caerphilly croque monsieur fondue</li>
962
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
963
- <li>Cheddar cheese and biscuits chalk and cheese</li>
964
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
965
- </ul>
966
- </div>
967
- <div slot="footer">
968
- <auro-button id="closeAriaLabelSlotDrawer">
943
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label-slot.html) -->
944
+ <!-- The below content is automatically added from ./../apiExamples/aria-label-slot.html -->
945
+ <div>
946
+ <auro-button id="openAriaLabelSlotDrawer">Open drawer</auro-button>
947
+ </div>
948
+ <auro-drawer id="ariaLabelSlotDrawer" size="sm" fullscreenBreakpoint="lg">
949
+ <span slot="ariaLabel.drawer.close">This is the new aria-label for the close button</span>
950
+ <span slot="header">Small Drawer</span>
951
+ <div slot="content">
952
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
953
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
954
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
955
+ <ul>
956
+ <li>Caerphilly croque monsieur fondue</li>
957
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
958
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
959
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
960
+ </ul>
961
+ </div>
962
+ <div slot="footer">
963
+ <auro-button id="closeAriaLabelSlotDrawer">
969
964
  I understand
970
- <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
971
- </auro-button>
972
- </div>
973
- </auro-drawer>
974
- <!-- AURO-GENERATED-CONTENT:END -->
965
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
966
+ </auro-button>
967
+ </div>
968
+ </auro-drawer>
969
+ <!-- AURO-GENERATED-CONTENT:END -->
975
970
  </div>
976
971
  <auro-accordion alignRight>
977
- <span slot="trigger">See code</span>
972
+ <span slot="trigger">See code</span>
978
973
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label-slot.html) -->
979
974
  <!-- The below code snippet is automatically added from ./../apiExamples/aria-label-slot.html -->
980
975
 
981
- ```html
982
- <div>
983
- <auro-button id="openAriaLabelSlotDrawer">Open drawer</auro-button>
984
- </div>
985
- <auro-drawer id="ariaLabelSlotDrawer" size="sm" fullscreenBreakpoint="lg">
986
- <span slot="ariaLabel.drawer.close">This is the new aria-label for the close button</span>
987
- <span slot="header">Small Drawer</span>
988
- <div slot="content">
989
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
990
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
991
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
992
- <ul>
993
- <li>Caerphilly croque monsieur fondue</li>
994
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
995
- <li>Cheddar cheese and biscuits chalk and cheese</li>
996
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
997
- </ul>
998
- </div>
999
- <div slot="footer">
1000
- <auro-button id="closeAriaLabelSlotDrawer">
976
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
977
+ &lt;auro-button id="openAriaLabelSlotDrawer"&gt;Open drawer&lt;/auro-button&gt;
978
+ &lt;/div&gt;
979
+ &lt;auro-drawer id="ariaLabelSlotDrawer" size="sm" fullscreenBreakpoint="lg"&gt;
980
+ &lt;span slot="ariaLabel.drawer.close"&gt;This is the new aria-label for the close button&lt;/span&gt;
981
+ &lt;span slot="header"&gt;Small Drawer&lt;/span&gt;
982
+ &lt;div slot="content"&gt;
983
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
984
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
985
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
986
+ &lt;ul&gt;
987
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
988
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
989
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
990
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
991
+ &lt;/ul&gt;
992
+ &lt;/div&gt;
993
+ &lt;div slot="footer"&gt;
994
+ &lt;auro-button id="closeAriaLabelSlotDrawer"&gt;
1001
995
  I understand
1002
- <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
1003
- </auro-button>
1004
- </div>
1005
- </auro-drawer>
1006
- ```
996
+ &lt;auro-icon category="interface" name="check-lg" emphasis onDark&gt;&lt;/auro-icon&gt;
997
+ &lt;/auro-button&gt;
998
+ &lt;/div&gt;
999
+ &lt;/auro-drawer&gt;</code></pre>
1007
1000
  <!-- AURO-GENERATED-CONTENT:END -->
1008
1001
  </auro-accordion>
1009
1002
 
@@ -1013,19 +1006,40 @@ To customize the aria-label text for the close button, use the `ariaLabel.drawer
1013
1006
 
1014
1007
  The drawer's size and some styles can be styled using CSS `part`.
1015
1008
 
1016
- - `auro-drawer::part(backdrop)` to style the backdrop behind the the content wrapper.
1017
- - `auro-drawer ::part(drawer-wrapper)` to style the container of the drawer content.
1009
+ - `auro-drawer::part(drawer-wrapper)` to style the container of the drawer content (the drawer panel itself).
1018
1010
  - `auro-drawer ::part(drawer-header)` to style the header.
1019
1011
  - `auro-drawer ::part(drawer-content)` to style the content wrapper.
1020
1012
  - `auro-drawer ::part(drawer-footer)` to style the footer.
1021
1013
  - `auro-drawer ::part(close-button)` to style the close button.
1022
1014
 
1015
+ The drawer backdrop cannot be targeted via `::part()` because browser restrictions prevent CSS parts from targeting `::backdrop`. The `drawer-backdrop` part is kept for backwards compatibility — it targets a decorative `<div>` that sits behind the drawer panel.
1016
+
1017
+ To migrate to the new token approach, hide the legacy div and use the CSS custom properties instead:
1018
+
1019
+ <pre class="language-css"><code class="language-css">/* Step 1: disable the legacy backdrop div */
1020
+ auro-drawer::part(drawer-backdrop) {
1021
+ display: none;
1022
+ }
1023
+ ​
1024
+ /* Step 2: style via tokens on the native ::backdrop */
1025
+ auro-drawer {
1026
+ --auro-drawer-backdrop-background: rgba(0, 0, 0, 0.6);
1027
+ --auro-drawer-backdrop-filter: blur(4px);
1028
+ }</code></pre>
1029
+
1030
+ | Custom Property | Default | Description |
1031
+ |---|---|---|
1032
+ | `--auro-drawer-backdrop-background` | `transparent` | Background of the native `::backdrop`. |
1033
+ | `--auro-drawer-backdrop-filter` | `none` | `backdrop-filter` applied to the native `::backdrop` (e.g. `blur(4px)`). |
1034
+ | `--auro-drawer-backdrop-opacity` | `1` | Opacity of the native `::backdrop`. |
1035
+ | `--auro-drawer-backdrop-transition` | `opacity 0.3s ease` | Transition applied to the native `::backdrop`. |
1036
+
1023
1037
  `close` slot can be used to replace the close button to a different element.
1024
1038
 
1025
1039
  <div class="exampleWrapper">
1026
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customizing.html) -->
1027
- <!-- The below content is automatically added from ./../apiExamples/customizing.html -->
1028
- <style>
1040
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customizing.html) -->
1041
+ <!-- The below content is automatically added from ./../apiExamples/customizing.html -->
1042
+ <style>
1029
1043
  #customizedDrawer ::part(drawer-header) {
1030
1044
  display: none;
1031
1045
  }
@@ -1039,89 +1053,94 @@ The drawer's size and some styles can be styled using CSS `part`.
1039
1053
  background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
1040
1054
  width: 50%;
1041
1055
  }
1056
+ /* Migrate to the token approach: disable the legacy backdrop div first,
1057
+ then style the native ::backdrop via CSS custom properties. */
1042
1058
  #customizedDrawer::part(drawer-backdrop) {
1043
- background: var(--ds-advanced-color-button-primary-background-inverse-disabled);
1059
+ display: none;
1060
+ }
1061
+ #customizedDrawer {
1062
+ --auro-drawer-backdrop-background: rgba(255, 0, 0, 0.5);
1063
+ --auro-drawer-backdrop-filter: blur(2px);
1044
1064
  }
1045
- </style>
1046
- <div>
1047
- <auro-button id="openCustomized">Open customized drawer</auro-button>
1048
- </div>
1049
- <auro-drawer id="customizedDrawer">
1050
- <span slot="header">Default Drawer</span>
1051
- <div slot="content">
1052
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
1053
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
1054
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
1055
- <ul>
1056
- <li>Caerphilly croque monsieur fondue</li>
1057
- <auro-radio-group>
1058
- <span slot="legend">Accordion Test</span>
1059
- <auro-radio
1065
+ </style>
1066
+ <div>
1067
+ <auro-button id="openCustomized">Open customized drawer</auro-button>
1068
+ </div>
1069
+ <auro-drawer id="customizedDrawer">
1070
+ <span slot="header">Default Drawer</span>
1071
+ <div slot="content">
1072
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
1073
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
1074
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
1075
+ <ul>
1076
+ <li>Caerphilly croque monsieur fondue</li>
1077
+ <auro-radio-group>
1078
+ <span slot="legend">Accordion Test</span>
1079
+ <auro-radio
1060
1080
  id="basicGroupRadio1"
1061
1081
  label="Credit or debit card"
1062
1082
  name="creditordebit"
1063
1083
  value="credit"
1064
1084
  ></auro-radio>
1065
- <auro-radio
1085
+ <auro-radio
1066
1086
  id="basicGroupRadio2"
1067
1087
  label="Apple Pay"
1068
1088
  name="applePay"
1069
1089
  value="applePay"
1070
1090
  ></auro-radio>
1071
- <auro-radio
1091
+ <auro-radio
1072
1092
  id="basicGroupRadio3"
1073
1093
  label="Alaska Airlines Commercial Account"
1074
1094
  name="alaskaCommercial"
1075
1095
  value="alaskaCommercial"
1076
1096
  ></auro-radio>
1077
- </auro-radio-group>
1078
- <auro-input placeholder="John Doe" bordered required>
1079
- <span slot="label">Full name</span>
1080
- <span slot="helptext">Please enter your full name.</span>
1081
- </auro-input>
1082
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
1083
- <li>Cheddar cheese and biscuits chalk and cheese</li>
1084
- <auro-checkbox-group>
1085
- <span slot="legend">Form label goes here</span>
1086
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1"
1097
+ </auro-radio-group>
1098
+ <auro-input placeholder="John Doe" bordered required>
1099
+ <span slot="label">Full name</span>
1100
+ <span slot="helptext">Please enter your full name.</span>
1101
+ </auro-input>
1102
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
1103
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
1104
+ <auro-checkbox-group>
1105
+ <span slot="legend">Form label goes here</span>
1106
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1"
1087
1107
  >Checkbox option</auro-checkbox
1088
1108
  >
1089
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
1109
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
1090
1110
  >Checkbox option</auro-checkbox
1091
1111
  >
1092
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3"
1112
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3"
1093
1113
  >Checkbox option</auro-checkbox
1094
1114
  >
1095
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4"
1115
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4"
1096
1116
  >Checkbox option</auro-checkbox
1097
1117
  >
1098
- </auro-checkbox-group>
1099
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
1100
- </ul>
1101
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
1102
- <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
1103
- <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
1104
- <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
1105
- <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
1106
- <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
1107
- <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
1108
- <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
1109
- <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
1110
- <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
1111
- </div>
1112
- <div slot="footer">
1113
- <auro-button secondary id="closeCustomized">Close</auro-button>
1114
- </div>
1115
- </auro-drawer>
1116
- <!-- AURO-GENERATED-CONTENT:END -->
1118
+ </auro-checkbox-group>
1119
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
1120
+ </ul>
1121
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
1122
+ <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
1123
+ <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
1124
+ <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
1125
+ <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
1126
+ <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
1127
+ <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
1128
+ <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
1129
+ <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
1130
+ <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
1131
+ </div>
1132
+ <div slot="footer">
1133
+ <auro-button secondary id="closeCustomized">Close</auro-button>
1134
+ </div>
1135
+ </auro-drawer>
1136
+ <!-- AURO-GENERATED-CONTENT:END -->
1117
1137
  </div>
1118
1138
  <auro-accordion alignRight>
1119
- <span slot="trigger">See code</span>
1139
+ <span slot="trigger">See code</span>
1120
1140
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customizing.html) -->
1121
1141
  <!-- The below code snippet is automatically added from ./../apiExamples/customizing.html -->
1122
1142
 
1123
- ```html
1124
- <style>
1143
+ <pre class="language-html"><code class="language-html">&lt;style&gt;
1125
1144
  #customizedDrawer ::part(drawer-header) {
1126
1145
  display: none;
1127
1146
  }
@@ -1135,81 +1154,86 @@ The drawer's size and some styles can be styled using CSS `part`.
1135
1154
  background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
1136
1155
  width: 50%;
1137
1156
  }
1157
+ /* Migrate to the token approach: disable the legacy backdrop div first,
1158
+ then style the native ::backdrop via CSS custom properties. */
1138
1159
  #customizedDrawer::part(drawer-backdrop) {
1139
- background: var(--ds-advanced-color-button-primary-background-inverse-disabled);
1160
+ display: none;
1140
1161
  }
1141
- </style>
1142
- <div>
1143
- <auro-button id="openCustomized">Open customized drawer</auro-button>
1144
- </div>
1145
- <auro-drawer id="customizedDrawer">
1146
- <span slot="header">Default Drawer</span>
1147
- <div slot="content">
1148
- <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
1149
- <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
1150
- <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
1151
- <ul>
1152
- <li>Caerphilly croque monsieur fondue</li>
1153
- <auro-radio-group>
1154
- <span slot="legend">Accordion Test</span>
1155
- <auro-radio
1162
+ #customizedDrawer {
1163
+ --auro-drawer-backdrop-background: rgba(255, 0, 0, 0.5);
1164
+ --auro-drawer-backdrop-filter: blur(2px);
1165
+ }
1166
+ &lt;/style&gt;
1167
+ &lt;div&gt;
1168
+ &lt;auro-button id="openCustomized"&gt;Open customized drawer&lt;/auro-button&gt;
1169
+ &lt;/div&gt;
1170
+ &lt;auro-drawer id="customizedDrawer"&gt;
1171
+ &lt;span slot="header"&gt;Default Drawer&lt;/span&gt;
1172
+ &lt;div slot="content"&gt;
1173
+ &lt;p&gt;When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.&lt;/p&gt;
1174
+ &lt;p&gt;Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.&lt;/p&gt;
1175
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
1176
+ &lt;ul&gt;
1177
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
1178
+ &lt;auro-radio-group&gt;
1179
+ &lt;span slot="legend"&gt;Accordion Test&lt;/span&gt;
1180
+ &lt;auro-radio
1156
1181
  id="basicGroupRadio1"
1157
1182
  label="Credit or debit card"
1158
1183
  name="creditordebit"
1159
1184
  value="credit"
1160
- ></auro-radio>
1161
- <auro-radio
1185
+ &gt;&lt;/auro-radio&gt;
1186
+ &lt;auro-radio
1162
1187
  id="basicGroupRadio2"
1163
1188
  label="Apple Pay"
1164
1189
  name="applePay"
1165
1190
  value="applePay"
1166
- ></auro-radio>
1167
- <auro-radio
1191
+ &gt;&lt;/auro-radio&gt;
1192
+ &lt;auro-radio
1168
1193
  id="basicGroupRadio3"
1169
1194
  label="Alaska Airlines Commercial Account"
1170
1195
  name="alaskaCommercial"
1171
1196
  value="alaskaCommercial"
1172
- ></auro-radio>
1173
- </auro-radio-group>
1174
- <auro-input placeholder="John Doe" bordered required>
1175
- <span slot="label">Full name</span>
1176
- <span slot="helptext">Please enter your full name.</span>
1177
- </auro-input>
1178
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
1179
- <li>Cheddar cheese and biscuits chalk and cheese</li>
1180
- <auro-checkbox-group>
1181
- <span slot="legend">Form label goes here</span>
1182
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1"
1183
- >Checkbox option</auro-checkbox
1184
- >
1185
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
1186
- >Checkbox option</auro-checkbox
1187
- >
1188
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3"
1189
- >Checkbox option</auro-checkbox
1190
- >
1191
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4"
1192
- >Checkbox option</auro-checkbox
1193
- >
1194
- </auro-checkbox-group>
1195
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
1196
- </ul>
1197
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
1198
- <p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
1199
- <p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
1200
- <p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
1201
- <p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
1202
- <p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
1203
- <p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
1204
- <p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
1205
- <p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
1206
- <p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
1207
- </div>
1208
- <div slot="footer">
1209
- <auro-button secondary id="closeCustomized">Close</auro-button>
1210
- </div>
1211
- </auro-drawer>
1212
- ```
1197
+ &gt;&lt;/auro-radio&gt;
1198
+ &lt;/auro-radio-group&gt;
1199
+ &lt;auro-input placeholder="John Doe" bordered required&gt;
1200
+ &lt;span slot="label"&gt;Full name&lt;/span&gt;
1201
+ &lt;span slot="helptext"&gt;Please enter your full name.&lt;/span&gt;
1202
+ &lt;/auro-input&gt;
1203
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
1204
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
1205
+ &lt;auro-checkbox-group&gt;
1206
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
1207
+ &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"
1208
+ &gt;Checkbox option&lt;/auro-checkbox
1209
+ &gt;
1210
+ &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
1211
+ &gt;Checkbox option&lt;/auro-checkbox
1212
+ &gt;
1213
+ &lt;auro-checkbox value="value3" name="basic" id="checkbox-basic3"
1214
+ &gt;Checkbox option&lt;/auro-checkbox
1215
+ &gt;
1216
+ &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"
1217
+ &gt;Checkbox option&lt;/auro-checkbox
1218
+ &gt;
1219
+ &lt;/auro-checkbox-group&gt;
1220
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
1221
+ &lt;/ul&gt;
1222
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.&lt;/p&gt;
1223
+ &lt;p&gt;Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.&lt;/p&gt;
1224
+ &lt;p&gt;Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.&lt;/p&gt;
1225
+ &lt;p&gt;Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.&lt;/p&gt;
1226
+ &lt;p&gt;Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.&lt;/p&gt;
1227
+ &lt;p&gt;Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.&lt;/p&gt;
1228
+ &lt;p&gt;Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.&lt;/p&gt;
1229
+ &lt;p&gt;Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.&lt;/p&gt;
1230
+ &lt;p&gt;Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.&lt;/p&gt;
1231
+ &lt;p&gt;Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.&lt;/p&gt;
1232
+ &lt;/div&gt;
1233
+ &lt;div slot="footer"&gt;
1234
+ &lt;auro-button secondary id="closeCustomized"&gt;Close&lt;/auro-button&gt;
1235
+ &lt;/div&gt;
1236
+ &lt;/auro-drawer&gt;</code></pre>
1213
1237
  <!-- AURO-GENERATED-CONTENT:END -->
1214
1238
  </auro-accordion>
1215
1239
 
@@ -1220,106 +1244,104 @@ The drawer's size and some styles can be styled using CSS `part`.
1220
1244
  This is a use case where there is a popover and combobox component inside the drawer component, creating a stack of layered components.
1221
1245
 
1222
1246
  <div class="exampleWrapper">
1223
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popover-and-dropdown.html) -->
1224
- <!-- The below content is automatically added from ./../apiExamples/popover-and-dropdown.html -->
1225
- <div>
1226
- <auro-button id="openPopAndDrop">Open drawer with popover</auro-button>
1227
- </div>
1228
- <auro-drawer id="popover-drawer" sm lg>
1229
- <span slot="header">Small Modal Drawer</span>
1230
- <div slot="content">
1231
- <p>
1247
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popover-and-dropdown.html) -->
1248
+ <!-- The below content is automatically added from ./../apiExamples/popover-and-dropdown.html -->
1249
+ <div>
1250
+ <auro-button id="openPopAndDrop">Open drawer with popover</auro-button>
1251
+ </div>
1252
+ <auro-drawer id="popover-drawer" sm lg>
1253
+ <span slot="header">Small Modal Drawer</span>
1254
+ <div slot="content">
1255
+ <p>
1232
1256
  When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.
1233
- </p>
1234
- <p>
1257
+ </p>
1258
+ <p>
1235
1259
  Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.
1236
- </p>
1237
- <auro-header level="3" display="500">
1260
+ </p>
1261
+ <auro-header level="3" display="500">
1238
1262
  Before checking your bags, remember to:
1239
- </auro-header>
1240
- <auro-popover>
1241
- <div class="content">
1242
- <ul>
1243
- <li>Caerphilly croque monsieur fondue</li>
1244
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
1245
- <li>Cheddar cheese and biscuits chalk and cheese</li>
1246
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
1247
- </ul>
1248
- </div>
1249
- <auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
1250
- </auro-popover>
1251
- <auro-combobox>
1252
- <span slot="label">Name</span>
1253
- <auro-menu>
1254
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1255
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
1256
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
1257
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
1258
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
1259
- <auro-menuoption static nomatch>No matching option</auro-menuoption>
1260
- </auro-menu>
1261
- </auro-combobox>
1262
- </div>
1263
- <div slot="footer">
1264
- <auro-button id="closePopAndDrop">
1263
+ </auro-header>
1264
+ <auro-popover>
1265
+ <div class="content">
1266
+ <ul>
1267
+ <li>Caerphilly croque monsieur fondue</li>
1268
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
1269
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
1270
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
1271
+ </ul>
1272
+ </div>
1273
+ <auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
1274
+ </auro-popover>
1275
+ <auro-combobox>
1276
+ <span slot="label">Name</span>
1277
+ <auro-menu>
1278
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1279
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
1280
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
1281
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
1282
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
1283
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
1284
+ </auro-menu>
1285
+ </auro-combobox>
1286
+ </div>
1287
+ <div slot="footer">
1288
+ <auro-button id="closePopAndDrop">
1265
1289
  I understand
1266
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
1267
- </auro-button>
1268
- </div>
1269
- </auro-drawer>
1270
- <!-- AURO-GENERATED-CONTENT:END -->
1290
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
1291
+ </auro-button>
1292
+ </div>
1293
+ </auro-drawer>
1294
+ <!-- AURO-GENERATED-CONTENT:END -->
1271
1295
  </div>
1272
1296
  <auro-accordion alignRight>
1273
- <span slot="trigger">See code</span>
1297
+ <span slot="trigger">See code</span>
1274
1298
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popover-and-dropdown.html) -->
1275
1299
  <!-- The below code snippet is automatically added from ./../apiExamples/popover-and-dropdown.html -->
1276
1300
 
1277
- ```html
1278
- <div>
1279
- <auro-button id="openPopAndDrop">Open drawer with popover</auro-button>
1280
- </div>
1281
- <auro-drawer id="popover-drawer" sm lg>
1282
- <span slot="header">Small Modal Drawer</span>
1283
- <div slot="content">
1284
- <p>
1285
- When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.
1286
- </p>
1287
- <p>
1301
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
1302
+ &lt;auro-button id="openPopAndDrop"&gt;Open drawer with popover&lt;/auro-button&gt;
1303
+ &lt;/div&gt;
1304
+ &lt;auro-drawer id="popover-drawer" sm lg&gt;
1305
+ &lt;span slot="header"&gt;Small Modal Drawer&lt;/span&gt;
1306
+ &lt;div slot="content"&gt;
1307
+ &lt;p&gt;
1308
+ When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See &lt;auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank"&gt;alaskaair.com/bagrules&lt;/auro-hyperlink&gt; for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.
1309
+ &lt;/p&gt;
1310
+ &lt;p&gt;
1288
1311
  Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.
1289
- </p>
1290
- <auro-header level="3" display="500">
1312
+ &lt;/p&gt;
1313
+ &lt;auro-header level="3" display="500"&gt;
1291
1314
  Before checking your bags, remember to:
1292
- </auro-header>
1293
- <auro-popover>
1294
- <div class="content">
1295
- <ul>
1296
- <li>Caerphilly croque monsieur fondue</li>
1297
- <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
1298
- <li>Cheddar cheese and biscuits chalk and cheese</li>
1299
- <li>Camembert de normandie stinking bishop bavarian bergkase</li>
1300
- </ul>
1301
- </div>
1302
- <auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
1303
- </auro-popover>
1304
- <auro-combobox>
1305
- <span slot="label">Name</span>
1306
- <auro-menu>
1307
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1308
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
1309
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
1310
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
1311
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
1312
- <auro-menuoption static nomatch>No matching option</auro-menuoption>
1313
- </auro-menu>
1314
- </auro-combobox>
1315
- </div>
1316
- <div slot="footer">
1317
- <auro-button id="closePopAndDrop">
1315
+ &lt;/auro-header&gt;
1316
+ &lt;auro-popover&gt;
1317
+ &lt;div class="content"&gt;
1318
+ &lt;ul&gt;
1319
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
1320
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
1321
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
1322
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
1323
+ &lt;/ul&gt;
1324
+ &lt;/div&gt;
1325
+ &lt;auro-hyperlink slot="trigger" href="#"&gt;Hover on me&lt;/auro-hyperlink&gt;
1326
+ &lt;/auro-popover&gt;
1327
+ &lt;auro-combobox&gt;
1328
+ &lt;span slot="label"&gt;Name&lt;/span&gt;
1329
+ &lt;auro-menu&gt;
1330
+ &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
1331
+ &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
1332
+ &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
1333
+ &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
1334
+ &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
1335
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
1336
+ &lt;/auro-menu&gt;
1337
+ &lt;/auro-combobox&gt;
1338
+ &lt;/div&gt;
1339
+ &lt;div slot="footer"&gt;
1340
+ &lt;auro-button id="closePopAndDrop"&gt;
1318
1341
  I understand
1319
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
1320
- </auro-button>
1321
- </div>
1322
- </auro-drawer>
1323
- ```
1342
+ &lt;auro-icon category="interface" name="check-lg" emphasis appearance="inverse"&gt;&lt;/auro-icon&gt;
1343
+ &lt;/auro-button&gt;
1344
+ &lt;/div&gt;
1345
+ &lt;/auro-drawer&gt;</code></pre>
1324
1346
  <!-- AURO-GENERATED-CONTENT:END -->
1325
1347
  </auro-accordion>