@aurodesignsystem-dev/auro-toast 0.0.0-pr144.0 → 0.0.0-pr147.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +24 -36
  2. package/custom-elements.json +447 -0
  3. package/demo/api.md +8 -7
  4. package/demo/api.min.js +29 -13
  5. package/demo/index.min.js +28 -12
  6. package/dist/{auro-toaster-BVtBRPDA.js → auro-toaster-J1vx9GDk.js} +1 -1
  7. package/dist/index.d.ts +14 -5
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +2 -1
package/README.md CHANGED
@@ -49,9 +49,7 @@ 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
- ```shell
53
- $ npm i @aurodesignsystem/auro-toast
54
- ```
52
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-toast</code></pre>
55
53
 
56
54
  <!-- AURO-GENERATED-CONTENT:END -->
57
55
 
@@ -63,9 +61,7 @@ Defining the dependency within each project that is using the `<auro-toast>` com
63
61
  <!-- AURO-GENERATED-CONTENT:END -->
64
62
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
65
63
 
66
- ```js
67
- import "@aurodesignsystem/auro-toast";
68
- ```
64
+ <pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-toast";</code></pre>
69
65
 
70
66
  <!-- AURO-GENERATED-CONTENT:END -->
71
67
 
@@ -74,9 +70,7 @@ import "@aurodesignsystem/auro-toast";
74
70
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
75
71
  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.
76
72
 
77
- ```html
78
- <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"></script>
79
- ```
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>
80
74
 
81
75
  <!-- AURO-GENERATED-CONTENT:END -->
82
76
 
@@ -85,18 +79,16 @@ In cases where the project is not able to process JS assets, there are pre-proce
85
79
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
86
80
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
87
81
 
88
- ```html
89
- <auro-button id="basicToastBtn">
82
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="basicToastBtn"&gt;
90
83
  Show default notification
91
- </auro-button>
92
- <!--
84
+ &lt;/auro-button&gt;
85
+ &lt;!--
93
86
  NOTE: The manually added style is NOT necessary for use,
94
87
  Demo purposes ONLY!
95
- -->
96
- <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
88
+ --&gt;
89
+ &lt;auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast"&gt;
97
90
  Default notification with no error type.
98
- </auro-toast>
99
- ```
91
+ &lt;/auro-toast&gt;</code></pre>
100
92
  <!-- AURO-GENERATED-CONTENT:END -->
101
93
 
102
94
  ## Custom Component Registration for Version Management
@@ -113,39 +105,35 @@ You can do this by importing only the component class and using the `register(na
113
105
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
114
106
  <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
115
107
 
116
- ```js
117
- // Import the class only
108
+ <pre class="language-js"><code class="language-js">// Import the class only
118
109
  import { AuroToast } from '@aurodesignsystem/auro-toast/class';
119
-
110
+ ​
120
111
  // Register with a custom name if desired
121
- AuroToast.register('custom-toast');
122
- ```
112
+ AuroToast.register('custom-toast');</code></pre>
123
113
 
124
114
  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.
125
115
  <!-- AURO-GENERATED-CONTENT:END -->
126
116
  <div class="exampleWrapper exampleWrapper--flex">
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">
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">
130
120
  Show default notification
131
- </auro-button>
132
- <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
121
+ </auro-button>
122
+ <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
133
123
  Default notification with no error type.
134
- </custom-toast>
135
- <!-- AURO-GENERATED-CONTENT:END -->
124
+ </custom-toast>
125
+ <!-- AURO-GENERATED-CONTENT:END -->
136
126
  </div>
137
127
  <auro-accordion alignRight>
138
- <span slot="trigger">See code</span>
128
+ <span slot="trigger">See code</span>
139
129
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
140
130
  <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
141
131
 
142
- ```html
143
- <auro-button id="customToastBtn">
132
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="customToastBtn"&gt;
144
133
  Show default notification
145
- </auro-button>
146
- <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
134
+ &lt;/auro-button&gt;
135
+ &lt;custom-toast style="display: block; margin: 0.5rem 0;" id="customToast"&gt;
147
136
  Default notification with no error type.
148
- </custom-toast>
149
- ```
137
+ &lt;/custom-toast&gt;</code></pre>
150
138
  <!-- AURO-GENERATED-CONTENT:END -->
151
139
  </auro-accordion>
package/custom-elements.json ADDED
@@ -0,0 +1,447 @@
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
+ }
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,9 +25,10 @@ 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
- | onToastClose | Notifies that the toast has been closed |
28
+ | Name | Description |
29
+ | ------------ | ------------------------------------------------ |
30
+ | toast-close | Notifies that the toast has been closed |
31
+ | onToastClose | **Deprecated**, use `toast-close` event instead. |
31
32
 
32
33
  ### CSS Shadow Parts
33
34
 
@@ -513,7 +514,7 @@ export function initDynamicToastsExample() {
513
514
  console.log("Toast added:", toastId);
514
515
  ​
515
516
  // optional cleanup if your component doesn't auto-remove itself
516
- toast.addEventListener("onToastClose", () =&gt; {
517
+ toast.addEventListener("toast-close", () =&gt; {
517
518
  activeToasts.delete(toastId);
518
519
  });
519
520
  });
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("onToastClose", () => {
185
+ toast.addEventListener("toast-close", () => {
186
186
  activeToasts.delete(toastId);
187
187
  });
188
188
  });
@@ -538,7 +538,8 @@ 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 - Notifies that the toast has been closed
541
+ * @fires onToastClose - **Deprecated**, use `toast-close` event instead.
542
+ * @event toast-close - Notifies that the toast has been closed
542
543
  */
543
544
 
544
545
  // build the component class
@@ -646,6 +647,7 @@ class AuroToast extends i$2 {
646
647
  disableAutoHide: {
647
648
  type: Boolean,
648
649
  reflect: true,
650
+ attribute: "disableautohide",
649
651
  },
650
652
 
651
653
  /**
@@ -654,6 +656,7 @@ class AuroToast extends i$2 {
654
656
  noIcon: {
655
657
  type: Boolean,
656
658
  reflect: true,
659
+ attribute: "noicon",
657
660
  },
658
661
 
659
662
  /**
@@ -662,6 +665,7 @@ class AuroToast extends i$2 {
662
665
  timeTilHide: {
663
666
  type: Number,
664
667
  reflect: true,
668
+ attribute: "timetilhide",
665
669
  },
666
670
 
667
671
  /**
@@ -779,15 +783,29 @@ class AuroToast extends i$2 {
779
783
  /**
780
784
  * Emits closed toast event.
781
785
  *
786
+ * @deprecated Use `toast-close` event instead.
782
787
  * @event onToastClose
783
- * @type {object}
784
- * @property {boolean} false - Sets visibility value for the toast element.
788
+ * @type {{ visible: boolean }}
785
789
  */
786
790
  this.dispatchEvent(
787
791
  new CustomEvent("onToastClose", {
788
792
  bubbles: true,
789
793
  composed: true,
790
- detail: this,
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 },
791
809
  }),
792
810
  );
793
811
  }
@@ -936,14 +954,12 @@ class AuroToast extends i$2 {
936
954
 
937
955
  render() {
938
956
  return u$2`
939
- ${
940
- this.visible
941
- ? u$2`
957
+ ${this.visible
958
+ ? u$2`
942
959
  <div class="toastContainer">
943
- ${
944
- this.noIcon
945
- ? undefined
946
- : u$2`
960
+ ${this.noIcon
961
+ ? undefined
962
+ : u$2`
947
963
  <${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
948
964
  ${this.variant === "custom" ? undefined : u$2`${this.getVariantIcon()}`}
949
965
  </${this.iconTag}>
@@ -965,7 +981,7 @@ class AuroToast extends i$2 {
965
981
  </${this.buttonTag}>
966
982
  </div>
967
983
  `
968
- : undefined
984
+ : undefined
969
985
  }
970
986
  `;
971
987
  }
package/demo/index.min.js CHANGED
@@ -289,7 +289,8 @@ 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 - Notifies that the toast has been closed
292
+ * @fires onToastClose - **Deprecated**, use `toast-close` event instead.
293
+ * @event toast-close - Notifies that the toast has been closed
293
294
  */
294
295
 
295
296
  // build the component class
@@ -397,6 +398,7 @@ class AuroToast extends i$2 {
397
398
  disableAutoHide: {
398
399
  type: Boolean,
399
400
  reflect: true,
401
+ attribute: "disableautohide",
400
402
  },
401
403
 
402
404
  /**
@@ -405,6 +407,7 @@ class AuroToast extends i$2 {
405
407
  noIcon: {
406
408
  type: Boolean,
407
409
  reflect: true,
410
+ attribute: "noicon",
408
411
  },
409
412
 
410
413
  /**
@@ -413,6 +416,7 @@ class AuroToast extends i$2 {
413
416
  timeTilHide: {
414
417
  type: Number,
415
418
  reflect: true,
419
+ attribute: "timetilhide",
416
420
  },
417
421
 
418
422
  /**
@@ -530,15 +534,29 @@ class AuroToast extends i$2 {
530
534
  /**
531
535
  * Emits closed toast event.
532
536
  *
537
+ * @deprecated Use `toast-close` event instead.
533
538
  * @event onToastClose
534
- * @type {object}
535
- * @property {boolean} false - Sets visibility value for the toast element.
539
+ * @type {{ visible: boolean }}
536
540
  */
537
541
  this.dispatchEvent(
538
542
  new CustomEvent("onToastClose", {
539
543
  bubbles: true,
540
544
  composed: true,
541
- detail: this,
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 },
542
560
  }),
543
561
  );
544
562
  }
@@ -687,14 +705,12 @@ class AuroToast extends i$2 {
687
705
 
688
706
  render() {
689
707
  return u$2`
690
- ${
691
- this.visible
692
- ? u$2`
708
+ ${this.visible
709
+ ? u$2`
693
710
  <div class="toastContainer">
694
- ${
695
- this.noIcon
696
- ? undefined
697
- : u$2`
711
+ ${this.noIcon
712
+ ? undefined
713
+ : u$2`
698
714
  <${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
699
715
  ${this.variant === "custom" ? undefined : u$2`${this.getVariantIcon()}`}
700
716
  </${this.iconTag}>
@@ -716,7 +732,7 @@ class AuroToast extends i$2 {
716
732
  </${this.buttonTag}>
717
733
  </div>
718
734
  `
719
- : undefined
735
+ : undefined
720
736
  }
721
737
  `;
722
738
  }
package/dist/{auro-toaster-BVtBRPDA.js → auro-toaster-J1vx9GDk.js} RENAMED
@@ -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},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`
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`
82
82
  ${this.visible?r`
83
83
  <div class="toastContainer">
84
84
  ${this.noIcon?void 0:r`
package/dist/index.d.ts CHANGED
@@ -82,11 +82,17 @@ 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'];
85
87
  /** Prevents the toast from auto-hiding on the default time. */
86
88
  "disableAutoHide"?: AuroToast['disableAutoHide'];
87
89
  /** Removes icon from the toast UI. */
90
+ "noicon"?: AuroToast['noIcon'];
91
+ /** Removes icon from the toast UI. */
88
92
  "noIcon"?: AuroToast['noIcon'];
89
93
  /** Sets the time in milliseconds until the toast hides. */
94
+ "timetilhide"?: AuroToast['timeTilHide'];
95
+ /** Sets the time in milliseconds until the toast hides. */
90
96
  "timeTilHide"?: AuroToast['timeTilHide'];
91
97
  /** The id of the element that triggered the toast.
92
98
  When the toast is manually closed, focus will return to this element.
@@ -102,7 +108,9 @@ Use the trigger attribute instead if you prefer a declarative approach. */
102
108
  "triggerElement"?: AuroToast['triggerElement'];
103
109
 
104
110
  /** Notifies that the toast has been closed */
105
- "ononToastClose"?: (e: CustomEvent<object>) => void;
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;
106
114
  }
107
115
 
108
116
 
@@ -116,9 +124,9 @@ Use the trigger attribute instead if you prefer a declarative approach. */
116
124
  *
117
125
  * Component attributes and properties that can be applied to the element or by using JavaScript.
118
126
  *
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.
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.
122
130
  * - `trigger`: The id of the element that triggered the toast.
123
131
  * When the toast is manually closed, focus will return to this element.
124
132
  * Takes precedence over the triggerElement property if both are set.
@@ -132,7 +140,8 @@ Use the trigger attribute instead if you prefer a declarative approach. */
132
140
  *
133
141
  * Events that will be emitted by the component.
134
142
  *
135
- * - `onToastClose`: Notifies that the toast has been closed
143
+ * - `toast-close`: Notifies that the toast has been closed
144
+ * - `onToastClose`: **Deprecated**, use `toast-close` event instead.
136
145
  *
137
146
  * ## Methods
138
147
  *
package/dist/index.js CHANGED
@@ -1 +1 @@
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
+ 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";
package/dist/registered.js CHANGED
@@ -1 +1 @@
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();
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();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-toast",
10
- "version": "0.0.0-pr144.0",
10
+ "version": "0.0.0-pr147.1",
11
11
  "description": "auro-toast HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -84,6 +84,7 @@
84
84
  "files": [
85
85
  "dist/**/*",
86
86
  "demo/**/*",
87
+ "custom-elements.json",
87
88
  "CHANGELOG.md",
88
89
  "README.md",
89
90
  "LICENSE",