@aurodesignsystem-dev/auro-dialog 0.0.0-pr97.0 → 0.0.0-pr97.2

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 (12) hide show
  1. package/demo/api.html +6 -6
  2. package/demo/api.js +5 -2
  3. package/demo/api.md +21 -23
  4. package/demo/api.min.js +42 -0
  5. package/demo/auro-dialog.min.js +34 -26
  6. package/demo/index.html +3 -3
  7. package/demo/index.md +2 -2
  8. package/dist/{auro-dialog-C3FZ_07u.js → auro-dialog-BGLeu91P.js} +1 -1
  9. package/dist/index.d.ts +5 -7
  10. package/dist/index.js +1 -1
  11. package/dist/registered.js +1 -1
  12. package/package.json +2 -2
package/demo/api.html CHANGED
@@ -54,11 +54,11 @@
54
54
  </script>
55
55
 
56
56
  <!-- If additional elements are needed for the demo, add them here. -->
57
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
58
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-menu@latest/dist/auro-menu__bundled.js" type="module"></script>
59
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-combobox@latest/dist/auro-combobox__bundled.js" type="module"></script>
60
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
61
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-popover@latest/dist/auro-popover__bundled.js" type="module"></script>
62
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
58
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-menu/+esm" type="module"></script>
59
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-combobox/+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-popover@latest/+esm" type="module"></script>
62
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
63
63
  </body>
64
64
  </html>
package/demo/api.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { initAccessibilityExample } from "../apiExamples/accessibility";
2
2
  import { initBasicExample } from "../apiExamples/basic";
3
3
  import { initDecoupledExample } from "../apiExamples/decoupled";
4
- import { initEditCloseButtonExample } from "../apiExamples/part_close-button";
4
+ import { initEditCloseButtonExample } from "../apiExamples/close-button";
5
5
  import { initModalExample } from "../apiExamples/modal";
6
6
  import { initPopoverAndDropdownExample } from "../apiExamples/popover-and-dropdown";
7
7
  import { initSizeOptionsExample } from "../apiExamples/size-options";
8
- import { initAriaLabelSlotExample } from "../apiExamples/slot_aria-label";
8
+ import { initAriaLabelSlotExample } from "../apiExamples/aria-label";
9
9
 
10
10
  import "../src/registered"
11
11
 
@@ -19,6 +19,9 @@ export function initExamples(initCount) {
19
19
  initModalExample();
20
20
  initDecoupledExample();
21
21
  initPopoverAndDropdownExample();
22
+ initEditCloseButtonExample();
23
+ initAriaLabelSlotExample();
24
+ initAccessibilityExample();
22
25
  } catch (_err) {
23
26
  if (initCount <= 20) {
24
27
  // setTimeout handles issue where content is sometimes loaded after the functions get called
package/demo/api.md CHANGED
@@ -3,21 +3,21 @@
3
3
 
4
4
  # auro-dialog
5
5
 
6
- The auro-dialog appears above the page and presents information that requires the users immediate attention.
6
+ The `auro-dialog` appears on top of the page and presents information that requires the users immediate attention.
7
7
 
8
8
  ### Properties & Attributes
9
9
 
10
- | Properties | Attributes | Modifiers | Type | Default | Description |
11
- | --------------------- | ----------------------- | --------- | ---------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
12
- | closeButtonAppearance | close-button-appearance | | `default` \| `inverse` | `default` | Defines whether the close button should be light colored for use on dark backgrounds. |
13
- | lg | lg | | boolean | | Sets the dialog to lg for mobile and the size defined by sm or md for desktop.<br>Must be used in conjunction with sm or md to have an effect. |
14
- | 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. |
15
- | modal | modal | | boolean | `false` | Modal dialog restricts the user to take an action (no default close actions) |
16
- | open | open | | boolean | | Sets state of dialog to open |
17
- | 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. |
18
- | 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. |
19
- | unformatted | unformatted | | boolean | `false` | Unformatted dialog window, edge-to-edge fill for content |
20
- | | onDark | | boolean | | DEPRECATED - use `close-button-appearance="inverse" instead. |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | --------------------- | ----------------------- | --------- | ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
12
+ | closeButtonAppearance | close-button-appearance | | `default` \| `inverse` | `default` | Defines whether the close button should be light colored for use on dark backgrounds. |
13
+ | lg | lg | | boolean | | Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.<br>Must be used in conjunction with sm or md to have an effect. |
14
+ | 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. |
15
+ | modal | modal | | boolean | `false` | Modal dialog restricts the user to take an action (no default close actions) |
16
+ | onDark | onDark | | boolean | | DEPRECATED - use `close-button-appearance="inverse" instead. |
17
+ | open | open | | boolean | | Sets state of dialog to open |
18
+ | 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. |
19
+ | 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. |
20
+ | unformatted | unformatted | | boolean | `false` | Unformatted dialog window, edge-to-edge fill for content |
21
21
 
22
22
  ### Methods
23
23
 
@@ -517,8 +517,8 @@ This property can be used in combination with any other use case of the dialog,
517
517
  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.
518
518
 
519
519
  <div class="exampleWrapper">
520
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slot_aria-label.html) -->
521
- <!-- The below content is automatically added from ./../apiExamples/slot_aria-label.html -->
520
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label.html) -->
521
+ <!-- The below content is automatically added from ./../apiExamples/aria-label.html -->
522
522
  <div>
523
523
  <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
524
524
  </div>
@@ -536,8 +536,8 @@ To customize the aria-label text for the close button, use the `ariaLabel.dialog
536
536
  </div>
537
537
  <auro-accordion alignRight>
538
538
  <span slot="trigger">See code</span>
539
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/slot_aria-label.html) -->
540
- <!-- The below code snippet is automatically added from ./../apiExamples/slot_aria-label.html -->
539
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label.html) -->
540
+ <!-- The below code snippet is automatically added from ./../apiExamples/aria-label.html -->
541
541
 
542
542
  ```html
543
543
  <div>
@@ -564,8 +564,8 @@ To customize the aria-label text for the close button, use the `ariaLabel.dialog
564
564
  The close button can be targetted via the `close-button` CSS part, e.g. `auro-dialog::part(close-button)`.
565
565
 
566
566
  <div class="exampleWrapper">
567
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/part_close-button.html) -->
568
- <!-- The below content is automatically added from ./../apiExamples/part_close-button.html -->
567
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/close-button.html) -->
568
+ <!-- The below content is automatically added from ./../apiExamples/close-button.html -->
569
569
  <div>
570
570
  <auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
571
571
  </div>
@@ -573,7 +573,6 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
573
573
  .example::part(close-button) {
574
574
  top: var(--ds-size-400);
575
575
  right: var(--ds-size-400);
576
- color: var(--ds-color-brand-flamingo-500);
577
576
  }
578
577
  </style>
579
578
  <auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
@@ -589,8 +588,8 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
589
588
  </div>
590
589
  <auro-accordion alignRight>
591
590
  <span slot="trigger">See code</span>
592
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/part_close-button.html) -->
593
- <!-- The below code snippet is automatically added from ./../apiExamples/part_close-button.html -->
591
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/close-button.html) -->
592
+ <!-- The below code snippet is automatically added from ./../apiExamples/close-button.html -->
594
593
 
595
594
  ```html
596
595
  <div>
@@ -600,7 +599,6 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
600
599
  .example::part(close-button) {
601
600
  top: var(--ds-size-400);
602
601
  right: var(--ds-size-400);
603
- color: var(--ds-color-brand-flamingo-500);
604
602
  }
605
603
  </style>
606
604
  <auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
@@ -802,4 +800,4 @@ The component may be restyled by changing the values of the following token(s).
802
800
  --ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
803
801
  }
804
802
  ```
805
- <!-- AURO-GENERATED-CONTENT:END -->
803
+ <!-- AURO-GENERATED-CONTENT:END -->
package/demo/api.min.js CHANGED
@@ -1,5 +1,18 @@
1
1
  import { A as AuroDialog, i as initBasicExample } from './auro-dialog.min.js';
2
2
 
3
+ function initAccessibilityExample() {
4
+ const button = document.querySelector("#openAccessibility");
5
+ const dialog = document.querySelector("#unformattedMdDialog");
6
+
7
+ button.addEventListener("click", () => {
8
+ if (dialog.hasAttribute("open")) {
9
+ dialog.removeAttribute("open");
10
+ } else {
11
+ dialog.setAttribute("open", true);
12
+ }
13
+ });
14
+ }
15
+
3
16
  function initDecoupledExample() {
4
17
  const smLgButtons = [
5
18
  document.querySelector("#openSmLg"),
@@ -34,6 +47,19 @@ function initDecoupledExample() {
34
47
  });
35
48
  }
36
49
 
50
+ function initEditCloseButtonExample() {
51
+ const button = document.querySelector("#openEditDialog");
52
+ const dialog = document.querySelector("#unformattedCustomMdDialog");
53
+
54
+ button.addEventListener("click", () => {
55
+ if (dialog.hasAttribute("open")) {
56
+ dialog.removeAttribute("open");
57
+ } else {
58
+ dialog.setAttribute("open", true);
59
+ }
60
+ });
61
+ }
62
+
37
63
  function initModalExample() {
38
64
  const defaultButtons = [
39
65
  document.querySelector("#openDefaultModal"),
@@ -152,6 +178,19 @@ function initSizeOptionsExample() {
152
178
  });
153
179
  }
154
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
+
155
194
  AuroDialog.register();
156
195
 
157
196
  function initExamples(initCount) {
@@ -164,6 +203,9 @@ function initExamples(initCount) {
164
203
  initModalExample();
165
204
  initDecoupledExample();
166
205
  initPopoverAndDropdownExample();
206
+ initEditCloseButtonExample();
207
+ initAriaLabelSlotExample();
208
+ initAccessibilityExample();
167
209
  } catch (_err) {
168
210
  if (initCount <= 20) {
169
211
  // setTimeout handles issue where content is sometimes loaded after the functions get called
package/demo/auro-dialog.min.js CHANGED
@@ -533,9 +533,9 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
533
533
  </div>
534
534
  `}}
535
535
 
536
- var buttonVersion = '12.2.0';
536
+ var buttonVersion = '12.3.0';
537
537
 
538
- var iconVersion = '9.1.0';
538
+ var iconVersion = '9.1.1';
539
539
 
540
540
  var colorCss = i$5`.dialogOverlay--open{background:var(--ds-auro-dialog-overlay-open-background-color)}.dialogOverlay--modal{background:var(--ds-auro-dialog-overlay-modal-background-color)}.dialog{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width:768px){.dialog{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, .375rem);background-color:transparent}
541
541
  `;
@@ -556,7 +556,6 @@ var tokensCss = i$5`:host{--ds-auro-dialog-container-color: var(--ds-basic-color
556
556
  const ESCAPE_KEYCODE = 27;
557
557
 
558
558
  /**
559
- * @attr {boolean} onDark - DEPRECATED - use `close-button-appearance="inverse" instead.
560
559
  * @slot header - Text to display as the header of the modal
561
560
  * @slot content - Injects content into the body of the modal
562
561
  * @slot footer - Used for action options, e.g. buttons
@@ -609,6 +608,7 @@ class ComponentBase extends i$2 {
609
608
  /**
610
609
  * Defines whether the close button should be light colored for use on dark backgrounds.
611
610
  * @type {'default'|'inverse'}
611
+ * @default 'default'
612
612
  */
613
613
  closeButtonAppearance: {
614
614
  type: String,
@@ -616,17 +616,34 @@ class ComponentBase extends i$2 {
616
616
  reflect: true
617
617
  },
618
618
 
619
+ /**
620
+ * Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
621
+ * Must be used in conjunction with sm or md to have an effect.
622
+ */
623
+ lg: {
624
+ type: Boolean,
625
+ reflect: true
626
+ },
627
+
628
+ /**
629
+ * Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
630
+ */
631
+ md: {
632
+ type: Boolean,
633
+ reflect: true
634
+ },
635
+
619
636
  /**
620
637
  * Modal dialog restricts the user to take an action (no default close actions)
621
638
  */
622
639
  modal: { type: Boolean },
623
640
 
624
641
  /**
625
- * Unformatted dialog window, edge-to-edge fill for content
642
+ * DEPRECATED - use `close-button-appearance="inverse" instead.
626
643
  */
627
- unformatted: {
644
+ onDark: {
628
645
  type: Boolean,
629
- reflect: true,
646
+ reflect: true
630
647
  },
631
648
 
632
649
  /**
@@ -637,38 +654,29 @@ class ComponentBase extends i$2 {
637
654
  reflect: true
638
655
  },
639
656
 
640
- /**
641
- * The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
642
- * @type {HTMLElement}
643
- */
644
- triggerElement: {
645
- type: Object,
646
- attribute: false,
647
- },
648
-
649
657
  /**
650
658
  * Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
651
659
  */
652
660
  sm: {
653
661
  type: Boolean,
654
- reflect: true,
662
+ reflect: true
655
663
  },
656
664
 
657
665
  /**
658
- * Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
659
- */
660
- md: {
661
- type: Boolean,
662
- reflect: true,
666
+ * The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
667
+ * @type {HTMLElement}
668
+ */
669
+ triggerElement: {
670
+ type: Object,
671
+ attribute: false
663
672
  },
664
673
 
665
674
  /**
666
- * Sets the dialog to lg for mobile and the size defined by sm or md for desktop.
667
- * Must be used in conjunction with sm or md to have an effect.
675
+ * Unformatted dialog window, edge-to-edge fill for content
668
676
  */
669
- lg: {
677
+ unformatted: {
670
678
  type: Boolean,
671
- reflect: true,
679
+ reflect: true
672
680
  }
673
681
  };
674
682
  }
@@ -909,7 +917,7 @@ getCloseButton() {
909
917
 
910
918
 
911
919
  /**
912
- * The auro-dialog appears above the page and presents information that requires the users immediate attention.
920
+ * The `auro-dialog` appears on top of the page and presents information that requires the users immediate attention.
913
921
  * @customElement auro-dialog
914
922
  */
915
923
  class AuroDialog extends ComponentBase {
package/demo/index.html CHANGED
@@ -56,8 +56,8 @@
56
56
  </script>
57
57
 
58
58
  <!-- If additional elements are needed for the demo, add them here. -->
59
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
60
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
61
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
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
62
  </body>
63
63
  </html>
package/demo/index.md CHANGED
@@ -45,11 +45,11 @@ It should be noted that the `footer` slot is reserved for the placement of actio
45
45
 
46
46
  ## Example(s)
47
47
 
48
+ ### Basic
49
+
48
50
  The dialog open state is controlled via the `open` attribute, or by programmatically setting the `open` property to `true`.
49
51
  You can see in the example below under the "See Code" section that we are controlling our dialogs by adding and removing the `open` attribute.
50
52
 
51
- ### Basic
52
-
53
53
  <div class="exampleWrapper">
54
54
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
55
55
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
package/dist/{auro-dialog-C3FZ_07u.js → auro-dialog-BGLeu91P.js} RENAMED
@@ -79,7 +79,7 @@ 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,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:{type:Object,attribute:!1},sm:{type:Boolean,reflect:!0},md:{type:Boolean,reflect:!0},lg:{type:Boolean,reflect:!0}}}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=new Event("toggle",{bubbles:!0,cancelable:!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.3.0",L),this.iconTag=e.generateTag("auro-icon","9.1.1",V),this.runtimeUtils=new l}static get properties(){return{closeButtonAppearance:{type:String,attribute:"close-button-appearance",reflect:!0},lg:{type:Boolean,reflect:!0},md:{type:Boolean,reflect:!0},modal:{type:Boolean},onDark:{type:Boolean,reflect:!0},open:{type:Boolean,reflect:!0},sm:{type:Boolean,reflect:!0},triggerElement:{type:Object,attribute:!1},unformatted:{type:Boolean,reflect:!0}}}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=new Event("toggle",{bubbles:!0,cancelable:!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
84
  aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.dialog.close")||"Close"}"
85
85
  variant="ghost"
package/dist/index.d.ts CHANGED
@@ -86,7 +86,7 @@ export type AuroDialogProps = {
86
86
  "close-button-appearance"?: AuroDialog['closeButtonAppearance'];
87
87
  /** Defines whether the close button should be light colored for use on dark backgrounds. */
88
88
  "closeButtonAppearance"?: AuroDialog['closeButtonAppearance'];
89
- /** Sets the dialog to lg for mobile and the size defined by sm or md for desktop.
89
+ /** Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
90
90
  Must be used in conjunction with sm or md to have an effect. */
91
91
  "lg"?: AuroDialog['lg'];
92
92
  /** Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. */
@@ -94,9 +94,7 @@ Must be used in conjunction with sm or md to have an effect. */
94
94
  /** Modal dialog restricts the user to take an action (no default close actions) */
95
95
  "modal"?: AuroDialog['modal'];
96
96
  /** DEPRECATED - use `close-button-appearance="inverse" instead. */
97
- "onDark"?: unknown;
98
- /** DEPRECATED - use `close-button-appearance="inverse" instead. */
99
- "undefined"?: unknown;
97
+ "onDark"?: AuroDialog['onDark'];
100
98
  /** Sets state of dialog to open */
101
99
  "open"?: AuroDialog['open'];
102
100
  /** Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. */
@@ -115,18 +113,18 @@ Must be used in conjunction with sm or md to have an effect. */
115
113
 
116
114
 
117
115
  /**
118
- * The auro-dialog appears above the page and presents information that requires the users immediate attention.
116
+ * The `auro-dialog` appears on top of the page and presents information that requires the users immediate attention.
119
117
  *
120
118
  * ## Attributes & Properties
121
119
  *
122
120
  * Component attributes and properties that can be applied to the element or by using JavaScript.
123
121
  *
124
122
  * - `close-button-appearance`/`closeButtonAppearance`: Defines whether the close button should be light colored for use on dark backgrounds.
125
- * - `lg`: Sets the dialog to lg for mobile and the size defined by sm or md for desktop.
123
+ * - `lg`: Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
126
124
  * Must be used in conjunction with sm or md to have an effect.
127
125
  * - `md`: Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
128
126
  * - `modal`: Modal dialog restricts the user to take an action (no default close actions)
129
- * - `onDark`/`undefined`: DEPRECATED - use `close-button-appearance="inverse" instead.
127
+ * - `onDark`: DEPRECATED - use `close-button-appearance="inverse" instead.
130
128
  * - `open`: Sets state of dialog to open
131
129
  * - `sm`: Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
132
130
  * - `unformatted`: Unformatted dialog window, edge-to-edge fill for content
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroDialog}from"./auro-dialog-C3FZ_07u.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-BGLeu91P.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-C3FZ_07u.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-BGLeu91P.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-pr97.0",
10
+ "version": "0.0.0-pr97.2",
11
11
  "description": "auro-dialog HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "devDependencies": {
27
27
  "@aurodesignsystem/auro-button": "^12.3.0",
28
- "@aurodesignsystem/auro-cli": "^3.4.2",
28
+ "@aurodesignsystem/auro-cli": "^3.5.0",
29
29
  "@aurodesignsystem/auro-config": "^1.3.1",
30
30
  "@aurodesignsystem/auro-icon": "^9.1.1",
31
31
  "@aurodesignsystem/auro-library": "^5.5.4",