bromcom-ui-next 0.1.3 → 0.1.4

package/dist/components/p-31354aaa.js.map

@@ -0,0 +1 @@
+{"file":"p-31354aaa.js","mappings":"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","names":["uuidv4"],"sources":["node_modules/uuid/dist/esm-browser/stringify.js","node_modules/uuid/dist/esm-browser/rng.js","node_modules/uuid/dist/esm-browser/native.js","node_modules/uuid/dist/esm-browser/v4.js","src/utils/id/generate-id.ts","src/utils/i18n.ts","src/utils/validation-messages.ts"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n    byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n    return (byteToHex[arr[offset + 0]] +\n        byteToHex[arr[offset + 1]] +\n        byteToHex[arr[offset + 2]] +\n        byteToHex[arr[offset + 3]] +\n        '-' +\n        byteToHex[arr[offset + 4]] +\n        byteToHex[arr[offset + 5]] +\n        '-' +\n        byteToHex[arr[offset + 6]] +\n        byteToHex[arr[offset + 7]] +\n        '-' +\n        byteToHex[arr[offset + 8]] +\n        byteToHex[arr[offset + 9]] +\n        '-' +\n        byteToHex[arr[offset + 10]] +\n        byteToHex[arr[offset + 11]] +\n        byteToHex[arr[offset + 12]] +\n        byteToHex[arr[offset + 13]] +\n        byteToHex[arr[offset + 14]] +\n        byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n    const uuid = unsafeStringify(arr, offset);\n    if (!validate(uuid)) {\n        throw TypeError('Stringified UUID is invalid');\n    }\n    return uuid;\n}\nexport default stringify;\n","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n    if (!getRandomValues) {\n        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n        }\n        getRandomValues = crypto.getRandomValues.bind(crypto);\n    }\n    return getRandomValues(rnds8);\n}\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n    if (native.randomUUID && !buf && !options) {\n        return native.randomUUID();\n    }\n    options = options || {};\n    const rnds = options.random ?? options.rng?.() ?? rng();\n    if (rnds.length < 16) {\n        throw new Error('Random bytes length must be >= 16');\n    }\n    rnds[6] = (rnds[6] & 0x0f) | 0x40;\n    rnds[8] = (rnds[8] & 0x3f) | 0x80;\n    if (buf) {\n        offset = offset || 0;\n        if (offset < 0 || offset + 16 > buf.length) {\n            throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);\n        }\n        for (let i = 0; i < 16; ++i) {\n            buf[offset + i] = rnds[i];\n        }\n        return buf;\n    }\n    return unsafeStringify(rnds);\n}\nexport default v4;\n","import { v4 as uuidv4 } from 'uuid';\n\n/**\n * Generates a unique identifier with an optional prefix.\n * @param prefix - Optional prefix for the generated ID (default: 'bcm')\n * @returns A unique string ID in the format \"prefix-uuid\"\n * @example\n * const id = generateId('button'); // -> \"button-123e4567-e89b...\"\n * const defaultId = generateId(); // -> \"bcm-123e4567-e89b...\"\n */\nexport const generateId = (prefix = 'bcm'): string => {\n  if (!prefix) {\n    throw new Error('Prefix cannot be empty');\n  }\n  return `${prefix}-${uuidv4()}`;\n};\n","export type MessageTemplateData = Record<string, string | number>;\n\nexport class I18n {\n  private static messages: Record<string, Record<string, string>> = {};\n  private static currentLocale = 'en';\n\n  static setMessages(locale: string, messages: Record<string, string>) {\n    this.messages[locale] = messages;\n    this.currentLocale = locale; // Mesajları set ederken locale'i de güncelle\n    // console.log(`I18n messages set for locale: ${locale}`, messages);\n  }\n\n  static setLocale(locale: string) {\n    if (this.messages[locale]) {\n      this.currentLocale = locale;\n      // Locale değiştiğinde console'a bilgi ver (development için)\n      console.log(`I18n locale changed to: ${locale}`);\n    } else {\n      console.warn(`Locale '${locale}' not found in messages`);\n    }\n  }\n\n  static t(key: string, data?: MessageTemplateData): string {\n    const message = this.messages[this.currentLocale]?.[key] || key;\n    if (!data) return message;\n\n    return Object.entries(data).reduce((msg, [key, value]) => {\n      return msg.replace(new RegExp(`{${key}}`, 'g'), String(value));\n    }, message);\n  }\n}\n","import { I18n } from './i18n';\n\nexport const defaultValidationMessages = {\n  email: 'Please enter a valid email address',\n  required: 'This field is required',\n  minlength: 'Please enter at least {min} characters',\n  maxlength: 'Please enter no more than {max} characters',\n  min: 'Value must be at least {min}',\n  max: 'Value must be at most {max}',\n  pattern: 'Please enter a valid format',\n};\n\nexport const setValidationMessages = (locale: string, messages: Partial<typeof defaultValidationMessages>) => {\n  I18n.setMessages(locale, { ...defaultValidationMessages, ...messages });\n};\n\nexport const getValidationMessage = (type: keyof typeof defaultValidationMessages, data?: Record<string, string | number>) => {\n  return I18n.t(type, data);\n};\n"],"version":3}

package/dist/components/p-39637e05.js

@@ -0,0 +1,145 @@
+import { p as proxyCustomElement, H, h } from './p-13582168.js';
+import { c as ce } from './p-5fcf77f9.js';
+
+const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.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}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.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)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:9999px;content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:9999px}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}";
+const BcmBadgeStyle0 = badgeCss;
+
+const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Determines the size of the badge.
+         * @type {'small' | 'medium' | 'large'}
+         * @default 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * Sets the visual variant of the badge.
+         * 'dot': Appears as a small dot indicator
+         * 'text': Displays content as text
+         * @type {'dot' | 'text'}
+         * @default 'text'
+         */
+        this.variant = 'text';
+        /**
+         * Enables soft color mode for the badge.
+         * When true, uses lighter tones and pastel colors.
+         * @type {boolean}
+         * @default false
+         */
+        this.soft = false;
+        /**
+         * Enables blinking animation for the badge.
+         * Useful for drawing attention or indicating active status.
+         * @type {boolean}
+         * @default false
+         */
+        this.blink = false;
+        /**
+         * Sets the position of the badge relative to its container.
+         * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
+         * @default 'top-right'
+         */
+        this.position = 'top-right';
+        this.classes = ce({
+            base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',
+            variants: {
+                size: {
+                    small: 'gap-1 px-1 text-size-3',
+                    medium: 'gap-1 py-0.5 px-1.5 text-size-4',
+                    large: 'gap-2 py-1 px-2 text-size-5',
+                },
+                variant: {
+                    dot: 'gap-0 p-0 text-[0px] leading-none',
+                    text: '',
+                },
+                position: {
+                    'top-right': '-top-1 -right-1',
+                    'top-left': '-top-1 -left-1',
+                    'bottom-right': '-bottom-1 -right-1',
+                    'bottom-left': '-bottom-1 -left-1',
+                },
+                blink: {
+                    true: 'after:content-[""] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',
+                },
+            },
+            compoundVariants: [
+                {
+                    variant: 'dot',
+                    size: 'small',
+                    class: 'size-1',
+                },
+                {
+                    variant: 'dot',
+                    size: 'medium',
+                    class: 'size-1.5',
+                },
+                {
+                    variant: 'dot',
+                    size: 'large',
+                    class: 'size-2',
+                },
+            ],
+            defaultVariants: {
+                variant: 'text',
+                size: 'medium',
+                position: 'top-right',
+                blink: false,
+            },
+        });
+    }
+    get offsetStyle() {
+        if (!this.offset)
+            return {};
+        const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());
+        return { transform: `translate(${x}px, ${y}px)` };
+    }
+    get badgeStyle() {
+        if (!this.color)
+            return {};
+        const variantType = this.soft ? 'soft' : 'vivid';
+        return {
+            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,
+            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',
+        };
+    }
+    render() {
+        return (h("div", { key: '9c6ce83cc0ae25399f2d97139d9e91578be38237', class: "relative inline-flex" }, h("slot", { key: 'b05db7fc70a8ff5c680e79507d44678ea4f8aba4' }), h("div", { key: 'e3fe3d09e236ae1569d533824f4bb585a5871b53', role: "status", "aria-live": "polite", "aria-label": this.status ? `Status: ${this.status}` : undefined, class: this.classes({
+                size: this.size,
+                variant: this.variant,
+                position: this.position,
+                blink: this.blink,
+            }), style: Object.assign(Object.assign({}, this.badgeStyle), this.offsetStyle) }, this.variant == 'text' && h("slot", { key: '98e3f9eaa2966a748e41782efbe78ca35a9deee6', name: "badge" }, this.text))));
+    }
+    static get style() { return BcmBadgeStyle0; }
+}, [1, "bcm-badge", {
+        "size": [1],
+        "variant": [1],
+        "color": [1],
+        "soft": [4],
+        "blink": [4],
+        "status": [1],
+        "position": [1],
+        "offset": [1],
+        "text": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Badge);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { Badge as B, defineCustomElement as d };
+
+//# sourceMappingURL=p-39637e05.js.map

package/dist/components/p-39637e05.js.map

@@ -0,0 +1 @@
+{"file":"p-39637e05.js","mappings":"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","names":["tv"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n *   <div>Container Content</div>\n *   <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n *   <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n    tag: 'bcm-badge',\n    styleUrl: 'badge.css',\n    shadow: true,\n})\nexport class Badge implements ComponentInterface {\n    /**\n     * Determines the size of the badge.\n     * @type {'small' | 'medium' | 'large'}\n     * @default 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Sets the visual variant of the badge.\n     * 'dot': Appears as a small dot indicator\n     * 'text': Displays content as text\n     * @type {'dot' | 'text'}\n     * @default 'text'\n     */\n    @Prop()\n    variant: 'dot' | 'text' = 'text';\n\n    /**\n     * Defines the color of the badge.\n     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    color?: string;\n\n    /**\n     * Enables soft color mode for the badge.\n     * When true, uses lighter tones and pastel colors.\n     * @type {boolean}\n     * @default false\n     */\n    @Prop()\n    soft: boolean = false;\n\n    /**\n     * Enables blinking animation for the badge.\n     * Useful for drawing attention or indicating active status.\n     * @type {boolean}\n     * @default false\n     */\n    @Prop()\n    blink: boolean = false;\n\n    /**\n     * Status message for accessibility purposes.\n     * Will be read by screen readers.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    status?: string;\n\n    /**\n     * Sets the position of the badge relative to its container.\n     * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n     * @default 'top-right'\n     */\n    @Prop()\n    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n    /**\n     * Fine-tune the badge position with custom offset.\n     * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    offset: string;\n\n    /**\n     * Text to be displayed inside the badge.\n     * Used when variant is set to 'text'.\n     * Can be overridden using the \"badge\" slot.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    text?: string;\n\n    private classes = tv({\n        base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n        variants: {\n            size: {\n                small: 'gap-1 px-1 text-size-3',\n                medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n                large: 'gap-2 py-1 px-2 text-size-5',\n            },\n            variant: {\n                dot: 'gap-0 p-0 text-[0px] leading-none',\n                text: '',\n            },\n            position: {\n                'top-right': '-top-1 -right-1',\n                'top-left': '-top-1 -left-1',\n                'bottom-right': '-bottom-1 -right-1',\n                'bottom-left': '-bottom-1 -left-1',\n            },\n            blink: {\n                true: 'after:content-[\"\"] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n            },\n        },\n        compoundVariants: [\n            {\n                variant: 'dot',\n                size: 'small',\n                class: 'size-1',\n            },\n            {\n                variant: 'dot',\n                size: 'medium',\n                class: 'size-1.5',\n            },\n            {\n                variant: 'dot',\n                size: 'large',\n                class: 'size-2',\n            },\n        ],\n        defaultVariants: {\n            variant: 'text',\n            size: 'medium',\n            position: 'top-right',\n            blink: false,\n        },\n    });\n\n    private get offsetStyle() {\n        if (!this.offset) return {};\n        const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n        return { transform: `translate(${x}px, ${y}px)` };\n    }\n\n    private get badgeStyle() {\n        if (!this.color) return {};\n        const variantType = this.soft ? 'soft' : 'vivid';\n\n        return {\n            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n        };\n    }\n\n    render() {\n        return (\n            <div class=\"relative inline-flex\">\n                <slot></slot>\n                <div\n                    role=\"status\"\n                    aria-live=\"polite\"\n                    aria-label={this.status ? `Status: ${this.status}` : undefined}\n                    class={this.classes({\n                        size: this.size,\n                        variant: this.variant,\n                        position: this.position,\n                        blink: this.blink,\n                    })}\n                    style={{\n                        ...this.badgeStyle,\n                        ...this.offsetStyle,\n                    }}\n                >\n                    {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/app-globals-bfa07b76.js

@@ -0,0 +1,37 @@
+function addHeadScript(obj) {
+    const head = document.head;
+    const script = document.createElement('script');
+    Object.keys(obj).forEach(key => {
+        script[key] = obj[key];
+    });
+    head.appendChild(script);
+}
+addHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });
+const FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';
+customElements.define('bcm-icon', class extends HTMLElement {
+    constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: 'open' });
+        shadow.innerHTML = `
+        <link rel="stylesheet" href="${FA_GLOBAL_CSS}"/>
+        <i></i>
+      `;
+    }
+    get icon() {
+        return this.getAttribute('name') || this.getAttribute('icon-name');
+    }
+    set icon(icon) {
+        this.shadowRoot.querySelector('i').className = `${icon}`;
+    }
+    connectedCallback() {
+        this.style.display = 'inline-block';
+        this.icon = this.icon;
+    }
+});
+const globalFn = () => { };
+
+const globalScripts = globalFn;
+
+export { globalScripts as g };
+
+//# sourceMappingURL=app-globals-bfa07b76.js.map

package/dist/esm/app-globals-bfa07b76.js.map

@@ -0,0 +1 @@
+{"file":"app-globals-bfa07b76.js","mappings":"AAAA,SAAS,aAAa,CAAC,GAAG,EAAE;AAC5B,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC;AAC1B,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;AAC1C,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG;AAChC,QAAQ,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAC1B;AACA,IAAI,IAAI,CAAC,WAAW,CAAC;AACrB;;AAEA,MAAM,aAAa,GAAG,qEAAqE,CAAC;;AAE5F,IAAI,WAAW,GAAG;;AAElB,QAAQ,MAAM,MAAM;AACpB,QAAQ;AACR;AACA;AACA,MAAM,CAAC,CAAC;AACR,KAAK;AACL,IAAI,IAAI,IAAI,GAAG;AACf,QAAQ,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;AACjD,KAAK;AACL,IAAI;AACJ;;AAEA,IAAI;AACJ,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;AAC5C;;AAEA,CAAC,CAAC,CAAC;AACI,MAAM,QAAQ,GAAG,MAAM,GAAG;;AC7BrB,MAAC,aAAa,GAAGA;;;;","names":["appGlobalScript"],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["function addHeadScript(obj) {\n  const head = document.head;\n  const script = document.createElement('script');\n  Object.keys(obj).forEach(key => {\n    script[key] = obj[key];\n  });\n  head.appendChild(script);\n}\n\naddHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });\n\nconst FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';\n\ncustomElements.define(\n  'bcm-icon',\n  class extends HTMLElement {\n    constructor() {\n      super();\n      const shadow = this.attachShadow({ mode: 'open' });\n      shadow.innerHTML = `\n        <link rel=\"stylesheet\" href=\"${FA_GLOBAL_CSS}\"/>\n        <i></i>\n      `;\n    }\n\n    get icon() {\n      return this.getAttribute('name') || this.getAttribute('icon-name');\n    }\n\n    set icon(icon) {\n      this.shadowRoot.querySelector('i').className = `${icon}`;\n    }\n\n    connectedCallback() {\n      this.style.display = 'inline-block';\n      this.icon = this.icon;\n    }\n  },\n);\n","import appGlobalScript from '/Users/muratpolatozkan/works/bromcom/bromcom-ui-next/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/esm/bcm-accordion-group.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e23ee9b0.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-27cc1bac.js';
 
-const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
+const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
 const BcmAccordionGroupStyle0 = accordionGroupCss;
 
 const BcmAccordionGroup = class {
@@ -77,7 +77,7 @@ const BcmAccordionGroup = class {
         });
     }
     render() {
-        return (h("div", { key: '0f246414941ec5215aa36b0a7c063e8782d0db2a', class: "flex flex-col bcm-ui-element w-full border border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]", role: "group", "aria-label": "Accordion group" }, h("slot", { key: 'b4ea13c00603855d4629fc9cfc0d85c64ef5bce7', onSlotchange: this.handleSlotChange })));
+        return (h("div", { key: '04ec31b987f1a191437682ce92bc794da6971128', class: "flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]", role: "group", "aria-label": "Accordion group" }, h("slot", { key: 'ba5809b40e06bd66bed5041b90a864bd2eeeae43', onSlotchange: this.handleSlotChange })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/bcm-accordion-group.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-accordion-group.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,s/BAAs/B,CAAC;AACjhC,gCAAe,iBAAiB;;MCmEnB,iBAAiB;IAL9B;;;;QAUY,UAAK,GAAY,KAAK,CAAC;;QAGtB,mBAAc,GAA8B,EAAE,CAAC;;;;QAoDhD,qBAAgB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;aAC/D;SACJ,CAAC;KAuCL;;;;;IApFG,MAAM,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC5D,OAAO;SACV;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;;;;IAMD,MAAM,WAAW;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;KACvE;;;;IAMD,MAAM,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAGO,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACrB,CAAC,CAAC;KACN;;;;IAkBD,qBAAqB,CAAC,KAA4C;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;gBAC5B,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACnB;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;aACtD,CAAC,CAAC;SACN;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;YACR,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;SACtC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACI,4DACI,KAAK,EAAC,6GAA6G,EACnH,IAAI,EAAC,OAAO,gBACD,iBAAiB,IAE5B,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,EACR;KACL;;;;;;;","names":[],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 1</div>\n*     <div>Content 1</div>\n*   </bcm-accordion>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 2</div>\n*     <div>Content 2</div>\n*   </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n*   <bcm-accordion>...</bcm-accordion>\n*   <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n*   const { expanded, changed, expandedItems, expandedCount } = event.detail;\n*   console.log('Accordion expanded state:', expanded);\n*   console.log('Changed accordion:', changed);\n*   console.log('Currently expanded accordions:', expandedItems);\n*   console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n    tag: 'bcm-accordion-group',\n    styleUrl: 'accordion-group.css',\n    shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() host: HTMLElement;\n\n    /** Controls whether multiple accordions can be expanded simultaneously */\n    @Prop() multi: boolean = false;\n\n    /** Array of accordion elements within the group */\n    @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n    /** Event emitted when any accordion's expanded state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n    /**\n     * Expands all accordions in the group\n     * Only available when multi=true\n     */\n    @Method()\n    async expandAll(): Promise<void> {\n        if (!this.multi) {\n            console.warn('expandAll is only available when multi=true');\n            return;\n        }\n        await Promise.all(this.accordionItems.map(item => item.expand()));\n    }\n\n    /**\n     * Collapses all accordions in the group\n     */\n    @Method()\n    async collapseAll(): Promise<void> {\n        await Promise.all(this.accordionItems.map(item => item.collapse()));\n    }\n\n    /**\n     * Returns an array of currently expanded accordion elements\n     */\n    @Method()\n    async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n        return this.accordionItems.filter(item => item.expanded);\n    }\n\n    componentWillLoad() {\n        this.handleSlotChange();\n    }\n\n\n    private setGroupBehavior(): void {\n        this.accordionItems.forEach(item => {\n            item.group = true;\n        });\n    }\n\n    /**\n     * Updates the accordion items array when slot content changes\n     */\n    private handleSlotChange = () => {\n        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n        this.setGroupBehavior();\n        // Validate accordion items\n        if (this.accordionItems.length === 0) {\n            console.warn('No accordion items found in accordion group');\n        }\n    };\n\n    /**\n     * Handles state changes of individual accordions\n     */\n    @Listen('bcmAccordionChange', { capture: true })\n    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n        this.handleSlotChange();\n        const { expanded, source } = event?.detail;\n\n        if (!this.multi) {\n            this.accordionItems.forEach(item => {\n                if (item !== source) {\n                    item.collapse();\n                }\n                item.expanded = item === source ? expanded : false;\n            });\n        }\n\n        const expandedItems = this.accordionItems.filter(item => item.expanded);\n        this.bcmAccordionGroupChange.emit({\n            expanded,\n            changed: source,\n            expandedItems,\n            expandedCount: expandedItems.length,\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"flex flex-col bcm-ui-element w-full border border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n                role=\"group\"\n                aria-label=\"Accordion group\"\n            >\n                <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n        );\n    }\n}"],"version":3}
+{"file":"bcm-accordion-group.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,uhCAAuhC,CAAC;AACljC,gCAAe,iBAAiB;;MCmEnB,iBAAiB;IAL9B;;;;QAUY,UAAK,GAAY,KAAK,CAAC;;QAGtB,mBAAc,GAA8B,EAAE,CAAC;;;;QAoDhD,qBAAgB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;aAC/D;SACJ,CAAC;KAuCL;;;;;IApFG,MAAM,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC5D,OAAO;SACV;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;;;;IAMD,MAAM,WAAW;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;KACvE;;;;IAMD,MAAM,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAGO,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACrB,CAAC,CAAC;KACN;;;;IAkBD,qBAAqB,CAAC,KAA4C;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;gBAC5B,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACnB;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;aACtD,CAAC,CAAC;SACN;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;YACR,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;SACtC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACI,4DACI,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,gBACD,iBAAiB,IAE5B,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,EACR;KACL;;;;;;;","names":[],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 1</div>\n*     <div>Content 1</div>\n*   </bcm-accordion>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 2</div>\n*     <div>Content 2</div>\n*   </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n*   <bcm-accordion>...</bcm-accordion>\n*   <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n*   const { expanded, changed, expandedItems, expandedCount } = event.detail;\n*   console.log('Accordion expanded state:', expanded);\n*   console.log('Changed accordion:', changed);\n*   console.log('Currently expanded accordions:', expandedItems);\n*   console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n    tag: 'bcm-accordion-group',\n    styleUrl: 'accordion-group.css',\n    shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() host: HTMLElement;\n\n    /** Controls whether multiple accordions can be expanded simultaneously */\n    @Prop() multi: boolean = false;\n\n    /** Array of accordion elements within the group */\n    @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n    /** Event emitted when any accordion's expanded state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n    /**\n     * Expands all accordions in the group\n     * Only available when multi=true\n     */\n    @Method()\n    async expandAll(): Promise<void> {\n        if (!this.multi) {\n            console.warn('expandAll is only available when multi=true');\n            return;\n        }\n        await Promise.all(this.accordionItems.map(item => item.expand()));\n    }\n\n    /**\n     * Collapses all accordions in the group\n     */\n    @Method()\n    async collapseAll(): Promise<void> {\n        await Promise.all(this.accordionItems.map(item => item.collapse()));\n    }\n\n    /**\n     * Returns an array of currently expanded accordion elements\n     */\n    @Method()\n    async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n        return this.accordionItems.filter(item => item.expanded);\n    }\n\n    componentWillLoad() {\n        this.handleSlotChange();\n    }\n\n\n    private setGroupBehavior(): void {\n        this.accordionItems.forEach(item => {\n            item.group = true;\n        });\n    }\n\n    /**\n     * Updates the accordion items array when slot content changes\n     */\n    private handleSlotChange = () => {\n        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n        this.setGroupBehavior();\n        // Validate accordion items\n        if (this.accordionItems.length === 0) {\n            console.warn('No accordion items found in accordion group');\n        }\n    };\n\n    /**\n     * Handles state changes of individual accordions\n     */\n    @Listen('bcmAccordionChange', { capture: true })\n    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n        this.handleSlotChange();\n        const { expanded, source } = event?.detail;\n\n        if (!this.multi) {\n            this.accordionItems.forEach(item => {\n                if (item !== source) {\n                    item.collapse();\n                }\n                item.expanded = item === source ? expanded : false;\n            });\n        }\n\n        const expandedItems = this.accordionItems.filter(item => item.expanded);\n        this.bcmAccordionGroupChange.emit({\n            expanded,\n            changed: source,\n            expandedItems,\n            expandedCount: expandedItems.length,\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n                role=\"group\"\n                aria-label=\"Accordion group\"\n            >\n                <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n        );\n    }\n}"],"version":3}

package/dist/esm/bcm-accordion.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e23ee9b0.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-27cc1bac.js';
 import { c as ce } from './index-f3b17e60.js';
 
-const accordionCss = ".block{display:block}.flex{display:flex}.border{border-width:1px}:host{--bcm-accordion-bg:var(--bcm-ui-color-background-basic-panel);--bcm-accordion-content-bg:var(--bcm-ui-color-background-basic-base);--bcm-accordion-text:var(--bcm-ui-color-text-header);--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;--bcm-accordion-footer-bg:var(--bcm-ui-color-background-default-default);display:block;width:100%}:host(:not([group])) .accordion-container{border:1px solid var(--bcm-accordion-border);border-radius:var(--bcm-accordion-radius)}:host([group]) .accordion-container{border-bottom:1px solid var(--bcm-accordion-border);border-radius:0}:host([group]:last-of-type) .accordion-container{border-bottom:none}:host([group]:first-of-type) .accordion-container{border-top-left-radius:var(--bcm-accordion-radius);border-top-right-radius:var(--bcm-accordion-radius)}:host([group]:last-of-type) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}:host(:not([group])) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}::slotted([slot=title]){align-items:center;display:flex;flex-direction:row;gap:10px}::slotted([slot=actions]){align-items:center;display:flex;flex-direction:row;gap:12px}.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}.collapse{visibility:collapse}.static{position:static}.hidden{display:none}.w-full{width:100%}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{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))}.rotate-180{--tw-rotate:180deg}.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))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.overflow-hidden{overflow:hidden}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.bg-\\[--bcm-accordion-bg\\]{background-color:var(--bcm-accordion-bg)}.bg-\\[--bcm-accordion-footer-bg\\]{background-color:var(--bcm-accordion-footer-bg)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\\[--bcm-accordion-text\\]{color:var(--bcm-accordion-text)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;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)}";
+const accordionCss = ".block{display:block}.flex{display:flex}.border{border-width:1px}:host{--bcm-accordion-bg:var(--bcm-ui-color-background-basic-panel);--bcm-accordion-content-bg:var(--bcm-ui-color-background-basic-base);--bcm-accordion-text:var(--bcm-ui-color-text-header);--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;--bcm-accordion-footer-bg:var(--bcm-ui-color-background-default-default);display:block;width:100%}:host(:not([group])) .accordion-container{border:1px solid var(--bcm-accordion-border);border-radius:var(--bcm-accordion-radius)}:host([group]) .accordion-container{border-bottom:1px solid var(--bcm-accordion-border);border-radius:0}:host([group]:last-of-type) .accordion-container{border-bottom:none}:host([group]:first-of-type) .accordion-container{border-top-left-radius:var(--bcm-accordion-radius);border-top-right-radius:var(--bcm-accordion-radius)}:host([group]:last-of-type) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}:host(:not([group])) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}::slotted([slot=title]){align-items:center;display:flex;flex-direction:row;gap:10px}::slotted([slot=actions]){align-items:center;display:flex;flex-direction:row;gap:12px}.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}.collapse{visibility:collapse}.static{position:static}.hidden{display:none}.w-full{width:100%}.min-w-max{min-width:max-content}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{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))}.rotate-180{--tw-rotate:180deg}.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))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.overflow-hidden{overflow:hidden}.text-wrap{text-wrap:wrap}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.bg-\\[--bcm-accordion-bg\\]{background-color:var(--bcm-accordion-bg)}.bg-\\[--bcm-accordion-footer-bg\\]{background-color:var(--bcm-accordion-footer-bg)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\\[--bcm-accordion-text\\]{color:var(--bcm-accordion-text)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;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)}";
 const BcmAccordionStyle0 = accordionCss;
 
 const BcmAccordion = class {
@@ -38,10 +38,10 @@ const BcmAccordion = class {
         };
         this.accordionClass = ce({
             slots: {
-                container: 'accordion-container flex flex-col bcm-ui-element w-full ',
-                header: 'accordion-header flex flex-row justify-between gap-2 p-4 w-full flex-nowrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',
+                container: 'accordion-container flex flex-col bcm-ui-element w-full',
+                header: 'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',
                 content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',
-                footer: 'accordion-footer flex flex-row w-full flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal',
+                footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',
                 icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',
                 rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',
             },
@@ -108,12 +108,12 @@ const BcmAccordion = class {
             hasFooterContent: this.hasFooterContent || !!this.hintText,
             expanded: this.expanded,
         });
-        return (h("div", { key: '922ea5d855cd5f258b818f88eb84816f70f86c7b', class: container() }, h("header", { key: 'fba4262f2f89b844ddad4281adb5afe1c1259098', class: header(), role: "button", tabindex: "0", "aria-expanded": this.expanded.toString(), "aria-controls": "accordion-content", onKeyDown: e => {
+        return (h("div", { key: '5db020dbcdd3eea89865e0da775aecc79d6e8e52', class: container() }, h("header", { key: 'e9a792911fea8dc6bd1f832a3f4ed9210bd5f1bf', class: header(), role: "button", tabindex: "0", "aria-expanded": this.expanded.toString(), "aria-controls": "accordion-content", onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.toggle();
                 }
-            }, onClick: () => this.toggle() }, h("slot", { key: '6fcc3e3a53a72d5c75cea2fba06492d8f37a0acb', name: "title" }, this.headerTitle), h("div", { key: '8081368dfd97ee1dea78e5321afce756d0ea50b8', class: rightSection() }, h("span", { key: 'e0812c8a241eb68013235903361fb686569404f6', onClick: e => e.stopPropagation() }, h("slot", { key: '1297931978197bde53b3440f21b44390f6c1ea9f', name: "actions" })), h("bcm-icon", { key: '68c98f6de7971a133353fc0d2e32cff6ab7fbf21', name: "fa-regular fa-chevron-down", class: icon() }))), h("div", { key: 'a4b4af57da514152f5f70629d4eb1da6e03e7d0e', class: content(), style: { maxHeight: this.expanded ? 'auto' : '0px' }, ref: el => (this.contentEl = el) }, h("div", { key: '95ccdde513bfe397fb877b86f53d27c1746c1aba', class: "px-4 py-2" }, h("slot", { key: '30ed3ced7b157bb46b8aaae37811f3decbc878cf' })), h("footer", { key: '1a9fe8f54b1969518bb9096ee7366188bbde05e0', class: footer() }, h("slot", { key: 'cf95b6191c48ec329098e4de21ae16c1fcb048ba', name: "footer", onSlotchange: this.handleFooterSlotChange }, this.hintText)))));
+            }, onClick: () => this.toggle() }, h("slot", { key: '2662c77cd56d3708e60bf09e085710587d9e2b37', name: "title" }, this.headerTitle), h("div", { key: 'af9c679afb9688bbf0634b3057888fdf49a2bdc3', class: rightSection() }, h("span", { key: 'c06ea66737e34ffa1f79e2fa36618eb90c5dd801', onClick: e => e.stopPropagation() }, h("slot", { key: '8668f76dbf3967518332a188a5fef5e9bc160a0e', name: "actions" })), h("bcm-icon", { key: '870460d228f6ae0ff9de5b36dab05e0587124cc4', name: "fa-regular fa-chevron-down", class: icon() }))), h("div", { key: '814408b9602a7045addd1040271328d372ce23ba', class: content(), style: { maxHeight: this.expanded ? 'auto' : '0px' }, ref: el => (this.contentEl = el) }, h("div", { key: 'be99ad1f7b4864c7cfe9b87044197c21770b84f2', class: "px-4 py-2" }, h("slot", { key: '49e0af56da6775b74f3915dd696270bcc077e171' })), h("footer", { key: '6339e900da8224563d94a787cffe253703874568', class: footer() }, h("slot", { key: '19027ba2389ff5677b1610b4430ab671bda2f95e', name: "footer", onSlotchange: this.handleFooterSlotChange }, this.hintText)))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/bcm-accordion.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-accordion.entry.js","mappings":"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","names":["tv"],"sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n  --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n  --bcm-accordion-text: var(--bcm-ui-color-text-header);\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n  --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n  border: 1px solid var(--bcm-accordion-border);\n  border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n  border-bottom: 1px solid var(--bcm-accordion-border);\n  border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n  border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n  border-top-left-radius: var(--bcm-accordion-radius);\n  border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n}\n::slotted([slot='actions']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n *   <div slot=\"title\">Accordion Title</div>\n *   <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n *   <div slot=\"title\">Title</div>\n *   <div slot=\"actions\">\n *     <button>Action</button>\n *   </div>\n *   <div>Main content</div>\n *   <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n *   const { expanded, source } = event.detail;\n *   console.log('Accordion expanded:', expanded);\n *   console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n  tag: 'bcm-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() host: HTMLElement;\n\n  /**\n   * Controls whether the accordion is expanded or collapsed.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true, mutable: true })\n  expanded: boolean = false;\n\n  /**\n   * Optional title text to display in the header.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  headerTitle?: string;\n\n  /**\n   * Indicates if the accordion is part of a group.\n   * Used for group behavior coordination.\n   * @prop\n   * @defaultValue false\n   */\n\n  @Prop({ reflect: true })\n  group: boolean = false;\n\n  /**\n   * Optional text to display in the footer when no footer slot content is provided.\n   * @prop\n   */\n  @Prop({ attribute: 'hint-text' })\n  hintText?: string;\n\n  /**\n   * Tracks whether footer content is present.\n   * @state\n   */\n  @State()\n  hasFooterContent: boolean = false;\n\n  /**\n   * Emitted when the accordion's expanded state changes.\n   * @event\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmAccordionChange',\n  })\n  bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n  private contentEl?: HTMLElement;\n\n  /**\n   * Toggles the accordion's expanded state.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.expanded = !this.expanded;\n    this.updateAccordion();\n  }\n\n  /**\n   * Expands the accordion if it's not already expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async expand(): Promise<void> {\n    if (!this.expanded) {\n      this.expanded = true;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Collapses the accordion if it's currently expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async collapse(): Promise<void> {\n    if (this.expanded) {\n      this.expanded = false;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Updates the accordion's content height and emits change event.\n   * @private\n   */\n  private updateAccordion(): void {\n    if (this.contentEl) {\n      this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n    }\n    this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as HTMLBcmAccordionElement });\n  }\n\n  /**\n   * Handles changes to the footer slot content.\n   * @private\n   * @param e - Slot change event\n   */\n  private handleFooterSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const assignedNodes = slot.assignedNodes();\n    this.hasFooterContent = assignedNodes.length > 0;\n  };\n\n  private accordionClass = tv(\n    {\n      slots: {\n        container: 'accordion-container flex flex-col bcm-ui-element w-full ',\n        header:\n          'accordion-header flex flex-row justify-between gap-2 p-4 w-full flex-nowrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n        content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n        footer: 'accordion-footer flex flex-row w-full flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal',\n        icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n        rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n      },\n      variants: {\n        hasFooterContent: {\n          false: { footer: 'hidden' },\n          true: { footer: 'flex' },\n        },\n        expanded: {\n          true: { icon: 'rotate-180' },\n          false: {\n            icon: 'rotate-0',\n            content: '',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n      hasFooterContent: this.hasFooterContent || !!this.hintText,\n      expanded: this.expanded,\n    });\n\n    return (\n      <div class={container()}>\n        {/* Header */}\n        <header\n          class={header()}\n          role=\"button\"\n          tabindex=\"0\"\n          aria-expanded={this.expanded.toString()}\n          aria-controls=\"accordion-content\"\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              this.toggle();\n            }\n          }}\n          onClick={() => this.toggle()}\n        >\n          <slot name=\"title\">{this.headerTitle}</slot>\n          {/* Actions */}\n          <div class={rightSection()}>\n            <span onClick={e => e.stopPropagation()}>\n              <slot name=\"actions\"></slot>\n            </span>\n            <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n          </div>\n        </header>\n        {/* Content */}\n        <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n          <div class=\"px-4 py-2\">\n            <slot></slot>\n          </div>\n          <footer class={footer()}>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n              {this.hintText}\n            </slot>\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-accordion.entry.js","mappings":"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","names":["tv"],"sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n  --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n  --bcm-accordion-text: var(--bcm-ui-color-text-header);\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n  --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n  border: 1px solid var(--bcm-accordion-border);\n  border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n  border-bottom: 1px solid var(--bcm-accordion-border);\n  border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n  border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n  border-top-left-radius: var(--bcm-accordion-radius);\n  border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n}\n::slotted([slot='actions']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n *   <div slot=\"title\">Accordion Title</div>\n *   <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n *   <div slot=\"title\">Title</div>\n *   <div slot=\"actions\">\n *     <button>Action</button>\n *   </div>\n *   <div>Main content</div>\n *   <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n *   const { expanded, source } = event.detail;\n *   console.log('Accordion expanded:', expanded);\n *   console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n  tag: 'bcm-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() host: HTMLElement;\n\n  /**\n   * Controls whether the accordion is expanded or collapsed.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true, mutable: true })\n  expanded: boolean = false;\n\n  /**\n   * Optional title text to display in the header.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  headerTitle?: string;\n\n  /**\n   * Indicates if the accordion is part of a group.\n   * Used for group behavior coordination.\n   * @prop\n   * @defaultValue false\n   */\n\n  @Prop({ reflect: true })\n  group: boolean = false;\n\n  /**\n   * Optional text to display in the footer when no footer slot content is provided.\n   * @prop\n   */\n  @Prop({ attribute: 'hint-text' })\n  hintText?: string;\n\n  /**\n   * Tracks whether footer content is present.\n   * @state\n   */\n  @State()\n  hasFooterContent: boolean = false;\n\n  /**\n   * Emitted when the accordion's expanded state changes.\n   * @event\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmAccordionChange',\n  })\n  bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n  private contentEl?: HTMLElement;\n\n  /**\n   * Toggles the accordion's expanded state.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.expanded = !this.expanded;\n    this.updateAccordion();\n  }\n\n  /**\n   * Expands the accordion if it's not already expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async expand(): Promise<void> {\n    if (!this.expanded) {\n      this.expanded = true;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Collapses the accordion if it's currently expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async collapse(): Promise<void> {\n    if (this.expanded) {\n      this.expanded = false;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Updates the accordion's content height and emits change event.\n   * @private\n   */\n  private updateAccordion(): void {\n    if (this.contentEl) {\n      this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n    }\n    this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as HTMLBcmAccordionElement });\n  }\n\n  /**\n   * Handles changes to the footer slot content.\n   * @private\n   * @param e - Slot change event\n   */\n  private handleFooterSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const assignedNodes = slot.assignedNodes();\n    this.hasFooterContent = assignedNodes.length > 0;\n  };\n\n  private accordionClass = tv(\n    {\n      slots: {\n        container: 'accordion-container flex flex-col bcm-ui-element w-full',\n        header:\n          'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n        content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n        footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n        icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n        rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n      },\n      variants: {\n        hasFooterContent: {\n          false: { footer: 'hidden' },\n          true: { footer: 'flex' },\n        },\n        expanded: {\n          true: { icon: 'rotate-180' },\n          false: {\n            icon: 'rotate-0',\n            content: '',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n      hasFooterContent: this.hasFooterContent || !!this.hintText,\n      expanded: this.expanded,\n    });\n\n    return (\n      <div class={container()}>\n        {/* Header */}\n        <header\n          class={header()}\n          role=\"button\"\n          tabindex=\"0\"\n          aria-expanded={this.expanded.toString()}\n          aria-controls=\"accordion-content\"\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              this.toggle();\n            }\n          }}\n          onClick={() => this.toggle()}\n        >\n          <slot name=\"title\">{this.headerTitle}</slot>\n          {/* Actions */}\n          <div class={rightSection()}>\n            <span onClick={e => e.stopPropagation()}>\n              <slot name=\"actions\"></slot>\n            </span>\n            <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n          </div>\n        </header>\n        {/* Content */}\n        <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n          <div class=\"px-4 py-2\">\n            <slot></slot>\n          </div>\n          <footer class={footer()}>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n              {this.hintText}\n            </slot>\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/bcm-alert.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-e23ee9b0.js';
+import { r as registerInstance, c as createEvent, h } from './index-27cc1bac.js';
 import { c as ce } from './index-f3b17e60.js';
 
 const alertCss = ":host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:inline-block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-\\[--bcm-alert-radius\\]{border-radius:var(--bcm-alert-radius)}.bg-\\[--bcm-alert-bg\\]{background-color:var(--bcm-alert-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.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)}.font-medium{font-weight:500}.text-\\[--bcm-alert-text\\]{color:var(--bcm-alert-text)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";