@sula-tech/webcomponents 0.19.2 → 0.20.0

package/dist/collection/components/sula-toast/sula-toast.js

@@ -0,0 +1,501 @@
+import { Host, h } from "@stencil/core";
+import { SulaToastType } from "./model/sula-toast.model";
+const DEFAULT_DURATION = 5000;
+const FOCUS_RING_CLASSES = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-feedback-informational focus-visible:outline-offset-2';
+const TOAST_INTENTS = {
+    [SulaToastType.Neutral]: {
+        border: 'border-line-general',
+        borderColor: 'var(--color-line-general)',
+        color: 'text-icon-primary',
+        background: 'bg-surface-on-body',
+    },
+    [SulaToastType.Brand]: {
+        border: 'border-brand-primary',
+        borderColor: 'var(--color-brand-primary)',
+        color: 'text-brand-primary',
+        background: 'bg-surface-on-body-brand',
+    },
+    [SulaToastType.Info]: {
+        border: 'border-feedback-informational',
+        borderColor: 'var(--color-feedback-informational)',
+        color: 'text-feedback-informational',
+        background: 'bg-surface-on-body-feedback-info',
+    },
+    [SulaToastType.Success]: {
+        border: 'border-feedback-success',
+        borderColor: 'var(--color-feedback-success)',
+        color: 'text-feedback-success',
+        background: 'bg-surface-on-body-feedback-success',
+    },
+    [SulaToastType.Warning]: {
+        border: 'border-feedback-alert',
+        borderColor: 'var(--color-feedback-alert)',
+        color: 'text-feedback-alert',
+        background: 'bg-surface-on-body-feedback-alert',
+    },
+    [SulaToastType.Danger]: {
+        border: 'border-feedback-error',
+        borderColor: 'var(--color-feedback-error)',
+        color: 'text-feedback-error',
+        background: 'bg-surface-on-body-feedback-error',
+    },
+};
+/**
+ * A controlled notification. The consumer removes it after toastDismissRequested.
+ * @part container - Notification surface.
+ * @part icon - Decorative intent icon.
+ * @part content - Title, description and action.
+ * @part close-button - Dismiss button.
+ */
+export class SulaToast {
+    constructor() {
+        /** Notification title. */
+        this.toastTitle = '';
+        /** Optional notification description, displayed on up to four lines. */
+        this.message = '';
+        /** Visual intent, independent of announcement urgency. */
+        this.type = SulaToastType.Neutral;
+        /** Optional single-line action label. The consumer implements the action. */
+        this.actionText = '';
+        /** Whether to display the dismiss button. */
+        this.closable = true;
+        /** Externally pause the remaining timeout, for example while covered by a stack. */
+        this.paused = false;
+        /** Whether to play the entrance animations (fade-in and border trace). Disable when a parent already controls the animation, for example toasts covered in a stack. */
+        this.animated = true;
+        /** Screen reader announcement priority. Use off when a parent owns announcements. */
+        this.announcement = 'polite';
+        /** Accessible dismiss button label. */
+        this.closeLabel = 'Fechar notificação';
+        this.announcedText = '';
+        this.remaining = 0;
+        this.startedAt = 0;
+        this.timedOut = false;
+        this.timeoutEnabled = false;
+        this.hovering = false;
+        this.focused = false;
+        this.visible = false;
+        this.ready = false;
+        this.connected = false;
+        this.handleFocusOut = (event) => {
+            const target = event.relatedTarget;
+            this.focused = !!target && (this.hostElement.contains(target) || this.hostElement.shadowRoot.contains(target));
+            this.updateTimeout();
+        };
+    }
+    connectedCallback() {
+        this.connected = true;
+        if (this.ready)
+            this.observeVisibility();
+    }
+    componentDidLoad() {
+        this.ready = true;
+        this.resetTimeout();
+        Promise.resolve().then(() => {
+            if (this.connected)
+                this.updateAnnouncement();
+        });
+        this.observeVisibility();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.connected = false;
+        this.stopTimeout();
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hovering = false;
+        this.focused = false;
+    }
+    handleContentChange() {
+        this.resetTimeout();
+        this.updateAnnouncement();
+    }
+    updateAnnouncement() {
+        this.announcedText = this.announcement === 'off' ? '' : [this.toastTitle, this.message].filter(Boolean).join('. ');
+    }
+    updateTimeout() {
+        const blocked = !this.connected || !this.ready || !this.visible || this.paused || this.hovering || this.focused || document.visibilityState === 'hidden';
+        if (blocked) {
+            this.stopTimeout();
+        }
+        else if (this.timer === undefined && this.timeoutEnabled && !this.timedOut) {
+            this.startedAt = Date.now();
+            this.timer = setTimeout(() => {
+                this.timer = undefined;
+                this.remaining = 0;
+                this.timedOut = true;
+                this.toastDismissRequested.emit({ reason: 'timeout' });
+            }, this.remaining);
+        }
+    }
+    resetTimeout() {
+        this.stopTimeout();
+        this.remaining = this.resolveDuration();
+        this.timeoutEnabled = this.remaining > 0;
+        this.timedOut = false;
+        this.updateTimeout();
+    }
+    resolveDuration() {
+        if (typeof this.duration === 'number' && Number.isFinite(this.duration) && this.duration >= 0)
+            return this.duration;
+        return this.actionText ? 0 : DEFAULT_DURATION;
+    }
+    stopTimeout() {
+        if (this.timer !== undefined) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+            this.remaining = Math.max(0, this.remaining - (Date.now() - this.startedAt));
+        }
+    }
+    observeVisibility() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (typeof IntersectionObserver === 'undefined') {
+            this.visible = true;
+            this.updateTimeout();
+            return;
+        }
+        this.visible = false;
+        this.observer = new IntersectionObserver(entries => {
+            this.visible = entries.some(entry => entry.isIntersecting && entry.intersectionRatio > 0);
+            this.updateTimeout();
+        });
+        this.observer.observe(this.hostElement);
+    }
+    setHover(value) {
+        var _a, _b;
+        this.hovering = value && !((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(hover: none)').matches) !== null && _b !== void 0 ? _b : false);
+        this.updateTimeout();
+    }
+    get intent() {
+        return TOAST_INTENTS[this.type] || TOAST_INTENTS[SulaToastType.Neutral];
+    }
+    render() {
+        const intent = this.intent;
+        return (h(Host, { key: 'af689f4f1497431d4a9664ddb5452079f09ef03f', onMouseEnter: () => this.setHover(true), onMouseLeave: () => this.setHover(false), onFocusin: () => {
+                this.focused = true;
+                this.updateTimeout();
+            }, onFocusout: this.handleFocusOut }, h("div", { key: '51d418a2bcd9610ec55551828cff4aab8c085a62', part: "container", class: `toast-surface relative isolate box-border flex items-center w-full p-16 gap-12 rounded-sm border bg-opacity-toast ${intent.border} ${this.animated ? 'toast-surface--animated' : ''}`, style: { '--toast-border-color': intent.borderColor } }, this.icon && (h("div", { key: '383e8204c8f6cbfd13270a1543baea5273149bca', part: "icon", "aria-hidden": "true", class: `flex shrink-0 items-center justify-center w-44 h-44 rounded-xxl ${intent.background}` }, h("sula-icon", { key: 'b2a17f14dbfbd6975b29ccb63ee7a76705e20e12', icon: this.icon, customClass: `text-2xl ${intent.color}`, class: "flex leading-none" }))), h("div", { key: '8bd8d7c43b25d9c408b5e0e107fc3d5f78d92c4a', part: "content", class: `flex min-w-0 flex-1 flex-col gap-8 ${this.closable ? 'pr-48' : ''}` }, h("div", { key: 'fe41d0b855c17fb145c760815abc5fdd64e1dbc4', class: "flex flex-col gap-4" }, this.toastTitle && (h("p", { key: '0403d060fe5d28161bbf29cb937b8a0d90daf17d', class: "toast-copy toast-title text-label-medium-bold text-text-primary", title: this.toastTitle }, this.toastTitle)), this.message && (h("p", { key: 'b163c773c6a82f5dbb455770708ac9690efbffbe', class: "toast-copy toast-message text-label-medium-regular text-text-secondary", title: this.message }, this.message))), this.actionText && (h("button", { key: '07890efac226f3d8ad4dfa71422781ad94ab9be8', type: "button", class: `toast-copy toast-action self-start text-left text-label-medium-bold text-text-link underline rounded ${FOCUS_RING_CLASSES}`, title: this.actionText, onClick: () => this.toastAction.emit() }, this.actionText))), this.closable && (h("button", { key: 'da40e440a9b8efb785bb808718ae51d72c4550bc', part: "close-button", type: "button", "aria-label": this.closeLabel, class: `absolute top-16 right-16 flex items-center justify-center w-24 h-24 rounded ${intent.color} ${FOCUS_RING_CLASSES}`, onClick: () => this.toastDismissRequested.emit({ reason: 'close' }) }, h("sula-icon", { key: 'a326223db3ae4de7e0c2139b7b1b5f2ce3bf79ba', "aria-hidden": "true", icon: "ph ph-x", customClass: "text-2xl", class: "flex leading-none" }))), h("svg", { key: '6f0c0004ff519d857abcbed244215c9f2b9b7598', class: "toast-border", "aria-hidden": "true", focusable: "false" }, h("rect", { key: 'a2fec270e4bfc1afe1567e492c915304d6bd4f85', class: "toast-border__path", pathLength: "1" }))), h("div", { key: 'be19cd8661299b03aebc46d9eb94c53f948924f4', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.announcement === 'polite' ? this.announcedText : ''), h("div", { key: '2582e166e21d087d1e3f2b66d39b2a05d4d8bbb2', class: "sr-only", role: "alert", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement === 'assertive' ? this.announcedText : '')));
+    }
+    static get is() { return "sula-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-toast.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "toastTitle": {
+                "type": "string",
+                "attribute": "toast-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "attribute": "message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional notification description, displayed on up to four lines."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaToastType",
+                    "resolved": "SulaToastType.Brand | SulaToastType.Danger | SulaToastType.Info | SulaToastType.Neutral | SulaToastType.Success | SulaToastType.Warning",
+                    "references": {
+                        "SulaToastType": {
+                            "location": "import",
+                            "path": "./model/sula-toast.model",
+                            "id": "src/components/sula-toast/model/sula-toast.model.ts::SulaToastType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual intent, independent of announcement urgency."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaToastType.Neutral"
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional full Phosphor class name. No icon is displayed when omitted or empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "actionText": {
+                "type": "string",
+                "attribute": "action-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional single-line action label. The consumer implements the action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "closable": {
+                "type": "boolean",
+                "attribute": "closable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display the dismiss button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "duration": {
+                "type": "number",
+                "attribute": "duration",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds before requesting dismissal. Zero persists; omitted means 5000 without an action and persistent with an action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "paused": {
+                "type": "boolean",
+                "attribute": "paused",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Externally pause the remaining timeout, for example while covered by a stack."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "animated": {
+                "type": "boolean",
+                "attribute": "animated",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to play the entrance animations (fade-in and border trace). Disable when a parent already controls the animation, for example toasts covered in a stack."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "announcement": {
+                "type": "string",
+                "attribute": "announcement",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaToastAnnouncement",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {
+                        "SulaToastAnnouncement": {
+                            "location": "import",
+                            "path": "./model/sula-toast.model",
+                            "id": "src/components/sula-toast/model/sula-toast.model.ts::SulaToastAnnouncement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Screen reader announcement priority. Use off when a parent owns announcements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'polite'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "attribute": "close-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible dismiss button label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Fechar notifica\u00E7\u00E3o'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "announcedText": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toastDismissRequested",
+                "name": "toastDismissRequested",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Requests removal by the consumer. Does not remove or hide the element."
+                },
+                "complexType": {
+                    "original": "SulaToastDismissEvent",
+                    "resolved": "SulaToastDismissEvent",
+                    "references": {
+                        "SulaToastDismissEvent": {
+                            "location": "import",
+                            "path": "./model/sula-toast.model",
+                            "id": "src/components/sula-toast/model/sula-toast.model.ts::SulaToastDismissEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "toastAction",
+                "name": "toastAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Requests the configured action without dismissing the notification."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "toastTitle",
+                "methodName": "handleContentChange"
+            }, {
+                "propName": "message",
+                "methodName": "handleContentChange"
+            }, {
+                "propName": "actionText",
+                "methodName": "handleContentChange"
+            }, {
+                "propName": "duration",
+                "methodName": "handleContentChange"
+            }, {
+                "propName": "announcement",
+                "methodName": "updateAnnouncement"
+            }, {
+                "propName": "paused",
+                "methodName": "updateTimeout"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "visibilitychange",
+                "method": "updateTimeout",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=sula-toast.js.map

package/dist/collection/components/sula-toast/sula-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-toast.js","sourceRoot":"","sources":["../../../src/components/sula-toast/sula-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaToastAnnouncement, SulaToastDismissEvent, SulaToastType } from './model/sula-toast.model';\n\nconst DEFAULT_DURATION = 5000;\nconst FOCUS_RING_CLASSES = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-feedback-informational focus-visible:outline-offset-2';\n\nconst TOAST_INTENTS: Record<SulaToastType, { border: string; borderColor: string; color: string; background: string }> = {\n  [SulaToastType.Neutral]: {\n    border: 'border-line-general',\n    borderColor: 'var(--color-line-general)',\n    color: 'text-icon-primary',\n    background: 'bg-surface-on-body',\n  },\n  [SulaToastType.Brand]: {\n    border: 'border-brand-primary',\n    borderColor: 'var(--color-brand-primary)',\n    color: 'text-brand-primary',\n    background: 'bg-surface-on-body-brand',\n  },\n  [SulaToastType.Info]: {\n    border: 'border-feedback-informational',\n    borderColor: 'var(--color-feedback-informational)',\n    color: 'text-feedback-informational',\n    background: 'bg-surface-on-body-feedback-info',\n  },\n  [SulaToastType.Success]: {\n    border: 'border-feedback-success',\n    borderColor: 'var(--color-feedback-success)',\n    color: 'text-feedback-success',\n    background: 'bg-surface-on-body-feedback-success',\n  },\n  [SulaToastType.Warning]: {\n    border: 'border-feedback-alert',\n    borderColor: 'var(--color-feedback-alert)',\n    color: 'text-feedback-alert',\n    background: 'bg-surface-on-body-feedback-alert',\n  },\n  [SulaToastType.Danger]: {\n    border: 'border-feedback-error',\n    borderColor: 'var(--color-feedback-error)',\n    color: 'text-feedback-error',\n    background: 'bg-surface-on-body-feedback-error',\n  },\n};\n\n/**\n * A controlled notification. The consumer removes it after toastDismissRequested.\n * @part container - Notification surface.\n * @part icon - Decorative intent icon.\n * @part content - Title, description and action.\n * @part close-button - Dismiss button.\n */\n@Component({ tag: 'sula-toast', styleUrl: 'sula-toast.scss', shadow: true })\nexport class SulaToast {\n  @Element() hostElement: HTMLElement;\n\n  /** Notification title. */\n  @Prop() toastTitle = '';\n\n  /** Optional notification description, displayed on up to four lines. */\n  @Prop() message = '';\n\n  /** Visual intent, independent of announcement urgency. */\n  @Prop() type: SulaToastType = SulaToastType.Neutral;\n\n  /** Optional full Phosphor class name. No icon is displayed when omitted or empty. */\n  @Prop() icon?: string;\n\n  /** Optional single-line action label. The consumer implements the action. */\n  @Prop() actionText = '';\n\n  /** Whether to display the dismiss button. */\n  @Prop() closable = true;\n\n  /** Milliseconds before requesting dismissal. Zero persists; omitted means 5000 without an action and persistent with an action. */\n  @Prop() duration?: number;\n\n  /** Externally pause the remaining timeout, for example while covered by a stack. */\n  @Prop() paused = false;\n\n  /** Whether to play the entrance animations (fade-in and border trace). Disable when a parent already controls the animation, for example toasts covered in a stack. */\n  @Prop() animated = true;\n\n  /** Screen reader announcement priority. Use off when a parent owns announcements. */\n  @Prop() announcement: SulaToastAnnouncement = 'polite';\n\n  /** Accessible dismiss button label. */\n  @Prop() closeLabel = 'Fechar notificação';\n\n  /** Requests removal by the consumer. Does not remove or hide the element. */\n  @Event() toastDismissRequested: EventEmitter<SulaToastDismissEvent>;\n  /** Requests the configured action without dismissing the notification. */\n  @Event() toastAction: EventEmitter<void>;\n\n  @State() announcedText = '';\n  private timer?: ReturnType<typeof setTimeout>;\n  private observer?: IntersectionObserver;\n  private remaining = 0;\n  private startedAt = 0;\n  private timedOut = false;\n  private timeoutEnabled = false;\n  private hovering = false;\n  private focused = false;\n  private visible = false;\n  private ready = false;\n  private connected = false;\n\n  connectedCallback() {\n    this.connected = true;\n    if (this.ready) this.observeVisibility();\n  }\n\n  componentDidLoad() {\n    this.ready = true;\n    this.resetTimeout();\n    Promise.resolve().then(() => {\n      if (this.connected) this.updateAnnouncement();\n    });\n    this.observeVisibility();\n  }\n\n  disconnectedCallback() {\n    this.connected = false;\n    this.stopTimeout();\n    this.observer?.disconnect();\n    this.hovering = false;\n    this.focused = false;\n  }\n\n  @Watch('toastTitle')\n  @Watch('message')\n  @Watch('actionText')\n  @Watch('duration')\n  handleContentChange() {\n    this.resetTimeout();\n    this.updateAnnouncement();\n  }\n\n  @Watch('announcement')\n  updateAnnouncement() {\n    this.announcedText = this.announcement === 'off' ? '' : [this.toastTitle, this.message].filter(Boolean).join('. ');\n  }\n\n  @Watch('paused')\n  @Listen('visibilitychange', { target: 'document' })\n  updateTimeout() {\n    const blocked = !this.connected || !this.ready || !this.visible || this.paused || this.hovering || this.focused || document.visibilityState === 'hidden';\n    if (blocked) {\n      this.stopTimeout();\n    } else if (this.timer === undefined && this.timeoutEnabled && !this.timedOut) {\n      this.startedAt = Date.now();\n      this.timer = setTimeout(() => {\n        this.timer = undefined;\n        this.remaining = 0;\n        this.timedOut = true;\n        this.toastDismissRequested.emit({ reason: 'timeout' });\n      }, this.remaining);\n    }\n  }\n\n  private resetTimeout() {\n    this.stopTimeout();\n    this.remaining = this.resolveDuration();\n    this.timeoutEnabled = this.remaining > 0;\n    this.timedOut = false;\n    this.updateTimeout();\n  }\n\n  private resolveDuration() {\n    if (typeof this.duration === 'number' && Number.isFinite(this.duration) && this.duration >= 0) return this.duration;\n    return this.actionText ? 0 : DEFAULT_DURATION;\n  }\n\n  private stopTimeout() {\n    if (this.timer !== undefined) {\n      clearTimeout(this.timer);\n      this.timer = undefined;\n      this.remaining = Math.max(0, this.remaining - (Date.now() - this.startedAt));\n    }\n  }\n\n  private observeVisibility() {\n    this.observer?.disconnect();\n    if (typeof IntersectionObserver === 'undefined') {\n      this.visible = true;\n      this.updateTimeout();\n      return;\n    }\n    this.visible = false;\n    this.observer = new IntersectionObserver(entries => {\n      this.visible = entries.some(entry => entry.isIntersecting && entry.intersectionRatio > 0);\n      this.updateTimeout();\n    });\n    this.observer.observe(this.hostElement);\n  }\n\n  private setHover(value: boolean) {\n    this.hovering = value && !(window.matchMedia?.('(hover: none)').matches ?? false);\n    this.updateTimeout();\n  }\n\n  private handleFocusOut = (event: FocusEvent) => {\n    const target = event.relatedTarget as Node | null;\n    this.focused = !!target && (this.hostElement.contains(target) || this.hostElement.shadowRoot.contains(target));\n    this.updateTimeout();\n  };\n\n  private get intent() {\n    return TOAST_INTENTS[this.type] || TOAST_INTENTS[SulaToastType.Neutral];\n  }\n\n  render() {\n    const intent = this.intent;\n    return (\n      <Host\n        onMouseEnter={() => this.setHover(true)}\n        onMouseLeave={() => this.setHover(false)}\n        onFocusin={() => {\n          this.focused = true;\n          this.updateTimeout();\n        }}\n        onFocusout={this.handleFocusOut}\n      >\n        <div\n          part=\"container\"\n          class={`toast-surface relative isolate box-border flex items-center w-full p-16 gap-12 rounded-sm border bg-opacity-toast ${intent.border} ${this.animated ? 'toast-surface--animated' : ''}`}\n          style={{ '--toast-border-color': intent.borderColor }}\n        >\n          {this.icon && (\n            <div part=\"icon\" aria-hidden=\"true\" class={`flex shrink-0 items-center justify-center w-44 h-44 rounded-xxl ${intent.background}`}>\n              <sula-icon icon={this.icon} customClass={`text-2xl ${intent.color}`} class=\"flex leading-none\" />\n            </div>\n          )}\n          <div part=\"content\" class={`flex min-w-0 flex-1 flex-col gap-8 ${this.closable ? 'pr-48' : ''}`}>\n            <div class=\"flex flex-col gap-4\">\n              {this.toastTitle && (\n                <p class=\"toast-copy toast-title text-label-medium-bold text-text-primary\" title={this.toastTitle}>\n                  {this.toastTitle}\n                </p>\n              )}\n              {this.message && (\n                <p class=\"toast-copy toast-message text-label-medium-regular text-text-secondary\" title={this.message}>\n                  {this.message}\n                </p>\n              )}\n            </div>\n            {this.actionText && (\n              <button\n                type=\"button\"\n                class={`toast-copy toast-action self-start text-left text-label-medium-bold text-text-link underline rounded ${FOCUS_RING_CLASSES}`}\n                title={this.actionText}\n                onClick={() => this.toastAction.emit()}\n              >\n                {this.actionText}\n              </button>\n            )}\n          </div>\n          {this.closable && (\n            <button\n              part=\"close-button\"\n              type=\"button\"\n              aria-label={this.closeLabel}\n              class={`absolute top-16 right-16 flex items-center justify-center w-24 h-24 rounded ${intent.color} ${FOCUS_RING_CLASSES}`}\n              onClick={() => this.toastDismissRequested.emit({ reason: 'close' })}\n            >\n              <sula-icon aria-hidden=\"true\" icon=\"ph ph-x\" customClass=\"text-2xl\" class=\"flex leading-none\" />\n            </button>\n          )}\n          <svg class=\"toast-border\" aria-hidden=\"true\" focusable=\"false\">\n            <rect class=\"toast-border__path\" pathLength=\"1\" />\n          </svg>\n        </div>\n        <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n          {this.announcement === 'polite' ? this.announcedText : ''}\n        </div>\n        <div class=\"sr-only\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">\n          {this.announcement === 'assertive' ? this.announcedText : ''}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sula-toast/sula-toast.stories.js

@@ -0,0 +1,101 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { SulaToastType } from "./model/sula-toast.model";
+export default {
+    title: 'Components/sula-toast',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Notificação controlada com seis intenções. Ao entrar, surge suavemente enquanto a borda percorre o perímetro. A aplicação remove o elemento ao receber toastDismissRequested e implementa a ação em toastAction. Sem duração explícita, mensagens sem ação duram 5 segundos; com ação permanecem. As demonstrações visuais usam duration=0.',
+            },
+        },
+    },
+    argTypes: {
+        toastTitle: { control: 'text', description: 'Título da notificação.' },
+        message: { control: 'text', description: 'Descrição opcional, limitada visualmente a quatro linhas.' },
+        type: { control: 'select', options: Object.values(SulaToastType) },
+        icon: { control: 'text', description: 'Classe Phosphor completa; omitida ou vazia não exibe ícone.' },
+        actionText: { control: 'text', description: 'Ação opcional de uma linha, com reticências quando necessário.' },
+        closable: { control: 'boolean' },
+        duration: { control: 'number', description: 'Milissegundos; 0 mantém a mensagem visível.' },
+        paused: { control: 'boolean' },
+        animated: { control: 'boolean', description: 'Controla a animação de entrada (fade e traçado da borda).' },
+        announcement: { control: 'select', options: ['polite', 'assertive', 'off'] },
+        closeLabel: { control: 'text' },
+        toastAction: { action: 'toastAction' },
+        toastDismissRequested: { action: 'toastDismissRequested' },
+    },
+};
+const Template = args => {
+    const surface = document.createElement('div');
+    surface.className = 'bg-surface-on-body rounded-sm p-32';
+    const toast = document.createElement('sula-toast');
+    const { toastAction, toastDismissRequested } = args, props = __rest(args, ["toastAction", "toastDismissRequested"]);
+    Object.assign(toast, props);
+    toast.addEventListener('toastAction', event => toastAction === null || toastAction === void 0 ? void 0 : toastAction(event));
+    toast.addEventListener('toastDismissRequested', event => toastDismissRequested === null || toastDismissRequested === void 0 ? void 0 : toastDismissRequested(event));
+    surface.append(toast);
+    return surface;
+};
+const defaults = {
+    toastTitle: 'Toast title',
+    message: 'This is a description with supporting details.',
+    actionText: 'Desfazer',
+    duration: 0,
+    icon: 'ph ph-circle-dashed',
+    closable: true,
+    announcement: 'polite',
+    closeLabel: 'Fechar notificação',
+};
+export const Neutral = { render: Template, args: Object.assign(Object.assign({}, defaults), { type: SulaToastType.Neutral }) };
+export const Brand = { render: Template, args: Object.assign(Object.assign({}, defaults), { type: SulaToastType.Brand }) };
+export const Info = { render: Template, args: Object.assign(Object.assign({}, defaults), { type: SulaToastType.Info, icon: 'ph ph-info' }) };
+export const Success = { render: Template, args: Object.assign(Object.assign({}, defaults), { type: SulaToastType.Success, icon: 'ph ph-check-circle' }) };
+export const Warning = { render: Template, args: Object.assign(Object.assign({}, defaults), { type: SulaToastType.Warning, icon: 'ph ph-warning' }) };
+export const Danger = { render: Template, args: Object.assign(Object.assign({}, defaults), { type: SulaToastType.Danger, icon: 'ph ph-warning-circle' }) };
+export const WithoutAction = { render: Template, args: Object.assign(Object.assign({}, defaults), { actionText: '' }) };
+export const WithoutIconOrClose = { render: Template, args: Object.assign(Object.assign({}, defaults), { icon: '', closable: false }) };
+export const LongContent = {
+    render: Template,
+    args: Object.assign(Object.assign({}, defaults), { toastTitle: 'Um título que pode ocupar mais de uma linha', message: 'A descrição ocupa até quatro linhas e termina com reticências quando o conteúdo ultrapassa o espaço disponível: abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz.', actionText: 'Uma ação extensa também permanece em uma única linha' }),
+};
+export const ControlledDismissal = {
+    render: () => {
+        const container = document.createElement('div');
+        const show = document.createElement('button');
+        show.type = 'button';
+        show.textContent = 'Mostrar notificação novamente';
+        show.className = 'text-text-link underline mb-24';
+        const output = document.createElement('div');
+        const showToast = () => {
+            const toast = document.createElement('sula-toast');
+            toast.toastTitle = 'Alterações salvas';
+            toast.message = 'Passe o mouse ou use Tab para pausar o tempo.';
+            toast.addEventListener('toastDismissRequested', () => {
+                const wasFocused = toast.matches(':focus-within');
+                toast.remove();
+                show.hidden = false;
+                if (wasFocused)
+                    show.focus();
+            });
+            show.hidden = true;
+            output.replaceChildren(toast);
+        };
+        show.addEventListener('click', showToast);
+        container.append(show, output);
+        showToast();
+        return container;
+    },
+};
+//# sourceMappingURL=sula-toast.stories.js.map