@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
@@ -0,0 +1,38 @@
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/keyboard-behavior.md → ./keyboard-behavior.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 | Keyboard Behavior</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('./keyboard-behavior.md');
36
+ </script>
37
+ </body>
38
+ </html>
@@ -0,0 +1,51 @@
1
+ <auro-header level="1" id="overview">Dialog - Keyboard Behavior</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="#tabBehavior">Tab Behavior</auro-anchorlink>
8
+ <auro-anchorlink fluid href="#keyEvents">Key Events</auro-anchorlink>
9
+ <auro-anchorlink fluid href="#modalDifferences">Modal Differences</auro-anchorlink>
10
+ </auro-nav>
11
+ </nav>
12
+ <div class="mainContent">
13
+ <div class="scrollWrapper">
14
+ <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
15
+ <p>While the dialog is open, focus is trapped inside it. <code>Tab</code> moves forward through the dialog's focusable elements and <code>Shift</code> + <code>Tab</code> moves backward, both wrapping at the ends so focus never leaves the dialog. When the dialog closes, focus returns to the element that opened it (or to the element set via <code>triggerElement</code>).</p>
16
+ <auro-header level="2" id="keyEvents">Key Events</auro-header>
17
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyboard-behavior/keyEvents.md) -->
18
+ <!-- The below content is automatically added from ./../docs/partials/keyboard-behavior/keyEvents.md -->
19
+ <p>The <code>&lt;auro-dialog&gt;</code> component responds to the following keys while it is open.</p>
20
+ <table>
21
+ <thead>
22
+ <tr>
23
+ <th>Key</th>
24
+ <th>Behavior</th>
25
+ </tr>
26
+ </thead>
27
+ <tbody>
28
+ <tr>
29
+ <td><code>Tab</code></td>
30
+ <td>Moves focus to the next focusable element inside the dialog. Focus is trapped within the dialog — tabbing past the last element wraps to the first.</td>
31
+ </tr>
32
+ <tr>
33
+ <td><code>Shift</code> + <code>Tab</code></td>
34
+ <td>Moves focus to the previous focusable element inside the dialog, wrapping from the first element to the last.</td>
35
+ </tr>
36
+ <tr>
37
+ <td><code>Esc</code></td>
38
+ <td>Dismisses a non-<code>modal</code> dialog. In a <code>modal</code> dialog the default cancel action is prevented, so <code>Esc</code> does <strong>not</strong> close it — the user must use an explicit action in the footer.</td>
39
+ </tr>
40
+ <tr>
41
+ <td><code>Enter</code> / <code>Space</code></td>
42
+ <td>Activates the focused control (e.g. a footer button), following the native behavior of that control.</td>
43
+ </tr>
44
+ </tbody>
45
+ </table>
46
+ <!-- AURO-GENERATED-CONTENT:END -->
47
+ <auro-header level="2" id="modalDifferences">Modal Differences</auro-header>
48
+ <p>The <code>modal</code> attribute changes the dismissal keys. Because a modal dialog requires an explicit action to close, the native <code>Esc</code> / cancel behavior is intercepted and prevented — pressing <code>Esc</code> will not close a modal dialog. Non-modal dialogs close on <code>Esc</code> as expected. In both modes, <code>Tab</code> focus trapping behaves identically.</p>
49
+ </div>
50
+ </div>
51
+ </div>
@@ -0,0 +1 @@
1
+ ["index.md","getting-started.md","api.md","design.md","accessibility.md","keyboard-behavior.md","voiceover.md","customize.md","why-dialog.md","readme.md"]
@@ -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. Renders the generated ./readme.md via ./demo-support.js
6
+ (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 | README</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('./readme.md');
36
+ </script>
37
+ <script type="module" data-demo-script="true">
38
+ import { initExamples } from './readme.min.js';
39
+ initExamples();
40
+ </script>
41
+ </body>
42
+ </html>
package/demo/readme.js ADDED
@@ -0,0 +1,24 @@
1
+ import "../src/registered";
2
+ import { AuroDialog } from "../src/index";
3
+ import { initCustomExample } from "../apiExamples/custom";
4
+
5
+ // The README's live example uses a custom-registered `<custom-dialog>` tag
6
+ // (see docs/partials/customRegistration.md). Register it so the element
7
+ // upgrades and renders on the README demo page.
8
+ AuroDialog.register("custom-dialog");
9
+
10
+ export function initExamples(initCount) {
11
+ // biome-ignore lint/style/noParameterAssign: legacy error handling
12
+ initCount = initCount || 0;
13
+
14
+ try {
15
+ initCustomExample();
16
+ } catch (_err) {
17
+ if (initCount <= 20) {
18
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
19
+ setTimeout(() => {
20
+ initExamples(initCount + 1);
21
+ }, 100);
22
+ }
23
+ }
24
+ }
package/demo/readme.md ADDED
@@ -0,0 +1,176 @@
1
+ <!--
2
+ The README.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ README.md is created by running `npm run build:docs`.
5
+
6
+ This file is generated based on a template fetched from
7
+ `https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/README.md`
8
+ and copied to `./componentDocs/README.md` each time the docs are compiled.
9
+
10
+ The following sections are editable by making changes to the following files:
11
+
12
+ | SECTION | DESCRIPTION | FILE LOCATION |
13
+ |------------------------|---------------------------------------------------|-------------------------------------|
14
+ | Description | Description of the component | `./docs/partials/description.md` |
15
+ | Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
16
+ | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
17
+ | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
18
+ -->
19
+
20
+ # Dialog
21
+
22
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
24
+ <p>The <code>&lt;auro-dialog&gt;</code> component is an intrusive interactive component, not passive. The component is best used when there is a requirement the user be made aware of the content being shown, moving focus from the main content to the dialog content.</p>
25
+ <p>The component also supports a modal (blocking) state where the user must interact with the content of the component in order to continue. Passive dismissal of the content is not allowed. Users of this state must add a trigger for the user to move beyond this content.</p>
26
+ <p>Auro holds the opinions of the <a class="hyperlink" href="https://www.nngroup.com/articles/modal-nonmodal-dialog/" target="_blank">Nielsen Norman Group</a> on dialog and modal use to be true.</p>
27
+ <!-- AURO-GENERATED-CONTENT:END -->
28
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
29
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
30
+ <!-- AURO-GENERATED-CONTENT:END -->
31
+
32
+ ## Use Cases
33
+
34
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
35
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
36
+ <p>The <code>&lt;auro-dialog&gt;</code> component should be used in situations where users may:</p>
37
+ <ul>
38
+ <li>Be prompted to take an action before doing anything else or going back</li>
39
+ <li>Be prompted to view content with the option of closing it</li>
40
+ </ul>
41
+ <!-- AURO-GENERATED-CONTENT:END -->
42
+
43
+ ## Install
44
+
45
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
46
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-dialog/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-dialog/actions/workflows/release.yml)
47
+ [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-dialog?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-dialog)
48
+ [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-dialog?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
49
+ ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
50
+
51
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-dialog</code></pre>
52
+
53
+ <!-- AURO-GENERATED-CONTENT:END -->
54
+
55
+ ### Define Dependency in Project
56
+
57
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
58
+ Defining the dependency within each project that is using the `<auro-dialog>` component.
59
+
60
+ <!-- AURO-GENERATED-CONTENT:END -->
61
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
62
+
63
+ <pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-dialog";</code></pre>
64
+
65
+ <!-- AURO-GENERATED-CONTENT:END -->
66
+
67
+ ### Use CDN
68
+
69
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
70
+ In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
71
+
72
+ <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm"&gt;&lt;/script&gt;</code></pre>
73
+
74
+ <!-- AURO-GENERATED-CONTENT:END -->
75
+
76
+ ## Basic Example
77
+
78
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
79
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
80
+
81
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
82
+ &lt;auro-button id="openBasic"&gt;Open default dialog&lt;/auro-button&gt;
83
+ &lt;/div&gt;
84
+ &lt;auro-dialog id="defaultDialog"&gt;
85
+ &lt;span slot="header"&gt;Default Dialog&lt;/span&gt;
86
+ &lt;div slot="content"&gt;
87
+ &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;
88
+ &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;
89
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
90
+ &lt;ul&gt;
91
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
92
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
93
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
94
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
95
+ &lt;/ul&gt;
96
+ &lt;/div&gt;
97
+ &lt;div slot="footer"&gt;
98
+ &lt;auro-button secondary id="closeBasic"&gt;Close&lt;/auro-button&gt;
99
+ &lt;/div&gt;
100
+ &lt;/auro-dialog&gt;</code></pre>
101
+ <!-- AURO-GENERATED-CONTENT:END -->
102
+
103
+ ## Custom Component Registration for Version Management
104
+
105
+ There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
106
+ The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
107
+
108
+ When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
109
+
110
+ However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
111
+
112
+ You can do this by importing only the component class and using the `register(name)` method with a unique name:
113
+
114
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
115
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
116
+
117
+ <pre class="language-js"><code class="language-js">// Import the class only
118
+ import { AuroDialog } from '@aurodesignsystem/auro-dialog/class';
119
+ ​
120
+ // Register with a custom name if desired
121
+ AuroDialog.register('custom-dialog');</code></pre>
122
+
123
+ This will create a new custom element `<custom-dialog>` that behaves exactly like `<auro-dialog>`, allowing both to coexist on the same page without interfering with each other.
124
+ <!-- AURO-GENERATED-CONTENT:END -->
125
+ <div class="exampleWrapper exampleWrapper--flex">
126
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
127
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
128
+ <div>
129
+ <auro-button id="openCustom">Open default dialog</auro-button>
130
+ </div>
131
+ <custom-dialog id="customDialog">
132
+ <span slot="header">Default Dialog</span>
133
+ <div slot="content">
134
+ <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>
135
+ <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>
136
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
137
+ <ul>
138
+ <li>Caerphilly croque monsieur fondue</li>
139
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
140
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
141
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
142
+ </ul>
143
+ </div>
144
+ <div slot="footer">
145
+ <auro-button secondary id="closeCustom">Close</auro-button>
146
+ </div>
147
+ </custom-dialog>
148
+ <!-- AURO-GENERATED-CONTENT:END -->
149
+ </div>
150
+ <auro-accordion alignRight>
151
+ <span slot="trigger">See code</span>
152
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
153
+ <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
154
+
155
+ <pre class="language-html"><code class="language-html">&lt;div&gt;
156
+ &lt;auro-button id="openCustom"&gt;Open default dialog&lt;/auro-button&gt;
157
+ &lt;/div&gt;
158
+ &lt;custom-dialog id="customDialog"&gt;
159
+ &lt;span slot="header"&gt;Default Dialog&lt;/span&gt;
160
+ &lt;div slot="content"&gt;
161
+ &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;
162
+ &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;
163
+ &lt;auro-header level="3" display="500"&gt;Before checking your bags, remember to:&lt;/auro-header&gt;
164
+ &lt;ul&gt;
165
+ &lt;li&gt;Caerphilly croque monsieur fondue&lt;/li&gt;
166
+ &lt;li&gt;Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings&lt;/li&gt;
167
+ &lt;li&gt;Cheddar cheese and biscuits chalk and cheese&lt;/li&gt;
168
+ &lt;li&gt;Camembert de normandie stinking bishop bavarian bergkase&lt;/li&gt;
169
+ &lt;/ul&gt;
170
+ &lt;/div&gt;
171
+ &lt;div slot="footer"&gt;
172
+ &lt;auro-button secondary id="closeCustom"&gt;Close&lt;/auro-button&gt;
173
+ &lt;/div&gt;
174
+ &lt;/custom-dialog&gt;</code></pre>
175
+ <!-- AURO-GENERATED-CONTENT:END -->
176
+ </auro-accordion>