@aurodesignsystem-dev/auro-dialog 0.0.0-pr87.1 → 0.0.0-pr90.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 (7) hide show
  1. package/demo/api.md +31 -30
  2. package/demo/auro-dialog.min.js +18 -5
  3. package/dist/{auro-dialog-Dc744HtV.js → auro-dialog-a7_PNy6-.js} +4 -4
  4. package/dist/index.d.ts +4 -4
  5. package/dist/index.js +1 -1
  6. package/dist/registered.js +1 -1
  7. package/package.json +5 -4
package/demo/api.md CHANGED
@@ -10,17 +10,18 @@ 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` | Sets close icon to white for dark backgrounds |
13
+ | [onDark](#onDark) | `Boolean` | DEPRECATED - use `close-button-appearance="inverse" instead. |
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
- | [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 |
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 |
24
25
 
25
26
  ## Events
26
27
 
@@ -30,12 +31,12 @@ The auro-dialog appears above the page and requires the user's attention.
30
31
 
31
32
  ## Slots
32
33
 
33
- | Name | Description |
34
- |-------------------------|--------------------------------------------------|
35
- | `ariaLabel.closeButton` | Text to describe the close button for screen readers. Default: "Close". |
36
- | [content](#content) | Injects content into the body of the modal |
37
- | [footer](#footer) | Used for action options, e.g. buttons |
38
- | [header](#header) | Text to display as the header of the modal |
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 |
39
40
 
40
41
  ## CSS Shadow Parts
41
42
 
@@ -270,7 +271,7 @@ When using this state, the modal dialog must include a button action to dismiss
270
271
  </div>
271
272
  <div slot="footer">
272
273
  <auro-button id="closeDefaultModal">I understand
273
- <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
274
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
274
275
  </auro-button>
275
276
  </div>
276
277
  </auro-dialog>
@@ -289,7 +290,7 @@ When using this state, the modal dialog must include a button action to dismiss
289
290
  </div>
290
291
  <div slot="footer">
291
292
  <auro-button id="closeMediumModal">I understand
292
- <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
293
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
293
294
  </auro-button>
294
295
  </div>
295
296
  </auro-dialog>
@@ -308,7 +309,7 @@ When using this state, the modal dialog must include a button action to dismiss
308
309
  </div>
309
310
  <div slot="footer">
310
311
  <auro-button id="closeSmallModal">I understand
311
- <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
312
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
312
313
  </auro-button>
313
314
  </div>
314
315
  </auro-dialog>
@@ -340,7 +341,7 @@ When using this state, the modal dialog must include a button action to dismiss
340
341
  </div>
341
342
  <div slot="footer">
342
343
  <auro-button id="closeDefaultModal">I understand
343
- <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
344
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
344
345
  </auro-button>
345
346
  </div>
346
347
  </auro-dialog>
@@ -359,7 +360,7 @@ When using this state, the modal dialog must include a button action to dismiss
359
360
  </div>
360
361
  <div slot="footer">
361
362
  <auro-button id="closeMediumModal">I understand
362
- <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
363
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
363
364
  </auro-button>
364
365
  </div>
365
366
  </auro-dialog>
@@ -378,7 +379,7 @@ When using this state, the modal dialog must include a button action to dismiss
378
379
  </div>
379
380
  <div slot="footer">
380
381
  <auro-button id="closeSmallModal">I understand
381
- <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
382
+ <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
382
383
  </auro-button>
383
384
  </div>
384
385
  </auro-dialog>
@@ -415,7 +416,7 @@ The use of these combinations will set the first value to the dialog for a deskt
415
416
  <div slot="footer">
416
417
  <auro-button id="closeSmLg">
417
418
  I understand
418
- <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
419
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
419
420
  </auro-button>
420
421
  </div>
421
422
  </auro-dialog>
@@ -435,7 +436,7 @@ The use of these combinations will set the first value to the dialog for a deskt
435
436
  <div slot="footer">
436
437
  <auro-button id="closeMdLg">
437
438
  I understand
438
- <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
439
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
439
440
  </auro-button>
440
441
  </div>
441
442
  </auro-dialog>
@@ -467,7 +468,7 @@ The use of these combinations will set the first value to the dialog for a deskt
467
468
  <div slot="footer">
468
469
  <auro-button id="closeSmLg">
469
470
  I understand
470
- <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
471
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
471
472
  </auro-button>
472
473
  </div>
473
474
  </auro-dialog>
@@ -487,7 +488,7 @@ The use of these combinations will set the first value to the dialog for a deskt
487
488
  <div slot="footer">
488
489
  <auro-button id="closeMdLg">
489
490
  I understand
490
- <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
491
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
491
492
  </auro-button>
492
493
  </div>
493
494
  </auro-dialog>
@@ -543,7 +544,7 @@ This is a use case where there is a popover and combobox component inside the di
543
544
  <div slot="footer">
544
545
  <auro-button id="closePopAndDrop">
545
546
  I understand
546
- <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
547
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
547
548
  </auro-button>
548
549
  </div>
549
550
  </auro-dialog>
@@ -596,7 +597,7 @@ This is a use case where there is a popover and combobox component inside the di
596
597
  <div slot="footer">
597
598
  <auro-button id="closePopAndDrop">
598
599
  I understand
599
- <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
600
+ <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
600
601
  </auro-button>
601
602
  </div>
602
603
  </auro-dialog>
@@ -632,7 +633,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
632
633
  <div>
633
634
  <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
634
635
  </div>
635
- <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
636
+ <auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
636
637
  <span slot="content">
637
638
  <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" />
638
639
  <div class="unformattedWrapper">
@@ -652,7 +653,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
652
653
  <div>
653
654
  <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
654
655
  </div>
655
- <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
656
+ <auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
656
657
  <span slot="content">
657
658
  <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
658
659
  <div class="unformattedWrapper">
@@ -724,7 +725,7 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
724
725
 
725
726
  ### Close button aria-label slot
726
727
 
727
- To customize the aria-label text for the close button, use the `ariaLabel.closeButton` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
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.
728
729
 
729
730
  <div class="exampleWrapper">
730
731
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlot.html) -->
@@ -733,7 +734,7 @@ To customize the aria-label text for the close button, use the `ariaLabel.closeB
733
734
  <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
734
735
  </div>
735
736
  <auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
736
- <span slot="ariaLabel.closeButton">This will be the new aria label for the close button</span>
737
+ <span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
737
738
  <span slot="content">
738
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" />
739
740
  <div class="unformattedWrapper">
@@ -754,7 +755,7 @@ To customize the aria-label text for the close button, use the `ariaLabel.closeB
754
755
  <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
755
756
  </div>
756
757
  <auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
757
- <span slot="ariaLabel.closeButton">This will be the new aria label for the close button</span>
758
+ <span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
758
759
  <span slot="content">
759
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" />
760
761
  <div class="unformattedWrapper">
package/demo/auro-dialog.min.js CHANGED
@@ -563,13 +563,13 @@ const ESCAPE_KEYCODE = 27;
563
563
  * @attr {Boolean} unformatted - Unformatted dialog window, edge-to-edge fill for content
564
564
  * @attr {Boolean} sm - Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
565
565
  * @attr {Boolean} md - Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
566
- * @attr {Boolean} onDark - Sets close icon to white for dark backgrounds
566
+ * @attr {Boolean} onDark - DEPRECATED - use `close-button-appearance="inverse" instead.
567
567
  * @attr {Boolean} open - Sets state of dialog to open
568
568
  * @prop {HTMLElement} triggerElement - The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
569
569
  * @slot header - Text to display as the header of the modal
570
570
  * @slot content - Injects content into the body of the modal
571
571
  * @slot footer - Used for action options, e.g. buttons
572
- * @slot ariaLabel.closeButton - Text to describe the close button for screen readers. Default: "Close".
572
+ * @slot ariaLabel.dialog.close - Text to describe the "x" icon close button for screen readers. Default: "Close".
573
573
  * @function toggleViewable - toggles the 'open' property on the element
574
574
  * @event toggle - Event fires when the element is closed
575
575
  * @csspart close-button - adjust position of the close X icon in the dialog window
@@ -586,6 +586,7 @@ class ComponentBase extends i$2 {
586
586
 
587
587
  this.modal = false;
588
588
  this.unformatted = false;
589
+ this.closeButtonAppearance = 'default';
589
590
 
590
591
  const versioning = new AuroDependencyVersioning();
591
592
 
@@ -611,6 +612,18 @@ class ComponentBase extends i$2 {
611
612
 
612
613
  static get properties() {
613
614
  return {
615
+
616
+ /**
617
+ * Defines whether the close button should be light colored for use on dark backgrounds.
618
+ * @property {'default', 'inverse'}
619
+ * @default 'default'
620
+ */
621
+ closeButtonAppearance: {
622
+ type: String,
623
+ attribute: 'close-button-appearance',
624
+ reflect: true
625
+ },
626
+
614
627
  modal: { type: Boolean },
615
628
  unformatted: {
616
629
  type: Boolean,
@@ -789,11 +802,11 @@ getCloseButton() {
789
802
  ? u$2``
790
803
  : u$2`
791
804
  <${this.buttonTag}
792
- aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.closeButton') || 'Close'}"
805
+ aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.dialog.close') || 'Close'}"
793
806
  variant="ghost"
794
807
  shape="circle"
795
808
  size="sm"
796
- ?onDark=${this.hasAttribute("onDark")}
809
+ appearance=${this.hasAttribute("ondark") ? 'inverse' : this.closeButtonAppearance}
797
810
  class="dialog-header--action"
798
811
  id="dialog-close"
799
812
  @click="${this.handleCloseButtonClick}"
@@ -818,7 +831,7 @@ getCloseButton() {
818
831
 
819
832
  return u$2`
820
833
  <!-- Hidden slot for close button aria-label -->
821
- <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
834
+ <slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
822
835
 
823
836
  <div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
824
837
 
package/dist/{auro-dialog-Dc744HtV.js → auro-dialog-a7_PNy6-.js} RENAMED
@@ -79,13 +79,13 @@ import{css as e,LitElement as t,html as s}from"lit";import{classMap as a}from"li
79
79
  `,J=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--insetPaddingXl: 0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl: 0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl: 0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.dialogOverlay--open{z-index:var(--ds-depth-overlay);pointer-events:unset;transition:background .3s cubic-bezier(.4,0,.2,0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(.4,0,.5,0)}.dialog{position:fixed;z-index:-1;right:0;bottom:-100%;left:0;box-sizing:border-box;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;transition:all .3s ease-in-out}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:0;height:0;overflow:hidden}.dialog--open{opacity:1;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem);margin-bottom:var(--ds-size-300, 1.5rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-header .heading{flex:1;margin-block:0}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain;margin:calc(-1 * var(--ds-size-100));padding:var(--ds-size-100)}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);bottom:unset;right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);bottom:unset;right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;bottom:unset;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;bottom:unset;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;bottom:unset;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}
80
80
  `,Q=e`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}
81
81
  `,Y=e`:host{--ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, .2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
82
- `;class Z extends t{constructor(){super(),this.modal=!1,this.unformatted=!1;const e=new d;this.buttonTag=e.generateTag("auro-button","12.2.0",L),this.iconTag=e.generateTag("auro-icon","9.1.0",V),this.runtimeUtils=new l}static get properties(){return{modal:{type:Boolean},unformatted:{type:Boolean,reflect:!0},open:{type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-dialog");const e=this.shadowRoot.querySelector("#footer"),t=this.shadowRoot.querySelector("#footerWrapper");this.dialog=this.shadowRoot.getElementById("dialog"),this.unformatted||0!==e.assignedNodes().length||t.classList.remove("dialog-footer")}updated(e){e.has("open")&&(this.open?this.openDialog():this.closeDialog())}connectedCallback(){super.connectedCallback(),this.keydownEventHandler=this.handleKeydown.bind(this),window.addEventListener("keydown",this.keydownEventHandler)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.keydownEventHandler)}openDialog(){this.defaultTrigger=document.activeElement,this.focusTrap=new p(this.dialog)}onDialogTransitionEnd(){this.open&&this.focusTrap&&this.focusTrap.focusFirstElement()}closeDialog(){this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=void 0),this.defaultTrigger&&(this.defaultTrigger.focus(),this.defaultTrigger=void 0),this.dispatchToggleEvent()}dispatchToggleEvent(){const e=document.createEvent("HTMLEvents");e.initEvent("toggle",!0,!1),this.dispatchEvent(e)}handleOverlayClick(){if(this.open&&!this.modal){const e=[...this.querySelectorAll("auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]")];[...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),...e.map(e=>e.dropdown)].some(e=>e.isPopoverVisible)||this.handleCloseButtonClick()}}handleCloseButtonClick(){this.open=!1}handleKeydown({key:e,keyCode:t}){!this.open||this.modal||"Escape"!==e&&27!==t||(this.open=!1)}focus(){this.open&&this.dialog.focus()}static get styles(){return[J,Q,K,Y]}getCloseButton(){return this.modal?i``:i`
82
+ `;class Z extends t{constructor(){super(),this.modal=!1,this.unformatted=!1,this.closeButtonAppearance="default";const e=new d;this.buttonTag=e.generateTag("auro-button","12.2.0",L),this.iconTag=e.generateTag("auro-icon","9.1.0",V),this.runtimeUtils=new l}static get properties(){return{closeButtonAppearance:{type:String,attribute:"close-button-appearance",reflect:!0},modal:{type:Boolean},unformatted:{type:Boolean,reflect:!0},open:{type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-dialog");const e=this.shadowRoot.querySelector("#footer"),t=this.shadowRoot.querySelector("#footerWrapper");this.dialog=this.shadowRoot.getElementById("dialog"),this.unformatted||0!==e.assignedNodes().length||t.classList.remove("dialog-footer")}updated(e){e.has("open")&&(this.open?this.openDialog():this.closeDialog())}connectedCallback(){super.connectedCallback(),this.keydownEventHandler=this.handleKeydown.bind(this),window.addEventListener("keydown",this.keydownEventHandler)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.keydownEventHandler)}openDialog(){this.defaultTrigger=document.activeElement,this.focusTrap=new p(this.dialog)}onDialogTransitionEnd(){this.open&&this.focusTrap&&this.focusTrap.focusFirstElement()}closeDialog(){this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=void 0),this.defaultTrigger&&(this.defaultTrigger.focus(),this.defaultTrigger=void 0),this.dispatchToggleEvent()}dispatchToggleEvent(){const e=document.createEvent("HTMLEvents");e.initEvent("toggle",!0,!1),this.dispatchEvent(e)}handleOverlayClick(){if(this.open&&!this.modal){const e=[...this.querySelectorAll("auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]")];[...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),...e.map(e=>e.dropdown)].some(e=>e.isPopoverVisible)||this.handleCloseButtonClick()}}handleCloseButtonClick(){this.open=!1}handleKeydown({key:e,keyCode:t}){!this.open||this.modal||"Escape"!==e&&27!==t||(this.open=!1)}focus(){this.open&&this.dialog.focus()}static get styles(){return[J,Q,K,Y]}getCloseButton(){return this.modal?i``:i`
83
83
  <${this.buttonTag}
84
- aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.closeButton")||"Close"}"
84
+ aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.dialog.close")||"Close"}"
85
85
  variant="ghost"
86
86
  shape="circle"
87
87
  size="sm"
88
- ?onDark=${this.hasAttribute("onDark")}
88
+ appearance=${this.hasAttribute("ondark")?"inverse":this.closeButtonAppearance}
89
89
  class="dialog-header--action"
90
90
  id="dialog-close"
91
91
  @click="${this.handleCloseButtonClick}"
@@ -95,7 +95,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{classMap as a}from"li
95
95
  </${this.buttonTag}>
96
96
  `}render(){const e={dialogOverlay:!0,"dialogOverlay--modal":this.modal&&this.open,"dialogOverlay--open":this.open,util_displayHidden:!this.open},t={dialog:!0,"dialog--open":this.open};return i`
97
97
  <!-- Hidden slot for close button aria-label -->
98
- <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
98
+ <slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
99
99
 
100
100
  <div class="${a(e)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
101
101
 
package/dist/index.d.ts CHANGED
@@ -84,13 +84,13 @@ class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,cl
84
84
  `,J=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--insetPaddingXl: 0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl: 0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl: 0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.dialogOverlay--open{z-index:var(--ds-depth-overlay);pointer-events:unset;transition:background .3s cubic-bezier(.4,0,.2,0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(.4,0,.5,0)}.dialog{position:fixed;z-index:-1;right:0;bottom:-100%;left:0;box-sizing:border-box;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;transition:all .3s ease-in-out}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:0;height:0;overflow:hidden}.dialog--open{opacity:1;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem);margin-bottom:var(--ds-size-300, 1.5rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-header .heading{flex:1;margin-block:0}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain;margin:calc(-1 * var(--ds-size-100));padding:var(--ds-size-100)}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);bottom:unset;right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);bottom:unset;right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;bottom:unset;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;bottom:unset;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;bottom:unset;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}
85
85
  `,Q=css`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}
86
86
  `,Y=css`:host{--ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, .2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
87
- `;class Z extends LitElement{constructor(){super(),this.modal=false,this.unformatted=false;const e=new d;this.buttonTag=e.generateTag("auro-button","12.2.0",L),this.iconTag=e.generateTag("auro-icon","9.1.0",V),this.runtimeUtils=new l;}static get properties(){return {modal:{type:Boolean},unformatted:{type:Boolean,reflect:true},open:{type:Boolean,reflect:true},triggerElement:{attribute:false}}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-dialog");const e=this.shadowRoot.querySelector("#footer"),t=this.shadowRoot.querySelector("#footerWrapper");this.dialog=this.shadowRoot.getElementById("dialog"),this.unformatted||0!==e.assignedNodes().length||t.classList.remove("dialog-footer");}updated(e){e.has("open")&&(this.open?this.openDialog():this.closeDialog());}connectedCallback(){super.connectedCallback(),this.keydownEventHandler=this.handleKeydown.bind(this),window.addEventListener("keydown",this.keydownEventHandler);}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.keydownEventHandler);}openDialog(){this.defaultTrigger=document.activeElement,this.focusTrap=new p(this.dialog);}onDialogTransitionEnd(){this.open&&this.focusTrap&&this.focusTrap.focusFirstElement();}closeDialog(){this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=void 0),this.defaultTrigger&&(this.defaultTrigger.focus(),this.defaultTrigger=void 0),this.dispatchToggleEvent();}dispatchToggleEvent(){const e=document.createEvent("HTMLEvents");e.initEvent("toggle",true,false),this.dispatchEvent(e);}handleOverlayClick(){if(this.open&&!this.modal){const e=[...this.querySelectorAll("auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]")];[...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),...e.map(e=>e.dropdown)].some(e=>e.isPopoverVisible)||this.handleCloseButtonClick();}}handleCloseButtonClick(){this.open=false;}handleKeydown({key:e,keyCode:t}){!this.open||this.modal||"Escape"!==e&&27!==t||(this.open=false);}focus(){this.open&&this.dialog.focus();}static get styles(){return [J,Q,K,Y]}getCloseButton(){return this.modal?html``:html`
87
+ `;class Z extends LitElement{constructor(){super(),this.modal=false,this.unformatted=false,this.closeButtonAppearance="default";const e=new d;this.buttonTag=e.generateTag("auro-button","12.2.0",L),this.iconTag=e.generateTag("auro-icon","9.1.0",V),this.runtimeUtils=new l;}static get properties(){return {closeButtonAppearance:{type:String,attribute:"close-button-appearance",reflect:true},modal:{type:Boolean},unformatted:{type:Boolean,reflect:true},open:{type:Boolean,reflect:true},triggerElement:{attribute:false}}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-dialog");const e=this.shadowRoot.querySelector("#footer"),t=this.shadowRoot.querySelector("#footerWrapper");this.dialog=this.shadowRoot.getElementById("dialog"),this.unformatted||0!==e.assignedNodes().length||t.classList.remove("dialog-footer");}updated(e){e.has("open")&&(this.open?this.openDialog():this.closeDialog());}connectedCallback(){super.connectedCallback(),this.keydownEventHandler=this.handleKeydown.bind(this),window.addEventListener("keydown",this.keydownEventHandler);}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.keydownEventHandler);}openDialog(){this.defaultTrigger=document.activeElement,this.focusTrap=new p(this.dialog);}onDialogTransitionEnd(){this.open&&this.focusTrap&&this.focusTrap.focusFirstElement();}closeDialog(){this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=void 0),this.defaultTrigger&&(this.defaultTrigger.focus(),this.defaultTrigger=void 0),this.dispatchToggleEvent();}dispatchToggleEvent(){const e=document.createEvent("HTMLEvents");e.initEvent("toggle",true,false),this.dispatchEvent(e);}handleOverlayClick(){if(this.open&&!this.modal){const e=[...this.querySelectorAll("auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]")];[...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),...e.map(e=>e.dropdown)].some(e=>e.isPopoverVisible)||this.handleCloseButtonClick();}}handleCloseButtonClick(){this.open=false;}handleKeydown({key:e,keyCode:t}){!this.open||this.modal||"Escape"!==e&&27!==t||(this.open=false);}focus(){this.open&&this.dialog.focus();}static get styles(){return [J,Q,K,Y]}getCloseButton(){return this.modal?html``:html`
88
88
  <${this.buttonTag}
89
- aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.closeButton")||"Close"}"
89
+ aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.dialog.close")||"Close"}"
90
90
  variant="ghost"
91
91
  shape="circle"
92
92
  size="sm"
93
- ?onDark=${this.hasAttribute("onDark")}
93
+ appearance=${this.hasAttribute("ondark")?"inverse":this.closeButtonAppearance}
94
94
  class="dialog-header--action"
95
95
  id="dialog-close"
96
96
  @click="${this.handleCloseButtonClick}"
@@ -100,7 +100,7 @@ class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,cl
100
100
  </${this.buttonTag}>
101
101
  `}render(){const e={dialogOverlay:true,"dialogOverlay--modal":this.modal&&this.open,"dialogOverlay--open":this.open,util_displayHidden:!this.open},t={dialog:true,"dialog--open":this.open};return html`
102
102
  <!-- Hidden slot for close button aria-label -->
103
- <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
103
+ <slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
104
104
 
105
105
  <div class="${classMap(e)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
106
106
 
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroDialog}from"./auro-dialog-Dc744HtV.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";
1
+ export{A as AuroDialog}from"./auro-dialog-a7_PNy6-.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";
package/dist/registered.js CHANGED
@@ -1 +1 @@
1
- import{A as i}from"./auro-dialog-Dc744HtV.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";i.register();
1
+ import{A as i}from"./auro-dialog-a7_PNy6-.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";i.register();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-dialog",
10
- "version": "0.0.0-pr87.1",
10
+ "version": "0.0.0-pr90.0",
11
11
  "description": "auro-dialog HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -18,7 +18,7 @@
18
18
  "types": "dist/index.d.ts",
19
19
  "license": "Apache-2.0",
20
20
  "engines": {
21
- "node": "^20.x || ^22.x"
21
+ "node": ">=20"
22
22
  },
23
23
  "dependencies": {
24
24
  "lit": "^3.3.1"
@@ -26,7 +26,7 @@
26
26
  "devDependencies": {
27
27
  "@aurodesignsystem/auro-button": "^12.2.0",
28
28
  "@aurodesignsystem/auro-cli": "^3.0.4",
29
- "@aurodesignsystem/auro-config": "^1.3.0",
29
+ "@aurodesignsystem/auro-config": "^1.3.1",
30
30
  "@aurodesignsystem/auro-icon": "^9.1.0",
31
31
  "@aurodesignsystem/auro-library": "^5.5.4",
32
32
  "@aurodesignsystem/design-tokens": "^8.5.0",
@@ -41,7 +41,8 @@
41
41
  "last 2 Safari major versions"
42
42
  ],
43
43
  "publishConfig": {
44
- "access": "public"
44
+ "access": "public",
45
+ "provenance": true
45
46
  },
46
47
  "keywords": [
47
48
  "alaska airlines",