@nova-design-system/nova-webcomponents 3.5.0 → 3.6.0

package/dist/cjs/timeline.animation-155e8839.js

@@ -0,0 +1,25 @@
+'use strict';
+
+/**
+ * Will execute a series of animation promises in sequence.
+ * This is useful for chaining animations where each step depends on the
+ * previous one completing before starting the next.
+ *
+ * @param {Array<() => Promise<void>>} animations - The array of animation functions.
+ * @returns {Object} - An object with a `start` method to begin the timeline.
+ *
+ * @example
+ * const { fadeOut } = useFade(this.ref);
+ * const { collapse } = useCollapse(this.ref);
+ *
+ * timeline(fadeOut, collapse).start();
+ */
+const timeline = (...animations) => ({
+    start: () => {
+        return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
+    },
+});
+
+exports.timeline = timeline;
+
+//# sourceMappingURL=timeline.animation-155e8839.js.map

package/dist/cjs/timeline.animation-155e8839.js.map

@@ -0,0 +1 @@
+{"file":"timeline.animation-155e8839.js","mappings":";;AAAA;;;;;;;;;;;;;;MAcM,QAAQ,GAAG,CAAC,GAAG,UAAsC,MAAM;IAC/D,KAAK,EAAE;QACL,OAAO,UAAU,CAAC,MAAM,CACtB,CAAC,OAAO,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,MAAM,SAAS,EAAE,CAAC,EACvD,OAAO,CAAC,OAAO,EAAE,CAClB,CAAC;KACH;CACF;;;;","names":[],"sources":["src/animations/timeline.animation.ts"],"sourcesContent":["/**\n * Will execute a series of animation promises in sequence.\n * This is useful for chaining animations where each step depends on the\n * previous one completing before starting the next.\n *\n * @param {Array<() => Promise<void>>} animations - The array of animation functions.\n * @returns {Object} - An object with a `start` method to begin the timeline.\n *\n * @example\n * const { fadeOut } = useFade(this.ref);\n * const { collapse } = useCollapse(this.ref);\n *\n * timeline(fadeOut, collapse).start();\n */\nconst timeline = (...animations: Array<() => Promise<void>>) => ({\n  start: () => {\n    return animations.reduce(\n      (promise, animation) => promise.then(() => animation()),\n      Promise.resolve(),\n    );\n  },\n});\n\nexport { timeline };\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -1,5 +1,7 @@
 {
   "entries": [
+    "components/nv-accordion/nv-accordion.js",
+    "components/nv-accordion-item/nv-accordion-item.js",
     "components/nv-alert/nv-alert.js",
     "components/nv-avatar/nv-avatar.js",
     "components/nv-badge/nv-badge.js",

package/dist/collection/components/nv-accordion/nv-accordion.docs.js

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+const NvAccordionDocs = {
+    component: 'nv-accordion',
+    subcomponents: ['nv-accordion-item', 'nv-icon', 'nv-button', 'nv-badge'],
+    badge: 'beta',
+    stories: [
+        {
+            name: 'Default',
+            description: 'Accordion with simple items',
+            args: {
+                mode: 'accordion',
+                data: JSON.stringify([
+                    {
+                        id: '1',
+                        title: 'Title 1',
+                        content: 'Content of title 1',
+                    },
+                    {
+                        id: '2',
+                        title: 'Title 2',
+                        content: 'Content of title 2',
+                    },
+                ]),
+            },
+            template: h("nv-accordion", { "data-storybook-args": true }),
+        },
+        {
+            name: 'MultiMode',
+            description: 'Accordion allowing multiple items to be open',
+            args: {
+                mode: 'multi',
+                data: JSON.stringify([
+                    {
+                        id: '1',
+                        title: 'Title 1',
+                        content: 'Content of title 1',
+                    },
+                    {
+                        id: '2',
+                        title: 'Title 2',
+                        content: 'Content of title 2',
+                    },
+                ]),
+            },
+            template: h("nv-accordion", { "data-storybook-args": true }),
+        },
+        {
+            name: 'CustomHeader',
+            description: 'Real-world example with TraXes Connection Points',
+            template: (h("nv-accordion", { mode: "accordion", openIndexes: [0, 2] }, h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { class: "flex items-center justify-between w-full" }, h("div", { class: "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { class: "nv-accordion-item__title" }, "EC-308"), h("span", { class: "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "success", label: "Running" }, h("nv-icon", { slot: "leading-icon", name: "check", size: "sm" })))), h("div", { slot: "content", class: "flex items-center justify-between" }, h("div", null, h("p", null, "Single accordion or accordion group"), h("p", null, "Use the accordion as a single instance, or in a group of accordions stacked vertically."), h("p", null, "The accordion title is wrapped in a heading tag by default. Alter it to fit the information architecture of the page.")))), h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { class: "flex items-center justify-between w-full" }, h("div", { class: "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { class: "nv-accordion-item__title" }, "EC-309"), h("span", { class: "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "success", label: "Running" }, h("nv-icon", { slot: "leading-icon", name: "check", size: "sm" })))), h("div", { slot: "content" }, h("p", null, "Content for EC-309 connection point"))), h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { class: "flex items-center justify-between w-full" }, h("div", { class: "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { class: "nv-accordion-item__title" }, "EC-310"), h("span", { class: "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "error", label: "Stopped" }, h("nv-icon", { slot: "leading-icon", name: "x", size: "sm" })))), h("div", { slot: "content" }, h("p", null, "Content for EC-310 connection point (stopped)"))))),
+        },
+        {
+            name: 'DisabledItem',
+            description: 'Accordion with a disabled item',
+            template: (h("nv-accordion", { mode: "accordion" }, h("nv-accordion-item", { itemtitle: "Active item", open: true }, h("div", { slot: "content" }, "This item is accessible")), h("nv-accordion-item", { itemtitle: "Disabled item", disabled: true }, h("div", { slot: "content" }, "This item is not accessible because it is disabled")))),
+        },
+        {
+            name: 'OpenIndexesDemo',
+            description: 'Demonstration of openIndexes with multiple items and first item pre-opened',
+            args: {
+                mode: 'accordion',
+                data: JSON.stringify([
+                    {
+                        id: '1',
+                        title: 'Item 1 - Pre-opened',
+                        content: 'This is the first item that is opened by default using openIndexes.',
+                    },
+                    {
+                        id: '2',
+                        title: 'Item 2',
+                        content: 'Content of the second item.',
+                    },
+                    {
+                        id: '3',
+                        title: 'Item 3',
+                        content: 'Content of the third item.',
+                    },
+                    {
+                        id: '4',
+                        title: 'Item 4',
+                        content: 'Content of the fourth item.',
+                    },
+                    {
+                        id: '5',
+                        title: 'Item 5',
+                        content: 'Content of the fifth item.',
+                    },
+                    {
+                        id: '6',
+                        title: 'Item 6',
+                        content: 'Content of the sixth item.',
+                    },
+                    {
+                        id: '7',
+                        title: 'Item 7',
+                        content: 'Content of the seventh item.',
+                    },
+                    {
+                        id: '8',
+                        title: 'Item 8',
+                        content: 'Content of the eighth item.',
+                    },
+                    {
+                        id: '9',
+                        title: 'Item 9',
+                        content: 'Content of the ninth item.',
+                    },
+                    {
+                        id: '10',
+                        title: 'Item 10',
+                        content: 'Content of the tenth item.',
+                    },
+                ]),
+                openIndexes: [0],
+            },
+            template: h("nv-accordion", { "data-storybook-args": true }),
+        },
+        {
+            name: 'ComplexData',
+            description: 'Accordion with complex data including all possible attributes',
+            args: {
+                mode: 'accordion',
+                data: JSON.stringify([
+                    {
+                        id: '1',
+                        title: 'Complete section',
+                        subtitle: 'With all attributes',
+                        content: 'Main content',
+                        disabled: false,
+                    },
+                    {
+                        id: '2',
+                        title: 'Disabled section',
+                        subtitle: 'Not accessible',
+                        content: 'Inaccessible content',
+                        disabled: true,
+                    },
+                ]),
+                openIndexes: [0],
+            },
+            template: h("nv-accordion", { "data-storybook-args": true }),
+        },
+    ],
+};
+export default NvAccordionDocs;
+//# sourceMappingURL=nv-accordion.docs.js.map

package/dist/collection/components/nv-accordion/nv-accordion.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-accordion.docs.js","sourceRoot":"","sources":["../../../src/components/nv-accordion/nv-accordion.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvAccordionDocs: NovaDocs<Components.NvAccordion> = {\n  component: 'nv-accordion',\n  subcomponents: ['nv-accordion-item', 'nv-icon', 'nv-button', 'nv-badge'],\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      description: 'Accordion with simple items',\n      args: {\n        mode: 'accordion',\n        data: JSON.stringify([\n          {\n            id: '1',\n            title: 'Title 1',\n            content: 'Content of title 1',\n          },\n          {\n            id: '2',\n            title: 'Title 2',\n            content: 'Content of title 2',\n          },\n        ]),\n      },\n      template: <nv-accordion data-storybook-args></nv-accordion>,\n    },\n    {\n      name: 'MultiMode',\n      description: 'Accordion allowing multiple items to be open',\n      args: {\n        mode: 'multi',\n        data: JSON.stringify([\n          {\n            id: '1',\n            title: 'Title 1',\n            content: 'Content of title 1',\n          },\n          {\n            id: '2',\n            title: 'Title 2',\n            content: 'Content of title 2',\n          },\n        ]),\n      },\n      template: <nv-accordion data-storybook-args></nv-accordion>,\n    },\n    {\n      name: 'CustomHeader',\n      description: 'Real-world example with TraXes Connection Points',\n      template: (\n        <nv-accordion mode=\"accordion\" openIndexes={[0, 2]}>\n          <nv-accordion-item>\n            <div slot=\"header\">\n              <div class=\"flex items-center justify-between w-full\">\n                <div class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span class=\"nv-accordion-item__title\">EC-308</span>\n                  <span class=\"nv-accordion-item__subtitle\">\n                    Connection point\n                  </span>\n                </div>\n                <nv-badge color=\"success\" label=\"Running\">\n                  <nv-icon slot=\"leading-icon\" name=\"check\" size=\"sm\" />\n                </nv-badge>\n              </div>\n            </div>\n            <div slot=\"content\" class=\"flex items-center justify-between\">\n              <div>\n                <p>Single accordion or accordion group</p>\n                <p>\n                  Use the accordion as a single instance, or in a group of\n                  accordions stacked vertically.\n                </p>\n                <p>\n                  The accordion title is wrapped in a heading tag by default.\n                  Alter it to fit the information architecture of the page.\n                </p>\n              </div>\n            </div>\n          </nv-accordion-item>\n          <nv-accordion-item>\n            <div slot=\"header\">\n              <div class=\"flex items-center justify-between w-full\">\n                <div class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span class=\"nv-accordion-item__title\">EC-309</span>\n                  <span class=\"nv-accordion-item__subtitle\">\n                    Connection point\n                  </span>\n                </div>\n                <nv-badge color=\"success\" label=\"Running\">\n                  <nv-icon slot=\"leading-icon\" name=\"check\" size=\"sm\" />\n                </nv-badge>\n              </div>\n            </div>\n            <div slot=\"content\">\n              <p>Content for EC-309 connection point</p>\n            </div>\n          </nv-accordion-item>\n          <nv-accordion-item>\n            <div slot=\"header\">\n              <div class=\"flex items-center justify-between w-full\">\n                <div class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span class=\"nv-accordion-item__title\">EC-310</span>\n                  <span class=\"nv-accordion-item__subtitle\">\n                    Connection point\n                  </span>\n                </div>\n                <nv-badge color=\"error\" label=\"Stopped\">\n                  <nv-icon slot=\"leading-icon\" name=\"x\" size=\"sm\" />\n                </nv-badge>\n              </div>\n            </div>\n            <div slot=\"content\">\n              <p>Content for EC-310 connection point (stopped)</p>\n            </div>\n          </nv-accordion-item>\n        </nv-accordion>\n      ),\n    },\n    {\n      name: 'DisabledItem',\n      description: 'Accordion with a disabled item',\n      template: (\n        <nv-accordion mode=\"accordion\">\n          <nv-accordion-item itemtitle=\"Active item\" open>\n            <div slot=\"content\">This item is accessible</div>\n          </nv-accordion-item>\n          <nv-accordion-item itemtitle=\"Disabled item\" disabled>\n            <div slot=\"content\">\n              This item is not accessible because it is disabled\n            </div>\n          </nv-accordion-item>\n        </nv-accordion>\n      ),\n    },\n    {\n      name: 'OpenIndexesDemo',\n      description:\n        'Demonstration of openIndexes with multiple items and first item pre-opened',\n      args: {\n        mode: 'accordion',\n        data: JSON.stringify([\n          {\n            id: '1',\n            title: 'Item 1 - Pre-opened',\n            content:\n              'This is the first item that is opened by default using openIndexes.',\n          },\n          {\n            id: '2',\n            title: 'Item 2',\n            content: 'Content of the second item.',\n          },\n          {\n            id: '3',\n            title: 'Item 3',\n            content: 'Content of the third item.',\n          },\n          {\n            id: '4',\n            title: 'Item 4',\n            content: 'Content of the fourth item.',\n          },\n          {\n            id: '5',\n            title: 'Item 5',\n            content: 'Content of the fifth item.',\n          },\n          {\n            id: '6',\n            title: 'Item 6',\n            content: 'Content of the sixth item.',\n          },\n          {\n            id: '7',\n            title: 'Item 7',\n            content: 'Content of the seventh item.',\n          },\n          {\n            id: '8',\n            title: 'Item 8',\n            content: 'Content of the eighth item.',\n          },\n          {\n            id: '9',\n            title: 'Item 9',\n            content: 'Content of the ninth item.',\n          },\n          {\n            id: '10',\n            title: 'Item 10',\n            content: 'Content of the tenth item.',\n          },\n        ]),\n        openIndexes: [0],\n      },\n      template: <nv-accordion data-storybook-args></nv-accordion>,\n    },\n    {\n      name: 'ComplexData',\n      description:\n        'Accordion with complex data including all possible attributes',\n      args: {\n        mode: 'accordion',\n        data: JSON.stringify([\n          {\n            id: '1',\n            title: 'Complete section',\n            subtitle: 'With all attributes',\n            content: 'Main content',\n            disabled: false,\n          },\n          {\n            id: '2',\n            title: 'Disabled section',\n            subtitle: 'Not accessible',\n            content: 'Inaccessible content',\n            disabled: true,\n          },\n        ]),\n        openIndexes: [0],\n      },\n      template: <nv-accordion data-storybook-args></nv-accordion>,\n    },\n  ],\n};\n\nexport default NvAccordionDocs;\n"]}

package/dist/collection/components/nv-accordion/nv-accordion.js

@@ -0,0 +1,342 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * @slot default - Slot for custom content (optional, ignored if data is provided)
+ */
+export class NvAccordion {
+    constructor() {
+        /**
+         * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)
+         */
+        this.mode = 'accordion';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        /**
+         * Internal index of open items (not exposed)
+         */
+        this.internalOpenIndexes = [];
+        /**
+         * Parsed data from data prop
+         */
+        this.parsedData = [];
+        // Synchronization openIndexes <-> internalOpenIndexes
+        this.itemToggleHandlers = [];
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Opens an item by its index (Public API)
+     * @param {number} index Index of the item to open
+     */
+    async open(index) {
+        this.toggleItem(index, true);
+    }
+    /**
+     * Closes an item by its index (Public API)
+     * @param {number} index Index of the item to close
+     */
+    async close(index) {
+        this.toggleItem(index, false);
+    }
+    /**
+     * Toggles an item's state (internal)
+     * @param {number} index Item index
+     * @param {boolean} [forceOpen] Force open (true) or close (false)
+     */
+    toggleItem(index, forceOpen) {
+        let openIndexes = this.openIndexes !== undefined
+            ? [...this.openIndexes]
+            : [...(this.internalOpenIndexes || [])];
+        const isOpen = openIndexes.includes(index);
+        if (this.mode === 'accordion') {
+            openIndexes = forceOpen === false || isOpen ? [] : [index];
+        }
+        else {
+            if (forceOpen === false) {
+                openIndexes = openIndexes.filter(i => i !== index);
+            }
+            else if (!isOpen) {
+                openIndexes.push(index);
+            }
+        }
+        this.internalOpenIndexes = openIndexes;
+        this.nvChange.emit({ openIndexes });
+        if (this.openIndexes !== undefined) {
+            this.openIndexes =
+                this.mode === 'accordion'
+                    ? [openIndexes[0]].filter(x => x !== undefined)
+                    : [...openIndexes];
+        }
+        // Update child elements state - for both data and slot usage
+        this.updateChildrenState();
+    }
+    /**
+     * Updates the open state of child elements based on internalOpenIndexes
+     */
+    async updateChildrenState() {
+        // Force a re-render by updating the state
+        this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];
+    }
+    /**
+     * Listens to itemToggle events from nv-accordion-item elements
+     * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
+     */
+    onItemToggle(event) {
+        // Ignore if using data (handled by itemToggleHandlers)
+        if (this.parsedData && this.parsedData.length > 0)
+            return;
+        // Find the index of the item that emitted the event
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        const targetItem = event.target;
+        const index = items.indexOf(targetItem);
+        if (index !== -1) {
+            // If the event comes from an item that is opening, handle accordion mode
+            if (event.detail === true) {
+                if (this.mode === 'accordion') {
+                    // Close all other items
+                    items.forEach((item, i) => {
+                        if (i !== index && item.open) {
+                            item.open = false;
+                        }
+                    });
+                    this.internalOpenIndexes = [index];
+                }
+                else {
+                    // Add index to internalOpenIndexes if not already present
+                    if (!this.internalOpenIndexes.includes(index)) {
+                        this.internalOpenIndexes = [...this.internalOpenIndexes, index];
+                    }
+                }
+            }
+            else {
+                // If the item is closing, remove it from internalOpenIndexes
+                this.internalOpenIndexes = this.internalOpenIndexes.filter(i => i !== index);
+            }
+            // Emit nvChange event
+            this.nvChange.emit({ openIndexes: this.internalOpenIndexes });
+            if (this.openIndexes !== undefined) {
+                this.openIndexes =
+                    this.mode === 'accordion'
+                        ? [this.internalOpenIndexes[0]].filter(x => x !== undefined)
+                        : [...this.internalOpenIndexes];
+            }
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    dataChanged() {
+        this.parseData();
+    }
+    parseData() {
+        if (typeof this.data === 'string') {
+            try {
+                this.parsedData = JSON.parse(this.data);
+            }
+            catch (e) {
+                console.error('nv-accordion: Failed to parse data prop.', e);
+                this.parsedData = [];
+            }
+        }
+        else {
+            this.parsedData = this.data || [];
+        }
+        if (this.parsedData) {
+            this.itemToggleHandlers = this.parsedData.map((_, i) => () => this.toggleItem(i));
+        }
+    }
+    componentWillLoad() {
+        this.parseData();
+        if (this.openIndexes !== undefined) {
+            this.internalOpenIndexes = [...this.openIndexes];
+        }
+    }
+    componentDidLoad() {
+        // If using direct child elements, initialize their state
+        if (!this.parsedData || this.parsedData.length === 0) {
+            this.updateChildrenState();
+        }
+    }
+    componentWillUpdate() {
+        if (this.openIndexes !== undefined) {
+            this.internalOpenIndexes = [...this.openIndexes];
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '5dcc9ea52a404dff7c4bb176b8a9781019e64bd3', role: "list", class: "nv-accordion" }, this.parsedData && this.parsedData.length > 0 ? (this.parsedData.map((item, i) => {
+            var _a;
+            return (h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemtitle: item.title, disabled: item.disabled, open: (this.internalOpenIndexes || []).includes(i), onItemToggle: this.itemToggleHandlers[i] }, item.subtitle ? (h("div", { slot: "header" }, h("div", { class: "nv-accordion-item__header-content" }, h("span", { class: "nv-accordion-item__title" }, item.title), h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, h("div", { slot: "content" }, item.content), item.footer && h("div", { slot: "footer" }, item.footer)));
+        })) : (h("slot", null))));
+    }
+    static get is() { return "nv-accordion"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data to display as a list of items (title, subtitle, content).\nMust be provided as a JSON string containing an array of items with:\n- title: main title (required)\n- subtitle: subtitle (optional)\n- content: main content (required)\n- footer: footer (optional)\n- disabled: disables the item (optional)\n- id: unique identifier (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "data",
+                "reflect": true
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'accordion' | 'multi'",
+                    "resolved": "\"accordion\" | \"multi\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expansion mode: 'accordion' (single open) or 'multi' (multiple open)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "'accordion'"
+            },
+            "openIndexes": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of open items (external control possible)"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpenIndexes": {},
+            "parsedData": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nvChange",
+                "name": "nvChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when an item's open state changes"
+                },
+                "complexType": {
+                    "original": "{\n    /** Index of open items */\n    openIndexes: number[];\n  }",
+                    "resolved": "{ openIndexes: number[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "Index of the item to open"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens an item by its index (Public API)",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index Index of the item to open"
+                        }]
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "Index of the item to close"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes an item by its index (Public API)",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index Index of the item to close"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "dataChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "itemToggle",
+                "method": "onItemToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nv-accordion.js.map

package/dist/collection/components/nv-accordion/nv-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-accordion.js","sourceRoot":"","sources":["../../../src/components/nv-accordion/nv-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Listen,\n  Element,\n  Watch,\n} from '@stencil/core';\n/**\n * Interface defining the structure of an accordion item\n */\nexport interface AccordionItem {\n  /** Unique identifier of the item */\n  id: string;\n  /** Item title */\n  title: string;\n  /** Optional subtitle */\n  subtitle?: string;\n  /** Main content */\n  content: string;\n  /** Optional footer */\n  footer?: string;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\n/**\n * Interface for nv-accordion-item component props\n */\nexport interface AccordionItemProps {\n  /** Item title (displayed if header slot is absent) */\n  itemtitle?: string;\n  /** Item subtitle (displayed if header slot is absent) */\n  subtitle?: string;\n  /** Open or closed */\n  open?: boolean;\n  /** Disables the item */\n  disabled?: boolean;\n  /** Parent expansion mode (accordion or multi) */\n  mode?: 'accordion' | 'multi';\n}\n\n/**\n * @slot default - Slot for custom content (optional, ignored if data is provided)\n */\n@Component({\n  tag: 'nv-accordion',\n  styleUrl: 'styles/nv-accordion.scss',\n  shadow: false,\n})\nexport class NvAccordion {\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Data to display as a list of items (title, subtitle, content).\n   * Must be provided as a JSON string containing an array of items with:\n   * - title: main title (required)\n   * - subtitle: subtitle (optional)\n   * - content: main content (required)\n   * - footer: footer (optional)\n   * - disabled: disables the item (optional)\n   * - id: unique identifier (optional)\n   */\n  @Prop({ reflect: true })\n  readonly data: string;\n\n  /**\n   * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'accordion' | 'multi' = 'accordion';\n\n  /**\n   * Index of open items (external control possible)\n   */\n  @Prop({ reflect: true, mutable: true })\n  openIndexes?: number[];\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n  /**\n   * Internal index of open items (not exposed)\n   */\n  @State()\n  internalOpenIndexes: number[] = [];\n\n  /**\n   * Parsed data from data prop\n   */\n  @State()\n  private parsedData: AccordionItem[] = [];\n\n  /**\n   * Reference to host element to access children\n   */\n  @Element() el!: HTMLNvAccordionElement;\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n  /**\n   * Event emitted when an item's open state changes\n   */\n  @Event()\n  nvChange: EventEmitter<{\n    /** Index of open items */\n    openIndexes: number[];\n  }>;\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n  /**\n   * Opens an item by its index (Public API)\n   * @param {number} index Index of the item to open\n   */\n  @Method()\n  async open(index: number) {\n    this.toggleItem(index, true);\n  }\n  /**\n   * Closes an item by its index (Public API)\n   * @param {number} index Index of the item to close\n   */\n  @Method()\n  async close(index: number) {\n    this.toggleItem(index, false);\n  }\n  /**\n   * Toggles an item's state (internal)\n   * @param {number} index Item index\n   * @param {boolean} [forceOpen] Force open (true) or close (false)\n   */\n  private toggleItem(index: number, forceOpen?: boolean) {\n    let openIndexes =\n      this.openIndexes !== undefined\n        ? [...this.openIndexes]\n        : [...(this.internalOpenIndexes || [])];\n    const isOpen = openIndexes.includes(index);\n    if (this.mode === 'accordion') {\n      openIndexes = forceOpen === false || isOpen ? [] : [index];\n    } else {\n      if (forceOpen === false) {\n        openIndexes = openIndexes.filter(i => i !== index);\n      } else if (!isOpen) {\n        openIndexes.push(index);\n      }\n    }\n    this.internalOpenIndexes = openIndexes;\n    this.nvChange.emit({ openIndexes });\n    if (this.openIndexes !== undefined) {\n      this.openIndexes =\n        this.mode === 'accordion'\n          ? [openIndexes[0]].filter(x => x !== undefined)\n          : [...openIndexes];\n    }\n\n    // Update child elements state - for both data and slot usage\n    this.updateChildrenState();\n  }\n\n  /**\n   * Updates the open state of child elements based on internalOpenIndexes\n   */\n  private async updateChildrenState() {\n    // Force a re-render by updating the state\n    this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];\n  }\n\n  /**\n   * Listens to itemToggle events from nv-accordion-item elements\n   * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n   */\n  @Listen('itemToggle')\n  onItemToggle(event: CustomEvent<boolean>) {\n    // Ignore if using data (handled by itemToggleHandlers)\n    if (this.parsedData && this.parsedData.length > 0) return;\n\n    // Find the index of the item that emitted the event\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n    const targetItem = event.target as HTMLNvAccordionItemElement;\n    const index = items.indexOf(targetItem);\n\n    if (index !== -1) {\n      // If the event comes from an item that is opening, handle accordion mode\n      if (event.detail === true) {\n        if (this.mode === 'accordion') {\n          // Close all other items\n          items.forEach((item, i) => {\n            if (i !== index && item.open) {\n              item.open = false;\n            }\n          });\n          this.internalOpenIndexes = [index];\n        } else {\n          // Add index to internalOpenIndexes if not already present\n          if (!this.internalOpenIndexes.includes(index)) {\n            this.internalOpenIndexes = [...this.internalOpenIndexes, index];\n          }\n        }\n      } else {\n        // If the item is closing, remove it from internalOpenIndexes\n        this.internalOpenIndexes = this.internalOpenIndexes.filter(\n          i => i !== index,\n        );\n      }\n\n      // Emit nvChange event\n      this.nvChange.emit({ openIndexes: this.internalOpenIndexes });\n      if (this.openIndexes !== undefined) {\n        this.openIndexes =\n          this.mode === 'accordion'\n            ? [this.internalOpenIndexes[0]].filter(x => x !== undefined)\n            : [...this.internalOpenIndexes];\n      }\n    }\n  }\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  @Watch('data')\n  dataChanged() {\n    this.parseData();\n  }\n\n  // Synchronization openIndexes <-> internalOpenIndexes\n  private itemToggleHandlers: Array<() => void> = [];\n\n  private parseData() {\n    if (typeof this.data === 'string') {\n      try {\n        this.parsedData = JSON.parse(this.data);\n      } catch (e) {\n        console.error('nv-accordion: Failed to parse data prop.', e);\n        this.parsedData = [];\n      }\n    } else {\n      this.parsedData = this.data || [];\n    }\n\n    if (this.parsedData) {\n      this.itemToggleHandlers = this.parsedData.map(\n        (_, i) => () => this.toggleItem(i),\n      );\n    }\n  }\n\n  componentWillLoad() {\n    this.parseData();\n    if (this.openIndexes !== undefined) {\n      this.internalOpenIndexes = [...this.openIndexes];\n    }\n  }\n\n  componentDidLoad() {\n    // If using direct child elements, initialize their state\n    if (!this.parsedData || this.parsedData.length === 0) {\n      this.updateChildrenState();\n    }\n  }\n\n  componentWillUpdate() {\n    if (this.openIndexes !== undefined) {\n      this.internalOpenIndexes = [...this.openIndexes];\n    }\n  }\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host role=\"list\" class=\"nv-accordion\">\n        {this.parsedData && this.parsedData.length > 0 ? (\n          this.parsedData.map((item, i) => (\n            <nv-accordion-item\n              key={item.id ?? i}\n              itemtitle={item.title}\n              disabled={item.disabled}\n              open={(this.internalOpenIndexes || []).includes(i)}\n              onItemToggle={this.itemToggleHandlers[i]}\n            >\n              {item.subtitle ? (\n                <div slot=\"header\">\n                  <div class=\"nv-accordion-item__header-content\">\n                    <span class=\"nv-accordion-item__title\">{item.title}</span>\n                    <span class=\"nv-accordion-item__subtitle\">\n                      {item.subtitle}\n                    </span>\n                  </div>\n                </div>\n              ) : null}\n              <div slot=\"content\">{item.content}</div>\n              {item.footer && <div slot=\"footer\">{item.footer}</div>}\n            </nv-accordion-item>\n          ))\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-accordion/styles/nv-accordion.css

@@ -0,0 +1,15 @@
+nv-accordion {
+  display: block;
+  border: var(--spacing-px) solid var(--color-content-low-border);
+  border-radius: var(--radius-rounded-lg);
+}
+nv-accordion .nv-accordion__footer {
+  padding: var(--spacing-3);
+  background: var(--color-level-05-background);
+  border-radius: 0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);
+  margin-top: calc(var(--spacing-px) * -1);
+  border-top: var(--spacing-px) solid var(--color-content-low-border);
+}
+nv-accordion .nv-accordion__footer:empty {
+  display: none;
+}

package/dist/collection/components/nv-accordion-item/nv-accordion-item.docs.js

@@ -0,0 +1,6 @@
+const NvAccordionItemDocs = {
+    component: 'nv-accordion-item',
+    skip: true,
+};
+export default NvAccordionItemDocs;
+//# sourceMappingURL=nv-accordion-item.docs.js.map

package/dist/collection/components/nv-accordion-item/nv-accordion-item.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-accordion-item.docs.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,mBAAmB,GAAyC;IAChE,SAAS,EAAE,mBAAmB;IAC9B,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvAccordionItemDocs: NovaDocs<Components.NvAccordionItem> = {\n  component: 'nv-accordion-item',\n  skip: true,\n};\n\nexport default NvAccordionItemDocs;\n"]}