@aurodesignsystem/auro-dialog 4.2.0 → 4.2.1

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 (41) hide show
  1. package/CHANGELOG.md +3 -19
  2. package/README.md +8 -9
  3. package/demo/accessibility.html +42 -0
  4. package/demo/accessibility.js +21 -0
  5. package/demo/accessibility.md +129 -0
  6. package/demo/accessibility.min.js +3969 -0
  7. package/demo/api.html +16 -40
  8. package/demo/api.md +0 -750
  9. package/demo/customize.html +45 -0
  10. package/demo/{api.js → customize.js} +2 -14
  11. package/demo/customize.md +226 -0
  12. package/demo/customize.min.js +3974 -0
  13. package/demo/demo-nav.css +32 -0
  14. package/demo/design.html +42 -0
  15. package/demo/design.js +23 -0
  16. package/demo/design.md +306 -0
  17. package/demo/design.min.js +4041 -0
  18. package/demo/getting-started.html +38 -0
  19. package/demo/getting-started.md +295 -0
  20. package/demo/index.html +17 -36
  21. package/demo/index.js +2 -3
  22. package/demo/index.md +220 -144
  23. package/demo/index.min.js +3984 -7
  24. package/demo/keyboard-behavior.html +38 -0
  25. package/demo/keyboard-behavior.md +51 -0
  26. package/demo/pages.json +1 -0
  27. package/demo/readme.html +42 -0
  28. package/demo/readme.js +24 -0
  29. package/demo/readme.md +176 -0
  30. package/demo/{auro-dialog.min.js → readme.min.js} +434 -281
  31. package/demo/support/demo-support.js +140 -0
  32. package/demo/voiceover.html +38 -0
  33. package/demo/voiceover.md +19 -0
  34. package/demo/why-dialog.html +38 -0
  35. package/demo/why-dialog.md +36 -0
  36. package/dist/{auro-dialog-CWkXz5VA.js → auro-dialog-T9I85UZL.js} +20 -20
  37. package/dist/index.d.ts +198 -98
  38. package/dist/index.js +1 -1
  39. package/dist/registered.js +1 -1
  40. package/package.json +6 -6
  41. package/demo/api.min.js +0 -219
package/demo/demo-nav.css ADDED
@@ -0,0 +1,32 @@
1
+ /* Top page-nav for the auro-dialog local demo (injected by demo-support.js).
2
+ Mirrors auro-select's #page-nav from @aurodesignsystem/config/demo-styles so
3
+ the two components' demo navs render identically. Active page + link styling
4
+ come from auro-hyperlink's own variants (ghost / tertiary), not custom CSS. */
5
+ #page-nav {
6
+ display: flex;
7
+ flex-wrap: wrap;
8
+ justify-content: center;
9
+ align-items: center;
10
+ gap: 4px;
11
+ padding: 8px 16px;
12
+ background: var(--ds-color-background-lightest, #fff);
13
+ border-bottom: 1px solid var(--ds-color-border-subtle, #ddd);
14
+ font-family: var(--ds-text-body-default-font, sans-serif);
15
+ font-size: 0.8rem;
16
+ }
17
+
18
+ /* Copy button on code blocks. */
19
+ .pre-wrapper {
20
+ position: relative;
21
+ }
22
+ .pre-wrapper .copy-btn {
23
+ position: absolute;
24
+ top: var(--ds-size-100, 0.5rem);
25
+ right: var(--ds-size-100, 0.5rem);
26
+ padding: 0.125rem 0.5rem;
27
+ font-size: 0.75rem;
28
+ cursor: pointer;
29
+ background: var(--ds-color-container-primary-default, #fff);
30
+ border: 1px solid var(--ds-color-border-primary-default, #c9c9c9);
31
+ border-radius: 4px;
32
+ }
package/demo/design.html ADDED
@@ -0,0 +1,42 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ Demo shell. Content authored in ../docs/pages/design.md → ./design.md.
6
+ Rendered by ./demo-support.js (remark/rehype) with the top page-nav from ./pages.json.
7
+ -->
8
+ <!DOCTYPE html>
9
+ <html lang="en">
10
+ <head>
11
+ <meta charset="UTF-8" />
12
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
13
+ <title>Auro Web Component Demo | auro-dialog | Design</title>
14
+
15
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
16
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
17
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
18
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
19
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
20
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
21
+ <link rel="stylesheet" type="text/css" href="./demo-nav.css" />
22
+ </head>
23
+ <body class="auro-markdown">
24
+ <main></main>
25
+
26
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
27
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
28
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
29
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
30
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
31
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
32
+
33
+ <script type="module">
34
+ import { renderPage } from './support/demo-support.js';
35
+ await renderPage('./design.md');
36
+ </script>
37
+ <script type="module" data-demo-script="true">
38
+ import { initExamples } from './design.min.js';
39
+ initExamples();
40
+ </script>
41
+ </body>
42
+ </html>
package/demo/design.js ADDED
@@ -0,0 +1,23 @@
1
+ import { initSizeOptionsExample } from "../apiExamples/size-options";
2
+ import { initDecoupledExample } from "../apiExamples/decoupled";
3
+ import { initAccessibilityUnformattedHeaderExample } from "../apiExamples/accessibility-unformatted-header";
4
+
5
+ import "../src/registered";
6
+
7
+ export function initExamples(initCount) {
8
+ // biome-ignore lint/style/noParameterAssign: legacy error handling
9
+ initCount = initCount || 0;
10
+
11
+ try {
12
+ initSizeOptionsExample();
13
+ initDecoupledExample();
14
+ initAccessibilityUnformattedHeaderExample();
15
+ } catch (_err) {
16
+ if (initCount <= 20) {
17
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
18
+ setTimeout(() => {
19
+ initExamples(initCount + 1);
20
+ }, 100);
21
+ }
22
+ }
23
+ }
package/demo/design.md ADDED
@@ -0,0 +1,306 @@
1
+ <auro-header level="1" id="overview">Dialog - Design</auro-header>
2
+ <div class="contentWrapper">
3
+ <nav>
4
+ <auro-nav anchorNavContent=".scrollWrapper">
5
+ <span slot="mobileToggleCollapsed">View More</span>
6
+ <span slot="mobileToggleExpanded">View Less</span>
7
+ <auro-anchorlink fluid href="#anatomy">Anatomy</auro-anchorlink>
8
+ <auro-anchorlink fluid href="#dialogVsModal">Dialog vs. Modal</auro-anchorlink>
9
+ <auro-anchorlink fluid href="#sizes">Sizes</auro-anchorlink>
10
+ <auro-anchorlink fluid href="#unformatted">Unformatted &amp; Padding</auro-anchorlink>
11
+ </auro-nav>
12
+ </nav>
13
+ <div class="mainContent">
14
+ <div class="scrollWrapper">
15
+ <auro-header level="2" id="anatomy">Component Anatomy</auro-header>
16
+ <p>A formatted <code>&lt;auro-dialog&gt;</code> is composed of three stacked regions, each backed by a named slot:</p>
17
+ <ul>
18
+ <li><strong>Header</strong> (<code>header</code> slot) — a short, descriptive title. It is rendered as the dialog's labelled heading and provides the dialog's accessible name.</li>
19
+ <li><strong>Content</strong> (<code>content</code> slot) — the body of the dialog. Keep it focused on a single task or message.</li>
20
+ <li><strong>Footer</strong> (<code>footer</code> slot) — reserved for action buttons. Place the primary action here; for <code>modal</code> dialogs this region must contain the control that dismisses the dialog.</li>
21
+ </ul>
22
+ <p>A non-modal dialog also renders a close (&times;) button in the top corner of the header. The dialog is centered over a dimmed backdrop that overlays the rest of the page.</p>
23
+ <auro-header level="2" id="dialogVsModal">Dialog vs. Modal</auro-header>
24
+ <p>The component supports two behavioral modes. Choosing between them is the most important design decision when using <code>&lt;auro-dialog&gt;</code>.</p>
25
+ <auro-header level="3" id="dialogMode">Dialog (non-modal)</auro-header>
26
+ <p>The default mode. The user is presented with content they should attend to, but can dismiss it passively — via the close button, the <code>Esc</code> key, or by clicking the backdrop outside the dialog. Use this for supplemental information the user can accept or ignore.</p>
27
+ <auro-header level="3" id="modalMode">Modal (blocking)</auro-header>
28
+ <p>Enabled with the <code>modal</code> attribute. The user is locked into the content and must take an explicit action to continue — passive dismissal is disabled. Use this sparingly, only when the user genuinely must make a decision or acknowledge something before proceeding. A modal dialog must always provide an action in its footer, since no close button is rendered.</p>
29
+ <div class="note"><strong>Note:</strong> Auro follows the <auro-hyperlink href="https://www.nngroup.com/articles/modal-nonmodal-dialog/" target="_blank">Nielsen Norman Group</auro-hyperlink> guidance on dialog and modal use. Prefer a non-modal dialog unless blocking the user is truly justified.</div>
30
+ <auro-header level="2" id="sizes">Sizes</auro-header>
31
+ <p>The dialog supports three sizes — <code>sm</code>, <code>md</code>, and <code>lg</code> — with <code>lg</code> as the default.</p>
32
+ <ul>
33
+ <li><strong>Desktop</strong> — size sets the width of the dialog; height is driven by content up to a maximum of 80% of the viewport.</li>
34
+ <li><strong>Mobile</strong> — size sets the maximum viewport height the dialog occupies; width is fixed at 100%.</li>
35
+ </ul>
36
+ <p>Sizes can be decoupled between breakpoints: adding <code>lg</code> in addition to <code>sm</code> or <code>md</code> forces the <code>lg</code> size on mobile while retaining the smaller size on desktop.</p>
37
+ <div class="exampleWrapper">
38
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size-options.html) -->
39
+ <!-- The below content is automatically added from ./../apiExamples/size-options.html -->
40
+ <div>
41
+ <auro-button id="openDefaultSize">Open default dialog</auro-button>
42
+ <auro-button id="openMediumSize">Open medium dialog</auro-button>
43
+ <auro-button id="openSmallSize">Open small dialog</auro-button>
44
+ </div>
45
+ <auro-dialog id="defaultSizeDialog">
46
+ <span slot="header">Default Dialog</span>
47
+ <div slot="content">
48
+ <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>
49
+ <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>
50
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
51
+ <ul>
52
+ <li>Caerphilly croque monsieur fondue</li>
53
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
54
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
55
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
56
+ </ul>
57
+ </div>
58
+ <div slot="footer">
59
+ <auro-button secondary id="closeDefaultSize">Close</auro-button>
60
+ </div>
61
+ </auro-dialog>
62
+ <auro-dialog id="mediumSizeDialog" md>
63
+ <span slot="header">Medium Dialog</span>
64
+ <div slot="content">
65
+ <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>
66
+ <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>
67
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
68
+ <ul>
69
+ <li>Caerphilly croque monsieur fondue</li>
70
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
71
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
72
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
73
+ </ul>
74
+ </div>
75
+ <div slot="footer">
76
+ <auro-button secondary id="closeMediumSize">Close</auro-button>
77
+ </div>
78
+ </auro-dialog>
79
+ <auro-dialog id="smallSizeDialog" sm>
80
+ <span slot="header">Small Dialog</span>
81
+ <div slot="content">
82
+ <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>
83
+ <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>
84
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
85
+ <ul>
86
+ <li>Caerphilly croque monsieur fondue</li>
87
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
88
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
89
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
90
+ </ul>
91
+ </div>
92
+ <div slot="footer">
93
+ <auro-button secondary id="closeSmallSize">Close</auro-button>
94
+ </div>
95
+ </auro-dialog>
96
+ <!-- AURO-GENERATED-CONTENT:END -->
97
+ </div>
98
+ <auro-accordion alignRight>
99
+ <span slot="trigger">See code</span>
100
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/size-options.html) -->
101
+ <!-- The below code snippet is automatically added from ./../apiExamples/size-options.html -->
102
+
103
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
104
+ &lt;auro-button id="openDefaultSize"&gt;Open default dialog&lt;/auro-button&gt;
105
+ &lt;auro-button id="openMediumSize"&gt;Open medium dialog&lt;/auro-button&gt;
106
+ &lt;auro-button id="openSmallSize"&gt;Open small dialog&lt;/auro-button&gt;
107
+ &lt;/div&gt;
108
+ &lt;auro-dialog id="defaultSizeDialog"&gt;
109
+ &lt;span slot="header"&gt;Default Dialog&lt;/span&gt;
110
+ &lt;div slot="content"&gt;
111
+ &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;
112
+ &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;
113
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
114
+ &lt;ul&gt;
115
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
116
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
117
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
118
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
119
+ &lt;/ul&gt;
120
+ &lt;/div&gt;
121
+ &lt;div slot="footer"&gt;
122
+ &lt;auro-button secondary id="closeDefaultSize"&gt;Close&lt;/auro-button&gt;
123
+ &lt;/div&gt;
124
+ &lt;/auro-dialog&gt;
125
+ &lt;auro-dialog id="mediumSizeDialog" md&gt;
126
+ &lt;span slot="header"&gt;Medium Dialog&lt;/span&gt;
127
+ &lt;div slot="content"&gt;
128
+ &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;
129
+ &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;
130
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
131
+ &lt;ul&gt;
132
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
133
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
134
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
135
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
136
+ &lt;/ul&gt;
137
+ &lt;/div&gt;
138
+ &lt;div slot="footer"&gt;
139
+ &lt;auro-button secondary id="closeMediumSize"&gt;Close&lt;/auro-button&gt;
140
+ &lt;/div&gt;
141
+ &lt;/auro-dialog&gt;
142
+ &lt;auro-dialog id="smallSizeDialog" sm&gt;
143
+ &lt;span slot="header"&gt;Small Dialog&lt;/span&gt;
144
+ &lt;div slot="content"&gt;
145
+ &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;
146
+ &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;
147
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
148
+ &lt;ul&gt;
149
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
150
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
151
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
152
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
153
+ &lt;/ul&gt;
154
+ &lt;/div&gt;
155
+ &lt;div slot="footer"&gt;
156
+ &lt;auro-button secondary id="closeSmallSize"&gt;Close&lt;/auro-button&gt;
157
+ &lt;/div&gt;
158
+ &lt;/auro-dialog&gt;</code></pre>
159
+ <!-- AURO-GENERATED-CONTENT:END -->
160
+ </auro-accordion>
161
+ <auro-header level="3" id="mixedSizes">Mixed (decoupled) sizes</auro-header>
162
+ <div class="exampleWrapper">
163
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/decoupled.html) -->
164
+ <!-- The below content is automatically added from ./../apiExamples/decoupled.html -->
165
+ <div>
166
+ <auro-button id="openSmLg">Open [sm lg] dialog</auro-button>
167
+ <auro-button id="openMdLg">Open [md lg] dialog</auro-button>
168
+ </div>
169
+ <auro-dialog id="smLgDialog" sm lg>
170
+ <span slot="header">Small Modal Dialog</span>
171
+ <div slot="content">
172
+ <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>
173
+ <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>
174
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
175
+ <ul>
176
+ <li>Caerphilly croque monsieur fondue</li>
177
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
178
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
179
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
180
+ </ul>
181
+ </div>
182
+ <div slot="footer">
183
+ <auro-button id="closeSmLg">
184
+ I understand
185
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
186
+ </auro-button>
187
+ </div>
188
+ </auro-dialog>
189
+ <auro-dialog id="mdLgDialog" md lg>
190
+ <span slot="header">Medium Modal Dialog</span>
191
+ <div slot="content">
192
+ <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>
193
+ <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>
194
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
195
+ <ul>
196
+ <li>Caerphilly croque monsieur fondue</li>
197
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
198
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
199
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
200
+ </ul>
201
+ </div>
202
+ <div slot="footer">
203
+ <auro-button id="closeMdLg">
204
+ I understand
205
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
206
+ </auro-button>
207
+ </div>
208
+ </auro-dialog>
209
+ <!-- AURO-GENERATED-CONTENT:END -->
210
+ </div>
211
+ <auro-accordion alignRight>
212
+ <span slot="trigger">See code</span>
213
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/decoupled.html) -->
214
+ <!-- The below code snippet is automatically added from ./../apiExamples/decoupled.html -->
215
+
216
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
217
+ &lt;auro-button id="openSmLg"&gt;Open [sm lg] dialog&lt;/auro-button&gt;
218
+ &lt;auro-button id="openMdLg"&gt;Open [md lg] dialog&lt;/auro-button&gt;
219
+ &lt;/div&gt;
220
+ &lt;auro-dialog id="smLgDialog" sm lg&gt;
221
+ &lt;span slot="header"&gt;Small Modal Dialog&lt;/span&gt;
222
+ &lt;div slot="content"&gt;
223
+ &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;
224
+ &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;
225
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
226
+ &lt;ul&gt;
227
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
228
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
229
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
230
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
231
+ &lt;/ul&gt;
232
+ &lt;/div&gt;
233
+ &lt;div slot="footer"&gt;
234
+ &lt;auro-button id="closeSmLg"&gt;
235
+ I understand
236
+ &lt;auro-icon category="interface" name="check-lg" emphasis appearance="inverse"&gt;&lt;/auro-icon&gt;
237
+ &lt;/auro-button&gt;
238
+ &lt;/div&gt;
239
+ &lt;/auro-dialog&gt;
240
+ &lt;auro-dialog id="mdLgDialog" md lg&gt;
241
+ &lt;span slot="header"&gt;Medium Modal Dialog&lt;/span&gt;
242
+ &lt;div slot="content"&gt;
243
+ &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;
244
+ &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;
245
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
246
+ &lt;ul&gt;
247
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
248
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
249
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
250
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
251
+ &lt;/ul&gt;
252
+ &lt;/div&gt;
253
+ &lt;div slot="footer"&gt;
254
+ &lt;auro-button id="closeMdLg"&gt;
255
+ I understand
256
+ &lt;auro-icon category="interface" name="check-lg" emphasis appearance="inverse"&gt;&lt;/auro-icon&gt;
257
+ &lt;/auro-button&gt;
258
+ &lt;/div&gt;
259
+ &lt;/auro-dialog&gt;</code></pre>
260
+ <!-- AURO-GENERATED-CONTENT:END -->
261
+ </auro-accordion>
262
+ <auro-header level="2" id="unformatted">Unformatted &amp; Responsive Padding</auro-header>
263
+ <p>For freeform use cases that still want the dialog's behavior and tooling, the <code>unformatted</code> property renders an edge-to-edge window with no built-in header/content/footer structure. This is ideal for full-bleed media or a fully custom composition.</p>
264
+ <p>Part of the dialog design spec is its responsive padding. To apply that same padding to your own content inside an unformatted dialog, wrap it with the <code>unformattedWrapper</code> selector, imported from the package:</p>
265
+
266
+ <pre class="language-css"><code class="language-css">@import '@aurodesignsystem/auro-dialog/dist/style-unformatted.css';</code></pre>
267
+
268
+ <div class="exampleWrapper">
269
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accessibility-unformatted-header.html) -->
270
+ <!-- The below content is automatically added from ./../apiExamples/accessibility-unformatted-header.html -->
271
+ <div>
272
+ <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
273
+ </div>
274
+ <auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
275
+ <span slot="content">
276
+ <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" />
277
+ <div class="unformattedWrapper">
278
+ <h1 id="dialog-header" class="heading-lg">This is a header</h1>
279
+ These are words that are slotted into the scope of the custom element.
280
+ </div>
281
+ </span>
282
+ </auro-dialog>
283
+ <!-- AURO-GENERATED-CONTENT:END -->
284
+ </div>
285
+ <auro-accordion alignRight>
286
+ <span slot="trigger">See code</span>
287
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accessibility-unformatted-header.html) -->
288
+ <!-- The below code snippet is automatically added from ./../apiExamples/accessibility-unformatted-header.html -->
289
+
290
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
291
+ &lt;auro-button id="openAccessibility"&gt;Unformatted Medium Dialog&lt;/auro-button&gt;
292
+ &lt;/div&gt;
293
+ &lt;auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse"&gt;
294
+ &lt;span slot="content"&gt;
295
+ &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;
296
+ &lt;div class="unformattedWrapper"&gt;
297
+ &lt;h1 id="dialog-header" class="heading-lg"&gt;This is a header&lt;/h1&gt;
298
+ These are words that are slotted into the scope of the custom element.
299
+ &lt;/div&gt;
300
+ &lt;/span&gt;
301
+ &lt;/auro-dialog&gt;</code></pre>
302
+ <!-- AURO-GENERATED-CONTENT:END -->
303
+ </auro-accordion>
304
+ </div>
305
+ </div>
306
+ </div>