@nova-design-system/nova-webcomponents 3.11.0 → 3.13.0

package/dist/collection/animations/slide.animation.js

@@ -0,0 +1,65 @@
+import { animate, easeOut } from "popmotion";
+import styler from "stylefire";
+const useSlide = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = styler(node);
+    /**
+     * Will animate the translateX to 100%, sliding the element to the right.
+     */
+    function slideOut() {
+        return new Promise(resolve => {
+            animate({
+                from: { x: 0 },
+                to: { x: 100 },
+                ease: easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Applies the slideOut styles without animating, useful when initial state
+     * is slid out.
+     */
+    function setSlideOut() {
+        node.style.transform = 'translateX(100%)';
+    }
+    /**
+     * Applies the slideIn styles without animating, useful when initial state
+     * is slid in.
+     */
+    function setSlideIn() {
+        node.style.transform = '';
+    }
+    /**
+     * Will animate the translateX from 100% to 0%, sliding the element in from the right.
+     */
+    function slideIn() {
+        return new Promise(resolve => {
+            animate({
+                from: { x: 100 },
+                to: { x: 0 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                    node.style.removeProperty('transform');
+                },
+            });
+        });
+    }
+    return {
+        slideIn,
+        slideOut,
+        setSlideOut,
+        setSlideIn,
+    };
+};
+export { useSlide };
+//# sourceMappingURL=slide.animation.js.map

package/dist/collection/animations/slide.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide.animation.js","sourceRoot":"","sources":["../../src/animations/slide.animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,MAAM,MAAM,WAAW,CAAC;AAO/B,MAAM,QAAQ,GAAG,CACf,IAAiB,EACjB,EAAE,QAAQ,KAAmB,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC9C,EAAE;IACF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,QAAQ;QACf,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;gBACd,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE;gBACd,IAAI,EAAE,OAAO;gBACb,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;gBAC5D,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;gBACZ,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC5C,CAAC;IAED;;;OAGG;IACH,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE;gBAChB,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;gBACZ,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;gBAC5D,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;gBACzC,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,OAAO;QACP,QAAQ;QACR,WAAW;QACX,UAAU;KACX,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { animate, easeOut } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type SlideOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useSlide = (\n  node: HTMLElement,\n  { duration }: SlideOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the translateX to 100%, sliding the element to the right.\n   */\n  function slideOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { x: 0 },\n        to: { x: 100 },\n        ease: easeOut,\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ transform: `translateX(${latest.x}%)` });\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the slideOut styles without animating, useful when initial state\n   * is slid out.\n   */\n  function setSlideOut() {\n    node.style.transform = 'translateX(100%)';\n  }\n\n  /**\n   * Applies the slideIn styles without animating, useful when initial state\n   * is slid in.\n   */\n  function setSlideIn() {\n    node.style.transform = '';\n  }\n\n  /**\n   * Will animate the translateX from 100% to 0%, sliding the element in from the right.\n   */\n  function slideIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { x: 100 },\n        to: { x: 0 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ transform: `translateX(${latest.x}%)` });\n        },\n        onComplete() {\n          resolve();\n          node.style.removeProperty('transform');\n        },\n      });\n    });\n  }\n\n  return {\n    slideIn,\n    slideOut,\n    setSlideOut,\n    setSlideIn,\n  };\n};\n\nexport { useSlide };\n"]}

package/dist/collection/animations/timeline.animation.js

@@ -17,5 +17,23 @@ const timeline = (...animations) => ({
         return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
     },
 });
-export { timeline };
+/**
+ * Will execute a series of animation promises in parallel.
+ * This is useful for running multiple animations simultaneously.
+ *
+ * @param {Array<() => Promise<void>>} animations - The array of animation functions.
+ * @returns {Object} - An object with a `start` method to begin the parallel animations.
+ *
+ * @example
+ * const { fadeOut } = useFade(this.ref);
+ * const { slideOut } = useSlide(this.containerRef);
+ *
+ * parallel(fadeOut, slideOut).start();
+ */
+const parallel = (...animations) => ({
+    start: () => {
+        return Promise.all(animations.map(animation => animation()));
+    },
+});
+export { timeline, parallel };
 //# sourceMappingURL=timeline.animation.js.map

package/dist/collection/animations/timeline.animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.animation.js","sourceRoot":"","sources":["../../src/animations/timeline.animation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,QAAQ,GAAG,CAAC,GAAG,UAAsC,EAAE,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,GAAG,EAAE;QACV,OAAO,UAAU,CAAC,MAAM,CACtB,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,EACvD,OAAO,CAAC,OAAO,EAAE,CAClB,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAC","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,"file":"timeline.animation.js","sourceRoot":"","sources":["../../src/animations/timeline.animation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,QAAQ,GAAG,CAAC,GAAG,UAAsC,EAAE,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,GAAG,EAAE;QACV,OAAO,UAAU,CAAC,MAAM,CACtB,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,EACvD,OAAO,CAAC,OAAO,EAAE,CAClB,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,QAAQ,GAAG,CAAC,GAAG,UAAsC,EAAE,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,GAAG,EAAE;QACV,OAAO,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC/D,CAAC;CACF,CAAC,CAAC;AAEH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC","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\n/**\n * Will execute a series of animation promises in parallel.\n * This is useful for running multiple animations simultaneously.\n *\n * @param {Array<() => Promise<void>>} animations - The array of animation functions.\n * @returns {Object} - An object with a `start` method to begin the parallel animations.\n *\n * @example\n * const { fadeOut } = useFade(this.ref);\n * const { slideOut } = useSlide(this.containerRef);\n *\n * parallel(fadeOut, slideOut).start();\n */\nconst parallel = (...animations: Array<() => Promise<void>>) => ({\n  start: () => {\n    return Promise.all(animations.map(animation => animation()));\n  },\n});\n\nexport { timeline, parallel };\n"]}

package/dist/collection/collection-manifest.json

@@ -36,6 +36,7 @@
     "components/nv-loader/nv-loader.js",
     "components/nv-menu/nv-menu.js",
     "components/nv-menuitem/nv-menuitem.js",
+    "components/nv-notification/nv-notification.js",
     "components/nv-popover/nv-popover.js",
     "components/nv-row/nv-row.js",
     "components/nv-stack/nv-stack.js",

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

@@ -1,9 +1,10 @@
 import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvAccordionDocs = {
     component: 'nv-accordion',
     subcomponents: ['nv-accordion-item', 'nv-icon', 'nv-button', 'nv-badge'],
-    badge: 'beta',
     stories: [
+        // Default
         {
             name: 'Default',
             description: 'Accordion with simple items',
@@ -24,8 +25,9 @@ const NvAccordionDocs = {
             },
             template: h("nv-accordion", { "data-storybook-args": true }),
         },
+        // Mode
         {
-            name: 'MultiMode',
+            name: nameof(x => x.mode),
             description: 'Accordion allowing multiple items to be open',
             args: {
                 mode: 'multi',
@@ -44,25 +46,9 @@ const NvAccordionDocs = {
             },
             template: h("nv-accordion", { "data-storybook-args": true }),
         },
+        // OpenIndexes
         {
-            name: 'CustomHeader',
-            description: 'Real-world example with TraXes Connection Points',
-            args: {
-                mode: 'accordion',
-                openIndexes: [0, 2],
-            },
-            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-308"), h("span", { "data-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", "data-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", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-309"), h("span", { "data-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", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-310"), h("span", { "data-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',
-            args: {
-                mode: 'accordion',
-            },
-            template: (h("nv-accordion", { "data-storybook-args": true }, 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',
+            name: nameof(x => x.openIndexes),
             description: 'Demonstration of openIndexes with multiple items and first item pre-opened',
             args: {
                 mode: 'accordion',
@@ -122,6 +108,78 @@ const NvAccordionDocs = {
             },
             template: h("nv-accordion", { "data-storybook-args": true }),
         },
+        // DisabledItem
+        {
+            name: 'DisabledItem',
+            description: 'Accordion allowing multiple items to be open',
+            args: {
+                data: [
+                    {
+                        id: '1',
+                        title: 'Title 1',
+                        content: 'Content of title 1',
+                    },
+                    {
+                        id: '2',
+                        title: 'Title 2',
+                        content: 'This item is not accessible because it is disabled',
+                        disabled: true,
+                    },
+                ],
+            },
+            template: h("nv-accordion", { "data-storybook-args": true }),
+        },
+        // Slot
+        {
+            name: 'Slot',
+            description: 'Accordion with a disabled item',
+            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", { "item-title": "Title item" }, h("div", { slot: "content" }, "This item is accessible")), h("nv-accordion-item", { "item-title": "Title second item" }, h("div", { slot: "content" }, "This second item is accessible")))),
+        },
+        // SlotWithMode
+        {
+            name: 'SlotWithMode',
+            description: 'Accordion with a disabled item',
+            args: {
+                mode: 'multi',
+            },
+            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", { "item-title": "Title item" }, h("div", { slot: "content" }, "This item is accessible")), h("nv-accordion-item", { "item-title": "Title second item" }, h("div", { slot: "content" }, "This second item is accessible")))),
+        },
+        // SlotWithOpenIndexes
+        {
+            name: 'SlotWithOpenIndexes',
+            description: 'Demonstration of openIndexes with multiple items and first item pre-opened',
+            args: {
+                mode: 'accordion',
+                openIndexes: [0],
+            },
+            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", { "item-title": "Active item" }, h("div", { slot: "content" }, "This item is accessible")), h("nv-accordion-item", { "item-title": "Title second item" }, h("div", { slot: "content" }, "This second item is accessible")))),
+        },
+        // SlotWithDisabledItem
+        {
+            name: 'SlotWithDisabledItem',
+            description: 'Accordion with a disabled item',
+            args: {
+                mode: 'accordion',
+            },
+            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", { "item-title": "Title item" }, h("div", { slot: "content" }, "This item is accessible")), h("nv-accordion-item", { "item-title": "Disabled item", disabled: true }, h("div", { slot: "content" }, "This item is not accessible because it is disabled")))),
+        },
+        // SlotWithOpenItem
+        {
+            name: 'SlotWithOpenItem',
+            description: 'Accordion with an open item',
+            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", { "item-title": "Active item", open: true }, h("div", { slot: "content" }, "This item is accessible")), h("nv-accordion-item", { "item-title": "Title second item" }, h("div", { slot: "content" }, "This second item is accessible")))),
+        },
+        // CustomHeader
+        {
+            name: 'CustomHeader',
+            description: 'Real-world example with TraXes Connection Points',
+            args: {
+                mode: 'multi',
+                openIndexes: [0, 2],
+            },
+            template: (h("nv-accordion", { "data-storybook-args": true }, h("nv-accordion-item", null, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-308"), h("span", { "data-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", "data-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", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-309"), h("span", { "data-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", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-310"), h("span", { "data-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)"))))),
+        },
+        // ComplexData
         {
             name: 'ComplexData',
             description: 'Accordion with complex data including all possible attributes',

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

@@ -1 +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: [\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: [\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      args: {\n        mode: 'accordion',\n        openIndexes: [0, 2],\n      },\n      template: (\n        <nv-accordion data-storybook-args>\n          <nv-accordion-item>\n            <div slot=\"header\">\n              <div data-class=\"flex items-center justify-between w-full\">\n                <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span data-class=\"nv-accordion-item__title\">EC-308</span>\n                  <span data-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\" data-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 data-class=\"flex items-center justify-between w-full\">\n                <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span data-class=\"nv-accordion-item__title\">EC-309</span>\n                  <span data-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 data-class=\"flex items-center justify-between w-full\">\n                <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span data-class=\"nv-accordion-item__title\">EC-310</span>\n                  <span data-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      args: {\n        mode: 'accordion',\n      },\n      template: (\n        <nv-accordion data-storybook-args>\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: [\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: [\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"]}
+{"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';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvAccordionDocs: NovaDocs<Components.NvAccordion> = {\n  component: 'nv-accordion',\n  subcomponents: ['nv-accordion-item', 'nv-icon', 'nv-button', 'nv-badge'],\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      description: 'Accordion with simple items',\n      args: {\n        mode: 'accordion',\n        data: [\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    // Mode\n    {\n      name: nameof<Components.NvAccordion>(x => x.mode),\n      description: 'Accordion allowing multiple items to be open',\n      args: {\n        mode: 'multi',\n        data: [\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    // OpenIndexes\n    {\n      name: nameof<Components.NvAccordion>(x => x.openIndexes),\n      description:\n        'Demonstration of openIndexes with multiple items and first item pre-opened',\n      args: {\n        mode: 'accordion',\n        data: [\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    // DisabledItem\n    {\n      name: 'DisabledItem',\n      description: 'Accordion allowing multiple items to be open',\n      args: {\n        data: [\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: 'This item is not accessible because it is disabled',\n            disabled: true,\n          },\n        ],\n      },\n      template: <nv-accordion data-storybook-args></nv-accordion>,\n    },\n    // Slot\n    {\n      name: 'Slot',\n      description: 'Accordion with a disabled item',\n      template: (\n        <nv-accordion data-storybook-args>\n          <nv-accordion-item item-title=\"Title item\">\n            <div slot=\"content\">This item is accessible</div>\n          </nv-accordion-item>\n          <nv-accordion-item item-title=\"Title second item\">\n            <div slot=\"content\">This second item is accessible</div>\n          </nv-accordion-item>\n        </nv-accordion>\n      ),\n    },\n    // SlotWithMode\n    {\n      name: 'SlotWithMode',\n      description: 'Accordion with a disabled item',\n      args: {\n        mode: 'multi',\n      },\n      template: (\n        <nv-accordion data-storybook-args>\n          <nv-accordion-item item-title=\"Title item\">\n            <div slot=\"content\">This item is accessible</div>\n          </nv-accordion-item>\n          <nv-accordion-item item-title=\"Title second item\">\n            <div slot=\"content\">This second item is accessible</div>\n          </nv-accordion-item>\n        </nv-accordion>\n      ),\n    },\n    // SlotWithOpenIndexes\n    {\n      name: 'SlotWithOpenIndexes',\n      description:\n        'Demonstration of openIndexes with multiple items and first item pre-opened',\n      args: {\n        mode: 'accordion',\n        openIndexes: [0],\n      },\n      template: (\n        <nv-accordion data-storybook-args>\n          <nv-accordion-item item-title=\"Active item\">\n            <div slot=\"content\">This item is accessible</div>\n          </nv-accordion-item>\n          <nv-accordion-item item-title=\"Title second item\">\n            <div slot=\"content\">This second item is accessible</div>\n          </nv-accordion-item>\n        </nv-accordion>\n      ),\n    },\n    // SlotWithDisabledItem\n    {\n      name: 'SlotWithDisabledItem',\n      description: 'Accordion with a disabled item',\n      args: {\n        mode: 'accordion',\n      },\n      template: (\n        <nv-accordion data-storybook-args>\n          <nv-accordion-item item-title=\"Title item\">\n            <div slot=\"content\">This item is accessible</div>\n          </nv-accordion-item>\n          <nv-accordion-item item-title=\"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    // SlotWithOpenItem\n    {\n      name: 'SlotWithOpenItem',\n      description: 'Accordion with an open item',\n      template: (\n        <nv-accordion data-storybook-args>\n          <nv-accordion-item item-title=\"Active item\" open>\n            <div slot=\"content\">This item is accessible</div>\n          </nv-accordion-item>\n          <nv-accordion-item item-title=\"Title second item\">\n            <div slot=\"content\">This second item is accessible</div>\n          </nv-accordion-item>\n        </nv-accordion>\n      ),\n    },\n    // CustomHeader\n    {\n      name: 'CustomHeader',\n      description: 'Real-world example with TraXes Connection Points',\n      args: {\n        mode: 'multi',\n        openIndexes: [0, 2],\n      },\n      template: (\n        <nv-accordion data-storybook-args>\n          <nv-accordion-item>\n            <div slot=\"header\">\n              <div data-class=\"flex items-center justify-between w-full\">\n                <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span data-class=\"nv-accordion-item__title\">EC-308</span>\n                  <span data-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\" data-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 data-class=\"flex items-center justify-between w-full\">\n                <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span data-class=\"nv-accordion-item__title\">EC-309</span>\n                  <span data-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 data-class=\"flex items-center justify-between w-full\">\n                <div data-class=\"flex flex-col border-r border-[#E3E3E3] pr-4 mr-4\">\n                  <span data-class=\"nv-accordion-item__title\">EC-310</span>\n                  <span data-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    // ComplexData\n    {\n      name: 'ComplexData',\n      description:\n        'Accordion with complex data including all possible attributes',\n      args: {\n        mode: 'accordion',\n        data: [\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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h, forceUpdate, } from "@stencil/core";
 /**
  * @slot default - Slot for custom content (optional, ignored if data is provided)
  */
@@ -14,13 +14,14 @@ export class NvAccordion {
          * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)
          */
         this.mode = 'accordion';
+        /**
+         * Index of open items (external control possible)
+         */
+        this.openIndexes = [];
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
-        /**
-         * Internal index of open items (not exposed)
-         */
-        this.internalOpenIndexes = [];
+        this.updatingFromInternal = false;
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -45,110 +46,119 @@ export class NvAccordion {
      * @param {boolean} [forceOpen] Force open (true) or close (false)
      */
     toggleItem(index, forceOpen) {
-        let openIndexes = this.openIndexes !== undefined
-            ? [...this.openIndexes]
-            : [...(this.internalOpenIndexes || [])];
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        const item = items[index];
+        if (!item || item.disabled) {
+            console.warn('[toggleItem] Item not found or disabled:', index);
+            this.openChanged.emit({ openIndexes: [...(this.openIndexes || [])] });
+            return;
+        }
+        let openIndexes = [...(this.openIndexes || [])];
         const isOpen = openIndexes.includes(index);
         if (this.mode === 'accordion') {
-            openIndexes = forceOpen === false || isOpen ? [] : [index];
+            openIndexes =
+                forceOpen === false || (forceOpen === undefined && isOpen)
+                    ? []
+                    : [index];
         }
         else {
             if (forceOpen === false) {
                 openIndexes = openIndexes.filter(i => i !== index);
             }
-            else if (!isOpen) {
+            else if (forceOpen === true && !isOpen) {
                 openIndexes.push(index);
             }
+            else if (forceOpen === undefined) {
+                openIndexes = isOpen
+                    ? openIndexes.filter(i => i !== index)
+                    : [...openIndexes, index];
+            }
         }
-        this.internalOpenIndexes = openIndexes;
-        this.openChanged.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.updatingFromInternal = true;
+        this.openIndexes = [...openIndexes];
         this.updateChildrenState();
+        this.updatingFromInternal = false;
+        this.openChanged.emit({ openIndexes: [...openIndexes] });
     }
     /**
-     * Updates the open state of child elements based on internalOpenIndexes
+     * Updates the open state of child elements based on openIndexes
      */
     async updateChildrenState() {
-        // Force a re-render by updating the state
-        this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        items.forEach((item, i) => {
+            const shouldBeOpen = (this.openIndexes || []).includes(i);
+            item.open = shouldBeOpen;
+            item.mode = this.mode;
+            item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');
+            forceUpdate(item);
+        });
     }
     /**
      * Listens to itemToggle events from nv-accordion-item elements
      * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
      */
     onItemToggle(event) {
-        // Find the index of the item that emitted the event
+        if (this.updatingFromInternal) {
+            return;
+        }
         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 openChanged event
-            this.openChanged.emit({ openIndexes: this.internalOpenIndexes });
-            if (this.openIndexes !== undefined) {
-                this.openIndexes =
-                    this.mode === 'accordion'
-                        ? [this.internalOpenIndexes[0]].filter(x => x !== undefined)
-                        : [...this.internalOpenIndexes];
-            }
+            this.toggleItem(index, event.detail);
+        }
+        else {
+            console.warn('[onItemToggle] Target item not found in items list');
         }
     }
     //#endregion METHODS
     /****************************************************************************/
     //#region WATCHERS
+    onOpenIndexesChange(newValue, oldValue) {
+        if (!this.updatingFromInternal &&
+            newValue !== undefined &&
+            newValue !== oldValue) {
+            this.updateChildrenState();
+        }
+    }
+    onModeChange() {
+        this.updateChildrenState();
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
-        if (this.openIndexes !== undefined) {
-            this.internalOpenIndexes = [...this.openIndexes];
-        }
-    }
-    componentDidLoad() {
-        // If using direct child elements, initialize their state
-        if (!this.data || this.data.length === 0) {
-            this.updateChildrenState();
+        if (this.openIndexes === undefined) {
+            this.openIndexes = [];
         }
     }
-    componentWillUpdate() {
-        if (this.openIndexes !== undefined) {
-            this.internalOpenIndexes = [...this.openIndexes];
+    async componentDidLoad() {
+        var _a;
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set
+        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) &&
+            (!this.openIndexes || this.openIndexes.length === 0)) {
+            const childOpenIndexes = items
+                .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))
+                .filter(i => i !== -1);
+            if (childOpenIndexes.length > 0) {
+                this.updatingFromInternal = true;
+                this.openIndexes = [...childOpenIndexes];
+                this.updatingFromInternal = false;
+                this.openChanged.emit({ openIndexes: [...this.openIndexes] });
+            }
         }
+        // Ensure children are in sync with current openIndexes state
+        await this.updateChildrenState();
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'a6cb21b274024a00e60e0d0db780f25fab6e5bc2', role: "list", class: "nv-accordion" }, this.data && this.data.length > 0 ? (this.data.map((item, i) => {
+        var _a;
+        return (h(Host, { key: 'b5c36f19bcbd0d06e9d924ae6f9630b8b6cae05a', role: "list", class: "nv-accordion" }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) ? (this.data.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) }, 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)));
+            return (h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, 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"; }
@@ -217,13 +227,14 @@ export class NvAccordion {
                     "text": "Index of open items (external control possible)"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
     static get states() {
         return {
-            "internalOpenIndexes": {}
+            "updatingFromInternal": {}
         };
     }
     static get events() {
@@ -297,6 +308,15 @@ export class NvAccordion {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "openIndexes",
+                "methodName": "onOpenIndexesChange"
+            }, {
+                "propName": "mode",
+                "methodName": "onModeChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "itemToggle",