bromcom-ui-next 0.1.0

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-638f2d15.js');
+const appGlobals = require('./app-globals-e8faea0d.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["bcm-accordion_4.cjs",[[1,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}],[1,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]],[1,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"],"fullWidth":[516,"full-width"],"type":[1],"loading":[4],"disabled":[4],"text":[1],"active":[4],"form":[1],"value":[1],"name":[1],"label":[1],"expanded":[1],"controls":[1]}],[1,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-alert.cjs",[[1,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-avatar.cjs",[[1,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}]]],["bcm-text.cjs",[[1,"bcm-text",{"text":[1],"variant":[1],"size":[1]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;
+
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"file":"loader.cjs.js","mappings":";;;;;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS,CAAC;AACtD,EAAE,MAAMA,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D;;;;;","names":["globalScripts","bootstrapLazy"],"sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,18 @@
+{
+  "entries": [
+    "components/accordion/accordion.component.js",
+    "components/accordion-group/accordion-group.component.js",
+    "components/alert/alert.component.js",
+    "components/avatar/avatar.component.js",
+    "components/button/button.component.js",
+    "components/chip/chip.component.js",
+    "components/text/text.component.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.25.1",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/accordion/accordion.component.js

@@ -0,0 +1,399 @@
+import { h } from "@stencil/core";
+import { tv } from "tailwind-variants";
+/**
+ * @component BcmAccordion
+ * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation
+ * and accessibility features. Offers customizable header, content, and footer areas through slots.
+ *
+ * @example Basic usage
+ * <bcm-accordion>
+ *   <div slot="title">Accordion Title</div>
+ *   <div>Content goes here</div>
+ * </bcm-accordion>
+ *
+ * @example With all slots and hint text
+ * <bcm-accordion hint-text="Additional information">
+ *   <div slot="title">Title</div>
+ *   <div slot="actions">
+ *     <button>Action</button>
+ *   </div>
+ *   <div>Main content</div>
+ *   <div slot="footer">Footer content</div>
+ * </bcm-accordion>
+ *
+ * @example Event handling
+ * // Listen to accordion state changes
+ * const accordion = document.querySelector('bcm-accordion');
+ * accordion.addEventListener('bcmAccordionChange', (event) => {
+ *   const { expanded, source } = event.detail;
+ *   console.log('Accordion expanded:', expanded);
+ *   console.log('Changed accordion:', source);
+ * });
+ *
+ * // Programmatically control accordion
+ * await accordion.toggle(); // Toggle state
+ * await accordion.expand(); // Expand accordion
+ * await accordion.collapse(); // Collapse accordion
+ *
+ * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)
+ * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)
+ * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided
+ *
+ * @slot title - Primary title content for the accordion header (required)
+ * @slot actions - Additional actions to be displayed in the header (optional)
+ * @slot default - Main content area of the accordion
+ * @slot footer - Optional footer content (overrides hint-text if provided)
+ *
+ * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes
+ * @eventProperty {boolean} expanded - Current expanded state
+ * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed
+ *
+ * @csspart container - The root container element
+ * @csspart header - The header section with title and actions
+ * @csspart content - The collapsible content section
+ * @csspart footer - The footer section with hint text or footer slot
+ * @csspart section - Container for header content sections
+ * @csspart icon - The expand/collapse chevron icon
+ *
+ * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)
+ * @css {string} --bcm-accordion-bg - Background color of the accordion header
+ * @css {string} --bcm-accordion-text - Text color of the accordion
+ * @css {string} --bcm-accordion-footer-bg - Background color of the footer section
+ *
+ * @methods
+ * toggle() - Toggles the accordion's expanded state
+ * expand() - Expands the accordion if collapsed
+ * collapse() - Collapses the accordion if expanded
+ */
+export class BcmAccordion {
+    constructor() {
+        /**
+         * Controls whether the accordion is expanded or collapsed.
+         * @prop
+         * @defaultValue false
+         */
+        this.expanded = false;
+        /**
+         * Indicates if the accordion is part of a group.
+         * Used for group behavior coordination.
+         * @prop
+         * @defaultValue false
+         */
+        this.group = false;
+        /**
+         * Tracks whether footer content is present.
+         * @state
+         */
+        this.hasFooterContent = false;
+        /**
+         * Handles changes to the footer slot content.
+         * @private
+         * @param e - Slot change event
+         */
+        this.handleFooterSlotChange = (e) => {
+            const slot = e.target;
+            const assignedNodes = slot.assignedNodes();
+            this.hasFooterContent = assignedNodes.length > 0;
+        };
+        this.accordionClass = tv({
+            slots: {
+                container: 'accordion-container flex flex-col bcm-ui-element w-full cursor-pointer',
+                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',
+                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',
+                icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',
+                rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',
+            },
+            variants: {
+                hasFooterContent: {
+                    false: { footer: 'hidden' },
+                    true: { footer: 'flex' },
+                },
+                expanded: {
+                    true: { icon: 'rotate-180' },
+                    false: {
+                        icon: 'rotate-0',
+                        content: '',
+                    },
+                },
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    /**
+     * Toggles the accordion's expanded state.
+     * @method
+     * @returns Promise<void>
+     */
+    async toggle() {
+        this.expanded = !this.expanded;
+        this.updateAccordion();
+    }
+    /**
+     * Expands the accordion if it's not already expanded.
+     * @method
+     * @returns Promise<void>
+     */
+    async expand() {
+        if (!this.expanded) {
+            this.expanded = true;
+            this.updateAccordion();
+        }
+    }
+    /**
+     * Collapses the accordion if it's currently expanded.
+     * @method
+     * @returns Promise<void>
+     */
+    async collapse() {
+        if (this.expanded) {
+            this.expanded = false;
+            this.updateAccordion();
+        }
+    }
+    /**
+     * Updates the accordion's content height and emits change event.
+     * @private
+     */
+    updateAccordion() {
+        if (this.contentEl) {
+            this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';
+        }
+        this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host });
+    }
+    render() {
+        const { container, header, content, footer, icon, rightSection } = this.accordionClass({
+            hasFooterContent: this.hasFooterContent || !!this.hintText,
+            expanded: this.expanded,
+        });
+        return (h("div", { key: 'baabe245a91069be586c8cd7ae7c680044721f30', class: container() }, h("header", { key: 'ea2bbd19cbda4f37546229af19ff4fe466b01c89', 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: '6c9da162b412373185a516fb7cf06a7fb6455da6', name: "title" }, this.headerTitle), h("div", { key: '8116d820b3d9f3e373ed6ba07a588fa70db138ec', class: rightSection() }, h("slot", { key: 'b0b265147afd2514f4468e2c5940c008c2dbb37b', name: "actions" }), h("bcm-icon", { key: '6ef20624568ddd875adaa27d970a264548604b23', name: "fa-regular fa-chevron-down", class: icon() }))), h("div", { key: 'bf4f4756850428828360881cf191decf50986577', class: content(), style: { maxHeight: this.expanded ? 'auto' : '0px' }, ref: el => (this.contentEl = el) }, h("div", { key: 'e048a317ff8c4cadb48a1d34b188f272e516fabb', class: "px-4 py-2" }, h("slot", { key: 'ae33481fe6fc4e739e8faf7764498f81033cd398' })), h("footer", { key: 'd5a79e93058d1382c7ac31db5216563ad526d89b', class: footer() }, h("slot", { key: '987bbb480b47d7ef973127c64a592bfda7ca51e2', name: "footer", onSlotchange: this.handleFooterSlotChange }, this.hintText)))));
+    }
+    static get is() { return "bcm-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Controls whether the accordion is expanded or collapsed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expanded",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "headerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "Optional title text to display in the header."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "header-title",
+                "reflect": false
+            },
+            "group": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates if the accordion is part of a group.\nUsed for group behavior coordination."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "group",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hintText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }],
+                    "text": "Optional text to display in the footer when no footer slot content is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hint-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooterContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmAccordionChange",
+                "name": "bcmAccordionChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the accordion's expanded state changes."
+                },
+                "complexType": {
+                    "original": "AccordionChangeEventType",
+                    "resolved": "BaseAccordionChangeEventType & { source: HTMLBcmAccordionElement; }",
+                    "references": {
+                        "AccordionChangeEventType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionChangeEventType"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the accordion's expanded state.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            },
+            "expand": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Expands the accordion if it's not already expanded.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            },
+            "collapse": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Collapses the accordion if it's currently expanded.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=accordion.component.js.map

package/dist/collection/components/accordion/accordion.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.component.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACpH,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAGvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AAMH,MAAM,OAAO,YAAY;IALzB;QASE;;;;WAIG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAU1B;;;;;WAKG;QAGH,UAAK,GAAY,KAAK,CAAC;QASvB;;;WAGG;QAEH,qBAAgB,GAAY,KAAK,CAAC;QAgElC;;;;WAIG;QACK,2BAAsB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC5C,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAC3C,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;QACnD,CAAC,CAAC;QAEM,mBAAc,GAAG,EAAE,CACzB;YACE,KAAK,EAAE;gBACL,SAAS,EAAE,wEAAwE;gBACnF,MAAM,EACJ,4LAA4L;gBAC9L,OAAO,EAAE,+FAA+F;gBACxG,MAAM,EAAE,sJAAsJ;gBAC9J,IAAI,EAAE,2EAA2E;gBACjF,YAAY,EAAE,4DAA4D;aAC3E;YACD,QAAQ,EAAE;gBACR,gBAAgB,EAAE;oBAChB,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;oBAC3B,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;iBACzB;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;oBAC5B,KAAK,EAAE;wBACL,IAAI,EAAE,UAAU;wBAChB,OAAO,EAAE,EAAE;qBACZ;iBACF;aACF;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KA8CH;IArIC;;;;OAIG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,QAAQ;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9F,CAAC;QACD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,IAA+B,EAAE,CAAC,CAAC;IAC1G,CAAC;IA2CD,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC;YACrF,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;YAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,OAAO,CACL,4DAAK,KAAK,EAAE,SAAS,EAAE;YAErB,+DACE,KAAK,EAAE,MAAM,EAAE,EACf,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,mBACG,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,mBACzB,mBAAmB,EACjC,SAAS,EAAE,CAAC,CAAC,EAAE;oBACb,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;wBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;gBAE5B,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,CAAQ;gBAE5C,4DAAK,KAAK,EAAE,YAAY,EAAE;oBACxB,6DAAM,IAAI,EAAC,SAAS,GAAQ;oBAC5B,iEAAU,IAAI,EAAC,4BAA4B,EAAC,KAAK,EAAE,IAAI,EAAE,GAAa,CAClE,CACC;YAET,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC;gBAC1H,4DAAK,KAAK,EAAC,WAAW;oBACpB,8DAAa,CACT;gBACN,+DAAQ,KAAK,EAAE,MAAM,EAAE;oBACrB,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,IAC1D,IAAI,CAAC,QAAQ,CACT,CACA,CACL,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 cursor-pointer',\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',\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            <slot name=\"actions\"></slot>\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"]}

package/dist/collection/components/accordion/accordion.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.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:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.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)}

package/dist/collection/components/accordion/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/accordion/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/accordion/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Base type for accordion-related change events\n * @description Contains the common expanded state property\n */\nexport type BaseAccordionChangeEventType = {\n  /** Current expanded state */\n  expanded: boolean;\n};\n\n/**\n * Type for individual accordion change events\n * @extends BaseAccordionChangeEventType\n */\nexport type AccordionChangeEventType = BaseAccordionChangeEventType & {\n  /** The accordion element that triggered the change */\n  source: HTMLBcmAccordionElement;\n};\n"]}