bromcom-ui-next 0.1.26 → 0.1.28

package/dist/components/bcm-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmModal extends Components.BcmModal, HTMLElement {}
+export const BcmModal: {
+    prototype: BcmModal;
+    new (): BcmModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-modal.js

@@ -0,0 +1,324 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
+
+const modalCss = ".contents{display:contents}:host{display:contents}.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}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-full{max-height:100%}.max-h-none{max-height:none}.w-6{width:1.5rem}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-y-4{--tw-translate-y:-1rem}.-translate-y-4,.translate-y-0{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))}.translate-y-0{--tw-translate-y:0px}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{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))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.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))}.animate-shake{animation:shake .82s cubic-bezier(.36,.07,.19,.97) infinite;animation:shake .3s cubic-bezier(.36,.07,.19,.97) both}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.rounded-none{border-radius:var(--bcm-ui-border-radius-none,0)}.rounded-t-lg{border-top-left-radius:var(--bcm-ui-border-radius-lg,8px);border-top-right-radius:var(--bcm-ui-border-radius-lg,8px)}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-basic-base{background-color:var(--bcm-ui-color-background-basic-base)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.pt-20{padding-top:5rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:var(--bcm-ui-box-shadow-2xl);--tw-shadow-colored:var(--bcm-ui-box-shadow-2xl)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\\:bg-color-default-dark::backdrop{background-color:var(--bcm-ui-color-background-default-dark-default)}.backdrop\\:opacity-50::backdrop{opacity:.5}.backdrop\\:transition-opacity::backdrop{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\\:duration-300::backdrop{transition-duration:.3s}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}";
+
+const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class BcmModal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.bcmOpen = createEvent(this, "bcmOpen", 7);
+        this.bcmClose = createEvent(this, "bcmClose", 7);
+        this.bcmBeforeOpen = createEvent(this, "bcmBeforeOpen", 7);
+        this.bcmBeforeClose = createEvent(this, "bcmBeforeClose", 7);
+        this.open = false;
+        this.size = 'medium';
+        this.placement = 'center';
+        this.backdrop = true;
+        this.fullWidth = false;
+        this.fullScreen = false;
+        this.noHeader = false;
+        this.noFooter = false;
+        this.closeOnBackdrop = true;
+        this.closeOnEscape = true;
+        this.isAnimating = false;
+        this.shake = false;
+        this.modalClass = tv({
+            slots: {
+                dialog: 'bcm-ui-element fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full border-none bg-transparent backdrop:bg-color-default-dark backdrop:opacity-50 backdrop:transition-opacity backdrop:duration-300',
+                container: 'fixed inset-0 flex items-start justify-center p-4 overflow-y-auto overscroll-contain',
+                modal: 'relative bg-color-basic-base text-color-default rounded-lg shadow-2xl transform transition-all duration-300 ease-in-out flex flex-col',
+                header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 border-b rounded-t-lg',
+                headerContent: 'flex-1 min-w-0 flex items-center gap-2',
+                title: 'font-semibold m-0 text-size-6 text-color-header',
+                helperText: 'text-size-5 text-color-placeholder m-0',
+                closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 rounded hover:bg-color-default-hover cursor-pointer active:bg-color-active transition-colors flex-shrink-0 outline-none focus-visible:ring ',
+                content: 'flex-grow overflow-y-auto',
+                footer: 'flex items-center justify-end gap-2',
+            },
+            variants: {
+                open: {
+                    true: {
+                        modal: 'opacity-100 translate-y-0 scale-100',
+                    },
+                    false: {
+                        modal: 'opacity-0 -translate-y-4 scale-95',
+                    },
+                },
+                placement: {
+                    center: {
+                        container: 'items-center',
+                    },
+                    top: {
+                        container: 'items-start pt-20',
+                    },
+                },
+                size: {
+                    small: {
+                        header: 'py-3 px-4',
+                        content: 'p-4',
+                        footer: 'py-3 px-4',
+                    },
+                    medium: {
+                        header: 'py-4 px-5',
+                        content: 'p-5',
+                        footer: 'py-4 px-5',
+                    },
+                    large: {
+                        header: 'py-4 px-6',
+                        content: 'p-6',
+                        footer: 'py-4 px-6',
+                    },
+                    xlarge: {
+                        header: 'py-5 px-6',
+                        content: 'p-6',
+                        footer: 'py-5 px-6',
+                    },
+                    xxlarge: {
+                        header: 'py-5 px-8',
+                        content: 'p-8',
+                        footer: 'py-5 px-8',
+                    },
+                    full: {
+                        header: 'py-5 px-8',
+                        content: 'p-8',
+                        footer: 'py-5 px-8',
+                    },
+                },
+                fullScreen: {
+                    true: {
+                        modal: 'rounded-none w-screen h-screen max-w-none max-h-none',
+                        container: 'p-0',
+                    },
+                },
+                shake: {
+                    true: {
+                        modal: 'animate-shake',
+                    },
+                },
+                noHeader: {
+                    true: {
+                        header: 'hidden',
+                    },
+                },
+                noFooter: {
+                    true: {
+                        footer: 'hidden',
+                    },
+                },
+            },
+        });
+        this.handleBackdropClick = (event) => {
+            const target = event.target;
+            // Check if click is on the container (backdrop area), not on modal content
+            if (target.getAttribute('part') === 'container') {
+                if (this.backdrop === 'static') {
+                    this.shakeModal();
+                }
+                else if (this.closeOnBackdrop) {
+                    this.hide();
+                }
+            }
+        };
+        this.handleDialogCancel = (event) => {
+            event.preventDefault();
+            if (this.closeOnEscape) {
+                if (this.backdrop === 'static') {
+                    this.shakeModal();
+                }
+                else {
+                    this.hide();
+                }
+            }
+        };
+    }
+    async handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.isAnimating = true;
+            const event = this.bcmBeforeOpen.emit();
+            if (event.defaultPrevented) {
+                this.open = false;
+                return;
+            }
+            // Use native dialog API with top-layer
+            if (this.dialogRef) {
+                this.dialogRef.showModal();
+                // Small delay for animation
+                await new Promise(resolve => setTimeout(resolve, 50));
+                this.isAnimating = false;
+                this.bcmOpen.emit();
+            }
+        }
+        else {
+            this.isAnimating = true;
+            const event = this.bcmBeforeClose.emit();
+            if (event.defaultPrevented) {
+                this.open = true;
+                return;
+            }
+            // Wait for animation before closing
+            await new Promise(resolve => setTimeout(resolve, 300));
+            if (this.dialogRef) {
+                this.dialogRef.close();
+            }
+            this.isAnimating = false;
+            this.bcmClose.emit();
+        }
+    }
+    handleClick(event) {
+        // Use composedPath to work with shadow DOM and slots
+        const path = event.composedPath();
+        const dismissElement = path.find(el => { var _a; return (_a = el.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-dismiss'); });
+        const closeModalElement = path.find(el => { var _a; return (_a = el.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-close-modal'); });
+        if (dismissElement) {
+            this.hide();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (closeModalElement) {
+            const modalId = closeModalElement.getAttribute('data-close-modal');
+            // If modalId matches this modal's id, close it
+            if (!modalId || modalId === this.host.id) {
+                this.hide();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open) {
+            // Only handle ESC if this is the topmost modal
+            const openModals = Array.from(document.querySelectorAll('bcm-modal[open]'));
+            const topModal = openModals[openModals.length - 1];
+            if (topModal !== this.host) {
+                return;
+            }
+            event.preventDefault();
+            if (this.closeOnEscape) {
+                if (this.backdrop === 'static') {
+                    this.shakeModal();
+                }
+                else {
+                    this.hide();
+                }
+            }
+            else if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
+        }
+    }
+    async show() {
+        this.open = true;
+    }
+    async hide() {
+        this.open = false;
+    }
+    async toggle() {
+        this.open = !this.open;
+    }
+    shakeModal() {
+        this.shake = true;
+        setTimeout(() => {
+            this.shake = false;
+        }, 300);
+    }
+    getModalStyle() {
+        if (this.fullScreen) {
+            return {
+                width: '100vw',
+                height: '100vh',
+                maxWidth: 'none',
+                maxHeight: 'none',
+            };
+        }
+        if (this.fullWidth) {
+            return {
+                width: '100%',
+                maxWidth: '100%',
+            };
+        }
+        const widths = {
+            small: '400px',
+            medium: '600px',
+            large: '800px',
+            xlarge: '1024px',
+            xxlarge: '1200px',
+            full: '100%',
+        };
+        return {
+            width: widths[this.size],
+            maxWidth: this.fullScreen ? 'none' : '90vw',
+            maxHeight: this.fullScreen ? 'none' : '90vh',
+        };
+    }
+    componentDidLoad() {
+        if (this.open && this.dialogRef) {
+            this.dialogRef.showModal();
+        }
+    }
+    disconnectedCallback() {
+        if (this.dialogRef && this.open) {
+            this.dialogRef.close();
+        }
+    }
+    render() {
+        const { dialog, container, modal, header, headerContent, title, helperText, closeButton, content, footer } = this.modalClass({
+            open: this.open,
+            placement: this.placement,
+            size: this.size,
+            fullScreen: this.fullScreen,
+            shake: this.shake,
+            noHeader: this.noHeader,
+            noFooter: this.noFooter,
+        });
+        return (h("dialog", { key: 'c56eace3816f22ce8c5c3d779940c32c1a2504fe', ref: el => (this.dialogRef = el), part: "dialog", class: dialog(), onClick: this.handleBackdropClick, onCancel: this.handleDialogCancel, "aria-labelledby": "modal-title", "aria-describedby": this.helperText ? 'modal-helper' : undefined, "aria-modal": "true" }, h("div", { key: '0c8185cd161cb0dafcbd8a6c5f67528cd32c23de', part: "container", class: container() }, h("div", { key: 'ff66ec6396147a71d7819ae5e2f00ca38070b306', part: "modal", class: modal(), style: this.getModalStyle(), role: "document", onClick: e => e.stopPropagation() }, !this.noHeader && (h("div", { key: '4cc6b28b668fe76dcaee1138887183ea98466cbe', part: "header", class: header() }, h("div", { key: '8b005c9d586d4d2527c0319c4d17512650479bb0', part: "header-content", class: headerContent() }, h("h2", { key: '756e7f7f7e0d7b2b8c1f476fcb2b00a204884b8e', id: "modal-title", part: "title", class: title() }, h("slot", { key: 'd814bb4b44e47455ded1b0f737c8ddf61fddf9b3', name: "header" }, this.headerText)), this.helperText && (h("p", { key: '7c385f9dce88bc22bf0b7700bb2b289b7803683e', id: "modal-helper", part: "helper-text", class: helperText() }, h("slot", { key: '57bdf3201dd678a1ebdda9893b67032ff773fd05', name: "helper" }, this.helperText)))), h("button", { key: '6bcdfc24e13b375f81c9664a20b552a3f0c5d591', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close modal", type: "button" }, h("bcm-icon", { key: '894f44177f0acbf3e581cbae5cdc76f71e321b57', name: "fa-solid fa-xmark" })))), h("div", { key: '74db820df232cb7728c8a58923a9459b9545e8a1', part: "content", class: content() }, h("slot", { key: '95fd04fbbb441d79d649fd68eeef3868ce65bccc' })), !this.noFooter && (h("div", { key: '7c841bfe1a35abc8d9fe031eb0c8fed5a131db4e', part: "footer", class: footer() }, h("slot", { key: '9bd84178717338a821204f81179571a48bfd1f66', name: "footer" })))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return modalCss; }
+}, [257, "bcm-modal", {
+        "open": [1540],
+        "size": [1],
+        "placement": [1],
+        "backdrop": [8],
+        "fullWidth": [4, "full-width"],
+        "fullScreen": [4, "full-screen"],
+        "headerText": [1, "header-text"],
+        "helperText": [1, "helper-text"],
+        "noHeader": [4, "no-header"],
+        "noFooter": [4, "no-footer"],
+        "closeOnBackdrop": [4, "close-on-backdrop"],
+        "closeOnEscape": [4, "close-on-escape"],
+        "isAnimating": [32],
+        "shake": [32],
+        "show": [64],
+        "hide": [64],
+        "toggle": [64]
+    }, [[2, "click", "handleClick"], [0, "keydown", "handleKeyDown"]], {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BcmModal$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BcmModal = BcmModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmModal, defineCustomElement };
+//# sourceMappingURL=bcm-modal.js.map
+
+//# sourceMappingURL=bcm-modal.js.map

package/dist/components/bcm-modal.js.map

@@ -0,0 +1 @@
+{"file":"bcm-modal.js","mappings":"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","names":["BcmModal","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/modal/modal.css?tag=bcm-modal&encapsulation=shadow","src/components/modal/modal.component.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\nexport type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'full';\nexport type ModalPlacement = 'center' | 'top';\n\n@Component({\n  tag: 'bcm-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class BcmModal {\n  @Element() host: HTMLBcmModalElement;\n\n  private dialogRef?: HTMLDialogElement;\n\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop() size: ModalSize = 'medium';\n  @Prop() placement: ModalPlacement = 'center';\n  @Prop() backdrop: boolean | 'static' = true;\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n  @Prop({ attribute: 'full-screen' }) fullScreen: boolean = false;\n  @Prop({ attribute: 'header-text' }) headerText?: string;\n  @Prop({ attribute: 'helper-text' }) helperText?: string;\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n  @Prop({ attribute: 'no-footer' }) noFooter: boolean = false;\n  @Prop({ attribute: 'close-on-backdrop' }) closeOnBackdrop: boolean = true;\n  @Prop({ attribute: 'close-on-escape' }) closeOnEscape: boolean = true;\n\n  @State() isAnimating: boolean = false;\n  @State() shake: boolean = false;\n\n  @Event() bcmOpen: EventEmitter<void>;\n  @Event() bcmClose: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private modalClass = tv({\n    slots: {\n      dialog:\n        'bcm-ui-element fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full border-none bg-transparent backdrop:bg-color-default-dark backdrop:opacity-50 backdrop:transition-opacity backdrop:duration-300',\n      container: 'fixed inset-0 flex items-start justify-center p-4 overflow-y-auto overscroll-contain',\n      modal: 'relative bg-color-basic-base text-color-default rounded-lg shadow-2xl transform transition-all duration-300 ease-in-out flex flex-col',\n      header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 border-b rounded-t-lg',\n      headerContent: 'flex-1 min-w-0 flex items-center gap-2',\n      title: 'font-semibold m-0 text-size-6 text-color-header',\n      helperText: 'text-size-5 text-color-placeholder m-0',\n      closeButton:\n        'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 rounded hover:bg-color-default-hover cursor-pointer active:bg-color-active transition-colors flex-shrink-0 outline-none focus-visible:ring ',\n      content: 'flex-grow overflow-y-auto',\n      footer: 'flex items-center justify-end gap-2',\n    },\n    variants: {\n      open: {\n        true: {\n          modal: 'opacity-100 translate-y-0 scale-100',\n        },\n        false: {\n          modal: 'opacity-0 -translate-y-4 scale-95',\n        },\n      },\n      placement: {\n        center: {\n          container: 'items-center',\n        },\n        top: {\n          container: 'items-start pt-20',\n        },\n      },\n      size: {\n        small: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n          footer: 'py-3 px-4',\n        },\n        medium: {\n          header: 'py-4 px-5',\n          content: 'p-5',\n          footer: 'py-4 px-5',\n        },\n        large: {\n          header: 'py-4 px-6',\n          content: 'p-6',\n          footer: 'py-4 px-6',\n        },\n        xlarge: {\n          header: 'py-5 px-6',\n          content: 'p-6',\n          footer: 'py-5 px-6',\n        },\n        xxlarge: {\n          header: 'py-5 px-8',\n          content: 'p-8',\n          footer: 'py-5 px-8',\n        },\n        full: {\n          header: 'py-5 px-8',\n          content: 'p-8',\n          footer: 'py-5 px-8',\n        },\n      },\n      fullScreen: {\n        true: {\n          modal: 'rounded-none w-screen h-screen max-w-none max-h-none',\n          container: 'p-0',\n        },\n      },\n      shake: {\n        true: {\n          modal: 'animate-shake',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n      noFooter: {\n        true: {\n          footer: 'hidden',\n        },\n      },\n    },\n  });\n\n  @Watch('open')\n  async handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.isAnimating = true;\n      const event = this.bcmBeforeOpen.emit();\n      if (event.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      // Use native dialog API with top-layer\n      if (this.dialogRef) {\n        this.dialogRef.showModal();\n        // Small delay for animation\n        await new Promise(resolve => setTimeout(resolve, 50));\n        this.isAnimating = false;\n        this.bcmOpen.emit();\n      }\n    } else {\n      this.isAnimating = true;\n      const event = this.bcmBeforeClose.emit();\n      if (event.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      // Wait for animation before closing\n      await new Promise(resolve => setTimeout(resolve, 300));\n      if (this.dialogRef) {\n        this.dialogRef.close();\n      }\n      this.isAnimating = false;\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    // Use composedPath to work with shadow DOM and slots\n    const path = event.composedPath() as HTMLElement[];\n    const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));\n    const closeModalElement = path.find(el => el.hasAttribute?.('data-close-modal'));\n\n    if (dismissElement) {\n      this.hide();\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (closeModalElement) {\n      const modalId = closeModalElement.getAttribute('data-close-modal');\n      // If modalId matches this modal's id, close it\n      if (!modalId || modalId === this.host.id) {\n        this.hide();\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      // Only handle ESC if this is the topmost modal\n      const openModals = Array.from(document.querySelectorAll('bcm-modal[open]'));\n      const topModal = openModals[openModals.length - 1];\n\n      if (topModal !== this.host) {\n        return;\n      }\n\n      event.preventDefault();\n      if (this.closeOnEscape) {\n        if (this.backdrop === 'static') {\n          this.shakeModal();\n        } else {\n          this.hide();\n        }\n      } else if (this.backdrop === 'static') {\n        this.shakeModal();\n      }\n    }\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async toggle(): Promise<void> {\n    this.open = !this.open;\n  }\n\n  private shakeModal() {\n    this.shake = true;\n    setTimeout(() => {\n      this.shake = false;\n    }, 300);\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    // Check if click is on the container (backdrop area), not on modal content\n    if (target.getAttribute('part') === 'container') {\n      if (this.backdrop === 'static') {\n        this.shakeModal();\n      } else if (this.closeOnBackdrop) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n    if (this.closeOnEscape) {\n      if (this.backdrop === 'static') {\n        this.shakeModal();\n      } else {\n        this.hide();\n      }\n    }\n  };\n\n  private getModalStyle() {\n    if (this.fullScreen) {\n      return {\n        width: '100vw',\n        height: '100vh',\n        maxWidth: 'none',\n        maxHeight: 'none',\n      };\n    }\n\n    if (this.fullWidth) {\n      return {\n        width: '100%',\n        maxWidth: '100%',\n      };\n    }\n\n    const widths = {\n      small: '400px',\n      medium: '600px',\n      large: '800px',\n      xlarge: '1024px',\n      xxlarge: '1200px',\n      full: '100%',\n    };\n\n    return {\n      width: widths[this.size],\n      maxWidth: this.fullScreen ? 'none' : '90vw',\n      maxHeight: this.fullScreen ? 'none' : '90vh',\n    };\n  }\n\n  componentDidLoad() {\n    if (this.open && this.dialogRef) {\n      this.dialogRef.showModal();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.dialogRef && this.open) {\n      this.dialogRef.close();\n    }\n  }\n\n  render() {\n    const { dialog, container, modal, header, headerContent, title, helperText, closeButton, content, footer } = this.modalClass({\n      open: this.open,\n      placement: this.placement,\n      size: this.size,\n      fullScreen: this.fullScreen,\n      shake: this.shake,\n      noHeader: this.noHeader,\n      noFooter: this.noFooter,\n    });\n\n    return (\n      <dialog\n        ref={el => (this.dialogRef = el)}\n        part=\"dialog\"\n        class={dialog()}\n        onClick={this.handleBackdropClick}\n        onCancel={this.handleDialogCancel}\n        aria-labelledby=\"modal-title\"\n        aria-describedby={this.helperText ? 'modal-helper' : undefined}\n        aria-modal=\"true\"\n      >\n        <div part=\"container\" class={container()}>\n          <div part=\"modal\" class={modal()} style={this.getModalStyle()} role=\"document\" onClick={e => e.stopPropagation()}>\n            {!this.noHeader && (\n              <div part=\"header\" class={header()}>\n                <div part=\"header-content\" class={headerContent()}>\n                  <h2 id=\"modal-title\" part=\"title\" class={title()}>\n                    <slot name=\"header\">{this.headerText}</slot>\n                  </h2>\n                  {this.helperText && (\n                    <p id=\"modal-helper\" part=\"helper-text\" class={helperText()}>\n                      <slot name=\"helper\">{this.helperText}</slot>\n                    </p>\n                  )}\n                </div>\n                <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close modal\" type=\"button\">\n                  <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n                </button>\n              </div>\n            )}\n\n            <div part=\"content\" class={content()}>\n              <slot />\n            </div>\n\n            {!this.noFooter && (\n              <div part=\"footer\" class={footer()}>\n                <slot name=\"footer\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-pop-confirm.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index.js';
 import { c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './p-CzcTU1ty.js';
 import { t as tv } from './p-CEcVC0yX.js';
-import { d as defineCustomElement$2 } from './p-BdGAZ8M0.js';
+import { d as defineCustomElement$2 } from './p-DGlecSBr.js';
 
 const popConfirmCss = ".absolute{position:absolute}.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))}.text-wrap{text-wrap:wrap}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);--popover-radius:6px;--popover-text-color:var(--bcm-ui-color-text-basic);display:inline-block}.arrow{background:var(--arrow-color);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:1}.arrow.top{transform:rotate(180deg)}.arrow.bottom{transform:rotate(0deg)}.arrow.right{transform:rotate(-90deg)}.arrow.left{transform:rotate(90deg)}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.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}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.w-full{width:100%}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.outline{outline-style:solid}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";
 
@@ -239,7 +239,7 @@ const PopConfirm = /*@__PURE__*/ proxyCustomElement(class PopConfirm extends H {
         const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({
             size: this.size,
         });
-        return (h(Fragment, { key: '256bba18a7185df003cf435e9c50bb3faf655bd3' }, this.isOpen && (h("div", { key: '8557109b4b7bcd9242cad12e20ffbe2b9abc7cb1', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: '5233f27cec248cf1e6f0ee50d0cd7b9302b68de7', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: '78fc2b3ccada895c52fef483ab8263eedb29cef4', class: header() }, h("div", { key: '104d8cc9c1e2256f8be5ea127e22a3114f1c0608', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: '348e431869d73de73d243fe9432fca9f7d5bbe8a', "icon-name": statusIcons[this.status] }), h("span", { key: '6b197fb03736b8b838e845f3cd9c13db64d2cb30', class: titleContainer() }, this.headerText), h("slot", { key: 'b7a08113f60b290b78223b95de1c897d839b9f2c', name: "header" })), h("div", { key: 'c10afd851fcdffbf090f11b53ebccffeb582a1a3', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: '77ec3e916624528f21314dab55f6fdc9cfed6b54', "icon-name": "far fa-times" }))), h("main", { key: '714b0c73e0d71f45341fc9e9d2822cf6f6820c1d', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: '43a7c9fe77aec8273bdb9dbd45bdd34f66731d71', name: "body" }, this.description)), h("footer", { key: '91020f742b01472c171451bda4d2ce97a30b5b1c', class: footer() }, h("bcm-button", { key: 'f5395add9ad6aa471e0a7285f810892e6d1b04ad', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '0b8c99beb293cf560cf3c47446447194c288773a', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: 'f89db0835be4030896da14ab344f77c660061332', name: "footer" }))))));
+        return (h(Fragment, { key: '86c517640fafd1c8c6826b85c2b6210ef51fb8a3' }, this.isOpen && (h("div", { key: 'c6c04b088ddf54834208cfb353ad205784c3f43b', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: '2333829cfb8a5bc0f36d6ecf48d7e768b2c5c871', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: 'd0978abfe687e8eb13b8ea29ff05d0ccb0a060a4', class: header() }, h("div", { key: '9d648868414279f9d0494f329e5f20c1a18dd83c', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: 'e0caaa164bad82bf321e7706e534d07de45caee2', "icon-name": statusIcons[this.status] }), h("span", { key: '34b24b04e00a89098a727725998647b4cfaf6fda', class: titleContainer() }, this.headerText), h("slot", { key: '04422666023fa5a7e912a29d406ff7a9d4b0ec23', name: "header" })), h("div", { key: '4d6387833461db35148ff1f91de430d1b3b4ae0a', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: '04214951b966c79f4661db005255ab7ee58cb347', "icon-name": "far fa-times" }))), h("main", { key: '7df82cffa20da608e2f4026b89c390eeede5f305', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: '7f045ed1b27608865cb0ae0c6fd24fc07220129d', name: "body" }, this.description)), h("footer", { key: '5c3d3c2436c24739f7900841c7d7025cc011ee17', class: footer() }, h("bcm-button", { key: '5f8bdfe07adeb25a6fa8111ea32e3439e391a546', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '9920702fb5bcef61f11e7cf2730344f0e4c17b5f', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: 'dde6cc0979b5e7994f92c9afa0444d86ff9585cd', name: "footer" }))))));
     }
     get el() { return this; }
     static get style() { return popConfirmCss; }

package/dist/components/bcm-popover.js

@@ -177,7 +177,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
             isOpen: this.open,
             size: this.size,
         });
-        return (h("div", { key: 'e57bc4bf987d3e0ab1c32093c0c2aa4fb19ec403', class: "relative" }, h("slot", { key: '4e2cf108937324457a86501891f280abc1ab1bbb', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '63ef22a0aaed9d37a570686c191a2d1b901a38df', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f6c3d7d6733e60928703b3be49b69abc69693a2e', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: '88898bfe6a978e5a7f85c9bd72387a1965bd5e8b', class: header(), part: "header" }, h("slot", { key: '13d490f43ac484bfe7c7ece3d93cc5161d85ef6f', name: "header" }, this.headerText)), h("div", { key: 'a1de41f15a483d4eefdbc915109f971225163852', class: content(), part: "content" }, h("slot", { key: '8000dff7ff5ed0466fcb50dae1b23c0510a7bfc8', name: "content" }, this.message)))));
+        return (h("div", { key: 'b81215e32d99dcfcc8515112267c3c2238379de8', class: "relative" }, h("slot", { key: 'd766006614697458b5343a55d387cb11ae1be04b', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '1016451410fa02ec500f3ed3f29f2203830ccb40', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: '199e69dd49ac7f920f402e9b44acc946406ba625', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: '3adfb07eae7e0c437768c1fb2a1d0b086ee40c4b', class: header(), part: "header" }, h("slot", { key: 'e6fc16d74640eca36ce78dc79cc8f2442f318516', name: "header" }, this.headerText)), h("div", { key: 'ac7b023e5c2ec83be9ef9d07e5b6215e71131813', class: content(), part: "content" }, h("slot", { key: '876c5b841f3ba597900b5950e8b56e0fa859ecdd', name: "content" }, this.message)))));
     }
     get el() { return this; }
     static get style() { return popoverCss; }

package/dist/components/bcm-radio-group.js

@@ -139,14 +139,14 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup ext
             size: this.size,
             direction: this.direction,
         });
-        return (h("div", { key: '8a8ca20a35d1b1dc50a9cbd44b37c21cc9591617', class: host() }, this.label && (h("label", { key: '82df9232afd7a395acaa50096f48b74349f82c0d', class: classNames('input-label font-medium', {
+        return (h("div", { key: '0156af0f5cbb5fe42237527163aa98accdcadcec', class: host() }, this.label && (h("label", { key: '132871f4ec63da77602047bcdc061d362203af85', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }) }, h("slot", { key: 'e328ff4bb753334d9a15ddd6879566149c490d89', name: "label" }, this.label), this.required && h("span", { key: '4671022c9d17783262dd0d80034a1f0f67517b24' }, "*"))), h("div", { key: '87df33142912050dc54c54d8cedf0497936aa7b8', class: container() }, h("slot", { key: '204d69a31753136cd8000904d604d21d748b60bb', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '4a7a5457542d2bba9c72e15d3ac0c9efc68bd4e9', class: classNames('input-caption-text font-regular mt-1', {
+            }) }, h("slot", { key: 'd7ead39ee81388ce3e8e56b79aa1bca7c40b76d9', name: "label" }, this.label), this.required && h("span", { key: '708c373de54b1b495f3672faa19905dbe0ba4dd5' }, "*"))), h("div", { key: 'bf573a67c0b190363ef749f9dc80f02d03fcfe82', class: container() }, h("slot", { key: '266e18fe697f9a95b32f5f25ee73eef2e71dbff9', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: 'b4cef6e66d95dd4ea6c676b3b00ab43457bda954', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled,
                 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,
                 'text-[--bcm-ui-color-text-disabled]': this.disabled,

package/dist/components/bcm-radio.js

@@ -159,7 +159,7 @@ const BcmRadio$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadio extends H {
             readonly: this.readonly,
             labelPosition: this.labelPosition,
         });
-        return (h("label", { key: '8ec133d96a6ce1549cfc2e27764883fedb192f02', class: container(), style: this.getRadioStyle() }, h("input", { key: '7dabc73fa0ea4707943db1cc5ab77b6381409b75', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: 'ac815a1849d2c415203a2084ad8f5ce518478a79', class: dotContainer() }, h("div", { key: 'b36a046d5abc43ef3cbe18fc3e938e31c5069a1d', class: dot() })), h("span", { key: 'fc3bdf6839bb08d9d4b3c0a415c49f867d4d5077', class: labelClass() }, h("slot", { key: '9cfd3891ac6650f717a97c5e6268158b2ef5b0ce' }, this.label))));
+        return (h("label", { key: '8f59d67513409066c9e3d7e2c392cc761bfdbfea', class: container(), style: this.getRadioStyle() }, h("input", { key: '69aac18c67de1847ba1d7c1e1498dc588e45b5f2', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '70eae4b7ac942b0c4f18da4feb45bb24b4bc3af6', class: dotContainer() }, h("div", { key: 'a22cd8353a5d97cdd473918628c9cfe476e6fd7a', class: dot() })), h("span", { key: 'ef3ed62b75fc1affa89c1d4ca13976aea7ed102a', class: labelClass() }, h("slot", { key: '132dbacf8bbe0bc8ff8acafe92a1dbc47f39849f' }, this.label))));
     }
     get host() { return this; }
     static get style() { return radioCss; }

package/dist/components/bcm-segmented-picker-option.js

@@ -91,11 +91,11 @@ const BcmSegmentedPickerOption$1 = /*@__PURE__*/ proxyCustomElement(class BcmSeg
     render() {
         const size = this.size || this.getSizeFromParent();
         const disabled = this.isDisabled();
-        return (h(Host, { key: '2a73da779908b67076dfea3943e83c9bd4e1164b' }, h("button", { key: 'a2f1efb0c73378026867bde6f9dd1cea4adb36c2', class: this.optionClass({
+        return (h(Host, { key: '2af991ae0e4fa193e3a097083d870e413e7b05ef' }, h("button", { key: '6b56d96e0d8f92cd252109fddea6e0625905462c', class: this.optionClass({
                 size,
                 selected: this.selected,
                 disabled,
-            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '62f4c0d40ffb4cbe2c7a0cc18c0adeb7689ff2df' }, this.label))));
+            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '28664f2615d9fde8a8f5c0a22e4dceef9abf9f57' }, this.label))));
     }
     get host() { return this; }
     static get style() { return segmentedPickerOptionCss; }

package/dist/components/bcm-segmented-picker.js

@@ -125,11 +125,11 @@ const BcmSegmentedPicker$1 = /*@__PURE__*/ proxyCustomElement(class BcmSegmented
         }, 10);
     }
     render() {
-        return (h(Host, { key: 'da5fd3ac598c6e782387ead9a994c3e2cffb0120' }, h("div", { key: '8095a9eb1c5cc455989402ca89ef45ad8799cc4c', class: this.segmentedClass({
+        return (h(Host, { key: 'd0cbc159bc9bbc04dd3529d49013c70fedd51900' }, h("div", { key: '482aaafb09980d4e898da826be0d551335fbf074', class: this.segmentedClass({
                 size: this.size,
                 fullWidth: this.fullWidth,
                 disabled: this.disabled,
-            }) }, h("div", { key: '09be9fc279d015a8d1050591ea287ca192f2e1ea', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: '41b20cd2a9a5b3abe7bda035c91c801a211c0f23', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '102516eba6f3470073e54fba0943efb26037b8a4' })))));
+            }) }, h("div", { key: '32ae6dd4e49a4bb8d054b0c6ed0438a8a5fd88d4', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: '5d4cbf382a1f7796c54a78c707579a1b517d4afe', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '0dd209dd41f1da85bbe40542f7b3f725e2856094' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/bcm-shortcut.js

@@ -35,7 +35,7 @@ const BcmShortcut$1 = /*@__PURE__*/ proxyCustomElement(class BcmShortcut extends
     }
     render() {
         const { size, hotkey } = this;
-        return (h("div", { key: '007588d1d20941ead644a3d1fd72410cb6793ff5', class: classNames('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
+        return (h("div", { key: 'eb49e2cf3b0afbd7e9572effa5b9c3fdf24d3068', class: classNames('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
                 'text-size-2': size === 'small',
                 'text-size-3': size === 'medium',
                 'text-size-4': size === 'large',

package/dist/components/bcm-switch.js

@@ -169,12 +169,12 @@ const BcmSwitch$1 = /*@__PURE__*/ proxyCustomElement(class BcmSwitch extends H {
         });
         const ariaAttributes = Object.assign({ 'role': 'switch', 'aria-checked': this.checked.toString(), 'aria-disabled': this.disabled.toString(), 'aria-readonly': this.readonly.toString() }, (this.required && { 'aria-required': 'true' }));
         const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};
-        return (h("div", { key: 'd3a267192ccecc212952b3140e15579868669559', class: base() }, h("label", { key: 'a0ed52d113eb5da56a56ec71bde2c2cae17603b9', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: 'd5f3041f00a7689244a8799d58d90281b6e44ddc', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && (h("span", { key: '2c19141b32811c2237f272f0194677b5e85911d8', class: label() }, h("slot", { key: 'b0725f609b318d99ccc7eb9abb0f742754323710' }, this.label))), h("label", Object.assign({ key: 'a9a4a95627dbe7e5ce60fdfe2188feba7ed34da3', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+        return (h("div", { key: 'df4d735b04edd9a31d8bcf04ea875741220b3cfc', class: base() }, h("label", { key: 'da8ea3a6b667a2699b08d2d93907aede1d23004c', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: 'a34281d25fc5896b48d1f7698d596039cc9fa392', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && (h("span", { key: 'ba7fe6a0635ac7598632bf6b2ffcaf9f0208bd4b', class: label() }, h("slot", { key: '35eace6c1d6ba0e596fd13397eea998dc1b5bc00' }, this.label))), h("label", Object.assign({ key: 'b83f4d773036ba32a4918c8961994b1a158d4ba3', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
                 if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
                     event.preventDefault();
                     this.toggleSwitch();
                 }
-            } }), h("div", { key: 'c123c5b1037558e44b30256b2b86f9c894edf75d', class: dot() }))), this.error && this.caption && h("span", { key: 'f7a50c32b5868facac9c7627237c6f3542b26bf3', class: caption() }, this.caption), h("slot", { key: 'ed4d82b698202070324d645f358b2058c3583d28', name: "caption" })));
+            } }), h("div", { key: '2f15642e8af847b0c596d21358f52334b86e00b1', class: dot() }))), this.error && this.caption && h("span", { key: '3f285649949035002338a232b7b9df0276cfd814', class: caption() }, this.caption), h("slot", { key: 'e0bc0b55fa00cc3520538caa79f7003d4bd5266f', name: "caption" })));
     }
     get el() { return this; }
     static get style() { return switchCss; }

package/dist/components/bcm-tabs-content.js

@@ -9,7 +9,7 @@ const BcmTabsContent$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsContent e
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'e12d04d682726a70c9a7cd4ce091cb64b067ce32', role: "tabpanel" }, h("slot", { key: 'c947677586826f8702472107a43d92235aca84ef' })));
+        return (h(Host, { key: 'fc798a13ff55708c0be0b09a1b785d31bc45b493', role: "tabpanel" }, h("slot", { key: 'e73e890336a896c1d2f8edfda31482e341a49d7b' })));
     }
     static get style() { return tabsContentCss; }
 }, [257, "bcm-tabs-content", {

package/dist/components/bcm-tabs-list.js

@@ -73,7 +73,7 @@ const BcmTabsList$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsList extends
             variant: this.variant,
             smooth: this.smooth,
         });
-        return (h("div", { key: '024191da887d16461269660cb7c97d896848bef0', class: container(), slot: "tabs-list" }, h("div", { key: '5be00109388015401723b94881bed240594cd722', class: backgroundLine() }), h("div", { key: '83c291950deaa88f32950fa84ced38f22a971dc7', class: inkbar() }), h("div", { key: 'f160a54fa4b3c82b63114e169d0ff36bf4c6d014', class: tabList(), role: "tablist" }, h("slot", { key: 'fbedd8dae37e259778d44294237616abfc1ea2dd' }))));
+        return (h("div", { key: '22081fbe0da3ca814b9951c255a77b7435303990', class: container(), slot: "tabs-list" }, h("div", { key: '1ee3f553ebe92d9d14a025374b25e2d0c4428c60', class: backgroundLine() }), h("div", { key: 'd32565de58ab3049a5c9f87b3dd2a6f42fd3ffa6', class: inkbar() }), h("div", { key: '15809b48b0b80af2c5f49af242f8330749887cc9', class: tabList(), role: "tablist" }, h("slot", { key: 'e4d228e16d4ea66720609d2cd9bdeb9fd620609c' }))));
     }
     static get style() { return tabsListCss; }
 }, [257, "bcm-tabs-list", {

package/dist/components/bcm-tabs-trigger.js

@@ -110,7 +110,7 @@ const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger e
             variant: this.variant,
             smooth: this.smooth,
         });
-        return (h(Host, { key: 'dac345717b1f19fe5e92fdf42dd6573e61ffd5a7', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'f6a287751689d7d672a4c7dd642394005d86a1a7', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '96c180785246ddad5ab6d92ec5be1c66a975bfc1' })), h("div", { key: '60a0d79d457856101022e2645e1e319f26e7087e', class: borderLine() })));
+        return (h(Host, { key: '10afdebb01a40818e4d831ab4a196b7a9a1f1cf2', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: '4a724b9c1dff6f9943a38a0500de7c5f2df837c2', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: 'f1685a3d23aaa9a148dd5ecd8d65d24eaff335bc' })), h("div", { key: '2f8bc2b90b56fa549a7b564efe9dcf4e87e5e472', class: borderLine() })));
     }
     get el() { return this; }
     static get style() { return tabsTriggerCss; }

package/dist/components/bcm-tabs.js

@@ -281,7 +281,7 @@ const BcmTabs$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabs extends H {
         }
     }
     render() {
-        return (h(Host, { key: '8ae1e76b89ba36c6e1e58363938a12c91f55a495' }, h("div", { key: 'a3608cf2b81e19d04a0b0dfd83740ee34d6e9cff', class: this.tabClass({ variant: this.variant }) }, h("slot", { key: '209f2bc32b116d68647ca3358b331fa87177adb6', name: "tabs-list" }), h("slot", { key: '10b5c726a8a390c5592fda3ee85cf7461ce3efb9' }))));
+        return (h(Host, { key: '40390aa3b08a9f72fd1e8aac0e784c988015d0da' }, h("div", { key: '47f30332623e92689e8ca5beac6e5302750236ed', class: this.tabClass({ variant: this.variant }) }, h("slot", { key: 'e6000e04b9ca3b82d55928d24d8321e6bda8b3c3', name: "tabs-list" }), h("slot", { key: '37fbf0d03adf2a66db578a24732e2af52204dbf6' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/bcm-text.js

@@ -113,7 +113,7 @@ const BcmText$1 = /*@__PURE__*/ proxyCustomElement(class BcmText extends H {
         const Tag = variantTagMap[this.variant];
         const variantClass = this.getTextClass(this.variant, this.size);
         const overflowClass = this.getOverflowClass((_a = this.overflow) !== null && _a !== void 0 ? _a : false);
-        return (h(Tag, { key: 'cb3c78143a1f52fdadd9458219ef5f12eace04e6', class: classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: '7ab30bbf72b0fe1be98089b6c452662a382363e1' }, this.text)));
+        return (h(Tag, { key: '764bafeee7a1afa0b0087b4c3ae6ba1099a0ad99', class: classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: '2ce41da65f4abb2ea5f926c6f5b6959488245ead' }, this.text)));
     }
     static get style() { return textCss; }
 }, [257, "bcm-text", {