@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/getting-started.md → ./getting-started.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 | Getting Started</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('./getting-started.md');
36
+ </script>
37
+ </body>
38
+ </html>
@@ -0,0 +1,295 @@
1
+ <auro-header level="1" id="overview">Dialog - Getting Started</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="#setup">Setup</auro-anchorlink>
8
+ <auro-anchorlink fluid href="#recommendedAccordion" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
9
+ <auro-anchorlink fluid href="#autoAccordion" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
10
+ <auro-anchorlink fluid href="#cdnAccordion" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
11
+ <auro-anchorlink fluid href="#frameworks">Frameworks</auro-anchorlink>
12
+ <auro-anchorlink fluid href="#react" class="level2 body-xs" onclick="openAccordion('react')">React</auro-anchorlink>
13
+ <auro-anchorlink fluid href="#svelte" class="level2 body-xs" onclick="openAccordion('svelte')">Svelte</auro-anchorlink>
14
+ <auro-anchorlink fluid href="#minimalConfig">Minimal Config</auro-anchorlink>
15
+ <auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
16
+ <auro-anchorlink fluid href="#stateManagement">State Management</auro-anchorlink>
17
+ <auro-anchorlink fluid href="#open" class="level2 body-xs">open</auro-anchorlink>
18
+ <auro-anchorlink fluid href="#modal" class="level2 body-xs">modal</auro-anchorlink>
19
+ <auro-anchorlink fluid href="#triggerElement" class="level2 body-xs">triggerElement</auro-anchorlink>
20
+ <auro-anchorlink fluid href="#publicFunctions">Functions</auro-anchorlink>
21
+ <auro-anchorlink fluid href="#show" class="level2 body-xs">show()</auro-anchorlink>
22
+ <auro-anchorlink fluid href="#hide" class="level2 body-xs">hide()</auro-anchorlink>
23
+ </auro-nav>
24
+ </nav>
25
+ <div class="mainContent">
26
+ <div class="scrollWrapper">
27
+ <auro-header level="2" id="setup">Setup</auro-header>
28
+ <auro-accordion-group Emphasis>
29
+ <auro-accordion expanded class="section" id="recommendedAccordion">
30
+ <span slot="trigger">Recommended Installation and Implementation</span>
31
+ <div class="accordion-content">
32
+ <auro-header level="3">Install</auro-header>
33
+ <p>Install the <code>@aurodesignsystem/auro-dialog</code> package from npm:</p>
34
+
35
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-dialog</code></pre>
36
+
37
+ <p>Installing as a dependency automatically installs its own dependencies (<code>auro-button</code> and <code>auro-icon</code>), which are registered internally under versioned tag names — you do not need to register them yourself.</p>
38
+ <auro-header level="3">Implementation</auro-header>
39
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/customRegistration.md) -->
40
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/customRegistration.md -->
41
+ <p>Every Auro component consists of a JavaScript <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</auro-hyperlink> and a <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</auro-hyperlink>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
42
+ <p>The default import handles both steps automatically, registering the component under its standard <code>&lt;auro-dialog&gt;</code> tag name.</p>
43
+ <p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts. Import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
44
+
45
+ <pre class="language-js"><code class="language-js">// Import the class only
46
+ import { AuroDialog } from '@aurodesignsystem/auro-dialog/class';
47
+ ​
48
+ // Register with a custom name
49
+ AuroDialog.register('custom-dialog');</code></pre>
50
+
51
+ <p>This creates a new custom element <code>&lt;custom-dialog&gt;</code> that behaves exactly like <code>&lt;auro-dialog&gt;</code>, allowing both to coexist on the same page without interfering with each other.</p>
52
+
53
+ <pre class="language-html"><code class="language-html">&lt;custom-dialog id="custom-dialog-example"&gt;
54
+ &lt;span slot="header"&gt;Dialog header&lt;/span&gt;
55
+ &lt;div slot="content"&gt;Dialog content&lt;/div&gt;
56
+ &lt;div slot="footer"&gt;
57
+ &lt;auro-button id="closeCustom"&gt;Close&lt;/auro-button&gt;
58
+ &lt;/div&gt;
59
+ &lt;/custom-dialog&gt;</code></pre>
60
+ <!-- AURO-GENERATED-CONTENT:END -->
61
+ </div>
62
+ </auro-accordion>
63
+ <auro-accordion class="section" id="autoAccordion">
64
+ <span slot="trigger">Auto Installation and Implementation</span>
65
+ <div class="accordion-content">
66
+ <p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
67
+ <auro-header level="3">Implementation</auro-header>
68
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
69
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
70
+ <p>Once installed, the component can be used in your project by importing the component's registered module:</p>
71
+
72
+ <pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-dialog';</code></pre>
73
+
74
+ <p>This import registers the <code>&lt;auro-dialog&gt;</code> custom element globally. You can then use it in your HTML:</p>
75
+
76
+ <pre class="language-html"><code class="language-html">&lt;auro-dialog id="default-dialog"&gt;
77
+ &lt;span slot="header"&gt;Dialog header&lt;/span&gt;
78
+ &lt;div slot="content"&gt;Dialog content&lt;/div&gt;
79
+ &lt;div slot="footer"&gt;
80
+ &lt;auro-button id="closeDefault"&gt;Close&lt;/auro-button&gt;
81
+ &lt;/div&gt;
82
+ &lt;/auro-dialog&gt;</code></pre>
83
+ <!-- AURO-GENERATED-CONTENT:END -->
84
+ </div>
85
+ </auro-accordion>
86
+ <auro-accordion class="section" id="cdnAccordion">
87
+ <span slot="trigger">CDN Installation</span>
88
+ <div class="accordion-content">
89
+ <p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
90
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
91
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
92
+ <p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
93
+
94
+ <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>
95
+
96
+ <p>This script registers the <code>&lt;auro-dialog&gt;</code> custom element globally. You can then use it in your HTML:</p>
97
+
98
+ <pre class="language-html"><code class="language-html">&lt;auro-dialog id="cdn-dialog"&gt;
99
+ &lt;span slot="header"&gt;Dialog header&lt;/span&gt;
100
+ &lt;div slot="content"&gt;Dialog content&lt;/div&gt;
101
+ &lt;div slot="footer"&gt;
102
+ &lt;auro-button id="closeCdn"&gt;Close&lt;/auro-button&gt;
103
+ &lt;/div&gt;
104
+ &lt;/auro-dialog&gt;</code></pre>
105
+ <!-- AURO-GENERATED-CONTENT:END -->
106
+ </div>
107
+ </auro-accordion>
108
+ </auro-accordion-group>
109
+ <auro-header level="2" id="frameworks">Frameworks</auro-header>
110
+ <auro-accordion-group Emphasis>
111
+ <auro-accordion class="section" id="react">
112
+ <span slot="trigger">React</span>
113
+ <div class="accordion-content">
114
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
115
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
116
+ React 19 includes <auro-hyperlink href="https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements">native support for custom elements</auro-hyperlink>, so <code>&lt;auro-dialog&gt;</code> works directly in JSX without any wrapper library.
117
+
118
+ <auro-header level="3" id="reactImport">Import the Component</auro-header>
119
+ Import and register the component at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):
120
+
121
+ <pre class="language-js"><code class="language-js">import { AuroDialog } from '@aurodesignsystem/auro-dialog/class';
122
+ ​
123
+ AuroDialog.register('custom-dialog');</code></pre>
124
+
125
+ <auro-header level="3" id="reactTypeScript">TypeScript Declarations</auro-header>
126
+ The component ships with TypeScript type definitions for the `AuroDialog` class. However, React's JSX does not automatically map custom element tag names to their types. React 19 removed the global `JSX` namespace, so custom element types are registered by augmenting the `react` module rather than using `declare global`. Add the following declaration to a `.d.ts` file in your project:
127
+
128
+ <pre class="language-ts"><code class="language-ts">import type { HTMLAttributes } from 'react';
129
+ import type { AuroDialog } from '@aurodesignsystem/auro-dialog/class';
130
+ ​
131
+ declare module 'react' {
132
+ namespace JSX {
133
+ interface IntrinsicElements {
134
+ 'custom-dialog': HTMLAttributes&lt;AuroDialog&gt; &amp; Partial&lt;AuroDialog&gt;;
135
+ }
136
+ }
137
+ }</code></pre>
138
+
139
+ If your `tsconfig.json` uses the automatic runtime (`"jsx": "react-jsx"`, the React 19 default) and the types are not picked up, augment `'react/jsx-runtime'` instead of `'react'`.
140
+
141
+ <auro-header level="3" id="reactState">Controlling the Open State</auro-header>
142
+ The dialog's visibility is controlled by the `open` attribute. Use component state to toggle it, and listen for the component's `toggle` event (which fires when the dialog closes) to keep your state in sync:
143
+
144
+ <pre class="language-jsx"><code class="language-jsx">import { useState, useRef, useEffect } from 'react';
145
+ ​
146
+ export default function Example() {
147
+ const dialogRef = useRef(null);
148
+ const [open, setOpen] = useState(false);
149
+ ​
150
+ useEffect(() =&gt; {
151
+ const dialog = dialogRef.current;
152
+ const handleToggle = () =&gt; setOpen(false);
153
+ dialog?.addEventListener('toggle', handleToggle);
154
+ return () =&gt; dialog?.removeEventListener('toggle', handleToggle);
155
+ }, []);
156
+ ​
157
+ return (
158
+ &lt;&gt;
159
+ &lt;auro-button onClick={() =&gt; setOpen(true)}&gt;Open dialog&lt;/auro-button&gt;
160
+ &lt;custom-dialog ref={dialogRef} open={open || undefined}&gt;
161
+ &lt;span slot="header"&gt;Dialog header&lt;/span&gt;
162
+ &lt;div slot="content"&gt;Dialog content&lt;/div&gt;
163
+ &lt;div slot="footer"&gt;
164
+ &lt;auro-button onClick={() =&gt; setOpen(false)}&gt;Close&lt;/auro-button&gt;
165
+ &lt;/div&gt;
166
+ &lt;/custom-dialog&gt;
167
+ &lt;/&gt;
168
+ );
169
+ }</code></pre>
170
+ <!-- AURO-GENERATED-CONTENT:END -->
171
+ </div>
172
+ </auro-accordion>
173
+ <auro-accordion class="section" id="svelte">
174
+ <span slot="trigger">Svelte</span>
175
+ <div class="accordion-content">
176
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
177
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
178
+ Svelte works with custom elements out of the box, so <code>&lt;auro-dialog&gt;</code> can be used directly in your markup.
179
+
180
+ <auro-header level="3" id="svelteImport">Import the Component</auro-header>
181
+ Import and register the component in a script block — either once at the app root, or in the component that uses it:
182
+
183
+ <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
184
+ import { AuroDialog } from '@aurodesignsystem/auro-dialog/class';
185
+ ​
186
+ AuroDialog.register('custom-dialog');
187
+ &lt;/script&gt;</code></pre>
188
+
189
+ <auro-header level="3" id="svelteTypeScript">TypeScript Declarations</auro-header>
190
+ Svelte does not automatically know about custom element attributes. To get autocomplete and type checking for `<auro-dialog>` props in templates, add the following to a `.d.ts` file in your project (e.g. `src/auro-elements.d.ts`):
191
+
192
+ <pre class="language-ts"><code class="language-ts">import type { AuroDialog } from '@aurodesignsystem/auro-dialog/class';
193
+ ​
194
+ declare namespace svelteHTML {
195
+ interface IntrinsicElements {
196
+ 'custom-dialog': Partial&lt;AuroDialog&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroDialog&gt;;
197
+ }
198
+ }</code></pre>
199
+
200
+ <auro-header level="3" id="svelteState">Controlling the Open State</auro-header>
201
+ Bind the `open` attribute to a reactive state value, and listen for the component's `toggle` event to reset it when the dialog is dismissed:
202
+
203
+ <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
204
+ import { AuroDialog } from '@aurodesignsystem/auro-dialog/class';
205
+ ​
206
+ AuroDialog.register('custom-dialog');
207
+ ​
208
+ let open = $state(false);
209
+ &lt;/script&gt;
210
+ &lt;auro-button onclick={() =&gt; (open = true)}&gt;Open dialog&lt;/auro-button&gt;
211
+ &lt;custom-dialog {open} ontoggle={() =&gt; (open = false)}&gt;
212
+ &lt;span slot="header"&gt;Dialog header&lt;/span&gt;
213
+ &lt;div slot="content"&gt;Dialog content&lt;/div&gt;
214
+ &lt;div slot="footer"&gt;
215
+ &lt;auro-button onclick={() =&gt; (open = false)}&gt;Close&lt;/auro-button&gt;
216
+ &lt;/div&gt;
217
+ &lt;/custom-dialog&gt;</code></pre>
218
+
219
+ <auro-header level="3" id="svelteModuleResolution">Module Resolution</auro-header>
220
+ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
221
+
222
+ <pre class="language-json"><code class="language-json">{
223
+ "compilerOptions": {
224
+ "moduleResolution": "bundler"
225
+ }
226
+ }</code></pre>
227
+ <!-- AURO-GENERATED-CONTENT:END -->
228
+ </div>
229
+ </auro-accordion>
230
+ </auro-accordion-group>
231
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/minimal-config.md) -->
232
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/minimal-config.md -->
233
+ <auro-header level="2" id="minimalConfig">Minimal Configuration</auro-header>
234
+ <p>Every <code>&lt;auro-dialog&gt;</code> implementation requires:</p>
235
+ <ul>
236
+ <li><strong>A unique <code>id</code> attribute</strong> — so the dialog can be targeted by the trigger that opens it.</li>
237
+ <li><strong>Content in the <code>header</code>, <code>content</code>, and <code>footer</code> slots</strong> — the three structural regions of a formatted dialog. The <code>footer</code> is reserved for action buttons.</li>
238
+ <li><strong>A trigger that toggles the <code>open</code> state</strong> — the dialog does not open on its own; a control on the page sets its <code>open</code> attribute (or <code>open</code> property) to <code>true</code>.</li>
239
+ </ul>
240
+
241
+ <pre class="language-html"><code class="language-html">&lt;auro-dialog id="minimal"&gt;
242
+ &lt;span slot="header"&gt;Header content&lt;/span&gt;
243
+ &lt;div slot="content"&gt;Body content&lt;/div&gt;
244
+ &lt;div slot="footer"&gt;
245
+ &lt;auro-button id="closeMinimal"&gt;Close&lt;/auro-button&gt;
246
+ &lt;/div&gt;
247
+ &lt;/auro-dialog&gt;</code></pre>
248
+
249
+ <auro-header level="3" id="minimalConfigTrigger">Opening and closing the dialog</auro-header>
250
+ <p>The <code>open</code> state is controlled via the <code>open</code> attribute, or programmatically by setting the <code>open</code> property to <code>true</code>. The example below toggles the attribute from a helper function:</p>
251
+
252
+ <pre class="language-js"><code class="language-js">function toggleDialog(dialogID) {
253
+ const dialog = document.querySelector(dialogID);
254
+ ​
255
+ if (dialog.hasAttribute('open')) {
256
+ dialog.removeAttribute('open');
257
+ } else {
258
+ dialog.setAttribute('open', true);
259
+ }
260
+ }</code></pre>
261
+
262
+ <pre class="language-html"><code class="language-html">&lt;auro-button onclick="toggleDialog('#minimal')"&gt;Open dialog&lt;/auro-button&gt;</code></pre>
263
+
264
+ <p>The component also exposes <code>show()</code> and <code>hide()</code> methods for imperative control, and dispatches a <code>toggle</code> event when it closes.</p>
265
+ <!-- AURO-GENERATED-CONTENT:END -->
266
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/slots.md) -->
267
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/slots.md -->
268
+ <auro-header level="2" id="slots">Slots</auro-header>
269
+ <p>The following slots are available on the <code>&lt;auro-dialog&gt;</code> element.</p>
270
+ <auro-header level="3" id="slot-header">header</auro-header>
271
+ <p>Text to display as the header of the dialog. Rendered inside the dialog's labelled heading (<code>id="dialog-header"</code>), which provides the dialog's accessible name.</p>
272
+ <auro-header level="3" id="slot-content">content</auro-header>
273
+ <p>Injects content into the body of the dialog. In an <code>unformatted</code> dialog this slot fills the entire dialog window edge-to-edge.</p>
274
+ <auro-header level="3" id="slot-footer">footer</auro-header>
275
+ <p>Used for action options, e.g. buttons. In a <code>modal</code> dialog this slot must contain the control that dismisses the dialog, since no default close button is rendered.</p>
276
+ <auro-header level="3" id="slot-ariaLabel-dialog-close">ariaLabel.dialog.close</auro-header>
277
+ <p>Text to describe the "x" icon close button for screen readers. If no text is provided, the default text <code>"Close"</code> is used. Has no effect on <code>modal</code> dialogs, which do not render a close button.</p>
278
+ <!-- AURO-GENERATED-CONTENT:END -->
279
+ <auro-header level="2" id="stateManagement">State Management</auro-header>
280
+ <p>The following properties reflect and control the current state of the component and can be accessed via JavaScript.</p>
281
+ <auro-header level="3" id="open">open</auro-header>
282
+ <p>Gets or sets the visibility of the dialog. Setting <code>open</code> to <code>true</code> shows the dialog; setting it to <code>false</code> hides it. Reflected to the <code>open</code> attribute.</p>
283
+ <auro-header level="3" id="modal">modal</auro-header>
284
+ <p>When <code>true</code>, the dialog is blocking: the close button is not rendered, <code>Esc</code> and backdrop clicks do not dismiss it, and the user must resolve it with an explicit footer action.</p>
285
+ <auro-header level="3" id="triggerElement">triggerElement</auro-header>
286
+ <p>A fallback element to focus when the dialog closes. By default focus returns to whatever element was active (<code>document.activeElement</code>) when the dialog opened; <code>triggerElement</code> is used only when no element was active at that moment.</p>
287
+ <auro-header level="2" id="publicFunctions">Functions</auro-header>
288
+ <p>The following public methods provide imperative control over the dialog.</p>
289
+ <auro-header level="3" id="show">show()</auro-header>
290
+ <p>Opens the dialog. Equivalent to setting the <code>open</code> property to <code>true</code>.</p>
291
+ <auro-header level="3" id="hide">hide()</auro-header>
292
+ <p>Closes the dialog. Equivalent to setting the <code>open</code> property to <code>false</code>. Closing the dialog dispatches the <code>toggle</code> event.</p>
293
+ </div>
294
+ </div>
295
+ </div>
package/demo/index.html CHANGED
@@ -2,62 +2,43 @@
2
2
  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
3
  See LICENSE in the project root for license information.
4
4
 
5
- HTML in this document is standardized and NOT to be edited.
6
- All demo code should be added/edited in ./demo/index.md
7
-
8
- With the exception of adding custom elements if needed for the demo.
9
-
10
- ----------------------- DO NOT EDIT -----------------------------
11
-
5
+ Demo shell. Page content is authored in ../docs/pages/index.md and generated
6
+ into ./index.md. Rendered by ./demo-support.js (remark/rehype), which also
7
+ injects the top page-nav from ./pages.json.
12
8
  -->
13
-
14
9
  <!DOCTYPE html>
15
10
  <html lang="en">
16
11
  <head>
17
12
  <meta charset="UTF-8" />
18
13
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Demo | auro-dialog</title>
14
+ <title>Auro Web Component Demo | auro-dialog | Overview</title>
20
15
 
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-dialog's use of legacy token values at this time -->
16
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
25
17
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
-
27
- <!-- Design Token Alaska Theme -->
28
18
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
30
- <!-- Webcore Stylesheet Alaska Theme -->
31
19
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
33
- <!-- Demo Specific Styles -->
34
20
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
21
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
22
+ <link rel="stylesheet" type="text/css" href="./demo-nav.css" />
23
+ </head>
37
24
  <body class="auro-markdown">
38
25
  <main></main>
39
26
 
27
+ <!-- Custom elements used by the demo pages. -->
28
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
29
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
30
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
31
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
32
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
33
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
34
+
40
35
  <script type="module">
41
- import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
42
- import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
43
- fetch('./index.md')
44
- .then((response) => response.text())
45
- .then((text) => {
46
- const rawHtml = marked.parse(text);
47
- document.querySelector('main').innerHTML = rawHtml;
48
- Prism.highlightAll();
49
- });
36
+ import { renderPage } from './support/demo-support.js';
37
+ await renderPage('./index.md');
50
38
  </script>
51
-
52
39
  <script type="module" data-demo-script="true">
53
40
  import { initExamples } from './index.min.js';
54
-
55
41
  initExamples();
56
42
  </script>
57
-
58
- <!-- If additional elements are needed for the demo, add them here. -->
59
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
60
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
61
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
62
43
  </body>
63
44
  </html>
package/demo/index.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { initBasicExample } from "../apiExamples/basic";
2
- import { initCustomExample } from "../apiExamples/custom";
2
+ import { initModalExample } from "../apiExamples/modal";
3
3
 
4
4
  import { AuroDialog } from "../src/index";
5
5
 
6
6
  AuroDialog.register();
7
- AuroDialog.register("custom-dialog");
8
7
 
9
8
  export function initExamples(initCount) {
10
9
  // biome-ignore lint/style/noParameterAssign: legacy error handling
@@ -12,7 +11,7 @@ export function initExamples(initCount) {
12
11
 
13
12
  try {
14
13
  initBasicExample();
15
- initCustomExample();
14
+ initModalExample();
16
15
  } catch (_err) {
17
16
  if (initCount <= 20) {
18
17
  // setTimeout handles issue where content is sometimes loaded after the functions get called