@aurodesignsystem/auro-dialog 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/.husky/commit-msg +4 -0
  2. package/.husky/pre-commit +4 -0
  3. package/CHANGELOG.md +24 -0
  4. package/LICENSE +201 -0
  5. package/README.md +226 -0
  6. package/demo/api.md +725 -0
  7. package/demo/index.md +200 -0
  8. package/dist/auro-dialog.d.ts +22 -0
  9. package/dist/auro-dialog.d.ts.map +1 -0
  10. package/dist/auro-dialog__bundled.js +362 -0
  11. package/dist/componentBase.d.ts +113 -0
  12. package/dist/componentBase.d.ts.map +1 -0
  13. package/dist/componentBase.js +278 -0
  14. package/dist/style-css.d.ts +3 -0
  15. package/dist/style-css.d.ts.map +1 -0
  16. package/dist/style-fixed-css.d.ts +3 -0
  17. package/dist/style-fixed-css.d.ts.map +1 -0
  18. package/dist/style-fixed-css.js +2 -0
  19. package/dist/style-unformatted-css.d.ts +3 -0
  20. package/dist/style-unformatted-css.d.ts.map +1 -0
  21. package/dist/style-unformatted-css.js +2 -0
  22. package/dist/style-unformatted-fixed-css.d.ts +3 -0
  23. package/dist/style-unformatted-fixed-css.d.ts.map +1 -0
  24. package/dist/style-unformatted-fixed-css.js +2 -0
  25. package/index.js +15 -0
  26. package/package.json +160 -0
  27. package/packageScripts/postinstall.mjs +28 -0
  28. package/src/auro-dialog.js +36 -0
  29. package/src/componentBase.js +278 -0
  30. package/src/style-css.js +2 -0
  31. package/src/style-fixed-css.js +2 -0
  32. package/src/style-unformatted-css.js +2 -0
  33. package/src/style-unformatted-fixed-css.js +2 -0
package/demo/api.md ADDED
@@ -0,0 +1,725 @@
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
2
+ <!-- The below content is automatically added from ./../api.md -->
3
+
4
+ # auro-dialog
5
+
6
+ ## Attributes
7
+
8
+ | Attribute | Type | Description |
9
+ |-----------|-----------|--------------------------------------------------|
10
+ | [fixed](#fixed) | `Boolean` | Uses fixed pixel values for element shape |
11
+ | [md](#md) | `Boolean` | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. |
12
+ | [onDark](#onDark) | `Boolean` | Sets close icon to white for dark backgrounds |
13
+ | [sm](#sm) | `Boolean` | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. |
14
+
15
+ ## Properties
16
+
17
+ | Property | Attribute | Type | Default | Description |
18
+ |------------------|---------------|---------------|---------|--------------------------------------------------|
19
+ | [modal](#modal) | `modal` | `Boolean` | false | Modal dialog restricts the user to take an action (no default close actions) |
20
+ | [open](#open) | `open` | `Boolean` | | Sets state of dialog to open |
21
+ | [triggerElement](#triggerElement) | | `HTMLElement` | | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. |
22
+ | [unformatted](#unformatted) | `unformatted` | `Boolean` | false | Unformatted dialog window, edge-to-edge fill for content |
23
+
24
+ ## Events
25
+
26
+ | Event | Description |
27
+ |----------|----------------------------------------|
28
+ | [toggle](#toggle) | Event fires when the element is closed |
29
+
30
+ ## Slots
31
+
32
+ | Name | Description |
33
+ |-----------|--------------------------------------------|
34
+ | [content](#content) | Injects content into the body of the modal |
35
+ | [footer](#footer) | Used for action options, e.g. buttons |
36
+ | [header](#header) | Text to display as the header of the modal |
37
+
38
+ ## CSS Shadow Parts
39
+
40
+ | Part | Description |
41
+ |------------------|--------------------------------------------------|
42
+ | `close-button` | adjust position of the close X icon in the dialog window |
43
+ | [dialog](#dialog) | apply CSS to the entire dialog |
44
+ | `dialog-content` | apply CSS to the content of the dialog |
45
+ | `dialog-footer` | apply CSS to the footer of the dialog |
46
+ | `dialog-header` | apply CSS to the header of the dialog |
47
+ | `dialog-overlay` | apply CSS on the overlay of the dialog |
48
+ <!-- AURO-GENERATED-CONTENT:END -->
49
+
50
+ ## API Examples
51
+
52
+ ### Basic
53
+
54
+ <div class="exampleWrapper">
55
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
56
+ <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
57
+ <div>
58
+ <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
59
+ </div>
60
+ <auro-dialog id="defaultDialog">
61
+ <span slot="header">Default Dialog</span>
62
+ <div slot="content">
63
+ <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>
64
+ <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>
65
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
66
+ <ul>
67
+ <li>Caerphilly croque monsieur fondue</li>
68
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
69
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
70
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
71
+ </ul>
72
+ </div>
73
+ <div slot="footer">
74
+ <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
75
+ </div>
76
+ </auro-dialog>
77
+ <!-- AURO-GENERATED-CONTENT:END -->
78
+ </div>
79
+ <auro-accordion alignRight>
80
+ <span slot="trigger">See code</span>
81
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
82
+ <!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
83
+
84
+ ```html
85
+ <div>
86
+ <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
87
+ </div>
88
+ <auro-dialog id="defaultDialog">
89
+ <span slot="header">Default Dialog</span>
90
+ <div slot="content">
91
+ <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>
92
+ <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>
93
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
94
+ <ul>
95
+ <li>Caerphilly croque monsieur fondue</li>
96
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
97
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
98
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
99
+ </ul>
100
+ </div>
101
+ <div slot="footer">
102
+ <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
103
+ </div>
104
+ </auro-dialog>
105
+ ```
106
+ <!-- AURO-GENERATED-CONTENT:END -->
107
+ </auro-accordion>
108
+
109
+ ### Size Options
110
+
111
+ The auro-dialog supports three different sizes. A default dialog is equal to the large size dialog. Using the `sm` and `md` attributes, the component supports these sizes for both mobile and desktop.
112
+
113
+ The size attribute effects the `width` of the desktop dialog. Its `height` is dictated by the content with a max height of `80%`. On mobile, the `size` attribute effects the `maximum height` the dialog will use of the device screen. Its width will be 100%.
114
+
115
+ <div class="exampleWrapper">
116
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/sizeOptions.html) -->
117
+ <!-- The below content is automatically added from ./../../apiExamples/sizeOptions.html -->
118
+ <div>
119
+ <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
120
+ <auro-button onClick="toggleDialog('#mediumDialog')">Open medium dialog</auro-button>
121
+ <auro-button onClick="toggleDialog('#smallDialog')">Open small dialog</auro-button>
122
+ </div>
123
+ <auro-dialog id="defaultDialog">
124
+ <span slot="header">Default Dialog</span>
125
+ <div slot="content">
126
+ <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>
127
+ <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>
128
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
129
+ <ul>
130
+ <li>Caerphilly croque monsieur fondue</li>
131
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
132
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
133
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
134
+ </ul>
135
+ </div>
136
+ <div slot="footer">
137
+ <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
138
+ </div>
139
+ </auro-dialog>
140
+ <auro-dialog id="mediumDialog" md>
141
+ <span slot="header">Medium Dialog</span>
142
+ <div slot="content">
143
+ <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>
144
+ <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>
145
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
146
+ <ul>
147
+ <li>Caerphilly croque monsieur fondue</li>
148
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
149
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
150
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
151
+ </ul>
152
+ </div>
153
+ <div slot="footer">
154
+ <auro-button secondary onClick="toggleDialog('#mediumDialog')">Close</auro-button>
155
+ </div>
156
+ </auro-dialog>
157
+ <auro-dialog id="smallDialog" sm>
158
+ <span slot="header">Small Dialog</span>
159
+ <div slot="content">
160
+ <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>
161
+ <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>
162
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
163
+ <ul>
164
+ <li>Caerphilly croque monsieur fondue</li>
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
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
168
+ </ul>
169
+ </div>
170
+ <div slot="footer">
171
+ <auro-button secondary onClick="toggleDialog('#smallDialog')">Close</auro-button>
172
+ </div>
173
+ </auro-dialog>
174
+ <!-- AURO-GENERATED-CONTENT:END -->
175
+ </div>
176
+ <auro-accordion alignRight>
177
+ <span slot="trigger">See code</span>
178
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/sizeOptions.html) -->
179
+ <!-- The below code snippet is automatically added from ./../../apiExamples/sizeOptions.html -->
180
+
181
+ ```html
182
+ <div>
183
+ <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
184
+ <auro-button onClick="toggleDialog('#mediumDialog')">Open medium dialog</auro-button>
185
+ <auro-button onClick="toggleDialog('#smallDialog')">Open small dialog</auro-button>
186
+ </div>
187
+ <auro-dialog id="defaultDialog">
188
+ <span slot="header">Default Dialog</span>
189
+ <div slot="content">
190
+ <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>
191
+ <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>
192
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
193
+ <ul>
194
+ <li>Caerphilly croque monsieur fondue</li>
195
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
196
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
197
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
198
+ </ul>
199
+ </div>
200
+ <div slot="footer">
201
+ <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
202
+ </div>
203
+ </auro-dialog>
204
+ <auro-dialog id="mediumDialog" md>
205
+ <span slot="header">Medium Dialog</span>
206
+ <div slot="content">
207
+ <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>
208
+ <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>
209
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
210
+ <ul>
211
+ <li>Caerphilly croque monsieur fondue</li>
212
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
213
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
214
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
215
+ </ul>
216
+ </div>
217
+ <div slot="footer">
218
+ <auro-button secondary onClick="toggleDialog('#mediumDialog')">Close</auro-button>
219
+ </div>
220
+ </auro-dialog>
221
+ <auro-dialog id="smallDialog" sm>
222
+ <span slot="header">Small Dialog</span>
223
+ <div slot="content">
224
+ <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>
225
+ <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>
226
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
227
+ <ul>
228
+ <li>Caerphilly croque monsieur fondue</li>
229
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
230
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
231
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
232
+ </ul>
233
+ </div>
234
+ <div slot="footer">
235
+ <auro-button secondary onClick="toggleDialog('#smallDialog')">Close</auro-button>
236
+ </div>
237
+ </auro-dialog>
238
+ ```
239
+ <!-- AURO-GENERATED-CONTENT:END -->
240
+ </auro-accordion>
241
+
242
+ ### Modal and Size Options
243
+
244
+ The auro-dialog supports a modal dialog state that will lock a user into interacting with the modal dialog. To activate, use the modal attribute.
245
+
246
+ When using this state, the modal dialog must include a button action to dismiss the modal dialog as the closing icon will not be available and the user will not be able to click outside the `modal` dialog to dismiss.
247
+
248
+ <div class="exampleWrapper">
249
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/modal.html) -->
250
+ <!-- The below content is automatically added from ./../../apiExamples/modal.html -->
251
+ <div>
252
+ <auro-button onClick="toggleDialog('#defaultModalDialog')">Open default modal</auro-button>
253
+ <auro-button onClick="toggleDialog('#mediumModalDialog')">Open medium modal</auro-button>
254
+ <auro-button onClick="toggleDialog('#smallModalDialog')">Open small modal</auro-button>
255
+ </div>
256
+ <auro-dialog id="defaultModalDialog" modal>
257
+ <span slot="header">Default Modal Dialog</span>
258
+ <div slot="content">
259
+ <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>
260
+ <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>
261
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
262
+ <ul>
263
+ <li>Caerphilly croque monsieur fondue</li>
264
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
265
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
266
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
267
+ </ul>
268
+ </div>
269
+ <div slot="footer">
270
+ <auro-button onClick="toggleDialog('#defaultModalDialog')">I understand
271
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
272
+ </auro-button>
273
+ </div>
274
+ </auro-dialog>
275
+ <auro-dialog id="mediumModalDialog" md modal>
276
+ <span slot="header">Medium Dialog</span>
277
+ <div slot="content">
278
+ <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>
279
+ <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>
280
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
281
+ <ul>
282
+ <li>Caerphilly croque monsieur fondue</li>
283
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
284
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
285
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
286
+ </ul>
287
+ </div>
288
+ <div slot="footer">
289
+ <auro-button onClick="toggleDialog('#mediumModalDialog')">I understand
290
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
291
+ </auro-button>
292
+ </div>
293
+ </auro-dialog>
294
+ <auro-dialog id="smallModalDialog" sm modal>
295
+ <span slot="header">Small Dialog</span>
296
+ <div slot="content">
297
+ <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>
298
+ <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>
299
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
300
+ <ul>
301
+ <li>Caerphilly croque monsieur fondue</li>
302
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
303
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
304
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
305
+ </ul>
306
+ </div>
307
+ <div slot="footer">
308
+ <auro-button onClick="toggleDialog('#smallModalDialog')">I understand
309
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
310
+ </auro-button>
311
+ </div>
312
+ </auro-dialog>
313
+ <!-- AURO-GENERATED-CONTENT:END -->
314
+ </div>
315
+ <auro-accordion alignRight>
316
+ <span slot="trigger">See code</span>
317
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/modal.html) -->
318
+ <!-- The below code snippet is automatically added from ./../../apiExamples/modal.html -->
319
+
320
+ ```html
321
+ <div>
322
+ <auro-button onClick="toggleDialog('#defaultModalDialog')">Open default modal</auro-button>
323
+ <auro-button onClick="toggleDialog('#mediumModalDialog')">Open medium modal</auro-button>
324
+ <auro-button onClick="toggleDialog('#smallModalDialog')">Open small modal</auro-button>
325
+ </div>
326
+ <auro-dialog id="defaultModalDialog" modal>
327
+ <span slot="header">Default Modal Dialog</span>
328
+ <div slot="content">
329
+ <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>
330
+ <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>
331
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
332
+ <ul>
333
+ <li>Caerphilly croque monsieur fondue</li>
334
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
335
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
336
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
337
+ </ul>
338
+ </div>
339
+ <div slot="footer">
340
+ <auro-button onClick="toggleDialog('#defaultModalDialog')">I understand
341
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
342
+ </auro-button>
343
+ </div>
344
+ </auro-dialog>
345
+ <auro-dialog id="mediumModalDialog" md modal>
346
+ <span slot="header">Medium Dialog</span>
347
+ <div slot="content">
348
+ <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>
349
+ <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>
350
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
351
+ <ul>
352
+ <li>Caerphilly croque monsieur fondue</li>
353
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
354
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
355
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
356
+ </ul>
357
+ </div>
358
+ <div slot="footer">
359
+ <auro-button onClick="toggleDialog('#mediumModalDialog')">I understand
360
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
361
+ </auro-button>
362
+ </div>
363
+ </auro-dialog>
364
+ <auro-dialog id="smallModalDialog" sm modal>
365
+ <span slot="header">Small Dialog</span>
366
+ <div slot="content">
367
+ <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>
368
+ <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>
369
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
370
+ <ul>
371
+ <li>Caerphilly croque monsieur fondue</li>
372
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
373
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
374
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
375
+ </ul>
376
+ </div>
377
+ <div slot="footer">
378
+ <auro-button onClick="toggleDialog('#smallModalDialog')">I understand
379
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
380
+ </auro-button>
381
+ </div>
382
+ </auro-dialog>
383
+ ```
384
+ <!-- AURO-GENERATED-CONTENT:END -->
385
+ </auro-accordion>
386
+
387
+ ## Dialogs with Decoupled Experience
388
+
389
+ For use case where the size of the dialog on desktop should not influence the size of the dialog on mobile, the combination API of `sm lg` and `md lg` can be used.
390
+
391
+ The use of these combinations will set the first value to the dialog for a desktop experience. The second value will set the mobile experience to be up to 90% of the screen depending on the length of the content.
392
+
393
+ <div class="exampleWrapper">
394
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/decoupled.html) -->
395
+ <!-- The below content is automatically added from ./../../apiExamples/decoupled.html -->
396
+ <div>
397
+ <auro-button onClick="toggleDialog('#smLgDialog')">Open [sm lg] dialog</auro-button>
398
+ <auro-button onClick="toggleDialog('#smMdDialog')">Open [md lg] dialog</auro-button>
399
+ </div>
400
+ <auro-dialog id="smLgDialog" sm lg>
401
+ <span slot="header">Small Modal Dialog</span>
402
+ <div slot="content">
403
+ <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>
404
+ <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>
405
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
406
+ <ul>
407
+ <li>Caerphilly croque monsieur fondue</li>
408
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
409
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
410
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
411
+ </ul>
412
+ </div>
413
+ <div slot="footer">
414
+ <auro-button onClick="toggleDialog('#smLgDialog')">
415
+ I understand
416
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
417
+ </auro-button>
418
+ </div>
419
+ </auro-dialog>
420
+ <auro-dialog id="smMdDialog" md lg>
421
+ <span slot="header">Medium Modal Dialog</span>
422
+ <div slot="content">
423
+ <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>
424
+ <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>
425
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
426
+ <ul>
427
+ <li>Caerphilly croque monsieur fondue</li>
428
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
429
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
430
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
431
+ </ul>
432
+ </div>
433
+ <div slot="footer">
434
+ <auro-button onClick="toggleDialog('#smMdDialog')">
435
+ I understand
436
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
437
+ </auro-button>
438
+ </div>
439
+ </auro-dialog>
440
+ <!-- AURO-GENERATED-CONTENT:END -->
441
+ </div>
442
+ <auro-accordion alignRight>
443
+ <span slot="trigger">See code</span>
444
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/decoupled.html) -->
445
+ <!-- The below code snippet is automatically added from ./../../apiExamples/decoupled.html -->
446
+
447
+ ```html
448
+ <div>
449
+ <auro-button onClick="toggleDialog('#smLgDialog')">Open [sm lg] dialog</auro-button>
450
+ <auro-button onClick="toggleDialog('#smMdDialog')">Open [md lg] dialog</auro-button>
451
+ </div>
452
+ <auro-dialog id="smLgDialog" sm lg>
453
+ <span slot="header">Small Modal Dialog</span>
454
+ <div slot="content">
455
+ <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>
456
+ <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>
457
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
458
+ <ul>
459
+ <li>Caerphilly croque monsieur fondue</li>
460
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
461
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
462
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
463
+ </ul>
464
+ </div>
465
+ <div slot="footer">
466
+ <auro-button onClick="toggleDialog('#smLgDialog')">
467
+ I understand
468
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
469
+ </auro-button>
470
+ </div>
471
+ </auro-dialog>
472
+ <auro-dialog id="smMdDialog" md lg>
473
+ <span slot="header">Medium Modal Dialog</span>
474
+ <div slot="content">
475
+ <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>
476
+ <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>
477
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
478
+ <ul>
479
+ <li>Caerphilly croque monsieur fondue</li>
480
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
481
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
482
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
483
+ </ul>
484
+ </div>
485
+ <div slot="footer">
486
+ <auro-button onClick="toggleDialog('#smMdDialog')">
487
+ I understand
488
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
489
+ </auro-button>
490
+ </div>
491
+ </auro-dialog>
492
+ ```
493
+ <!-- AURO-GENERATED-CONTENT:END -->
494
+ </auro-accordion>
495
+
496
+ ## Dialog with Popover and Dropdown Components
497
+
498
+ This is a use case where there is a popover and combobox component inside the dialog component, creating a stack of layered components.
499
+
500
+ <div class="exampleWrapper">
501
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/popoverAndDropdown.html) -->
502
+ <!-- The below content is automatically added from ./../../apiExamples/popoverAndDropdown.html -->
503
+ <div>
504
+ <auro-button onClick="toggleDialog('#popover-dialog')">Open dialog with popover</auro-button>
505
+ </div>
506
+ <auro-dialog id="popover-dialog" sm lg>
507
+ <span slot="header">Small Modal Dialog</span>
508
+ <div slot="content">
509
+ <p>
510
+ 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.
511
+ </p>
512
+ <p>
513
+ 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.
514
+ </p>
515
+ <auro-header level="3" display="500">
516
+ Before checking your bags, remember to:
517
+ </auro-header>
518
+ <auro-popover>
519
+ <div class="content">
520
+ <ul>
521
+ <li>Caerphilly croque monsieur fondue</li>
522
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
523
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
524
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
525
+ </ul>
526
+ </div>
527
+ <auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
528
+ </auro-popover>
529
+ <auro-combobox>
530
+ <span slot="label">Name</span>
531
+ <auro-menu>
532
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
533
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
534
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
535
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
536
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
537
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
538
+ </auro-menu>
539
+ </auro-combobox>
540
+ </div>
541
+ <div slot="footer">
542
+ <auro-button onClick="toggleDialog('#popover-dialog')">
543
+ I understand
544
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
545
+ </auro-button>
546
+ </div>
547
+ </auro-dialog>
548
+ <!-- AURO-GENERATED-CONTENT:END -->
549
+ </div>
550
+ <auro-accordion alignRight>
551
+ <span slot="trigger">See code</span>
552
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/popoverAndDropdown.html) -->
553
+ <!-- The below code snippet is automatically added from ./../../apiExamples/popoverAndDropdown.html -->
554
+
555
+ ```html
556
+ <div>
557
+ <auro-button onClick="toggleDialog('#popover-dialog')">Open dialog with popover</auro-button>
558
+ </div>
559
+ <auro-dialog id="popover-dialog" sm lg>
560
+ <span slot="header">Small Modal Dialog</span>
561
+ <div slot="content">
562
+ <p>
563
+ 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.
564
+ </p>
565
+ <p>
566
+ 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.
567
+ </p>
568
+ <auro-header level="3" display="500">
569
+ Before checking your bags, remember to:
570
+ </auro-header>
571
+ <auro-popover>
572
+ <div class="content">
573
+ <ul>
574
+ <li>Caerphilly croque monsieur fondue</li>
575
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
576
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
577
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
578
+ </ul>
579
+ </div>
580
+ <auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
581
+ </auro-popover>
582
+ <auro-combobox>
583
+ <span slot="label">Name</span>
584
+ <auro-menu>
585
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
586
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
587
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
588
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
589
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
590
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
591
+ </auro-menu>
592
+ </auro-combobox>
593
+ </div>
594
+ <div slot="footer">
595
+ <auro-button onClick="toggleDialog('#popover-dialog')">
596
+ I understand
597
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
598
+ </auro-button>
599
+ </div>
600
+ </auro-dialog>
601
+ ```
602
+ <!-- AURO-GENERATED-CONTENT:END -->
603
+ </auro-accordion>
604
+
605
+ ## Unformatted dialog
606
+
607
+ For use case where the use of a dialog is to be more freeform, but the experience and base tooling for the dialog are still requested, there is the `unformatted` property.
608
+
609
+ This property can be used in combination of any other use case of the dialog, but it will render a unformatted dialog window allowing for full customization of content within the scope of the window.
610
+
611
+ ### Responsive padding
612
+
613
+ Part of the dialog design spec is its responsive padding. To take advantage of this for your content within the scope of the dialog, be sure to use the selector `unformattedWrapper` that can be imported from the package here:
614
+
615
+ ```css
616
+ import '@aurodesignsystem/auro-dialog/dist/style-unformatted.scss'
617
+
618
+ or
619
+
620
+ import '@aurodesignsystem/auro-dialog@/dist/style-unformatted.css'
621
+ ```
622
+
623
+ ### Accessibility
624
+
625
+ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`. To make proper use of this, in an unformatted dialog, the developer is required to add `id="dialog-header"` to the content header within the dialog content.
626
+
627
+ <div class="exampleWrapper">
628
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accessibility.html) -->
629
+ <!-- The below content is automatically added from ./../../apiExamples/accessibility.html -->
630
+ <div>
631
+ <auro-button onClick="toggleDialog('#unformattedMdDialog')">Unformatted Medium Dialog</auro-button>
632
+ </div>
633
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/auro-dialog@latest/dist/style-unformatted.css" />
634
+ <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
635
+ <span slot="content">
636
+ <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" />
637
+ <div class="unformattedWrapper">
638
+ <h1 id="dialog-header">This is a header</h1>
639
+ These are words that are slotted into the scope of the custom element.
640
+ </div>
641
+ </span>
642
+ </auro-dialog>
643
+ <!-- AURO-GENERATED-CONTENT:END -->
644
+ </div>
645
+ <auro-accordion alignRight>
646
+ <span slot="trigger">See code</span>
647
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accessibility.html) -->
648
+ <!-- The below code snippet is automatically added from ./../../apiExamples/accessibility.html -->
649
+
650
+ ```html
651
+ <div>
652
+ <auro-button onClick="toggleDialog('#unformattedMdDialog')">Unformatted Medium Dialog</auro-button>
653
+ </div>
654
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/auro-dialog@latest/dist/style-unformatted.css" />
655
+ <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
656
+ <span slot="content">
657
+ <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" />
658
+ <div class="unformattedWrapper">
659
+ <h1 id="dialog-header">This is a header</h1>
660
+ These are words that are slotted into the scope of the custom element.
661
+ </div>
662
+ </span>
663
+ </auro-dialog>
664
+ ```
665
+ <!-- AURO-GENERATED-CONTENT:END -->
666
+ </auro-accordion>
667
+
668
+ ### Edit close button position
669
+
670
+ When using the dialog with the `unformatted` attribute, some may want to adjust the positioning of the X close button. This can be addressed using the CSS `::part` CSS pseudo-element API.
671
+
672
+ <div class="exampleWrapper">
673
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/editCloseButton.html) -->
674
+ <!-- The below content is automatically added from ./../../apiExamples/editCloseButton.html -->
675
+ <div>
676
+ <auro-button onClick="toggleDialog('#unformattedCustomMdDialog')">Unformatted w/custom close button</auro-button>
677
+ </div>
678
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/auro-dialog@latest/dist/style-unformatted.css" />
679
+ <style>
680
+ .example::part(close-button) {
681
+ top: var(--ds-size-400);
682
+ right: var(--ds-size-400);
683
+ color: var(--ds-color-brand-flamingo-500);
684
+ }
685
+ </style>
686
+ <auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
687
+ <span slot="content">
688
+ <img style="display: block; width: 100%" src="https://worldairlinenews.files.wordpress.com/2022/05/alaska-737-800-sswl-n538as-22-star-warstko-sfo-mdblr-5.4.22.jpg" alt="alaska airlines pride lights" />
689
+ <div class="unformattedWrapper">
690
+ <h1 id="dialog-header">Unformatted w/custom close button</h1>
691
+ Notice the custom location of the close button as well as the custom color.
692
+ </div>
693
+ </span>
694
+ </auro-dialog>
695
+ <!-- AURO-GENERATED-CONTENT:END -->
696
+ </div>
697
+ <auro-accordion alignRight>
698
+ <span slot="trigger">See code</span>
699
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/editCloseButton.html) -->
700
+ <!-- The below code snippet is automatically added from ./../../apiExamples/editCloseButton.html -->
701
+
702
+ ```html
703
+ <div>
704
+ <auro-button onClick="toggleDialog('#unformattedCustomMdDialog')">Unformatted w/custom close button</auro-button>
705
+ </div>
706
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/auro-dialog@latest/dist/style-unformatted.css" />
707
+ <style>
708
+ .example::part(close-button) {
709
+ top: var(--ds-size-400);
710
+ right: var(--ds-size-400);
711
+ color: var(--ds-color-brand-flamingo-500);
712
+ }
713
+ </style>
714
+ <auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
715
+ <span slot="content">
716
+ <img style="display: block; width: 100%" src="https://worldairlinenews.files.wordpress.com/2022/05/alaska-737-800-sswl-n538as-22-star-warstko-sfo-mdblr-5.4.22.jpg" alt="alaska airlines pride lights" />
717
+ <div class="unformattedWrapper">
718
+ <h1 id="dialog-header">Unformatted w/custom close button</h1>
719
+ Notice the custom location of the close button as well as the custom color.
720
+ </div>
721
+ </span>
722
+ </auro-dialog>
723
+ ```
724
+ <!-- AURO-GENERATED-CONTENT:END -->
725
+ </auro-accordion>