atomicuilibrary 0.0.1

package/dist/collection/components/callout-banner/callout-banner.js

@@ -0,0 +1,1076 @@
+import { h, Host } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class UiCalloutBanner {
+    /** Custom ARIA role override (default: alert/status) */
+    ariaRole;
+    /** Test ID for automated testing selectors */
+    testId;
+    /** Auto-focus the close button or banner when shown */
+    focusOnShow = false;
+    /** Progress value (0-100) for banners that show progress */
+    progress;
+    /** i18n/localization: override all labels/messages */
+    i18n;
+    _id = Math.random().toString(36).slice(2, 10);
+    /** Visual variant that drives accent colors and icon */
+    variant = 'info';
+    /** Optional heading text when no `slot="title"` is provided */
+    heading;
+    /** Optional message text when default slot is empty */
+    message;
+    /** Optional icon glyph name; falls back to slot content if provided */
+    icon;
+    /** Icon library used when the `icon` prop is set */
+    iconLibrary = 'lucide';
+    /** Show the close button and allow dismissal */
+    closable = true;
+    /** Accessible label for the dismiss action */
+    dismissLabel = 'Dismiss';
+    /** Outline style instead of full background */
+    outlined = false;
+    /** Compact single-line layout */
+    compact = false;
+    /** Full-width top-of-page banner mode (removes border-radius, adds bottom border) */
+    banner = false;
+    /** Auto-dismiss after this many milliseconds (0 = disabled) */
+    autoClose = 0;
+    /** Show a loading spinner in place of the icon and set aria-busy on the host */
+    loading = false;
+    /** Animate the callout with a pulsing ring to draw attention */
+    pulse = false;
+    /** Hide the icon column entirely */
+    noIcon = false;
+    /** Bold, fully-saturated background for high-emphasis notices */
+    solid = false;
+    /** Add a coloured left-border accent bar (VS Code–style) */
+    accentBar = false;
+    /** Pause the auto-close timer while the user hovers over the banner */
+    pauseOnHover = false;
+    /** Stick the banner to the top of its scroll container */
+    sticky = false;
+    /** Clamp the message to N lines with a Show more/less toggle (0 = off) */
+    truncate = 0;
+    /** Size scale: sm, md, lg */
+    size = 'md';
+    /** Persistence key to remember dismissal via localStorage */
+    persistKey;
+    /** Scroll the message in an infinite marquee/ticker loop */
+    marquee = false;
+    /** Duration (seconds) for one full marquee loop. Lower = faster. Default 18. */
+    marqueeSpeed = 18;
+    visible = true;
+    closing = false;
+    paused = false;
+    expanded = false;
+    closeReady = true;
+    slottedHTML = '';
+    el;
+    /** Fired when the banner is dismissed */
+    calloutDismiss;
+    /** Fired when the banner is shown via the show() method */
+    calloutShow;
+    /** Fired when an action in the slot is clicked */
+    calloutAction;
+    autoCloseTimer;
+    closeBtnTimer;
+    dismissTimer;
+    remainingTime = 0;
+    timerStart = 0;
+    handlePersistKeyChange() {
+        this.checkPersistence();
+    }
+    componentWillLoad() {
+        this.checkPersistence();
+    }
+    checkPersistence() {
+        if (this.persistKey && typeof window !== 'undefined') {
+            const value = localStorage.getItem(`ui-callout-dismissed-${this.persistKey}`);
+            if (value === 'true' || value === '1') {
+                this.visible = false;
+            }
+        }
+    }
+    connectedCallback() {
+        if (this.focusOnShow) {
+            setTimeout(() => {
+                const closeBtn = this.hostElement?.shadowRoot?.querySelector('.callout-close');
+                if (closeBtn)
+                    closeBtn.focus();
+                else
+                    this.hostElement?.focus();
+            }, 100);
+        }
+        this.scheduleAutoClose();
+        if (this.closableAfter > 0 && this.closable) {
+            this.closeReady = false;
+            this.closeBtnTimer = setTimeout(() => { this.closeReady = true; }, this.closableAfter);
+        }
+        else {
+            this.closeReady = true;
+        }
+        this.readSlottedContent();
+    }
+    readSlottedContent() {
+        if (this.marquee) {
+            setTimeout(() => {
+                const slot = this.el.shadowRoot?.querySelector('.callout-message slot:not([name])');
+                if (slot) {
+                    const nodes = slot.assignedNodes();
+                    const raw = nodes.map(node => {
+                        if (node.nodeType === 3)
+                            return node.textContent;
+                        return node.outerHTML || node.innerHTML || node.textContent || '';
+                    }).join('');
+                    this.slottedHTML = sanitizeHTML(raw);
+                }
+            }, 50);
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.autoCloseTimer);
+        clearTimeout(this.closeBtnTimer);
+        clearTimeout(this.dismissTimer);
+    }
+    /** Slide/fade-in direction for entrance animation */
+    enterFrom = 'top';
+    /** Make the callout clickable as a link */
+    href;
+    /** Target for the link (if href is set) */
+    target;
+    /** Delay before close button appears (ms) */
+    closableAfter = 0;
+    /** Programmatically update props at runtime */
+    async update(props) {
+        Object.entries(props).forEach(([key, value]) => {
+            if (key in this)
+                this[key] = value;
+        });
+    }
+    handleActionClick = (e) => {
+        // Only fire for direct children of the slot
+        if (e.target && e.target.closest('[slot="actions"]')) {
+            this.calloutAction.emit();
+        }
+    };
+    onAutoCloseChange() {
+        clearTimeout(this.autoCloseTimer);
+        this.scheduleAutoClose();
+    }
+    scheduleAutoClose(duration) {
+        const ms = duration ?? this.autoClose;
+        if (ms > 0 && this.visible) {
+            this.timerStart = Date.now();
+            this.remainingTime = ms;
+            this.autoCloseTimer = setTimeout(() => this.dismiss(), ms);
+        }
+    }
+    dismiss() {
+        if (this.persistKey && typeof window !== 'undefined') {
+            localStorage.setItem(`ui-callout-dismissed-${this.persistKey}`, 'true');
+        }
+        this.closing = true;
+        clearTimeout(this.dismissTimer);
+        this.dismissTimer = setTimeout(() => {
+            this.visible = false;
+            this.closing = false;
+            this.calloutDismiss.emit();
+        }, 250);
+    }
+    /** Programmatically dismiss the banner */
+    async hide() {
+        this.dismiss();
+    }
+    async show() {
+        if (this.persistKey && typeof window !== 'undefined') {
+            localStorage.removeItem(`ui-callout-dismissed-${this.persistKey}`);
+        }
+        this.visible = true;
+        this.closing = false;
+        this.calloutShow.emit();
+        this.scheduleAutoClose();
+    }
+    handleDismiss = () => {
+        this.dismiss();
+    };
+    handleMouseEnter = () => {
+        if (this.pauseOnHover && this.autoClose > 0 && this.visible && !this.closing) {
+            clearTimeout(this.autoCloseTimer);
+            const elapsed = Date.now() - this.timerStart;
+            this.remainingTime = Math.max(0, this.remainingTime - elapsed);
+            this.paused = true;
+        }
+    };
+    handleMouseLeave = () => {
+        if (this.pauseOnHover && this.paused) {
+            this.paused = false;
+            this.timerStart = Date.now();
+            this.autoCloseTimer = setTimeout(() => this.dismiss(), this.remainingTime);
+        }
+    };
+    toggleExpand = () => {
+        this.expanded = !this.expanded;
+    };
+    defaultIcon() {
+        const map = {
+            info: 'info',
+            success: 'check-circle',
+            warning: 'triangle-alert',
+            danger: 'circle-x',
+            neutral: 'bell',
+        };
+        return map[this.variant] ?? 'info';
+    }
+    getIcon() {
+        const name = this.icon ?? this.defaultIcon();
+        return h("ui-icon", { name: name, library: this.iconLibrary, size: "1.25em" });
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const classes = {
+            [`variant-${this.variant}`]: true,
+            outlined: this.outlined,
+            compact: this.compact,
+            banner: this.banner,
+            closing: this.closing,
+            loading: this.loading,
+            pulse: this.pulse,
+            'no-icon': this.noIcon,
+            solid: this.solid,
+            'accent-bar': this.accentBar,
+            sticky: this.sticky,
+            marquee: this.marquee,
+            paused: this.paused,
+            [`size-${this.size}`]: true,
+            [`enter-${this.enterFrom}`]: true,
+        };
+        // Accessibility IDs
+        const titleId = `callout-title-${this._id}`;
+        const msgId = `callout-msg-${this._id}`;
+        const isClickable = !!this.href;
+        const ariaLive = this.autoClose > 0 ? 'assertive' : 'polite';
+        const i18n = this.i18n || {};
+        const content = (h("div", { class: "callout-inner", role: isClickable ? 'button' : 'status', "aria-live": ariaLive, "aria-labelledby": titleId, "aria-describedby": msgId, tabIndex: isClickable && !this.href ? 0 : undefined, onKeyDown: isClickable && !this.href ? (e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleActionClick(e);
+                }
+            }) : undefined, "data-testid": this.testId }, !this.noIcon && (h("div", { class: "callout-icon", part: "icon" }, this.loading
+            ? h("span", { class: "callout-spinner", "aria-hidden": "true" })
+            : h("slot", { name: "icon" }, this.getIcon()))), h("div", { class: "callout-content", part: "content" }, h("div", { class: "callout-title", part: "title", id: titleId }, h("slot", { name: "title" }, this.heading)), !this.compact && (h("div", { class: { 'callout-message': true, truncated: this.truncate > 0 && !this.expanded }, part: "message", id: msgId, style: this.truncate > 0 ? { '--callout-truncate-lines': String(this.truncate) } : {} }, this.marquee ? (h("div", { class: "callout-marquee-track", style: { '--marquee-speed': `${this.marqueeSpeed * 12}s` } }, h("div", { class: "callout-marquee-group", "aria-hidden": "true" }, Array.from({ length: 12 }).map(() => (h("span", { class: "callout-marquee-item", innerHTML: sanitizeHTML(this.message || this.slottedHTML) })))), h("div", { class: "callout-marquee-group", "aria-hidden": "true" }, Array.from({ length: 12 }).map(() => (h("span", { class: "callout-marquee-item", innerHTML: sanitizeHTML(this.message || this.slottedHTML) })))), h("div", { style: { display: 'none' } }, h("slot", null, this.message)))) : (h("slot", null, this.message)))), !this.compact && this.truncate > 0 && (h("ui-button", { variant: "ghost", class: "callout-show-more", onClick: this.toggleExpand, size: "sm", label: this.expanded ? (i18n.showLessLabel || 'Show less ↑') : (i18n.showMoreLabel || 'Show more ↓') })), !this.compact && (h("div", { class: "callout-actions", part: "actions", onClick: this.handleActionClick }, h("slot", { name: "actions" })))), this.compact && (h("div", { class: "callout-inline-message", part: "message", id: msgId }, h("slot", null, this.message))), this.closable && this.closeReady && (h("ui-button", { variant: "ghost", class: "callout-close", onClick: this.handleDismiss, ariaLabel: i18n.dismissLabel || this.dismissLabel, icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" }))));
+        const progress = (typeof this.progress === 'number')
+            ? (h("div", { class: "callout-progress-bar", style: { width: this.progress + '%' }, "aria-valuenow": this.progress, "aria-valuemin": "0", "aria-valuemax": "100", role: "progressbar" }))
+            : (this.autoClose > 0 && this.visible && !this.closing && (h("div", { class: { 'callout-progress': true, paused: this.paused }, part: "progress", style: { animationDuration: `${this.autoClose}ms` } })));
+        if (this.href) {
+            return (h("a", { href: this.href, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, class: classes, part: "callout", "aria-busy": this.loading ? 'true' : undefined, "aria-labelledby": titleId, "aria-describedby": msgId, "aria-live": ariaLive, role: this.ariaRole || (this.variant === 'neutral' ? 'status' : 'alert'), "data-testid": this.testId, tabIndex: this.focusOnShow ? 0 : undefined, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, content, progress));
+        }
+        return (h(Host, { class: classes, part: "callout", "aria-busy": this.loading ? 'true' : undefined, "aria-labelledby": titleId, "aria-describedby": msgId, "aria-live": ariaLive, role: this.ariaRole || (this.variant === 'neutral' ? 'status' : 'alert'), "data-testid": this.testId, tabIndex: this.focusOnShow ? 0 : undefined, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, content, progress));
+    }
+    static get is() { return "ui-callout-banner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["callout-banner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["callout-banner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom ARIA role override (default: alert/status)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-role"
+            },
+            "testId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Test ID for automated testing selectors"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "test-id"
+            },
+            "focusOnShow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-focus the close button or banner when shown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focus-on-show",
+                "defaultValue": "false"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress value (0-100) for banners that show progress"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress"
+            },
+            "i18n": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\r\n      dismissLabel?: string;\r\n      showMoreLabel?: string;\r\n      showLessLabel?: string;\r\n      loadingLabel?: string;\r\n      [key: string]: string | undefined;\r\n    }",
+                    "resolved": "{ [key: string]: string; dismissLabel?: string; showMoreLabel?: string; showLessLabel?: string; loadingLabel?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "i18n/localization: override all labels/messages"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant that drives accent colors and icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional heading text when no `slot=\"title\"` is provided"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional message text when default slot is empty"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon glyph name; falls back to slot content if provided"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon library used when the `icon` prop is set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the close button and allow dismissal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "true"
+            },
+            "dismissLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the dismiss action"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismiss-label",
+                "defaultValue": "'Dismiss'"
+            },
+            "outlined": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Outline style instead of full background"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "outlined",
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact single-line layout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "banner": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full-width top-of-page banner mode (removes border-radius, adds bottom border)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "banner",
+                "defaultValue": "false"
+            },
+            "autoClose": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-dismiss after this many milliseconds (0 = disabled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-close",
+                "defaultValue": "0"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a loading spinner in place of the icon and set aria-busy on the host"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "pulse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animate the callout with a pulsing ring to draw attention"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pulse",
+                "defaultValue": "false"
+            },
+            "noIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the icon column entirely"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-icon",
+                "defaultValue": "false"
+            },
+            "solid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bold, fully-saturated background for high-emphasis notices"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "solid",
+                "defaultValue": "false"
+            },
+            "accentBar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a coloured left-border accent bar (VS Code\u2013style)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accent-bar",
+                "defaultValue": "false"
+            },
+            "pauseOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pause the auto-close timer while the user hovers over the banner"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-on-hover",
+                "defaultValue": "false"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stick the banner to the top of its scroll container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky",
+                "defaultValue": "false"
+            },
+            "truncate": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Clamp the message to N lines with a Show\u00A0more/less toggle (0\u00A0=\u00A0off)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "truncate",
+                "defaultValue": "0"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size scale: sm, md, lg"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "persistKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Persistence key to remember dismissal via localStorage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-key"
+            },
+            "marquee": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scroll the message in an infinite marquee/ticker loop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "marquee",
+                "defaultValue": "false"
+            },
+            "marqueeSpeed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration (seconds) for one full marquee loop. Lower = faster. Default 18."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "marquee-speed",
+                "defaultValue": "18"
+            },
+            "enterFrom": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition| 'fade'",
+                    "resolved": "\"bottom\" | \"fade\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slide/fade-in direction for entrance animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enter-from",
+                "defaultValue": "'top'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the callout clickable as a link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Target for the link (if href is set)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "closableAfter": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay before close button appears (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable-after",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "closing": {},
+            "paused": {},
+            "expanded": {},
+            "closeReady": {},
+            "slottedHTML": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "calloutDismiss",
+                "name": "calloutDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the banner is dismissed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "calloutShow",
+                "name": "calloutShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the banner is shown via the show() method"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "calloutAction",
+                "name": "calloutAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when an action in the slot is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "update": {
+                "complexType": {
+                    "signature": "(props: Partial<UiCalloutBanner>) => Promise<void>",
+                    "parameters": [{
+                            "name": "props",
+                            "type": "{ ariaRole?: string; testId?: string; focusOnShow?: boolean; progress?: number; i18n?: { [key: string]: string; dismissLabel?: string; showMoreLabel?: string; showLessLabel?: string; loadingLabel?: string; }; variant?: StatusColor; heading?: string; message?: string; icon?: string; iconLibrary?: IconLibrary; closable?: boolean; dismissLabel?: string; outlined?: boolean; compact?: boolean; banner?: boolean; autoClose?: number; loading?: boolean; pulse?: boolean; noIcon?: boolean; solid?: boolean; accentBar?: boolean; pauseOnHover?: boolean; sticky?: boolean; truncate?: number; size?: BasicSize; persistKey?: string; marquee?: boolean; marqueeSpeed?: number; visible?: boolean; closing?: boolean; paused?: boolean; expanded?: boolean; closeReady?: boolean; slottedHTML?: string; el?: HTMLElement; calloutDismiss?: EventEmitter<void>; calloutShow?: EventEmitter<void>; calloutAction?: EventEmitter<void>; handlePersistKeyChange?: () => void; componentWillLoad?: () => void; connectedCallback?: () => void; disconnectedCallback?: () => void; enterFrom?: \"fade\" | FourSidePosition; href?: string; target?: string; closableAfter?: number; update?: (props: Partial<UiCalloutBanner>) => Promise<void>; onAutoCloseChange?: () => void; hide?: () => Promise<void>; show?: () => Promise<void>; render?: () => any; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "UiCalloutBanner": {
+                            "location": "global",
+                            "id": "global::UiCalloutBanner"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically update props at runtime",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically dismiss the banner",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "persistKey",
+                "methodName": "handlePersistKeyChange"
+            }, {
+                "propName": "autoClose",
+                "methodName": "onAutoCloseChange"
+            }];
+    }
+}