q2-tecton-elements 1.65.0 → 1.66.0

package/dist/q2-tecton-elements/q2-toast.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-toast.entry.esm.js","sources":["src/components/q2-toast/q2-toast.scss?tag=q2-toast&encapsulation=shadow","src/components/q2-toast/q2-toast.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n\n.toast {\n    --comp-accent-width: 1px;\n    --comp-icon-size: 32px;\n    --comp-icon-bg: transparent;\n    --comp-text-color: #{var-list(--tct-toast-text, --tct-gray-2, --app-gray-2, #333333)};\n    --comp-subtle-color: #{var-list(--tct-toast-subtle, --tct-gray-5, --app-gray-5, #6b6b6b)};\n\n\n    --comp-color-success: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    --comp-color-info: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    --comp-color-warning:  #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n    --comp-color-alert: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n    --comp-color-default: white;\n\n    &.success {\n        border-color: var(--comp-color-success);\n        background-color: var(--comp-color-success);\n        --comp-icon-bg: #e7f5e3;\n    }\n\n    &.info {\n        border-color: var(--comp-color-info);\n        background-color: var(--comp-color-info);\n        --comp-icon-bg: #e6f1fb;\n    }\n\n    &.warning {\n        border-color: var(--comp-color-warning);\n        background-color: var(--comp-color-warning);\n        --comp-icon-bg: #fff0df;\n    }\n\n    &.alert {\n        border-color: var(--comp-color-alert);\n        background-color: var(--comp-color-alert);\n        --comp-icon-bg: #fde6e6;\n    }\n\n    display: flex;\n    flex-direction: column;\n    gap: var-list(--tct-toast-gap, --app-scale-2x, 10px);\n    padding-left: 3px;\n    border-radius: 5px;\n    border: 1px solid transparent;\n    background: var-list(--tct-toast-background, --tct-gray-14, --app-gray-l3, #ffffff);\n    color: var(--comp-text-color);\n    box-shadow: var-list(--tct-toast-shadow, --app-shadow-2, unquote('0 12px 24px rgb(0 0 0 / 0.12)'));\n    overflow:hidden;\n\n    &.is-closing{\n        animation-name: shrink;\n        animation-duration: 500ms;\n        animation-timing-function: linear;\n        animation-fill-mode: forwards;\n        transform-origin: top;\n        overflow: hidden;\n    }\n\n    &.small {\n\n        & .container{\n            padding: var-list(--tct-toast-padding-small, --app-scale-2x, 10px);\n        }\n    }\n\n    &.default {\n        --comp-border-color: #{var-list(--tct-toast-border, --tct-gray-9, --app-gray-4, #d1d1d1)};\n        --comp-icon-bg: #{var-list(--tct-toast-icon-bg, --tct-gray-12, --app-gray-l2, #f3f3f3)};\n        border-color: var(--comp-border-color);\n    }\n}\n\n.header {\n    display: grid;\n    grid-template-columns: var(--comp-icon-size) 1fr auto;\n    gap: var-list(--tct-toast-gap, --app-scale-2x, 10px);\n    align-items: center;\n}\n\n.toast.no-icon .header {\n    grid-template-columns: 1fr auto;\n}\n\n.icon {\n    width: var(--comp-icon-size);\n    height: var(--comp-icon-size);\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: var(--comp-icon-bg);\n}\n\n.icon q2-icon {\n    --tct-icon-size: calc(var(--comp-icon-size) - 6px);\n    --tct-icon-stroke-primary: var(--comp-border-color);\n    --tct-icon-stroke-secondary: var(--comp-border-color);\n    --tct-icon-fill: var(--comp-border-color);\n}\n\n.title {\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n}\n\n.title-text {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.content {\n    color: var(--comp-subtle-color);\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.footer {\n    margin-top: var-list(--tct-toast-footer-gap, --app-scale-2x, 10px);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var-list(--tct-toast-footer-spacing, --app-scale-2x, 10px);\n    color: var(--comp-subtle-color);\n    font-size: 0.875rem;\n}\n\n.time {\n    white-space: nowrap;\n}\n\n.actions {\n    display: inline-flex;\n    align-items: center;\n    gap: var-list(--tct-toast-actions-gap, --app-scale-2x, 10px);\n}\n\n.close {\n    border: none;\n    background: transparent;\n    padding: 2px;\n    margin-left: var-list(--tct-toast-close-offset, --app-scale-1x, 5px);\n    color: var(--comp-subtle-color);\n    cursor: pointer;\n}\n\n.close q2-icon {\n    --tct-icon-size: 18px;\n}\n\n.container {\n    padding: var-list(--tct-toast-padding, --app-scale-3x, 15px);\n    background-color: white;\n}\n\n@keyframes shrink {\n  from {\n    transform: scale(1);\n    height: var(--toast-close-height, 0px);\n    opacity: 1;\n  }\n\n  to {\n    transform:scale(0);\n    height: 0;\n    opacity: 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/**\n * @slot icon - Optional slot for a custom icon.\n * @slot title - Optional slot for the title content.\n * @slot - Optional slot for the message content.\n * @slot time - Optional slot for the time marker.\n * @slot actions - Optional slot for action links in the footer.\n */\n@Component({ tag: 'q2-toast', shadow: true, styleUrl: 'q2-toast.scss' })\nexport class Q2Toast implements ComponentInterface {\n    // #region Own Properties\n\n    private autoCloseTimer?: ReturnType<typeof setTimeout>;\n    private closeAnimationTimeMs = 500;\n    private closeTimer?: ReturnType<typeof setTimeout>;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isClosing: boolean = false;\n\n    @State()\n    isOpen: boolean = true;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Enables automatic dismissal after a duration. */\n    @Prop({ reflect: true })\n    autoClose: boolean = false;\n\n    /** Controls whether the close button is displayed. */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /** The duration in milliseconds before auto dismissal. */\n    @Prop({ reflect: true })\n    duration: number = 7000;\n\n    /** Manually hide the icon where it would otherwise appear. */\n    @Prop({ reflect: true })\n    hideIcon: boolean = false;\n\n    /** Optional icon type to display. */\n    @Prop()\n    icon: string;\n\n    /** Optional message for the toast body. */\n    @Prop()\n    message: string;\n\n    /**\n     * Convenience prop for persistent toasts. When true, sets autoClose to false and closable to true.\n     * Aligns with acceptance criteria for showPersistent behavior.\n     */\n    @Prop({ reflect: true })\n    showPersistent: boolean = false;\n\n    /** Controls the visual size of the toast. */\n    @Prop({ reflect: true })\n    size: 'large' | 'small' = 'large';\n\n    /** Optional title for the toast. */\n    @Prop()\n    tctTitle: string;\n\n    /** Optional time marker for the footer. */\n    @Prop()\n    time: string;\n\n    /** The visual status of the toast. */\n    @Prop({ reflect: true })\n    type: 'warning' | 'info' | 'alert' | 'success' | 'default' | 'error' = 'default';\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the toast is dismissed. */\n    @Event()\n    tctClose: EventEmitter<{ reason: 'close' | 'timeout' }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.clearAutoClose();\n        this.clearCloseTimer();\n    }\n\n    componentDidLoad(): void {\n        this.startAutoClose();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoClose')\n    @Watch('duration')\n    onAutoCloseChange() {\n        this.startAutoClose();\n    }\n\n    @Watch('showPersistent')\n    onShowPersistentChange() {\n        if (this.showPersistent) {\n            this.autoClose = false;\n            this.closable = true;\n        } else {\n            this.autoClose = true;\n        }\n    }\n\n    @Watch('size')\n    onSizeChange() {\n        if (this.size === 'large') {\n            this.showPersistent = true;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get ariaLive(): 'assertive' | 'polite' {\n        // Alert/error/warning types should be assertive, others polite\n        return this.resolvedType === 'alert' || this.resolvedType === 'warning' ? 'assertive' : 'polite';\n    }\n\n    get ariaRole(): 'alert' | 'status' {\n        // Alert/error/warning types use \"alert\" role, others use \"status\"\n        return this.resolvedType === 'alert' || this.resolvedType === 'warning' ? 'alert' : 'status';\n    }\n\n    get hasIconSlot(): boolean {\n        return hasSlotContent(this.hostElement, 'icon');\n    }\n\n    get isLarge(): boolean {\n        return this.size !== 'small';\n    }\n\n    get resolvedIcon(): string {\n        if (this.icon) return this.icon;\n\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            alert: 'error-filled',\n            info: 'info-filled',\n        };\n\n        return iconMap[this.resolvedType];\n    }\n\n    get resolvedType(): 'warning' | 'info' | 'alert' | 'success' | 'default' {\n        return this.type === 'error' ? 'alert' : this.type;\n    }\n\n    get shouldShowIcon(): boolean {\n        return (this.hasIconSlot || !!this.resolvedIcon) && !this.hideIcon;\n    }\n\n    get showFooter(): boolean {\n        const hasActions = hasSlotContent(this.hostElement, 'actions');\n        const hasTime = hasSlotContent(this.hostElement, 'time') || !!this.time;\n        return this.isLarge && (hasActions || hasTime);\n    }\n\n    get srTypeLabel(): string {\n        // Screen reader label for toast type\n        const labelMap = {\n            success: loc('tecton.element.toast.type.success'),\n            warning: loc('tecton.element.toast.type.warning'),\n            alert: loc('tecton.element.toast.type.alert'),\n            info: loc('tecton.element.toast.type.info'),\n            default: loc('tecton.element.toast.type.default'),\n        };\n        return labelMap[this.resolvedType] || '';\n    }\n\n    get toastClasses(): string {\n        const classes = ['toast', this.resolvedType, this.size];\n        classes.push(this.shouldShowIcon ? 'has-icon' : 'no-icon');\n        if (this.isClosing) classes.push('is-closing');\n        return classes.join(' ');\n    }\n\n    clearAutoClose() {\n        if (!this.autoCloseTimer) return;\n        clearTimeout(this.autoCloseTimer);\n        this.autoCloseTimer = undefined;\n    }\n\n    clearCloseTimer() {\n        if (!this.closeTimer) return;\n        clearTimeout(this.closeTimer);\n        this.closeTimer = undefined;\n    }\n\n    dismiss(reason: 'close' | 'timeout') {\n        if (!this.isOpen || this.isClosing) return;\n        this.clearAutoClose();\n        this.clearCloseTimer();\n        const toastEl = this.hostElement.shadowRoot?.querySelector('.toast') as HTMLElement | null;\n        if (toastEl) {\n            const height = Math.ceil(toastEl.getBoundingClientRect().height);\n            this.hostElement.style.setProperty('--toast-close-height', `${height}px`);\n            this.hostElement.style.setProperty('margin-bottom', '0');\n        }\n        this.isClosing = true;\n        this.closeTimer = setTimeout(() => {\n            this.isOpen = false;\n            this.isClosing = false;\n            this.tctClose.emit({ reason });\n        }, this.closeAnimationTimeMs);\n    }\n\n    onCloseClick = () => {\n        this.dismiss('close');\n    };\n\n    startAutoClose() {\n        this.clearAutoClose();\n        if (!this.autoClose || !this.duration || this.duration <= 0 || !this.isOpen) return;\n        this.autoCloseTimer = setTimeout(() => {\n            this.dismiss('timeout');\n        }, this.duration);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderIcon() {\n        if (this.hideIcon) return null;\n        if (this.hasIconSlot) return <slot name=\"icon\"></slot>;\n        if (!this.resolvedIcon) return null;\n        return <q2-icon type={this.resolvedIcon} />;\n    }\n\n    render() {\n        if (!this.isOpen) return null;\n\n        return (\n            <div\n                class={this.toastClasses}\n                role={this.ariaRole}\n                aria-live={this.ariaLive}\n                aria-atomic=\"true\"\n                aria-relevant=\"all\"\n            >\n                {this.srTypeLabel && <span class=\"sr\">{this.srTypeLabel}</span>}\n                <div class=\"container\">\n                    <div class=\"header\">\n                        {this.shouldShowIcon && <div class=\"icon\">{this.renderIcon()}</div>}\n                        <div class=\"title\">\n                            <span class=\"title-text\">\n                                <slot name=\"title\">{this.tctTitle}</slot>\n                            </span>\n                        </div>\n                        {this.closable && (\n                            <button\n                                class=\"close\"\n                                type=\"button\"\n                                aria-label={loc('tecton.element.toast.close')}\n                                onClick={this.onCloseClick}\n                            >\n                                <q2-icon type=\"close\" />\n                            </button>\n                        )}\n                    </div>\n                    {this.isLarge && (\n                        <div class=\"content\">\n                            {this.message}\n                            <slot />\n                        </div>\n                    )}\n                    {this.showFooter && (\n                        <div class=\"footer\">\n                            <div class=\"time\">\n                                <slot name=\"time\">{this.time}</slot>\n                            </div>\n                            <div class=\"actions\">\n                                <slot name=\"actions\"></slot>\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-toast.entry.js

@@ -0,0 +1,222 @@
+import { r as t, c as o, h as e, g as i } from "./index-CGkHOjh1.js";
+
+import { h as s, l as r } from "./index-B4WYBDS9.js";
+
+const a = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.toast{--comp-accent-width:1px;--comp-icon-size:32px;--comp-icon-bg:transparent;--comp-text-color:var(--tct-toast-text, var(--tct-gray-2, var(--app-gray-2, #333333)));--comp-subtle-color:var(--tct-toast-subtle, var(--tct-gray-5, var(--app-gray-5, #6b6b6b)));--comp-color-success:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--comp-color-info:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--comp-color-warning:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--comp-color-alert:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a));--comp-color-default:white;display:flex;flex-direction:column;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));padding-left:3px;border-radius:5px;border:1px solid transparent;background:var(--tct-toast-background, var(--tct-gray-14, var(--app-gray-l3, #ffffff)));color:var(--comp-text-color);box-shadow:var(--tct-toast-shadow, var(--app-shadow-2, 0 12px 24px rgb(0 0 0 / 0.12)));overflow:hidden}.toast.success{border-color:var(--comp-color-success);background-color:var(--comp-color-success);--comp-icon-bg:#e7f5e3}.toast.info{border-color:var(--comp-color-info);background-color:var(--comp-color-info);--comp-icon-bg:#e6f1fb}.toast.warning{border-color:var(--comp-color-warning);background-color:var(--comp-color-warning);--comp-icon-bg:#fff0df}.toast.alert{border-color:var(--comp-color-alert);background-color:var(--comp-color-alert);--comp-icon-bg:#fde6e6}.toast.is-closing{animation-name:shrink;animation-duration:500ms;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:top;overflow:hidden}.toast.small .container{padding:var(--tct-toast-padding-small, var(--app-scale-2x, 10px))}.toast.default{--comp-border-color:var(--tct-toast-border, var(--tct-gray-9, var(--app-gray-4, #d1d1d1)));--comp-icon-bg:var(--tct-toast-icon-bg, var(--tct-gray-12, var(--app-gray-l2, #f3f3f3)));border-color:var(--comp-border-color)}.header{display:grid;grid-template-columns:var(--comp-icon-size) 1fr auto;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));align-items:center}.toast.no-icon .header{grid-template-columns:1fr auto}.icon{width:var(--comp-icon-size);height:var(--comp-icon-size);border-radius:50%;display:grid;place-items:center;background:var(--comp-icon-bg)}.icon q2-icon{--tct-icon-size:calc(var(--comp-icon-size) - 6px);--tct-icon-stroke-primary:var(--comp-border-color);--tct-icon-stroke-secondary:var(--comp-border-color);--tct-icon-fill:var(--comp-border-color)}.title{font-weight:600;display:flex;align-items:center}.title-text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.content{color:var(--comp-subtle-color);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.footer{margin-top:var(--tct-toast-footer-gap, var(--app-scale-2x, 10px));display:flex;align-items:center;justify-content:space-between;gap:var(--tct-toast-footer-spacing, var(--app-scale-2x, 10px));color:var(--comp-subtle-color);font-size:0.875rem}.time{white-space:nowrap}.actions{display:inline-flex;align-items:center;gap:var(--tct-toast-actions-gap, var(--app-scale-2x, 10px))}.close{border:none;background:transparent;padding:2px;margin-left:var(--tct-toast-close-offset, var(--app-scale-1x, 5px));color:var(--comp-subtle-color);cursor:pointer}.close q2-icon{--tct-icon-size:18px}.container{padding:var(--tct-toast-padding, var(--app-scale-3x, 15px));background-color:white}@keyframes shrink{from{transform:scale(1);height:var(--toast-close-height, 0px);opacity:1}to{transform:scale(0);height:0;opacity:0}}";
+
+const n = class {
+  constructor(e) {
+    t(this, e);
+    this.tctClose = o(this, "tctClose", 7);
+    this.closeAnimationTimeMs = 500;
+    // #endregion
+    // #region State Properties
+        this.isClosing = false;
+    this.isOpen = true;
+    // #endregion
+    // #region Public Property API
+    /** Enables automatic dismissal after a duration. */    this.autoClose = false;
+    /** Controls whether the close button is displayed. */    this.closable = true;
+    /** The duration in milliseconds before auto dismissal. */    this.duration = 7e3;
+    /** Manually hide the icon where it would otherwise appear. */    this.hideIcon = false;
+    /**
+         * Convenience prop for persistent toasts. When true, sets autoClose to false and closable to true.
+         * Aligns with acceptance criteria for showPersistent behavior.
+         */    this.showPersistent = false;
+    /** Controls the visual size of the toast. */    this.size = "large";
+    /** The visual status of the toast. */    this.type = "default";
+    this.onCloseClick = () => {
+      this.dismiss("close");
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    this.clearAutoClose();
+    this.clearCloseTimer();
+  }
+  componentDidLoad() {
+    this.startAutoClose();
+  }
+  // #endregion
+  // #region Watchers
+  onAutoCloseChange() {
+    this.startAutoClose();
+  }
+  onShowPersistentChange() {
+    if (this.showPersistent) {
+      this.autoClose = false;
+      this.closable = true;
+    } else {
+      this.autoClose = true;
+    }
+  }
+  onSizeChange() {
+    if (this.size === "large") {
+      this.showPersistent = true;
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get ariaLive() {
+    // Alert/error/warning types should be assertive, others polite
+    return this.resolvedType === "alert" || this.resolvedType === "warning" ? "assertive" : "polite";
+  }
+  get ariaRole() {
+    // Alert/error/warning types use "alert" role, others use "status"
+    return this.resolvedType === "alert" || this.resolvedType === "warning" ? "alert" : "status";
+  }
+  get hasIconSlot() {
+    return s(this.hostElement, "icon");
+  }
+  get isLarge() {
+    return this.size !== "small";
+  }
+  get resolvedIcon() {
+    if (this.icon) return this.icon;
+    const t = {
+      success: "success-filled",
+      warning: "warning-filled",
+      alert: "error-filled",
+      info: "info-filled"
+    };
+    return t[this.resolvedType];
+  }
+  get resolvedType() {
+    return this.type === "error" ? "alert" : this.type;
+  }
+  get shouldShowIcon() {
+    return (this.hasIconSlot || !!this.resolvedIcon) && !this.hideIcon;
+  }
+  get showFooter() {
+    const t = s(this.hostElement, "actions");
+    const o = s(this.hostElement, "time") || !!this.time;
+    return this.isLarge && (t || o);
+  }
+  get srTypeLabel() {
+    // Screen reader label for toast type
+    const t = {
+      success: r("tecton.element.toast.type.success"),
+      warning: r("tecton.element.toast.type.warning"),
+      alert: r("tecton.element.toast.type.alert"),
+      info: r("tecton.element.toast.type.info"),
+      default: r("tecton.element.toast.type.default")
+    };
+    return t[this.resolvedType] || "";
+  }
+  get toastClasses() {
+    const t = [ "toast", this.resolvedType, this.size ];
+    t.push(this.shouldShowIcon ? "has-icon" : "no-icon");
+    if (this.isClosing) t.push("is-closing");
+    return t.join(" ");
+  }
+  clearAutoClose() {
+    if (!this.autoCloseTimer) return;
+    clearTimeout(this.autoCloseTimer);
+    this.autoCloseTimer = undefined;
+  }
+  clearCloseTimer() {
+    if (!this.closeTimer) return;
+    clearTimeout(this.closeTimer);
+    this.closeTimer = undefined;
+  }
+  dismiss(t) {
+    var o;
+    if (!this.isOpen || this.isClosing) return;
+    this.clearAutoClose();
+    this.clearCloseTimer();
+    const e = (o = this.hostElement.shadowRoot) === null || o === void 0 ? void 0 : o.querySelector(".toast");
+    if (e) {
+      const t = Math.ceil(e.getBoundingClientRect().height);
+      this.hostElement.style.setProperty("--toast-close-height", `${t}px`);
+      this.hostElement.style.setProperty("margin-bottom", "0");
+    }
+    this.isClosing = true;
+    this.closeTimer = setTimeout((() => {
+      this.isOpen = false;
+      this.isClosing = false;
+      this.tctClose.emit({
+        reason: t
+      });
+    }), this.closeAnimationTimeMs);
+  }
+  startAutoClose() {
+    this.clearAutoClose();
+    if (!this.autoClose || !this.duration || this.duration <= 0 || !this.isOpen) return;
+    this.autoCloseTimer = setTimeout((() => {
+      this.dismiss("timeout");
+    }), this.duration);
+  }
+  // #endregion
+  // #region Render Methods
+  renderIcon() {
+    if (this.hideIcon) return null;
+    if (this.hasIconSlot) return e("slot", {
+      name: "icon"
+    });
+    if (!this.resolvedIcon) return null;
+    return e("q2-icon", {
+      type: this.resolvedIcon
+    });
+  }
+  render() {
+    if (!this.isOpen) return null;
+    return e("div", {
+      class: this.toastClasses,
+      role: this.ariaRole,
+      "aria-live": this.ariaLive,
+      "aria-atomic": "true",
+      "aria-relevant": "all"
+    }, this.srTypeLabel && e("span", {
+      class: "sr"
+    }, this.srTypeLabel), e("div", {
+      class: "container"
+    }, e("div", {
+      class: "header"
+    }, this.shouldShowIcon && e("div", {
+      class: "icon"
+    }, this.renderIcon()), e("div", {
+      class: "title"
+    }, e("span", {
+      class: "title-text"
+    }, e("slot", {
+      name: "title"
+    }, this.tctTitle))), this.closable && e("button", {
+      class: "close",
+      type: "button",
+      "aria-label": r("tecton.element.toast.close"),
+      onClick: this.onCloseClick
+    }, e("q2-icon", {
+      type: "close"
+    }))), this.isLarge && e("div", {
+      class: "content"
+    }, this.message, e("slot", null)), this.showFooter && e("div", {
+      class: "footer"
+    }, e("div", {
+      class: "time"
+    }, e("slot", {
+      name: "time"
+    }, this.time)), e("div", {
+      class: "actions"
+    }, e("slot", {
+      name: "actions"
+    })))));
+  }
+  get hostElement() {
+    return i(this);
+  }
+  static get watchers() {
+    return {
+      autoClose: [ "onAutoCloseChange" ],
+      duration: [ "onAutoCloseChange" ],
+      showPersistent: [ "onShowPersistentChange" ],
+      size: [ "onSizeChange" ]
+    };
+  }
+};
+
+n.style = a;
+
+export { n as q2_toast };
+//# sourceMappingURL=q2-toast.entry.esm.js.map
+//# sourceMappingURL=q2-toast.entry.js.map

package/dist/q2-tecton-elements/q2-toast.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2ToastCss","Q2Toast","constructor","hostRef","this","closeAnimationTimeMs","isClosing","isOpen","autoClose","closable","duration","hideIcon","showPersistent","size","type","onCloseClick","dismiss","disconnectedCallback","clearAutoClose","clearCloseTimer","componentDidLoad","startAutoClose","onAutoCloseChange","onShowPersistentChange","onSizeChange","ariaLive","resolvedType","ariaRole","hasIconSlot","hasSlotContent","hostElement","isLarge","resolvedIcon","icon","iconMap","success","warning","alert","info","shouldShowIcon","showFooter","hasActions","hasTime","time","srTypeLabel","labelMap","loc","default","toastClasses","classes","push","join","autoCloseTimer","clearTimeout","undefined","closeTimer","reason","toastEl","_a","shadowRoot","querySelector","height","Math","ceil","getBoundingClientRect","style","setProperty","setTimeout","tctClose","emit","renderIcon","h","name","render","class","role","tctTitle","onClick","message"],"sources":["src/components/q2-toast/q2-toast.scss?tag=q2-toast&encapsulation=shadow","src/components/q2-toast/q2-toast.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n\n.toast {\n    --comp-accent-width: 1px;\n    --comp-icon-size: 32px;\n    --comp-icon-bg: transparent;\n    --comp-text-color: #{var-list(--tct-toast-text, --tct-gray-2, --app-gray-2, #333333)};\n    --comp-subtle-color: #{var-list(--tct-toast-subtle, --tct-gray-5, --app-gray-5, #6b6b6b)};\n\n\n    --comp-color-success: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    --comp-color-info: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    --comp-color-warning:  #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n    --comp-color-alert: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n    --comp-color-default: white;\n\n    &.success {\n        border-color: var(--comp-color-success);\n        background-color: var(--comp-color-success);\n        --comp-icon-bg: #e7f5e3;\n    }\n\n    &.info {\n        border-color: var(--comp-color-info);\n        background-color: var(--comp-color-info);\n        --comp-icon-bg: #e6f1fb;\n    }\n\n    &.warning {\n        border-color: var(--comp-color-warning);\n        background-color: var(--comp-color-warning);\n        --comp-icon-bg: #fff0df;\n    }\n\n    &.alert {\n        border-color: var(--comp-color-alert);\n        background-color: var(--comp-color-alert);\n        --comp-icon-bg: #fde6e6;\n    }\n\n    display: flex;\n    flex-direction: column;\n    gap: var-list(--tct-toast-gap, --app-scale-2x, 10px);\n    padding-left: 3px;\n    border-radius: 5px;\n    border: 1px solid transparent;\n    background: var-list(--tct-toast-background, --tct-gray-14, --app-gray-l3, #ffffff);\n    color: var(--comp-text-color);\n    box-shadow: var-list(--tct-toast-shadow, --app-shadow-2, unquote('0 12px 24px rgb(0 0 0 / 0.12)'));\n    overflow:hidden;\n\n    &.is-closing{\n        animation-name: shrink;\n        animation-duration: 500ms;\n        animation-timing-function: linear;\n        animation-fill-mode: forwards;\n        transform-origin: top;\n        overflow: hidden;\n    }\n\n    &.small {\n\n        & .container{\n            padding: var-list(--tct-toast-padding-small, --app-scale-2x, 10px);\n        }\n    }\n\n    &.default {\n        --comp-border-color: #{var-list(--tct-toast-border, --tct-gray-9, --app-gray-4, #d1d1d1)};\n        --comp-icon-bg: #{var-list(--tct-toast-icon-bg, --tct-gray-12, --app-gray-l2, #f3f3f3)};\n        border-color: var(--comp-border-color);\n    }\n}\n\n.header {\n    display: grid;\n    grid-template-columns: var(--comp-icon-size) 1fr auto;\n    gap: var-list(--tct-toast-gap, --app-scale-2x, 10px);\n    align-items: center;\n}\n\n.toast.no-icon .header {\n    grid-template-columns: 1fr auto;\n}\n\n.icon {\n    width: var(--comp-icon-size);\n    height: var(--comp-icon-size);\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: var(--comp-icon-bg);\n}\n\n.icon q2-icon {\n    --tct-icon-size: calc(var(--comp-icon-size) - 6px);\n    --tct-icon-stroke-primary: var(--comp-border-color);\n    --tct-icon-stroke-secondary: var(--comp-border-color);\n    --tct-icon-fill: var(--comp-border-color);\n}\n\n.title {\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n}\n\n.title-text {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.content {\n    color: var(--comp-subtle-color);\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.footer {\n    margin-top: var-list(--tct-toast-footer-gap, --app-scale-2x, 10px);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var-list(--tct-toast-footer-spacing, --app-scale-2x, 10px);\n    color: var(--comp-subtle-color);\n    font-size: 0.875rem;\n}\n\n.time {\n    white-space: nowrap;\n}\n\n.actions {\n    display: inline-flex;\n    align-items: center;\n    gap: var-list(--tct-toast-actions-gap, --app-scale-2x, 10px);\n}\n\n.close {\n    border: none;\n    background: transparent;\n    padding: 2px;\n    margin-left: var-list(--tct-toast-close-offset, --app-scale-1x, 5px);\n    color: var(--comp-subtle-color);\n    cursor: pointer;\n}\n\n.close q2-icon {\n    --tct-icon-size: 18px;\n}\n\n.container {\n    padding: var-list(--tct-toast-padding, --app-scale-3x, 15px);\n    background-color: white;\n}\n\n@keyframes shrink {\n  from {\n    transform: scale(1);\n    height: var(--toast-close-height, 0px);\n    opacity: 1;\n  }\n\n  to {\n    transform:scale(0);\n    height: 0;\n    opacity: 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/**\n * @slot icon - Optional slot for a custom icon.\n * @slot title - Optional slot for the title content.\n * @slot - Optional slot for the message content.\n * @slot time - Optional slot for the time marker.\n * @slot actions - Optional slot for action links in the footer.\n */\n@Component({ tag: 'q2-toast', shadow: true, styleUrl: 'q2-toast.scss' })\nexport class Q2Toast implements ComponentInterface {\n    // #region Own Properties\n\n    private autoCloseTimer?: ReturnType<typeof setTimeout>;\n    private closeAnimationTimeMs = 500;\n    private closeTimer?: ReturnType<typeof setTimeout>;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isClosing: boolean = false;\n\n    @State()\n    isOpen: boolean = true;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Enables automatic dismissal after a duration. */\n    @Prop({ reflect: true })\n    autoClose: boolean = false;\n\n    /** Controls whether the close button is displayed. */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /** The duration in milliseconds before auto dismissal. */\n    @Prop({ reflect: true })\n    duration: number = 7000;\n\n    /** Manually hide the icon where it would otherwise appear. */\n    @Prop({ reflect: true })\n    hideIcon: boolean = false;\n\n    /** Optional icon type to display. */\n    @Prop()\n    icon: string;\n\n    /** Optional message for the toast body. */\n    @Prop()\n    message: string;\n\n    /**\n     * Convenience prop for persistent toasts. When true, sets autoClose to false and closable to true.\n     * Aligns with acceptance criteria for showPersistent behavior.\n     */\n    @Prop({ reflect: true })\n    showPersistent: boolean = false;\n\n    /** Controls the visual size of the toast. */\n    @Prop({ reflect: true })\n    size: 'large' | 'small' = 'large';\n\n    /** Optional title for the toast. */\n    @Prop()\n    tctTitle: string;\n\n    /** Optional time marker for the footer. */\n    @Prop()\n    time: string;\n\n    /** The visual status of the toast. */\n    @Prop({ reflect: true })\n    type: 'warning' | 'info' | 'alert' | 'success' | 'default' | 'error' = 'default';\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the toast is dismissed. */\n    @Event()\n    tctClose: EventEmitter<{ reason: 'close' | 'timeout' }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.clearAutoClose();\n        this.clearCloseTimer();\n    }\n\n    componentDidLoad(): void {\n        this.startAutoClose();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoClose')\n    @Watch('duration')\n    onAutoCloseChange() {\n        this.startAutoClose();\n    }\n\n    @Watch('showPersistent')\n    onShowPersistentChange() {\n        if (this.showPersistent) {\n            this.autoClose = false;\n            this.closable = true;\n        } else {\n            this.autoClose = true;\n        }\n    }\n\n    @Watch('size')\n    onSizeChange() {\n        if (this.size === 'large') {\n            this.showPersistent = true;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get ariaLive(): 'assertive' | 'polite' {\n        // Alert/error/warning types should be assertive, others polite\n        return this.resolvedType === 'alert' || this.resolvedType === 'warning' ? 'assertive' : 'polite';\n    }\n\n    get ariaRole(): 'alert' | 'status' {\n        // Alert/error/warning types use \"alert\" role, others use \"status\"\n        return this.resolvedType === 'alert' || this.resolvedType === 'warning' ? 'alert' : 'status';\n    }\n\n    get hasIconSlot(): boolean {\n        return hasSlotContent(this.hostElement, 'icon');\n    }\n\n    get isLarge(): boolean {\n        return this.size !== 'small';\n    }\n\n    get resolvedIcon(): string {\n        if (this.icon) return this.icon;\n\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            alert: 'error-filled',\n            info: 'info-filled',\n        };\n\n        return iconMap[this.resolvedType];\n    }\n\n    get resolvedType(): 'warning' | 'info' | 'alert' | 'success' | 'default' {\n        return this.type === 'error' ? 'alert' : this.type;\n    }\n\n    get shouldShowIcon(): boolean {\n        return (this.hasIconSlot || !!this.resolvedIcon) && !this.hideIcon;\n    }\n\n    get showFooter(): boolean {\n        const hasActions = hasSlotContent(this.hostElement, 'actions');\n        const hasTime = hasSlotContent(this.hostElement, 'time') || !!this.time;\n        return this.isLarge && (hasActions || hasTime);\n    }\n\n    get srTypeLabel(): string {\n        // Screen reader label for toast type\n        const labelMap = {\n            success: loc('tecton.element.toast.type.success'),\n            warning: loc('tecton.element.toast.type.warning'),\n            alert: loc('tecton.element.toast.type.alert'),\n            info: loc('tecton.element.toast.type.info'),\n            default: loc('tecton.element.toast.type.default'),\n        };\n        return labelMap[this.resolvedType] || '';\n    }\n\n    get toastClasses(): string {\n        const classes = ['toast', this.resolvedType, this.size];\n        classes.push(this.shouldShowIcon ? 'has-icon' : 'no-icon');\n        if (this.isClosing) classes.push('is-closing');\n        return classes.join(' ');\n    }\n\n    clearAutoClose() {\n        if (!this.autoCloseTimer) return;\n        clearTimeout(this.autoCloseTimer);\n        this.autoCloseTimer = undefined;\n    }\n\n    clearCloseTimer() {\n        if (!this.closeTimer) return;\n        clearTimeout(this.closeTimer);\n        this.closeTimer = undefined;\n    }\n\n    dismiss(reason: 'close' | 'timeout') {\n        if (!this.isOpen || this.isClosing) return;\n        this.clearAutoClose();\n        this.clearCloseTimer();\n        const toastEl = this.hostElement.shadowRoot?.querySelector('.toast') as HTMLElement | null;\n        if (toastEl) {\n            const height = Math.ceil(toastEl.getBoundingClientRect().height);\n            this.hostElement.style.setProperty('--toast-close-height', `${height}px`);\n            this.hostElement.style.setProperty('margin-bottom', '0');\n        }\n        this.isClosing = true;\n        this.closeTimer = setTimeout(() => {\n            this.isOpen = false;\n            this.isClosing = false;\n            this.tctClose.emit({ reason });\n        }, this.closeAnimationTimeMs);\n    }\n\n    onCloseClick = () => {\n        this.dismiss('close');\n    };\n\n    startAutoClose() {\n        this.clearAutoClose();\n        if (!this.autoClose || !this.duration || this.duration <= 0 || !this.isOpen) return;\n        this.autoCloseTimer = setTimeout(() => {\n            this.dismiss('timeout');\n        }, this.duration);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderIcon() {\n        if (this.hideIcon) return null;\n        if (this.hasIconSlot) return <slot name=\"icon\"></slot>;\n        if (!this.resolvedIcon) return null;\n        return <q2-icon type={this.resolvedIcon} />;\n    }\n\n    render() {\n        if (!this.isOpen) return null;\n\n        return (\n            <div\n                class={this.toastClasses}\n                role={this.ariaRole}\n                aria-live={this.ariaLive}\n                aria-atomic=\"true\"\n                aria-relevant=\"all\"\n            >\n                {this.srTypeLabel && <span class=\"sr\">{this.srTypeLabel}</span>}\n                <div class=\"container\">\n                    <div class=\"header\">\n                        {this.shouldShowIcon && <div class=\"icon\">{this.renderIcon()}</div>}\n                        <div class=\"title\">\n                            <span class=\"title-text\">\n                                <slot name=\"title\">{this.tctTitle}</slot>\n                            </span>\n                        </div>\n                        {this.closable && (\n                            <button\n                                class=\"close\"\n                                type=\"button\"\n                                aria-label={loc('tecton.element.toast.close')}\n                                onClick={this.onCloseClick}\n                            >\n                                <q2-icon type=\"close\" />\n                            </button>\n                        )}\n                    </div>\n                    {this.isLarge && (\n                        <div class=\"content\">\n                            {this.message}\n                            <slot />\n                        </div>\n                    )}\n                    {this.showFooter && (\n                        <div class=\"footer\">\n                            <div class=\"time\">\n                                <slot name=\"time\">{this.time}</slot>\n                            </div>\n                            <div class=\"actions\">\n                                <slot name=\"actions\"></slot>\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}