npm - @sula-tech/webcomponents - Versions diffs - 0.19.3 → 0.20.0 - Mend

@sula-tech/webcomponents 0.19.3 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

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

@@ -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 ADDED Viewed

@@ -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

package/dist/collection/components/sula-toast/sula-toast.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-toast.stories.js","sourceRoot":"","sources":["../../../src/components/sula-toast/sula-toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaToastType } from './model/sula-toast.model';\n\nexport default {\n title: 'Components/sula-toast',\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component:\n '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.',\n },\n },\n },\n argTypes: {\n toastTitle: { control: 'text', description: 'Título da notificação.' },\n message: { control: 'text', description: 'Descrição opcional, limitada visualmente a quatro linhas.' },\n type: { control: 'select', options: Object.values(SulaToastType) },\n icon: { control: 'text', description: 'Classe Phosphor completa; omitida ou vazia não exibe ícone.' },\n actionText: { control: 'text', description: 'Ação opcional de uma linha, com reticências quando necessário.' },\n closable: { control: 'boolean' },\n duration: { control: 'number', description: 'Milissegundos; 0 mantém a mensagem visível.' },\n paused: { control: 'boolean' },\n animated: { control: 'boolean', description: 'Controla a animação de entrada (fade e traçado da borda).' },\n announcement: { control: 'select', options: ['polite', 'assertive', 'off'] },\n closeLabel: { control: 'text' },\n toastAction: { action: 'toastAction' },\n toastDismissRequested: { action: 'toastDismissRequested' },\n },\n};\n\nconst Template = args => {\n const surface = document.createElement('div');\n surface.className = 'bg-surface-on-body rounded-sm p-32';\n const toast = document.createElement('sula-toast');\n const { toastAction, toastDismissRequested, ...props } = args;\n Object.assign(toast, props);\n toast.addEventListener('toastAction', event => toastAction?.(event));\n toast.addEventListener('toastDismissRequested', event => toastDismissRequested?.(event));\n surface.append(toast);\n return surface;\n};\n\nconst defaults = {\n toastTitle: 'Toast title',\n message: 'This is a description with supporting details.',\n actionText: 'Desfazer',\n duration: 0,\n icon: 'ph ph-circle-dashed',\n closable: true,\n announcement: 'polite',\n closeLabel: 'Fechar notificação',\n};\nexport const Neutral = { render: Template, args: { ...defaults, type: SulaToastType.Neutral } };\nexport const Brand = { render: Template, args: { ...defaults, type: SulaToastType.Brand } };\nexport const Info = { render: Template, args: { ...defaults, type: SulaToastType.Info, icon: 'ph ph-info' } };\nexport const Success = { render: Template, args: { ...defaults, type: SulaToastType.Success, icon: 'ph ph-check-circle' } };\nexport const Warning = { render: Template, args: { ...defaults, type: SulaToastType.Warning, icon: 'ph ph-warning' } };\nexport const Danger = { render: Template, args: { ...defaults, type: SulaToastType.Danger, icon: 'ph ph-warning-circle' } };\nexport const WithoutAction = { render: Template, args: { ...defaults, actionText: '' } };\nexport const WithoutIconOrClose = { render: Template, args: { ...defaults, icon: '', closable: false } };\nexport const LongContent = {\n render: Template,\n args: {\n ...defaults,\n toastTitle: 'Um título que pode ocupar mais de uma linha',\n message:\n 'A descrição ocupa até quatro linhas e termina com reticências quando o conteúdo ultrapassa o espaço disponível: abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz.',\n actionText: 'Uma ação extensa também permanece em uma única linha',\n },\n};\nexport const ControlledDismissal = {\n render: () => {\n const container = document.createElement('div');\n const show = document.createElement('button');\n show.type = 'button';\n show.textContent = 'Mostrar notificação novamente';\n show.className = 'text-text-link underline mb-24';\n const output = document.createElement('div');\n\n const showToast = () => {\n const toast = document.createElement('sula-toast');\n toast.toastTitle = 'Alterações salvas';\n toast.message = 'Passe o mouse ou use Tab para pausar o tempo.';\n toast.addEventListener('toastDismissRequested', () => {\n const wasFocused = toast.matches(':focus-within');\n toast.remove();\n show.hidden = false;\n if (wasFocused) show.focus();\n });\n show.hidden = true;\n output.replaceChildren(toast);\n };\n\n show.addEventListener('click', showToast);\n container.append(show, output);\n showToast();\n return container;\n },\n};\n"]}

package/dist/collection/components/sula-toast-stack/model/sula-toast-stack.model.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=sula-toast-stack.model.js.map

package/dist/collection/components/sula-toast-stack/model/sula-toast-stack.model.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-toast-stack.model.js","sourceRoot":"","sources":["../../../../src/components/sula-toast-stack/model/sula-toast-stack.model.ts"],"names":[],"mappings":"","sourcesContent":["import type { SulaToastAnnouncement } from '../../sula-toast/model/sula-toast.model';\n\nexport type AnnouncementPriority = Exclude<SulaToastAnnouncement, 'off'>;\n\nexport interface Announcement {\n id: string;\n version: number;\n text: string;\n priority: AnnouncementPriority;\n}\n"]}

package/dist/collection/components/sula-toast-stack/sula-toast-stack.css ADDED Viewed

@@ -0,0 +1 @@

+ *,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{font-family:Figtree;line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.block{display:block}.hidden{display:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}:host,:host button,:host input,:host option,:host select,:host textarea{font-family:Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:host{background-color:transparent;display:block;max-width:400px;width:100%}.toast-region{background-color:transparent}.toast-list--collapsed{padding-top:var(--toast-layer-offset)}.toast-layer--entering{animation:sula-toast-stack-enter .2s cubic-bezier(.2,.8,.2,1)}@keyframes sula-toast-stack-enter{0%{scale:.98;translate:0 -8px}to{scale:1;translate:0}}@media (prefers-reduced-motion:reduce){.toast-layer--entering{animation:none}}.toast-layer.toast-layer--covered{bottom:0;clip-path:inset(0 0 calc(100% - 12px) 0);position:absolute;top:var(--toast-layer-offset);inset-inline:0;margin-inline:auto;pointer-events:none;transform:translateY(calc(var(--toast-depth)*-12px));width:var(--toast-width)}.toast-layer.toast-layer--covered sula-toast,.toast-layer.toast-layer--covered sula-toast::part(container){height:100%}.toast-layer.toast-layer--covered sula-toast::part(container){box-shadow:none;isolation:auto;overflow:hidden}.toast-layer.toast-layer--covered sula-toast::part(close-button),.toast-layer.toast-layer--covered sula-toast::part(content),.toast-layer.toast-layer--covered sula-toast::part(icon){visibility:hidden}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:300;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Light.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:300;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-LightItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:400;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:400;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Italic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:500;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Medium.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:500;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-MediumItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:600;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-SemiBold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:600;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-SemiBoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:700;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Bold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:700;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-BoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:800;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-ExtraBold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:800;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-ExtraBoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:900;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Black.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:900;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-BlackItalic.ttf) format("truetype")}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#012b15;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#330d00;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#402705;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#401204;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f3f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-opacity-toast:#ffffff45;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.relative{position:relative}.flex{display:flex}.w-full{width:100%}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.gap-12{gap:.75rem}.rounded-sm{border-radius:.75rem}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-feedback-informational:focus-visible{outline-color:var(--color-feedback-informational)}

package/dist/collection/components/sula-toast-stack/sula-toast-stack.js ADDED Viewed

@@ -0,0 +1,333 @@
+import { Host, h } from "@stencil/core";
+import { SulaToastStackMotion } from "./sula-toast-stack.motion";
+const MAX_VISIBLE_LAYERS = 3;
+const LAYER_OFFSET = 12;
+const LAYER_WIDTH_STEP = 5;
+export class SulaToastStack {
+    constructor() {
+        /** Notifications in chronological order, oldest first. Only the latest three are rendered. Replace the array to update it. IDs must be unique. */
+        this.items = [];
+        this.hovering = false;
+        this.focused = false;
+        this.noHover = false;
+        this.retainingPointerExpansion = false;
+        this.announcements = [];
+        this.announcementVersions = 0;
+        this.announcementSignatures = new Map();
+        this.enteringIds = new Set();
+        this.keyboardInteraction = false;
+        this.releaseFocusAfterRender = false;
+        this.ready = false;
+        this.connected = false;
+        this.motion = new SulaToastStackMotion();
+        this.handleMediaChange = (event) => {
+            this.noHover = event.matches;
+            this.hovering = false;
+            this.stopRetainingPointerExpansion();
+        };
+        this.handlePointerMove = (event) => {
+            var _a;
+            const bounds = (_a = this.region) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            this.hovering = !!bounds && event.clientX >= bounds.left && event.clientX <= bounds.right && event.clientY >= bounds.top && event.clientY <= bounds.bottom;
+            this.stopRetainingPointerExpansion();
+        };
+        this.handleFocusOut = () => {
+            if (this.focusFrame !== undefined)
+                cancelAnimationFrame(this.focusFrame);
+            this.focusFrame = requestAnimationFrame(() => {
+                var _a;
+                this.focusFrame = undefined;
+                this.focused = !!((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement);
+            });
+        };
+        this.dismiss = (event, id) => {
+            event.stopPropagation();
+            this.toastDismissRequested.emit({ id, reason: event.detail.reason });
+        };
+        this.action = (event, id) => {
+            event.stopPropagation();
+            this.toastAction.emit({ id });
+        };
+    }
+    get expanded() {
+        return this.noHover || this.hovering || this.focused || this.retainingPointerExpansion;
+    }
+    get visibleItems() {
+        return this.items.slice(-MAX_VISIBLE_LAYERS);
+    }
+    get motionTargets() {
+        var _a, _b, _c;
+        const reduceMotion = (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)').matches) !== null && _b !== void 0 ? _b : false;
+        if (!this.ready || this.noHover || reduceMotion || !((_c = this.region) === null || _c === void 0 ? void 0 : _c.animate) || !this.list)
+            return;
+        return { region: this.region, list: this.list };
+    }
+    connectedCallback() {
+        this.connected = true;
+        if (this.ready)
+            this.connectListeners();
+    }
+    componentDidLoad() {
+        this.ready = true;
+        this.connectListeners();
+        Promise.resolve().then(() => {
+            if (this.connected)
+                this.updateAnnouncements();
+        });
+    }
+    componentWillRender() {
+        if (this.renderedExpanded === this.expanded)
+            return;
+        this.renderedExpanded = this.expanded;
+        const targets = this.motionTargets;
+        if (!targets) {
+            this.motion.cancel();
+            return;
+        }
+        this.motion.capture(targets.region, targets.list);
+    }
+    componentDidRender() {
+        this.restoreFocus();
+        this.releasePointerFocus();
+        if (this.region && this.list)
+            this.motion.play(this.region, this.list);
+    }
+    disconnectedCallback() {
+        var _a;
+        this.connected = false;
+        this.motion.cancel();
+        (_a = this.media) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.handleMediaChange);
+        window.removeEventListener('pointermove', this.handlePointerMove);
+        if (this.focusFrame !== undefined)
+            cancelAnimationFrame(this.focusFrame);
+        this.focusFrame = undefined;
+        this.keyboardInteraction = false;
+        this.retainingPointerExpansion = false;
+        this.hovering = false;
+        this.focused = false;
+    }
+    handleItemsChange(next, previous = []) {
+        var _a, _b, _c, _d, _e, _f;
+        const targets = this.motionTargets;
+        if (targets)
+            this.motion.capture(targets.region, targets.list);
+        else
+            this.motion.cancel();
+        const active = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+        const focusedId = (_b = active === null || active === void 0 ? void 0 : active.closest('[data-toast-id]')) === null || _b === void 0 ? void 0 : _b.dataset.toastId;
+        const nextVisible = next.slice(-MAX_VISIBLE_LAYERS);
+        const previousVisibleIds = new Set(previous.slice(-MAX_VISIBLE_LAYERS).map(item => item.id));
+        this.enteringIds = this.ready ? new Set(nextVisible.filter(item => !previousVisibleIds.has(item.id)).map(item => item.id)) : new Set();
+        if (focusedId !== undefined && !nextVisible.some(item => item.id === focusedId)) {
+            if (this.keyboardInteraction) {
+                const visibleIds = new Set(nextVisible.map(item => item.id));
+                const index = previous.findIndex(item => item.id === focusedId);
+                const following = previous.slice(index + 1).find(item => visibleIds.has(item.id));
+                const preceding = previous
+                    .slice(0, index)
+                    .reverse()
+                    .find(item => visibleIds.has(item.id));
+                this.focusTarget = (_f = (_d = (_c = following === null || following === void 0 ? void 0 : following.id) !== null && _c !== void 0 ? _c : preceding === null || preceding === void 0 ? void 0 : preceding.id) !== null && _d !== void 0 ? _d : (_e = nextVisible[0]) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : '';
+            }
+            else {
+                this.focusTarget = undefined;
+                this.releaseFocusAfterRender = true;
+                if (nextVisible.length && !this.noHover) {
+                    this.retainingPointerExpansion = true;
+                    window.addEventListener('pointermove', this.handlePointerMove, { once: true });
+                }
+                this.focused = false;
+            }
+        }
+        if (this.ready)
+            this.updateAnnouncements();
+    }
+    updateAnnouncements() {
+        const records = [];
+        const signatures = new Map();
+        for (const item of this.visibleItems) {
+            const priority = item.announcement || 'polite';
+            const text = [item.title, item.message].filter(Boolean).join('. ');
+            const signature = JSON.stringify([text, priority]);
+            signatures.set(item.id, signature);
+            if (priority === 'off' || !text)
+                continue;
+            const previous = this.announcements.find(record => record.id === item.id);
+            records.push(this.announcementSignatures.get(item.id) === signature && previous
+                ? previous
+                : {
+                    id: item.id,
+                    text,
+                    priority,
+                    version: ++this.announcementVersions,
+                });
+        }
+        this.announcementSignatures = signatures;
+        this.announcements = records;
+    }
+    connectListeners() {
+        var _a, _b, _c, _d;
+        this.media = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(hover: none)');
+        this.noHover = (_c = (_b = this.media) === null || _b === void 0 ? void 0 : _b.matches) !== null && _c !== void 0 ? _c : false;
+        (_d = this.media) === null || _d === void 0 ? void 0 : _d.addEventListener('change', this.handleMediaChange);
+    }
+    stopRetainingPointerExpansion() {
+        window.removeEventListener('pointermove', this.handlePointerMove);
+        this.retainingPointerExpansion = false;
+    }
+    restoreFocus() {
+        var _a, _b;
+        if (this.focusTarget === undefined)
+            return;
+        const targetId = this.focusTarget;
+        this.focusTarget = undefined;
+        const target = Array.from(((_a = this.list) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-toast-id]')) || []).find(element => element.dataset.toastId === targetId);
+        (_b = (target || this.region)) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    releasePointerFocus() {
+        var _a, _b;
+        if (!this.releaseFocusAfterRender)
+            return;
+        this.releaseFocusAfterRender = false;
+        let active = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+        while ((_b = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement)
+            active = active.shadowRoot.activeElement;
+        active === null || active === void 0 ? void 0 : active.blur();
+        this.focused = false;
+    }
+    render() {
+        const expanded = this.expanded;
+        const visibleItems = this.visibleItems;
+        return (h(Host, { key: 'e52aeb1dd9f0d54498a4c7a0ad2300cdc5d24484' }, h("section", { key: '7c829968e841616450c308571cd1b60341b3c38b', ref: el => (this.region = el), role: "region", "aria-label": "Notifica\u00E7\u00F5es", tabIndex: 0, class: "toast-region w-full rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-feedback-informational focus-visible:outline-offset-2", onMouseEnter: () => {
+                if (!this.noHover)
+                    this.hovering = true;
+            }, onMouseLeave: () => (this.hovering = false), onPointerDown: () => {
+                this.keyboardInteraction = false;
+                this.stopRetainingPointerExpansion();
+            }, onKeyDown: () => {
+                this.keyboardInteraction = true;
+                this.stopRetainingPointerExpansion();
+            }, onFocusin: () => (this.focused = true), onFocusout: this.handleFocusOut }, h("div", { key: '2327880499750943034cf47d8f2ea2dfd13d0e5a', ref: el => (this.list = el), class: { 'toast-list relative flex flex-col gap-12': true, 'toast-list--collapsed': !expanded }, style: {
+                '--toast-layer-offset': `${Math.max(0, visibleItems.length - 1) * LAYER_OFFSET}px`,
+            } }, visibleItems.map((item, index) => {
+            var _a, _b, _c, _d;
+            const depth = visibleItems.length - 1 - index;
+            const covered = !expanded && depth > 0;
+            return (h("div", { key: item.id, "data-toast-id": item.id, tabIndex: -1, "aria-hidden": covered ? 'true' : undefined, inert: covered, class: {
+                    'toast-layer relative w-full min-w-0 shrink-0': true,
+                    'toast-layer--covered': covered,
+                    'toast-layer--entering': this.enteringIds.has(item.id),
+                }, style: {
+                    '--toast-depth': String(depth),
+                    '--toast-width': `${100 - Math.min(depth, MAX_VISIBLE_LAYERS - 1) * LAYER_WIDTH_STEP}%`,
+                } }, h("sula-toast", { toastTitle: item.title, message: (_a = item.message) !== null && _a !== void 0 ? _a : '', type: item.type, icon: item.icon, actionText: (_b = item.actionText) !== null && _b !== void 0 ? _b : '', closable: (_c = item.closable) !== null && _c !== void 0 ? _c : true, duration: item.duration, closeLabel: (_d = item.closeLabel) !== null && _d !== void 0 ? _d : 'Fechar notificação', paused: covered || this.hovering || this.focused || this.retainingPointerExpansion, announcement: "off", animated: depth === 0, onToastDismissRequested: event => this.dismiss(event, item.id), onToastAction: event => this.action(event, item.id) })));
+        }))), h("div", { key: 'be446beb46594f14b6079a5a0649c9bf3a17b0cb', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "false", "aria-relevant": "additions text" }, this.announcements
+            .filter(record => record.priority === 'polite')
+            .map(record => (h("p", { key: record.version }, record.text)))), h("div", { key: '5d9e871c11e91fb293f22c92ddd5a590517576f1', class: "sr-only", role: "alert", "aria-live": "assertive", "aria-atomic": "false", "aria-relevant": "additions text" }, this.announcements
+            .filter(record => record.priority === 'assertive')
+            .map(record => (h("p", { key: record.version }, record.text))))));
+    }
+    static get is() { return "sula-toast-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-toast-stack.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-toast-stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaToastItem[]",
+                    "resolved": "SulaToastItem[]",
+                    "references": {
+                        "SulaToastItem": {
+                            "location": "import",
+                            "path": "../sula-toast/model/sula-toast.model",
+                            "id": "src/components/sula-toast/model/sula-toast.model.ts::SulaToastItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notifications in chronological order, oldest first. Only the latest three are rendered. Replace the array to update it. IDs must be unique."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hovering": {},
+            "focused": {},
+            "noHover": {},
+            "retainingPointerExpansion": {},
+            "announcements": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toastDismissRequested",
+                "name": "toastDismissRequested",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Requests removal of the identified notification by the consumer."
+                },
+                "complexType": {
+                    "original": "SulaToastStackDismissEvent",
+                    "resolved": "SulaToastStackDismissEvent",
+                    "references": {
+                        "SulaToastStackDismissEvent": {
+                            "location": "import",
+                            "path": "../sula-toast/model/sula-toast.model",
+                            "id": "src/components/sula-toast/model/sula-toast.model.ts::SulaToastStackDismissEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "toastAction",
+                "name": "toastAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Requests the identified notification's action without removing it."
+                },
+                "complexType": {
+                    "original": "SulaToastStackActionEvent",
+                    "resolved": "SulaToastStackActionEvent",
+                    "references": {
+                        "SulaToastStackActionEvent": {
+                            "location": "import",
+                            "path": "../sula-toast/model/sula-toast.model",
+                            "id": "src/components/sula-toast/model/sula-toast.model.ts::SulaToastStackActionEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "handleItemsChange"
+            }];
+    }
+}
+//# sourceMappingURL=sula-toast-stack.js.map

package/dist/collection/components/sula-toast-stack/sula-toast-stack.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-toast-stack.js","sourceRoot":"","sources":["../../../src/components/sula-toast-stack/sula-toast-stack.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaToastDismissEvent, SulaToastItem, SulaToastStackActionEvent, SulaToastStackDismissEvent } from '../sula-toast/model/sula-toast.model';\nimport type { Announcement } from './model/sula-toast-stack.model';\nimport { SulaToastStackMotion } from './sula-toast-stack.motion';\n\nconst MAX_VISIBLE_LAYERS = 3;\nconst LAYER_OFFSET = 12;\nconst LAYER_WIDTH_STEP = 5;\n\n@Component({ tag: 'sula-toast-stack', styleUrl: 'sula-toast-stack.scss', shadow: true })\nexport class SulaToastStack {\n @Element() hostElement: HTMLElement;\n\n /** Notifications in chronological order, oldest first. Only the latest three are rendered. Replace the array to update it. IDs must be unique. */\n @Prop() items: SulaToastItem[] = [];\n\n /** Requests removal of the identified notification by the consumer. */\n @Event() toastDismissRequested: EventEmitter<SulaToastStackDismissEvent>;\n\n /** Requests the identified notification's action without removing it. */\n @Event() toastAction: EventEmitter<SulaToastStackActionEvent>;\n\n @State() hovering = false;\n @State() focused = false;\n @State() noHover = false;\n @State() retainingPointerExpansion = false;\n @State() announcements: Announcement[] = [];\n\n private region?: HTMLElement;\n private list?: HTMLElement;\n private media?: MediaQueryList;\n private announcementVersions = 0;\n private announcementSignatures = new Map<string, string>();\n private enteringIds = new Set<string>();\n private focusTarget?: string;\n private focusFrame?: number;\n private keyboardInteraction = false;\n private releaseFocusAfterRender = false;\n private ready = false;\n private connected = false;\n private renderedExpanded?: boolean;\n private motion = new SulaToastStackMotion();\n\n private get expanded() {\n return this.noHover || this.hovering || this.focused || this.retainingPointerExpansion;\n }\n\n private get visibleItems() {\n return this.items.slice(-MAX_VISIBLE_LAYERS);\n }\n\n private get motionTargets() {\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n if (!this.ready || this.noHover || reduceMotion || !this.region?.animate || !this.list) return;\n return { region: this.region, list: this.list };\n }\n\n connectedCallback() {\n this.connected = true;\n if (this.ready) this.connectListeners();\n }\n\n componentDidLoad() {\n this.ready = true;\n this.connectListeners();\n Promise.resolve().then(() => {\n if (this.connected) this.updateAnnouncements();\n });\n }\n\n componentWillRender() {\n if (this.renderedExpanded === this.expanded) return;\n this.renderedExpanded = this.expanded;\n const targets = this.motionTargets;\n if (!targets) {\n this.motion.cancel();\n return;\n }\n this.motion.capture(targets.region, targets.list);\n }\n\n componentDidRender() {\n this.restoreFocus();\n this.releasePointerFocus();\n if (this.region && this.list) this.motion.play(this.region, this.list);\n }\n\n disconnectedCallback() {\n this.connected = false;\n this.motion.cancel();\n this.media?.removeEventListener('change', this.handleMediaChange);\n window.removeEventListener('pointermove', this.handlePointerMove);\n if (this.focusFrame !== undefined) cancelAnimationFrame(this.focusFrame);\n this.focusFrame = undefined;\n this.keyboardInteraction = false;\n this.retainingPointerExpansion = false;\n this.hovering = false;\n this.focused = false;\n }\n\n @Watch('items')\n handleItemsChange(next: SulaToastItem[], previous: SulaToastItem[] = []) {\n const targets = this.motionTargets;\n if (targets) this.motion.capture(targets.region, targets.list);\n else this.motion.cancel();\n const active = this.hostElement.shadowRoot?.activeElement as HTMLElement | null;\n const focusedId = active?.closest<HTMLElement>('[data-toast-id]')?.dataset.toastId;\n const nextVisible = next.slice(-MAX_VISIBLE_LAYERS);\n const previousVisibleIds = new Set(previous.slice(-MAX_VISIBLE_LAYERS).map(item => item.id));\n this.enteringIds = this.ready ? new Set(nextVisible.filter(item => !previousVisibleIds.has(item.id)).map(item => item.id)) : new Set();\n if (focusedId !== undefined && !nextVisible.some(item => item.id === focusedId)) {\n if (this.keyboardInteraction) {\n const visibleIds = new Set(nextVisible.map(item => item.id));\n const index = previous.findIndex(item => item.id === focusedId);\n const following = previous.slice(index + 1).find(item => visibleIds.has(item.id));\n const preceding = previous\n .slice(0, index)\n .reverse()\n .find(item => visibleIds.has(item.id));\n this.focusTarget = following?.id ?? preceding?.id ?? nextVisible[0]?.id ?? '';\n } else {\n this.focusTarget = undefined;\n this.releaseFocusAfterRender = true;\n if (nextVisible.length && !this.noHover) {\n this.retainingPointerExpansion = true;\n window.addEventListener('pointermove', this.handlePointerMove, { once: true });\n }\n this.focused = false;\n }\n }\n if (this.ready) this.updateAnnouncements();\n }\n\n private updateAnnouncements() {\n const records: Announcement[] = [];\n const signatures = new Map<string, string>();\n for (const item of this.visibleItems) {\n const priority = item.announcement || 'polite';\n const text = [item.title, item.message].filter(Boolean).join('. ');\n const signature = JSON.stringify([text, priority]);\n signatures.set(item.id, signature);\n if (priority === 'off' || !text) continue;\n const previous = this.announcements.find(record => record.id === item.id);\n records.push(\n this.announcementSignatures.get(item.id) === signature && previous\n ? previous\n : {\n id: item.id,\n text,\n priority,\n version: ++this.announcementVersions,\n },\n );\n }\n this.announcementSignatures = signatures;\n this.announcements = records;\n }\n\n private connectListeners() {\n this.media = window.matchMedia?.('(hover: none)');\n this.noHover = this.media?.matches ?? false;\n this.media?.addEventListener('change', this.handleMediaChange);\n }\n\n private handleMediaChange = (event: MediaQueryListEvent) => {\n this.noHover = event.matches;\n this.hovering = false;\n this.stopRetainingPointerExpansion();\n };\n\n private handlePointerMove = (event: PointerEvent) => {\n const bounds = this.region?.getBoundingClientRect();\n this.hovering = !!bounds && event.clientX >= bounds.left && event.clientX <= bounds.right && event.clientY >= bounds.top && event.clientY <= bounds.bottom;\n this.stopRetainingPointerExpansion();\n };\n\n private stopRetainingPointerExpansion() {\n window.removeEventListener('pointermove', this.handlePointerMove);\n this.retainingPointerExpansion = false;\n }\n\n private restoreFocus() {\n if (this.focusTarget === undefined) return;\n const targetId = this.focusTarget;\n this.focusTarget = undefined;\n const target = Array.from(this.list?.querySelectorAll<HTMLElement>('[data-toast-id]') || []).find(element => element.dataset.toastId === targetId);\n (target || this.region)?.focus();\n }\n\n private releasePointerFocus() {\n if (!this.releaseFocusAfterRender) return;\n this.releaseFocusAfterRender = false;\n let active = this.hostElement.shadowRoot?.activeElement as HTMLElement | null;\n while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement as HTMLElement;\n active?.blur();\n this.focused = false;\n }\n\n private handleFocusOut = () => {\n if (this.focusFrame !== undefined) cancelAnimationFrame(this.focusFrame);\n this.focusFrame = requestAnimationFrame(() => {\n this.focusFrame = undefined;\n this.focused = !!this.hostElement.shadowRoot?.activeElement;\n });\n };\n\n private dismiss = (event: CustomEvent<SulaToastDismissEvent>, id: string) => {\n event.stopPropagation();\n this.toastDismissRequested.emit({ id, reason: event.detail.reason });\n };\n\n private action = (event: CustomEvent<void>, id: string) => {\n event.stopPropagation();\n this.toastAction.emit({ id });\n };\n\n render() {\n const expanded = this.expanded;\n const visibleItems = this.visibleItems;\n return (\n <Host>\n <section\n ref={el => (this.region = el)}\n role=\"region\"\n aria-label=\"Notificações\"\n tabIndex={0}\n class=\"toast-region w-full rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-feedback-informational focus-visible:outline-offset-2\"\n onMouseEnter={() => {\n if (!this.noHover) this.hovering = true;\n }}\n onMouseLeave={() => (this.hovering = false)}\n onPointerDown={() => {\n this.keyboardInteraction = false;\n this.stopRetainingPointerExpansion();\n }}\n onKeyDown={() => {\n this.keyboardInteraction = true;\n this.stopRetainingPointerExpansion();\n }}\n onFocusin={() => (this.focused = true)}\n onFocusout={this.handleFocusOut}\n >\n <div\n ref={el => (this.list = el)}\n class={{ 'toast-list relative flex flex-col gap-12': true, 'toast-list--collapsed': !expanded }}\n style={{\n '--toast-layer-offset': `${Math.max(0, visibleItems.length - 1) * LAYER_OFFSET}px`,\n }}\n >\n {visibleItems.map((item, index) => {\n const depth = visibleItems.length - 1 - index;\n const covered = !expanded && depth > 0;\n return (\n <div\n key={item.id}\n data-toast-id={item.id}\n tabIndex={-1}\n aria-hidden={covered ? 'true' : undefined}\n inert={covered}\n class={{\n 'toast-layer relative w-full min-w-0 shrink-0': true,\n 'toast-layer--covered': covered,\n 'toast-layer--entering': this.enteringIds.has(item.id),\n }}\n style={{\n '--toast-depth': String(depth),\n '--toast-width': `${100 - Math.min(depth, MAX_VISIBLE_LAYERS - 1) * LAYER_WIDTH_STEP}%`,\n }}\n >\n <sula-toast\n toastTitle={item.title}\n message={item.message ?? ''}\n type={item.type}\n icon={item.icon}\n actionText={item.actionText ?? ''}\n closable={item.closable ?? true}\n duration={item.duration}\n closeLabel={item.closeLabel ?? 'Fechar notificação'}\n paused={covered || this.hovering || this.focused || this.retainingPointerExpansion}\n announcement=\"off\"\n animated={depth === 0}\n onToastDismissRequested={event => this.dismiss(event, item.id)}\n onToastAction={event => this.action(event, item.id)}\n />\n </div>\n );\n })}\n </div>\n </section>\n <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n {this.announcements\n .filter(record => record.priority === 'polite')\n .map(record => (\n <p key={record.version}>{record.text}</p>\n ))}\n </div>\n <div class=\"sr-only\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n {this.announcements\n .filter(record => record.priority === 'assertive')\n .map(record => (\n <p key={record.version}>{record.text}</p>\n ))}\n </div>\n </Host>\n );\n }\n}\n"]}