@aurodesignsystem-dev/auro-toast 0.0.0-pr147.2 → 0.0.0-pr148.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.
package/README.md CHANGED
@@ -49,7 +49,9 @@ The `<auro-toast>` use cases include:
49
49
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-toast?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
50
50
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
51
51
 
52
- <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-toast</code></pre>
52
+ ```shell
53
+ $ npm i @aurodesignsystem/auro-toast
54
+ ```
53
55
 
54
56
  <!-- AURO-GENERATED-CONTENT:END -->
55
57
 
@@ -61,7 +63,9 @@ Defining the dependency within each project that is using the `<auro-toast>` com
61
63
  <!-- AURO-GENERATED-CONTENT:END -->
62
64
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
63
65
 
64
- <pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-toast";</code></pre>
66
+ ```js
67
+ import "@aurodesignsystem/auro-toast";
68
+ ```
65
69
 
66
70
  <!-- AURO-GENERATED-CONTENT:END -->
67
71
 
@@ -70,7 +74,9 @@ Defining the dependency within each project that is using the `<auro-toast>` com
70
74
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
71
75
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
72
76
 
73
- <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"&gt;&lt;/script&gt;</code></pre>
77
+ ```html
78
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"></script>
79
+ ```
74
80
 
75
81
  <!-- AURO-GENERATED-CONTENT:END -->
76
82
 
@@ -79,16 +85,18 @@ In cases where the project is not able to process JS assets, there are pre-proce
79
85
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
80
86
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
81
87
 
82
- <pre class="language-html"><code class="language-html">&lt;auro-button id="basicToastBtn"&gt;
88
+ ```html
89
+ <auro-button id="basicToastBtn">
83
90
  Show default notification
84
- &lt;/auro-button&gt;
85
- &lt;!--
91
+ </auro-button>
92
+ <!--
86
93
  NOTE: The manually added style is NOT necessary for use,
87
94
  Demo purposes ONLY!
88
- --&gt;
89
- &lt;auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast"&gt;
95
+ -->
96
+ <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
90
97
  Default notification with no error type.
91
- &lt;/auro-toast&gt;</code></pre>
98
+ </auro-toast>
99
+ ```
92
100
  <!-- AURO-GENERATED-CONTENT:END -->
93
101
 
94
102
  ## Custom Component Registration for Version Management
@@ -105,35 +113,39 @@ You can do this by importing only the component class and using the `register(na
105
113
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
106
114
  <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
107
115
 
108
- <pre class="language-js"><code class="language-js">// Import the class only
116
+ ```js
117
+ // Import the class only
109
118
  import { AuroToast } from '@aurodesignsystem/auro-toast/class';
110
-
119
+
111
120
  // Register with a custom name if desired
112
- AuroToast.register('custom-toast');</code></pre>
121
+ AuroToast.register('custom-toast');
122
+ ```
113
123
 
114
124
  This will create a new custom element `<custom-toast>` that behaves exactly like `<auro-toast>`, allowing both to coexist on the same page without interfering with each other.
115
125
  <!-- AURO-GENERATED-CONTENT:END -->
116
126
  <div class="exampleWrapper exampleWrapper--flex">
117
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
118
- <!-- The below content is automatically added from ./apiExamples/custom.html -->
119
- <auro-button id="customToastBtn">
127
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
128
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
129
+ <auro-button id="customToastBtn">
120
130
  Show default notification
121
- </auro-button>
122
- <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
131
+ </auro-button>
132
+ <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
123
133
  Default notification with no error type.
124
- </custom-toast>
125
- <!-- AURO-GENERATED-CONTENT:END -->
134
+ </custom-toast>
135
+ <!-- AURO-GENERATED-CONTENT:END -->
126
136
  </div>
127
137
  <auro-accordion alignRight>
128
- <span slot="trigger">See code</span>
138
+ <span slot="trigger">See code</span>
129
139
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
130
140
  <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
131
141
 
132
- <pre class="language-html"><code class="language-html">&lt;auro-button id="customToastBtn"&gt;
142
+ ```html
143
+ <auro-button id="customToastBtn">
133
144
  Show default notification
134
- &lt;/auro-button&gt;
135
- &lt;custom-toast style="display: block; margin: 0.5rem 0;" id="customToast"&gt;
145
+ </auro-button>
146
+ <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
136
147
  Default notification with no error type.
137
- &lt;/custom-toast&gt;</code></pre>
148
+ </custom-toast>
149
+ ```
138
150
  <!-- AURO-GENERATED-CONTENT:END -->
139
151
  </auro-accordion>
package/demo/api.md CHANGED
@@ -9,9 +9,9 @@ The `auro-toast` element provides users a way to display short, temporary messag
9
9
 
10
10
  | Properties | Attributes | Modifiers | Type | Default | Description |
11
11
  | --------------- | --------------- | --------- | -------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
12
- | disableAutoHide | disableautohide | | boolean | | Prevents the toast from auto-hiding on the default time. |
13
- | noIcon | noicon | | boolean | | Removes icon from the toast UI. |
14
- | timeTilHide | timetilhide | | number | | Sets the time in milliseconds until the toast hides. |
12
+ | disableAutoHide | disableAutoHide | | boolean | | Prevents the toast from auto-hiding on the default time. |
13
+ | noIcon | noIcon | | boolean | | Removes icon from the toast UI. |
14
+ | timeTilHide | timeTilHide | | number | | Sets the time in milliseconds until the toast hides. |
15
15
  | trigger | trigger | | string | | The id of the element that triggered the toast.<br>When the toast is manually closed, focus will return to this element.<br>Takes precedence over the triggerElement property if both are set. |
16
16
  | triggerElement | | | HTMLElement | | A direct reference to the element that triggered the toast.<br>When the toast is manually closed, focus will return to this element.<br>Use the trigger attribute instead if you prefer a declarative approach. |
17
17
  | variant | variant | | `error` \| `success` \| `custom` | | Component will render visually based on which variant value is set. |
@@ -25,10 +25,9 @@ The `auro-toast` element provides users a way to display short, temporary messag
25
25
 
26
26
  ### Events
27
27
 
28
- | Name | Description |
29
- | ------------ | ------------------------------------------------ |
30
- | toast-close | Notifies that the toast has been closed |
31
- | onToastClose | **Deprecated**, use `toast-close` event instead. |
28
+ | Name | Description |
29
+ | ------------ | --------------------------------------- |
30
+ | onToastClose | Notifies that the toast has been closed |
32
31
 
33
32
  ### CSS Shadow Parts
34
33
 
@@ -514,7 +513,7 @@ export function initDynamicToastsExample() {
514
513
  console.log("Toast added:", toastId);
515
514
 
516
515
  // optional cleanup if your component doesn't auto-remove itself
517
- toast.addEventListener("toast-close", () =&gt; {
516
+ toast.addEventListener("onToastClose", () =&gt; {
518
517
  activeToasts.delete(toastId);
519
518
  });
520
519
  });
package/demo/api.min.js CHANGED
@@ -182,7 +182,7 @@ function initDynamicToastsExample() {
182
182
  console.log("Toast added:", toastId);
183
183
 
184
184
  // optional cleanup if your component doesn't auto-remove itself
185
- toast.addEventListener("toast-close", () => {
185
+ toast.addEventListener("onToastClose", () => {
186
186
  activeToasts.delete(toastId);
187
187
  });
188
188
  });
@@ -538,8 +538,7 @@ const FADE_OUT_DURATION = 300;
538
538
  *
539
539
  * @csspart type-icon - Apply css to the toast type icon
540
540
  * @csspart close-button - Apply css to the toast close button
541
- * @fires onToastClose - **Deprecated**, use `toast-close` event instead.
542
- * @event toast-close - Notifies that the toast has been closed
541
+ * @fires onToastClose - Notifies that the toast has been closed
543
542
  */
544
543
 
545
544
  // build the component class
@@ -647,7 +646,6 @@ class AuroToast extends i$2 {
647
646
  disableAutoHide: {
648
647
  type: Boolean,
649
648
  reflect: true,
650
- attribute: "disableautohide",
651
649
  },
652
650
 
653
651
  /**
@@ -656,7 +654,6 @@ class AuroToast extends i$2 {
656
654
  noIcon: {
657
655
  type: Boolean,
658
656
  reflect: true,
659
- attribute: "noicon",
660
657
  },
661
658
 
662
659
  /**
@@ -665,7 +662,6 @@ class AuroToast extends i$2 {
665
662
  timeTilHide: {
666
663
  type: Number,
667
664
  reflect: true,
668
- attribute: "timetilhide",
669
665
  },
670
666
 
671
667
  /**
@@ -783,29 +779,15 @@ class AuroToast extends i$2 {
783
779
  /**
784
780
  * Emits closed toast event.
785
781
  *
786
- * @deprecated Use `toast-close` event instead.
787
782
  * @event onToastClose
788
- * @type {{ visible: boolean }}
783
+ * @type {object}
784
+ * @property {boolean} false - Sets visibility value for the toast element.
789
785
  */
790
786
  this.dispatchEvent(
791
787
  new CustomEvent("onToastClose", {
792
788
  bubbles: true,
793
789
  composed: true,
794
- detail: { visible: this.visible },
795
- }),
796
- );
797
-
798
- /**
799
- * Emits closed toast event.
800
- *
801
- * @event toast-close
802
- * @type {{ visible: boolean }}
803
- */
804
- this.dispatchEvent(
805
- new CustomEvent("toast-close", {
806
- bubbles: true,
807
- composed: true,
808
- detail: { visible: this.visible },
790
+ detail: this,
809
791
  }),
810
792
  );
811
793
  }
@@ -954,12 +936,14 @@ class AuroToast extends i$2 {
954
936
 
955
937
  render() {
956
938
  return u$2`
957
- ${this.visible
958
- ? u$2`
939
+ ${
940
+ this.visible
941
+ ? u$2`
959
942
  <div class="toastContainer">
960
- ${this.noIcon
961
- ? undefined
962
- : u$2`
943
+ ${
944
+ this.noIcon
945
+ ? undefined
946
+ : u$2`
963
947
  <${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
964
948
  ${this.variant === "custom" ? undefined : u$2`${this.getVariantIcon()}`}
965
949
  </${this.iconTag}>
@@ -981,7 +965,7 @@ class AuroToast extends i$2 {
981
965
  </${this.buttonTag}>
982
966
  </div>
983
967
  `
984
- : undefined
968
+ : undefined
985
969
  }
986
970
  `;
987
971
  }
package/demo/index.min.js CHANGED
@@ -289,8 +289,7 @@ const FADE_OUT_DURATION = 300;
289
289
  *
290
290
  * @csspart type-icon - Apply css to the toast type icon
291
291
  * @csspart close-button - Apply css to the toast close button
292
- * @fires onToastClose - **Deprecated**, use `toast-close` event instead.
293
- * @event toast-close - Notifies that the toast has been closed
292
+ * @fires onToastClose - Notifies that the toast has been closed
294
293
  */
295
294
 
296
295
  // build the component class
@@ -398,7 +397,6 @@ class AuroToast extends i$2 {
398
397
  disableAutoHide: {
399
398
  type: Boolean,
400
399
  reflect: true,
401
- attribute: "disableautohide",
402
400
  },
403
401
 
404
402
  /**
@@ -407,7 +405,6 @@ class AuroToast extends i$2 {
407
405
  noIcon: {
408
406
  type: Boolean,
409
407
  reflect: true,
410
- attribute: "noicon",
411
408
  },
412
409
 
413
410
  /**
@@ -416,7 +413,6 @@ class AuroToast extends i$2 {
416
413
  timeTilHide: {
417
414
  type: Number,
418
415
  reflect: true,
419
- attribute: "timetilhide",
420
416
  },
421
417
 
422
418
  /**
@@ -534,29 +530,15 @@ class AuroToast extends i$2 {
534
530
  /**
535
531
  * Emits closed toast event.
536
532
  *
537
- * @deprecated Use `toast-close` event instead.
538
533
  * @event onToastClose
539
- * @type {{ visible: boolean }}
534
+ * @type {object}
535
+ * @property {boolean} false - Sets visibility value for the toast element.
540
536
  */
541
537
  this.dispatchEvent(
542
538
  new CustomEvent("onToastClose", {
543
539
  bubbles: true,
544
540
  composed: true,
545
- detail: { visible: this.visible },
546
- }),
547
- );
548
-
549
- /**
550
- * Emits closed toast event.
551
- *
552
- * @event toast-close
553
- * @type {{ visible: boolean }}
554
- */
555
- this.dispatchEvent(
556
- new CustomEvent("toast-close", {
557
- bubbles: true,
558
- composed: true,
559
- detail: { visible: this.visible },
541
+ detail: this,
560
542
  }),
561
543
  );
562
544
  }
@@ -705,12 +687,14 @@ class AuroToast extends i$2 {
705
687
 
706
688
  render() {
707
689
  return u$2`
708
- ${this.visible
709
- ? u$2`
690
+ ${
691
+ this.visible
692
+ ? u$2`
710
693
  <div class="toastContainer">
711
- ${this.noIcon
712
- ? undefined
713
- : u$2`
694
+ ${
695
+ this.noIcon
696
+ ? undefined
697
+ : u$2`
714
698
  <${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
715
699
  ${this.variant === "custom" ? undefined : u$2`${this.getVariantIcon()}`}
716
700
  </${this.iconTag}>
@@ -732,7 +716,7 @@ class AuroToast extends i$2 {
732
716
  </${this.buttonTag}>
733
717
  </div>
734
718
  `
735
- : undefined
719
+ : undefined
736
720
  }
737
721
  `;
738
722
  }
@@ -78,7 +78,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{unsafeStatic as a,lit
78
78
  `}}var X='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error-stroke__desc" class="ico_squareLarge" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error-stroke__desc">triangle with exclamation mark.</desc><path d="M12 15.34c-.41 0-.75-.34-.75-.75V9.33c0-.41.34-.75.75-.75s.75.34.75.75v5.26c0 .41-.34.75-.75.75m.87 1.62c0-.48-.39-.88-.88-.88s-.88.39-.88.88.39.88.88.88.88-.39.88-.88M11.98 4.5 3.5 18.97h16.99zm0-1.5c.5 0 1 .25 1.29.74l8.51 14.47c.59 1-.13 2.26-1.29 2.26H3.5c-1.16 0-1.88-1.26-1.29-2.26l8.48-14.47c.29-.49.79-.74 1.29-.74"/></svg>',j='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="information-stroke__desc" class="ico_squareLarge" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="information-stroke__desc">Important information indicator.</desc><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17m0 5.75a.75.75 0 0 1 .743.648l.007.102v6.25a.75.75 0 0 1-1.493.102l-.007-.102V10a.75.75 0 0 1 .75-.75M12 7a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5"/></svg>',P='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" class="ico_squareLarge" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17m-1.524 10.416 4.971-5.423a.75.75 0 0 1 1.175.927l-.07.087-5.5 6a.75.75 0 0 1-.996.098l-.086-.075-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073zl4.971-5.423z"/></svg>',V='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="x-lg__desc" class="ico_squareLarge" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="x-lg__desc">a large x</desc><path fill-rule="evenodd" d="M16.51 17.26q-.255 0-.45-.15l-.09-.08-3.96-3.96-3.98 3.98-.1.08a.76.76 0 0 1-.43.14.75.75 0 0 1-.6-1.2l.08-.09 3.96-3.96-3.98-3.98-.08-.1a.746.746 0 0 1 .61-1.18q.255 0 .45.15l.1.08L12 10.95l3.98-3.98.1-.08a.76.76 0 0 1 .43-.14.75.75 0 0 1 .6 1.2l-.08.1-3.96 3.96 3.98 3.98.08.1a.746.746 0 0 1-.61 1.18z" clip-rule="evenodd"/></svg>',J=e`:host([visible]){background-color:var(--ds-auro-toast-container-color);color:var(--ds-auro-toast-text-color)}:host([visible]) .typeIcon{color:var(--ds-auro-toast-icon-color)}:host([visible]) .closeButton:hover{background-color:var(--ds-auro-toast-close-button-hover-container-color)}:host([variant=error]){--ds-auro-toast-container-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-toast-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([variant=success]){--ds-auro-toast-container-color: var(--ds-basic-color-status-success-subtle, #d6eac7);--ds-auro-toast-icon-color: var(--ds-basic-color-status-success, #447a1f);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
79
79
  `,K=e`.body-default{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-default-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{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-default-emphasized-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{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-lg-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{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-lg-emphasized-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{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-sm-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{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-sm-emphasized-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{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-xs-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{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-xs-emphasized-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-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-variant-ligatures:none;font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, .875rem)}.body-2xs,.body-2xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{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-emphasized-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;font-weight:var(--wcss-heading-xs-weight, 300);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-variant-ligatures:none;font-weight:var(--wcss-heading-2xs-weight, 300);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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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-variant-ligatures:none;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{display:inherit}:host([visible]){display:inline-block;min-width:100%;border-radius:var(--ds-size-100, .5rem);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15));pointer-events:auto}@media (width >= 576px){:host([visible]){min-width:200px;max-width:500px}}:host([visible]) .toastContainer{display:flex;flex-direction:row;align-items:flex-start;padding:var(--ds-size-200, 1rem) var(--ds-size-150, .75rem);gap:var(--ds-size-200, 1rem)}:host([visible]) .hidden{opacity:0;transition:visibility 0s .3s,opacity .3s ease-out;visibility:hidden}:host([visible]) [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([visible]) .message{flex:1}:host([visible]) .closeButton{border-radius:50%}
80
80
  `,Q=e`:host{--ds-auro-toast-close-button-hover-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-toast-container-color: var(--ds-advanced-color-shared-background-strong, #676767);--ds-auro-toast-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}
81
- `;class Y extends t{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.closeDom=(new DOMParser).parseFromString(V,"text/html"),this.closeSvg=this.closeDom.body.firstChild,this.closeSvg.setAttribute("slot","svg"),this.successDom=(new DOMParser).parseFromString(P,"text/html"),this.successSvg=this.successDom.body.firstChild,this.successSvg.setAttribute("slot","svg"),this.errorDom=(new DOMParser).parseFromString(X,"text/html"),this.errorSvg=this.errorDom.body.firstChild,this.errorSvg.setAttribute("slot","svg"),this.infoDom=(new DOMParser).parseFromString(j,"text/html"),this.infoSvg=this.infoDom.body.firstChild,this.infoSvg.setAttribute("slot","svg");const e=new l;this.buttonTag=e.generateTag("auro-button","12.3.2",U),this.iconTag=e.generateTag("auro-icon","9.2.0",G),this.runtimeUtils=new c,this.fadeOutTimer=void 0,this._isStandalone=!1}static get properties(){return{...t.properties,disableAutoHide:{type:Boolean,reflect:!0,attribute:"disableautohide"},noIcon:{type:Boolean,reflect:!0,attribute:"noicon"},timeTilHide:{type:Number,reflect:!0,attribute:"timetilhide"},trigger:{type:String,reflect:!0},triggerElement:{type:Object,attribute:!1},variant:{type:String,reflect:!0},visible:{type:Boolean,reflect:!0}}}static get styles(){return[K,J,Q]}static register(e="auro-toast"){c.prototype.registerComponent(e,Y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-toast")}_returnFocus(){const e=(this.trigger?document.getElementById(this.trigger):null)??this.triggerElement;e&&e.focus()}clickToClose(){this._returnFocus(),this.closeToast(),clearTimeout(this.fadeOutTimer)}fadeOutToast(){if(!this.disableAutoHide){const e=this.shadowRoot.querySelector(".toastContainer");e&&e.classList.add("hidden"),setTimeout(()=>{this.closeToast()},300)}}closeToast(){clearTimeout(this.fadeOutTimer),this.visible=!1,this.dispatchEvent(new CustomEvent("onToastClose",{bubbles:!0,composed:!0,detail:{visible:this.visible}})),this.dispatchEvent(new CustomEvent("toast-close",{bubbles:!0,composed:!0,detail:{visible:this.visible}}))}setOnClick(){window.innerWidth<767&&(this.onclick=()=>{this.fadeOutToast()})}getVariantIcon(){const e={success:this.successSvg,error:this.errorSvg,default:this.infoSvg};return e[this.variant]||e.default}connectedCallback(){super.connectedCallback(),this.setOnClick();const e=new CustomEvent("toast-request-announce",{bubbles:!0,cancelable:!0,composed:!0}),t=this.dispatchEvent(e);this._isStandalone=t&&!this._hasAncestorLiveRegion(),this._syncStandaloneRole()}_syncStandaloneRole(){this._isStandalone?this.setAttribute("role","error"===this.variant?"alert":"status"):this.removeAttribute("role")}_hasAncestorLiveRegion(){let e=this.parentElement;for(;e;){if(["polite","assertive"].includes(e.getAttribute?.("aria-live"))||["alert","status","log"].includes(e.getAttribute?.("role")))return!0;e=e.parentElement??e.getRootNode()?.host??null}return!1}updated(e){e.has("visible")&&this.handleSlotContent(),e.has("variant")&&(clearTimeout(this.fadeOutTimer),this._syncStandaloneRole()),this.visible&&!this.disableAutoHide&&"error"!==this.variant&&(clearTimeout(this.fadeOutTimer),this.fadeOutTimer=setTimeout(()=>{this.fadeOutToast()},this.timeTilHide||5e3))}handleSlotContent(){try{const e=this.querySelector('[slot="customSvg"]');if(e){const t=e.cloneNode(!0),s=this.shadowRoot.querySelector(".typeIcon");s&&(t.setAttribute("slot","svg"),s.appendChild(t))}}catch(e){console.error("handleSlotContent",e)}}render(){return r`
81
+ `;class Y extends t{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.closeDom=(new DOMParser).parseFromString(V,"text/html"),this.closeSvg=this.closeDom.body.firstChild,this.closeSvg.setAttribute("slot","svg"),this.successDom=(new DOMParser).parseFromString(P,"text/html"),this.successSvg=this.successDom.body.firstChild,this.successSvg.setAttribute("slot","svg"),this.errorDom=(new DOMParser).parseFromString(X,"text/html"),this.errorSvg=this.errorDom.body.firstChild,this.errorSvg.setAttribute("slot","svg"),this.infoDom=(new DOMParser).parseFromString(j,"text/html"),this.infoSvg=this.infoDom.body.firstChild,this.infoSvg.setAttribute("slot","svg");const e=new l;this.buttonTag=e.generateTag("auro-button","12.3.2",U),this.iconTag=e.generateTag("auro-icon","9.2.0",G),this.runtimeUtils=new c,this.fadeOutTimer=void 0,this._isStandalone=!1}static get properties(){return{...t.properties,disableAutoHide:{type:Boolean,reflect:!0},noIcon:{type:Boolean,reflect:!0},timeTilHide:{type:Number,reflect:!0},trigger:{type:String,reflect:!0},triggerElement:{type:Object,attribute:!1},variant:{type:String,reflect:!0},visible:{type:Boolean,reflect:!0}}}static get styles(){return[K,J,Q]}static register(e="auro-toast"){c.prototype.registerComponent(e,Y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-toast")}_returnFocus(){const e=(this.trigger?document.getElementById(this.trigger):null)??this.triggerElement;e&&e.focus()}clickToClose(){this._returnFocus(),this.closeToast(),clearTimeout(this.fadeOutTimer)}fadeOutToast(){if(!this.disableAutoHide){const e=this.shadowRoot.querySelector(".toastContainer");e&&e.classList.add("hidden"),setTimeout(()=>{this.closeToast()},300)}}closeToast(){clearTimeout(this.fadeOutTimer),this.visible=!1,this.dispatchEvent(new CustomEvent("onToastClose",{bubbles:!0,composed:!0,detail:this}))}setOnClick(){window.innerWidth<767&&(this.onclick=()=>{this.fadeOutToast()})}getVariantIcon(){const e={success:this.successSvg,error:this.errorSvg,default:this.infoSvg};return e[this.variant]||e.default}connectedCallback(){super.connectedCallback(),this.setOnClick();const e=new CustomEvent("toast-request-announce",{bubbles:!0,cancelable:!0,composed:!0}),t=this.dispatchEvent(e);this._isStandalone=t&&!this._hasAncestorLiveRegion(),this._syncStandaloneRole()}_syncStandaloneRole(){this._isStandalone?this.setAttribute("role","error"===this.variant?"alert":"status"):this.removeAttribute("role")}_hasAncestorLiveRegion(){let e=this.parentElement;for(;e;){if(["polite","assertive"].includes(e.getAttribute?.("aria-live"))||["alert","status","log"].includes(e.getAttribute?.("role")))return!0;e=e.parentElement??e.getRootNode()?.host??null}return!1}updated(e){e.has("visible")&&this.handleSlotContent(),e.has("variant")&&(clearTimeout(this.fadeOutTimer),this._syncStandaloneRole()),this.visible&&!this.disableAutoHide&&"error"!==this.variant&&(clearTimeout(this.fadeOutTimer),this.fadeOutTimer=setTimeout(()=>{this.fadeOutToast()},this.timeTilHide||5e3))}handleSlotContent(){try{const e=this.querySelector('[slot="customSvg"]');if(e){const t=e.cloneNode(!0),s=this.shadowRoot.querySelector(".typeIcon");s&&(t.setAttribute("slot","svg"),s.appendChild(t))}}catch(e){console.error("handleSlotContent",e)}}render(){return r`
82
82
  ${this.visible?r`
83
83
  <div class="toastContainer">
84
84
  ${this.noIcon?void 0:r`
package/dist/index.d.ts CHANGED
@@ -82,17 +82,11 @@ type BaseEvents = {
82
82
 
83
83
 
84
84
  export type AuroToastProps = {
85
- /** Prevents the toast from auto-hiding on the default time. */
86
- "disableautohide"?: AuroToast['disableAutoHide'];
87
85
  /** Prevents the toast from auto-hiding on the default time. */
88
86
  "disableAutoHide"?: AuroToast['disableAutoHide'];
89
87
  /** Removes icon from the toast UI. */
90
- "noicon"?: AuroToast['noIcon'];
91
- /** Removes icon from the toast UI. */
92
88
  "noIcon"?: AuroToast['noIcon'];
93
89
  /** Sets the time in milliseconds until the toast hides. */
94
- "timetilhide"?: AuroToast['timeTilHide'];
95
- /** Sets the time in milliseconds until the toast hides. */
96
90
  "timeTilHide"?: AuroToast['timeTilHide'];
97
91
  /** The id of the element that triggered the toast.
98
92
  When the toast is manually closed, focus will return to this element.
@@ -108,9 +102,7 @@ Use the trigger attribute instead if you prefer a declarative approach. */
108
102
  "triggerElement"?: AuroToast['triggerElement'];
109
103
 
110
104
  /** Notifies that the toast has been closed */
111
- "ontoast-close"?: (e: CustomEvent<{ visible: boolean }>) => void;
112
- /** @deprecated Use `toast-close` event instead. - **Deprecated**, use `toast-close` event instead. */
113
- "ononToastClose"?: (e: CustomEvent<{ visible: boolean }>) => void;
105
+ "ononToastClose"?: (e: CustomEvent<object>) => void;
114
106
  }
115
107
 
116
108
 
@@ -124,9 +116,9 @@ Use the trigger attribute instead if you prefer a declarative approach. */
124
116
  *
125
117
  * Component attributes and properties that can be applied to the element or by using JavaScript.
126
118
  *
127
- * - `disableautohide`/`disableAutoHide`: Prevents the toast from auto-hiding on the default time.
128
- * - `noicon`/`noIcon`: Removes icon from the toast UI.
129
- * - `timetilhide`/`timeTilHide`: Sets the time in milliseconds until the toast hides.
119
+ * - `disableAutoHide`: Prevents the toast from auto-hiding on the default time.
120
+ * - `noIcon`: Removes icon from the toast UI.
121
+ * - `timeTilHide`: Sets the time in milliseconds until the toast hides.
130
122
  * - `trigger`: The id of the element that triggered the toast.
131
123
  * When the toast is manually closed, focus will return to this element.
132
124
  * Takes precedence over the triggerElement property if both are set.
@@ -140,8 +132,7 @@ Use the trigger attribute instead if you prefer a declarative approach. */
140
132
  *
141
133
  * Events that will be emitted by the component.
142
134
  *
143
- * - `toast-close`: Notifies that the toast has been closed
144
- * - `onToastClose`: **Deprecated**, use `toast-close` event instead.
135
+ * - `onToastClose`: Notifies that the toast has been closed
145
136
  *
146
137
  * ## Methods
147
138
  *
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroToast,a as AuroToaster}from"./auro-toaster-J1vx9GDk.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
1
+ export{A as AuroToast,a as AuroToaster}from"./auro-toaster-BVtBRPDA.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
@@ -1 +1 @@
1
- import{A as i,a as t}from"./auro-toaster-J1vx9GDk.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register(),t.register();
1
+ import{A as i,a as t}from"./auro-toaster-BVtBRPDA.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register(),t.register();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-toast",
10
- "version": "0.0.0-pr147.2",
10
+ "version": "0.0.0-pr148.0",
11
11
  "description": "auro-toast HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -84,7 +84,6 @@
84
84
  "files": [
85
85
  "dist/**/*",
86
86
  "demo/**/*",
87
- "custom-elements.json",
88
87
  "CHANGELOG.md",
89
88
  "README.md",
90
89
  "LICENSE",
@@ -1,447 +0,0 @@
1
- {
2
- "schemaVersion": "1.0.0",
3
- "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "src/auro-toast.js",
8
- "declarations": [
9
- {
10
- "kind": "class",
11
- "description": "The `auro-toast` element provides users a way to display short, temporary messages.",
12
- "name": "AuroToast",
13
- "cssParts": [
14
- {
15
- "description": "Apply css to the toast close button",
16
- "name": "close-button"
17
- },
18
- {
19
- "description": "Apply css to the toast type icon",
20
- "name": "type-icon"
21
- }
22
- ],
23
- "members": [
24
- {
25
- "kind": "method",
26
- "name": "_hasAncestorLiveRegion",
27
- "description": "Walks the DOM ancestors (crossing shadow boundaries) looking for any\nactive live region — either an aria-live=\"polite/assertive\" attribute or\nan implicit live region role (alert, status, log).\naria-live=\"off\" is not considered active and is intentionally ignored.",
28
- "privacy": "private",
29
- "return": {
30
- "type": {
31
- "text": "boolean"
32
- }
33
- }
34
- },
35
- {
36
- "kind": "method",
37
- "name": "_initializeDefaults",
38
- "type": {
39
- "text": "_initializeDefaults() => void"
40
- }
41
- },
42
- {
43
- "kind": "method",
44
- "name": "_returnFocus",
45
- "description": "Returns focus to the trigger element when the toast is manually closed.\nNot called on auto-dismiss — moving focus during auto-dismiss would\ninterrupt the AT user's current position in the page.",
46
- "privacy": "private",
47
- "return": {
48
- "type": {
49
- "text": "void"
50
- }
51
- }
52
- },
53
- {
54
- "kind": "method",
55
- "name": "_syncStandaloneRole",
56
- "description": "Sets or removes the live-region role on the host depending on whether\nthe toast is standalone. Extracted so connectedCallback and updated()\nstay in sync without duplicating the logic.",
57
- "privacy": "private",
58
- "return": {
59
- "type": {
60
- "text": "void"
61
- }
62
- }
63
- },
64
- {
65
- "kind": "method",
66
- "name": "clickToClose",
67
- "privacy": "private",
68
- "return": {
69
- "type": {
70
- "text": "void"
71
- }
72
- }
73
- },
74
- {
75
- "kind": "method",
76
- "name": "closeToast",
77
- "privacy": "private",
78
- "return": {
79
- "type": {
80
- "text": "void"
81
- }
82
- }
83
- },
84
- {
85
- "kind": "field",
86
- "name": "disableAutoHide",
87
- "privacy": "public",
88
- "type": {
89
- "text": "boolean"
90
- },
91
- "description": "Prevents the toast from auto-hiding on the default time.",
92
- "attribute": "disableautohide",
93
- "reflects": true
94
- },
95
- {
96
- "kind": "method",
97
- "name": "fadeOutToast",
98
- "privacy": "private",
99
- "return": {
100
- "type": {
101
- "text": "void"
102
- }
103
- }
104
- },
105
- {
106
- "kind": "method",
107
- "name": "getVariantIcon",
108
- "description": "Determines which type icon to render based on the variant prop.",
109
- "privacy": "private",
110
- "return": {
111
- "type": {
112
- "text": "HTMLElement"
113
- }
114
- }
115
- },
116
- {
117
- "kind": "method",
118
- "name": "handleSlotContent",
119
- "description": "Mirrors any defined custom type svg into the correct place in the template.",
120
- "privacy": "private",
121
- "return": {
122
- "type": {
123
- "text": "void"
124
- }
125
- }
126
- },
127
- {
128
- "kind": "field",
129
- "name": "noIcon",
130
- "privacy": "public",
131
- "type": {
132
- "text": "boolean"
133
- },
134
- "description": "Removes icon from the toast UI.",
135
- "attribute": "noicon",
136
- "reflects": true
137
- },
138
- {
139
- "kind": "method",
140
- "name": "register",
141
- "static": true,
142
- "parameters": [
143
- {
144
- "name": "name",
145
- "default": "\"auro-toast\"",
146
- "description": "The name of the element that you want to register.",
147
- "optional": true,
148
- "type": {
149
- "text": "string"
150
- }
151
- }
152
- ],
153
- "description": "This will register this element with the browser.",
154
- "type": {
155
- "text": "register(name?: string = \"auro-toast\") => void"
156
- }
157
- },
158
- {
159
- "kind": "method",
160
- "name": "setOnClick",
161
- "description": "For mobile, set the onclick function so the toast can be dismissed if it is tapped on anywhere inside the toast.",
162
- "privacy": "private",
163
- "return": {
164
- "type": {
165
- "text": "void"
166
- }
167
- }
168
- },
169
- {
170
- "kind": "field",
171
- "name": "timeTilHide",
172
- "privacy": "public",
173
- "type": {
174
- "text": "number"
175
- },
176
- "description": "Sets the time in milliseconds until the toast hides.",
177
- "attribute": "timetilhide",
178
- "reflects": true
179
- },
180
- {
181
- "kind": "field",
182
- "name": "trigger",
183
- "privacy": "public",
184
- "type": {
185
- "text": "string"
186
- },
187
- "description": "The id of the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nTakes precedence over the triggerElement property if both are set.",
188
- "attribute": "trigger",
189
- "reflects": true
190
- },
191
- {
192
- "kind": "field",
193
- "name": "triggerElement",
194
- "privacy": "public",
195
- "type": {
196
- "text": "HTMLElement"
197
- },
198
- "description": "A direct reference to the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nUse the trigger attribute instead if you prefer a declarative approach."
199
- },
200
- {
201
- "kind": "field",
202
- "name": "variant",
203
- "privacy": "public",
204
- "type": {
205
- "text": "'error' | 'success' | 'custom'"
206
- },
207
- "description": "Component will render visually based on which variant value is set.",
208
- "attribute": "variant",
209
- "reflects": true
210
- },
211
- {
212
- "kind": "field",
213
- "name": "visible",
214
- "privacy": "public",
215
- "type": {
216
- "text": "boolean"
217
- },
218
- "description": "Sets state of toast to visible",
219
- "attribute": "visible",
220
- "reflects": true
221
- }
222
- ],
223
- "events": [
224
- {
225
- "name": "toast-close",
226
- "type": {
227
- "text": "{ visible: boolean }"
228
- },
229
- "description": "Notifies that the toast has been closed"
230
- },
231
- {
232
- "name": "onToastClose",
233
- "type": {
234
- "text": "{ visible: boolean }"
235
- },
236
- "description": "**Deprecated**, use `toast-close` event instead.",
237
- "deprecated": "Use `toast-close` event instead."
238
- }
239
- ],
240
- "attributes": [
241
- {
242
- "name": "disableautohide",
243
- "type": {
244
- "text": "boolean"
245
- },
246
- "description": "Prevents the toast from auto-hiding on the default time.",
247
- "fieldName": "disableAutoHide"
248
- },
249
- {
250
- "name": "noicon",
251
- "type": {
252
- "text": "boolean"
253
- },
254
- "description": "Removes icon from the toast UI.",
255
- "fieldName": "noIcon"
256
- },
257
- {
258
- "name": "timetilhide",
259
- "type": {
260
- "text": "number"
261
- },
262
- "description": "Sets the time in milliseconds until the toast hides.",
263
- "fieldName": "timeTilHide"
264
- },
265
- {
266
- "name": "trigger",
267
- "type": {
268
- "text": "string"
269
- },
270
- "description": "The id of the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nTakes precedence over the triggerElement property if both are set.",
271
- "fieldName": "trigger"
272
- },
273
- {
274
- "name": "variant",
275
- "type": {
276
- "text": "'error' | 'success' | 'custom'"
277
- },
278
- "description": "Component will render visually based on which variant value is set.",
279
- "fieldName": "variant"
280
- },
281
- {
282
- "name": "visible",
283
- "type": {
284
- "text": "boolean"
285
- },
286
- "description": "Sets state of toast to visible",
287
- "fieldName": "visible"
288
- }
289
- ],
290
- "superclass": {
291
- "name": "LitElement",
292
- "package": "lit"
293
- },
294
- "tagName": "auro-toast",
295
- "customElement": true,
296
- "modulePath": "src/auro-toast.js"
297
- }
298
- ],
299
- "exports": [
300
- {
301
- "kind": "js",
302
- "name": "AuroToast",
303
- "declaration": {
304
- "name": "AuroToast",
305
- "module": "src/auro-toast.js"
306
- }
307
- }
308
- ]
309
- },
310
- {
311
- "kind": "javascript-module",
312
- "path": "src/auro-toaster.js",
313
- "declarations": [
314
- {
315
- "kind": "class",
316
- "description": "",
317
- "name": "AuroToaster",
318
- "members": [
319
- {
320
- "kind": "field",
321
- "name": "_announcedErrorToasts",
322
- "default": "new WeakSet()"
323
- },
324
- {
325
- "kind": "field",
326
- "name": "_assertiveResetTimer",
327
- "default": "undefined"
328
- },
329
- {
330
- "kind": "method",
331
- "name": "_onSlotChange",
332
- "parameters": [
333
- {
334
- "name": "e"
335
- }
336
- ],
337
- "description": "Handles slot changes — checks if a newly slotted error toast\nis already visible at the time it is added to the toaster.",
338
- "privacy": "private"
339
- },
340
- {
341
- "kind": "field",
342
- "name": "_onToastRequestAnnounce"
343
- },
344
- {
345
- "kind": "method",
346
- "name": "_setAssertiveTemporarily",
347
- "description": "Temporarily sets the live region to assertive so the error toast\ninterrupts the screen reader, then resets to polite after 3 seconds.\nThis ensures subsequent polite toasts don't keep interrupting the user,\neven if the error toast remains visible (errors are never auto-dismissed).",
348
- "privacy": "private"
349
- },
350
- {
351
- "kind": "method",
352
- "name": "register",
353
- "static": true,
354
- "parameters": [
355
- {
356
- "name": "name",
357
- "default": "\"auro-toaster\"",
358
- "description": "The name of the element that you want to register to.",
359
- "optional": true,
360
- "type": {
361
- "text": "string"
362
- }
363
- }
364
- ],
365
- "description": "This will register this element with the browser."
366
- }
367
- ],
368
- "superclass": {
369
- "name": "LitElement",
370
- "package": "lit"
371
- },
372
- "customElement": true,
373
- "modulePath": "src/auro-toaster.js"
374
- }
375
- ],
376
- "exports": [
377
- {
378
- "kind": "js",
379
- "name": "AuroToaster",
380
- "declaration": {
381
- "name": "AuroToaster",
382
- "module": "src/auro-toaster.js"
383
- }
384
- }
385
- ]
386
- },
387
- {
388
- "kind": "javascript-module",
389
- "path": "src/buttonVersion.js",
390
- "declarations": [],
391
- "exports": [
392
- {
393
- "kind": "js",
394
- "name": "default",
395
- "declaration": {
396
- "name": "12.3.2",
397
- "module": "src/buttonVersion.js"
398
- }
399
- }
400
- ]
401
- },
402
- {
403
- "kind": "javascript-module",
404
- "path": "src/iconVersion.js",
405
- "declarations": [],
406
- "exports": [
407
- {
408
- "kind": "js",
409
- "name": "default",
410
- "declaration": {
411
- "name": "9.2.0",
412
- "module": "src/iconVersion.js"
413
- }
414
- }
415
- ]
416
- },
417
- {
418
- "kind": "javascript-module",
419
- "path": "src/index.js",
420
- "declarations": [],
421
- "exports": [
422
- {
423
- "kind": "js",
424
- "name": "AuroToast",
425
- "declaration": {
426
- "name": "AuroToast",
427
- "module": "src/index.js"
428
- }
429
- },
430
- {
431
- "kind": "js",
432
- "name": "AuroToaster",
433
- "declaration": {
434
- "name": "AuroToaster",
435
- "module": "src/index.js"
436
- }
437
- }
438
- ]
439
- },
440
- {
441
- "kind": "javascript-module",
442
- "path": "src/registered.js",
443
- "declarations": [],
444
- "exports": []
445
- }
446
- ]
447
- }