@aurodesignsystem/auro-dialog 4.0.0-rc-88.1 → 4.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 (10) hide show
  1. package/CHANGELOG.md +1 -7
  2. package/demo/api.js +0 -2
  3. package/demo/api.md +26 -73
  4. package/demo/api.min.js +0 -14
  5. package/demo/auro-dialog.min.js +27 -71
  6. package/dist/{auro-dialog-a7_PNy6-.js → auro-dialog-GEQYCVM4.js} +21 -38
  7. package/dist/index.d.ts +16 -33
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,15 +1,9 @@
1
- # [4.0.0-rc-88.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v3.1.8...v4.0.0-rc-88.1) (2025-10-21)
1
+ # [4.0.0](https://github.com/AlaskaAirlines/auro-dialog/compare/v3.1.8...v4.0.0) (2025-10-03)
2
2
 
3
3
 
4
4
  * feat!: upgrade package tooling to use auro-cli ([8c9303d](https://github.com/AlaskaAirlines/auro-dialog/commit/8c9303dfd9cd89003fcb8b7db83ed683a067ee6a)), closes [AlaskaAirlines/auro-cli#108](https://github.com/AlaskaAirlines/auro-cli/issues/108) [AlaskaAirlines/auro-cli#109](https://github.com/AlaskaAirlines/auro-cli/issues/109) [AlaskaAirlines/auro-cli#110](https://github.com/AlaskaAirlines/auro-cli/issues/110) [AlaskaAirlines/auro-cli#111](https://github.com/AlaskaAirlines/auro-cli/issues/111)
5
5
 
6
6
 
7
- ### Features
8
-
9
- * add `appearance` deprecated `ondark` [#81](https://github.com/AlaskaAirlines/auro-dialog/issues/81) ([0bbc2b1](https://github.com/AlaskaAirlines/auro-dialog/commit/0bbc2b1057595a08a57b4f91371a53d0800f5a5c))
10
- * add slot for close button aria label [#86](https://github.com/AlaskaAirlines/auro-dialog/issues/86) ([f46da4e](https://github.com/AlaskaAirlines/auro-dialog/commit/f46da4e278747952aefbd09b908ab9a88e64faed))
11
-
12
-
13
7
  ### BREAKING CHANGES
14
8
 
15
9
  * Package exports have changed. To access the component class add /class to the end of the import. See "exports" in the package.json for more details.
package/demo/api.js CHANGED
@@ -5,7 +5,6 @@ import { initEditCloseButtonExample } from "../apiExamples/editCloseButton";
5
5
  import { initModalExample } from "../apiExamples/modal";
6
6
  import { initPopoverAndDropdownExample } from "../apiExamples/popoverAndDropdown";
7
7
  import { initSizeOptionsExample } from "../apiExamples/sizeOptions";
8
- import { initAriaLabelSlotExample } from "../apiExamples/ariaLabelSlot";
9
8
 
10
9
  import "../src/registered"
11
10
 
@@ -21,7 +20,6 @@ export function initExamples(initCount) {
21
20
  initModalExample();
22
21
  initPopoverAndDropdownExample();
23
22
  initSizeOptionsExample();
24
- initAriaLabelSlotExample();
25
23
  } catch (_err) {
26
24
  if (initCount <= 20) {
27
25
  // setTimeout handles issue where content is sometimes loaded after the functions get called
package/demo/api.md CHANGED
@@ -10,18 +10,17 @@ The auro-dialog appears above the page and requires the user's attention.
10
10
  | Attribute | Type | Description |
11
11
  |-----------|-----------|--------------------------------------------------|
12
12
  | [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. |
13
- | [onDark](#onDark) | `Boolean` | DEPRECATED - use `close-button-appearance="inverse" instead. |
13
+ | [onDark](#onDark) | `Boolean` | Sets close icon to white for dark backgrounds |
14
14
  | [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. |
15
15
 
16
16
  ## Properties
17
17
 
18
- | Property | Attribute | Type | Default | Description |
19
- |-------------------------|---------------------------|---------------|-------------|--------------------------------------------------|
20
- | [closeButtonAppearance](#closeButtonAppearance) | `close-button-appearance` | `string` | "'default'" | Defines whether the close button should be light colored for use on dark backgrounds. |
21
- | [modal](#modal) | `modal` | `Boolean` | false | Modal dialog restricts the user to take an action (no default close actions) |
22
- | [open](#open) | `open` | `Boolean` | | Sets state of dialog to open |
23
- | [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. |
24
- | [unformatted](#unformatted) | `unformatted` | `Boolean` | false | Unformatted dialog window, edge-to-edge fill for content |
18
+ | Property | Attribute | Type | Default | Description |
19
+ |------------------|---------------|---------------|---------|--------------------------------------------------|
20
+ | [modal](#modal) | `modal` | `Boolean` | false | Modal dialog restricts the user to take an action (no default close actions) |
21
+ | [open](#open) | `open` | `Boolean` | | Sets state of dialog to open |
22
+ | [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. |
23
+ | [unformatted](#unformatted) | `unformatted` | `Boolean` | false | Unformatted dialog window, edge-to-edge fill for content |
25
24
 
26
25
  ## Events
27
26
 
@@ -31,12 +30,11 @@ The auro-dialog appears above the page and requires the user's attention.
31
30
 
32
31
  ## Slots
33
32
 
34
- | Name | Description |
35
- |--------------------------|--------------------------------------------------|
36
- | `ariaLabel.dialog.close` | Text to describe the "x" icon close button for screen readers. Default: "Close". |
37
- | [content](#content) | Injects content into the body of the modal |
38
- | [footer](#footer) | Used for action options, e.g. buttons |
39
- | [header](#header) | Text to display as the header of the modal |
33
+ | Name | Description |
34
+ |-----------|--------------------------------------------|
35
+ | [content](#content) | Injects content into the body of the modal |
36
+ | [footer](#footer) | Used for action options, e.g. buttons |
37
+ | [header](#header) | Text to display as the header of the modal |
40
38
 
41
39
  ## CSS Shadow Parts
42
40
 
@@ -271,7 +269,7 @@ When using this state, the modal dialog must include a button action to dismiss
271
269
  </div>
272
270
  <div slot="footer">
273
271
  <auro-button id="closeDefaultModal">I understand
274
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
272
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
275
273
  </auro-button>
276
274
  </div>
277
275
  </auro-dialog>
@@ -290,7 +288,7 @@ When using this state, the modal dialog must include a button action to dismiss
290
288
  </div>
291
289
  <div slot="footer">
292
290
  <auro-button id="closeMediumModal">I understand
293
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
291
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
294
292
  </auro-button>
295
293
  </div>
296
294
  </auro-dialog>
@@ -309,7 +307,7 @@ When using this state, the modal dialog must include a button action to dismiss
309
307
  </div>
310
308
  <div slot="footer">
311
309
  <auro-button id="closeSmallModal">I understand
312
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
310
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
313
311
  </auro-button>
314
312
  </div>
315
313
  </auro-dialog>
@@ -341,7 +339,7 @@ When using this state, the modal dialog must include a button action to dismiss
341
339
  </div>
342
340
  <div slot="footer">
343
341
  <auro-button id="closeDefaultModal">I understand
344
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
342
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
345
343
  </auro-button>
346
344
  </div>
347
345
  </auro-dialog>
@@ -360,7 +358,7 @@ When using this state, the modal dialog must include a button action to dismiss
360
358
  </div>
361
359
  <div slot="footer">
362
360
  <auro-button id="closeMediumModal">I understand
363
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
361
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
364
362
  </auro-button>
365
363
  </div>
366
364
  </auro-dialog>
@@ -379,7 +377,7 @@ When using this state, the modal dialog must include a button action to dismiss
379
377
  </div>
380
378
  <div slot="footer">
381
379
  <auro-button id="closeSmallModal">I understand
382
- <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
380
+ <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
383
381
  </auro-button>
384
382
  </div>
385
383
  </auro-dialog>
@@ -416,7 +414,7 @@ The use of these combinations will set the first value to the dialog for a deskt
416
414
  <div slot="footer">
417
415
  <auro-button id="closeSmLg">
418
416
  I understand
419
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
417
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
420
418
  </auro-button>
421
419
  </div>
422
420
  </auro-dialog>
@@ -436,7 +434,7 @@ The use of these combinations will set the first value to the dialog for a deskt
436
434
  <div slot="footer">
437
435
  <auro-button id="closeMdLg">
438
436
  I understand
439
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
437
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
440
438
  </auro-button>
441
439
  </div>
442
440
  </auro-dialog>
@@ -468,7 +466,7 @@ The use of these combinations will set the first value to the dialog for a deskt
468
466
  <div slot="footer">
469
467
  <auro-button id="closeSmLg">
470
468
  I understand
471
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
469
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
472
470
  </auro-button>
473
471
  </div>
474
472
  </auro-dialog>
@@ -488,7 +486,7 @@ The use of these combinations will set the first value to the dialog for a deskt
488
486
  <div slot="footer">
489
487
  <auro-button id="closeMdLg">
490
488
  I understand
491
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
489
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
492
490
  </auro-button>
493
491
  </div>
494
492
  </auro-dialog>
@@ -544,7 +542,7 @@ This is a use case where there is a popover and combobox component inside the di
544
542
  <div slot="footer">
545
543
  <auro-button id="closePopAndDrop">
546
544
  I understand
547
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
545
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
548
546
  </auro-button>
549
547
  </div>
550
548
  </auro-dialog>
@@ -597,7 +595,7 @@ This is a use case where there is a popover and combobox component inside the di
597
595
  <div slot="footer">
598
596
  <auro-button id="closePopAndDrop">
599
597
  I understand
600
- <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
598
+ <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
601
599
  </auro-button>
602
600
  </div>
603
601
  </auro-dialog>
@@ -633,7 +631,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
633
631
  <div>
634
632
  <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
635
633
  </div>
636
- <auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
634
+ <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
637
635
  <span slot="content">
638
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" />
639
637
  <div class="unformattedWrapper">
@@ -653,7 +651,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
653
651
  <div>
654
652
  <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
655
653
  </div>
656
- <auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
654
+ <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
657
655
  <span slot="content">
658
656
  <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" />
659
657
  <div class="unformattedWrapper">
@@ -723,51 +721,6 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
723
721
  <!-- AURO-GENERATED-CONTENT:END -->
724
722
  </auro-accordion>
725
723
 
726
- ### Close button aria-label slot
727
-
728
- To customize the aria-label text for the close button, use the `ariaLabel.dialog.close` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
729
-
730
- <div class="exampleWrapper">
731
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlot.html) -->
732
- <!-- The below content is automatically added from ./../apiExamples/ariaLabelSlot.html -->
733
- <div>
734
- <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
735
- </div>
736
- <auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
737
- <span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
738
- <span slot="content">
739
- <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" />
740
- <div class="unformattedWrapper">
741
- <h1 id="dialog-header" class="heading-lg">This is a header</h1>
742
- These are words that are slotted into the scope of the custom element.
743
- </div>
744
- </span>
745
- </auro-dialog>
746
- <!-- AURO-GENERATED-CONTENT:END -->
747
- </div>
748
- <auro-accordion alignRight>
749
- <span slot="trigger">See code</span>
750
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelSlot.html) -->
751
- <!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelSlot.html -->
752
-
753
- ```html
754
- <div>
755
- <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
756
- </div>
757
- <auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
758
- <span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
759
- <span slot="content">
760
- <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" />
761
- <div class="unformattedWrapper">
762
- <h1 id="dialog-header" class="heading-lg">This is a header</h1>
763
- These are words that are slotted into the scope of the custom element.
764
- </div>
765
- </span>
766
- </auro-dialog>
767
- ```
768
- <!-- AURO-GENERATED-CONTENT:END -->
769
- </auro-accordion>
770
-
771
724
  ### Theme Support
772
725
 
773
726
  The component may be restyled using the following code sample and changing the values of the following token(s).
package/demo/api.min.js CHANGED
@@ -178,19 +178,6 @@ function initSizeOptionsExample() {
178
178
  });
179
179
  }
180
180
 
181
- function initAriaLabelSlotExample() {
182
- const button = document.querySelector("#openAriaLabelSlot");
183
- const dialog = document.querySelector("#ariaLabelMdDialog");
184
-
185
- button.addEventListener("click", () => {
186
- if (dialog.hasAttribute("open")) {
187
- dialog.removeAttribute("open");
188
- } else {
189
- dialog.setAttribute("open", true);
190
- }
191
- });
192
- }
193
-
194
181
  AuroDialog.register();
195
182
 
196
183
  function initExamples(initCount) {
@@ -205,7 +192,6 @@ function initExamples(initCount) {
205
192
  initModalExample();
206
193
  initPopoverAndDropdownExample();
207
194
  initSizeOptionsExample();
208
- initAriaLabelSlotExample();
209
195
  } catch (_err) {
210
196
  if (initCount <= 20) {
211
197
  // setTimeout handles issue where content is sometimes loaded after the functions get called