@nova-design-system/nova-webcomponents 3.14.0 → 3.16.0

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

@@ -3,13 +3,19 @@ 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.
+     * Will animate the translateX property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateX property.
+     * @param {number} options.to - The ending value for the translateX property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
      */
-    function slideOut() {
+    const slideX = (options = { from: 0, to: 100 }) => () => {
         return new Promise(resolve => {
             animate({
-                from: { x: 0 },
-                to: { x: 100 },
+                from: { x: options.from },
+                to: { x: options.to },
                 ease: easeOut,
                 duration,
                 onUpdate(latest) {
@@ -20,45 +26,61 @@ const useSlide = (node, { duration } = { duration: 200 }) => {
                 },
             });
         });
-    }
-    /**
-     * 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.
+     * Will animate the translateY property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateY property.
+     * @param {number} options.to - The ending value for the translateY property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
      */
-    function slideIn() {
+    const slideY = (options = { from: 0, to: 100 }) => () => {
         return new Promise(resolve => {
             animate({
-                from: { x: 100 },
-                to: { x: 0 },
+                from: { y: options.from },
+                to: { y: options.to },
+                ease: easeOut,
                 duration,
                 onUpdate(latest) {
-                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                    nodeStyler.set({ transform: `translateY(${latest.y}%)` });
                 },
                 onComplete() {
                     resolve();
-                    node.style.removeProperty('transform');
                 },
             });
         });
+    };
+    /**
+     * Applies the slideX styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideX styles.
+     */
+    const setSlideX = (amount = 100) => nodeStyler.set({ transform: `translateX(${amount}%)` });
+    /**
+     * Applies the slideY styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideY styles.
+     */
+    const setSlideY = (amount = 100) => nodeStyler.set({ transform: `translateY(${amount}%)` });
+    /**
+     * Applies the slideIn styles without animating, useful when initial state
+     * is slid in.
+     */
+    function setSlideReset() {
+        nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });
     }
     return {
-        slideIn,
-        slideOut,
-        setSlideOut,
-        setSlideIn,
+        slideX,
+        slideY,
+        setSlideX,
+        setSlideY,
+        setSlideReset,
     };
 };
 export { useSlide };

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

@@ -1 +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"]}
+{"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;;;;;;;;OAQG;IACH,MAAM,MAAM,GACV,CACE,UAKI,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EACxB,EAAE,CACJ,GAAG,EAAE;QACH,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE;gBACzB,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE;gBACrB,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,CAAC;IAEJ;;;;;;;;OAQG;IACH,MAAM,MAAM,GACV,CACE,UAKI,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EACxB,EAAE,CACJ,GAAG,EAAE;QACH,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE;gBACzB,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE;gBACrB,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,CAAC;IAEJ;;;;;;OAMG;IACH,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE,EAAE,CACjC,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,IAAI,EAAE,CAAC,CAAC;IAE1D;;;;;;OAMG;IACH,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE,EAAE,CACjC,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,IAAI,EAAE,CAAC,CAAC;IAE1D;;;OAGG;IACH,SAAS,aAAa;QACpB,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC;IACvE,CAAC;IAED,OAAO;QACL,MAAM;QACN,MAAM;QACN,SAAS;QACT,SAAS;QACT,aAAa;KACd,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 property.\n   *\n   * @param {object} options - The options for the animation.\n   * @param {number} options.from - The starting value for the translateX property.\n   * @param {number} options.to - The ending value for the translateX property.\n   * @returns {Promise<void>} - A promise that resolves when the animation is\n   * complete.\n   */\n  const slideX =\n    (\n      options: {\n        /** The starting percentage for the translateX property. */\n        from: number;\n        /** The ending percentage for the translateX property. */\n        to: number;\n      } = { from: 0, to: 100 },\n    ) =>\n    () => {\n      return new Promise<void>(resolve => {\n        animate({\n          from: { x: options.from },\n          to: { x: options.to },\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   * Will animate the translateY property.\n   *\n   * @param {object} options - The options for the animation.\n   * @param {number} options.from - The starting value for the translateY property.\n   * @param {number} options.to - The ending value for the translateY property.\n   * @returns {Promise<void>} - A promise that resolves when the animation is\n   * complete.\n   */\n  const slideY =\n    (\n      options: {\n        /** The starting percentage for the translateY property. */\n        from: number;\n        /** The ending percentage for the translateY property. */\n        to: number;\n      } = { from: 0, to: 100 },\n    ) =>\n    () => {\n      return new Promise<void>(resolve => {\n        animate({\n          from: { y: options.from },\n          to: { y: options.to },\n          ease: easeOut,\n          duration,\n          onUpdate(latest) {\n            nodeStyler.set({ transform: `translateY(${latest.y}%)` });\n          },\n          onComplete() {\n            resolve();\n          },\n        });\n      });\n    };\n\n  /**\n   * Applies the slideX styles without animating, useful when initial state\n   * is slid out.\n   *\n   * @param {number} amount - The amount to translate the element by.\n   * @returns {function} - A function that applies the slideX styles.\n   */\n  const setSlideX = (amount = 100) =>\n    nodeStyler.set({ transform: `translateX(${amount}%)` });\n\n  /**\n   * Applies the slideY styles without animating, useful when initial state\n   * is slid out.\n   *\n   * @param {number} amount - The amount to translate the element by.\n   * @returns {function} - A function that applies the slideY styles.\n   */\n  const setSlideY = (amount = 100) =>\n    nodeStyler.set({ transform: `translateY(${amount}%)` });\n\n  /**\n   * Applies the slideIn styles without animating, useful when initial state\n   * is slid in.\n   */\n  function setSlideReset() {\n    nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });\n  }\n\n  return {\n    slideX,\n    slideY,\n    setSlideX,\n    setSlideY,\n    setSlideReset,\n  };\n};\n\nexport { useSlide };\n"]}

package/dist/collection/collection-manifest.json

@@ -37,11 +37,11 @@
     "components/nv-menu/nv-menu.js",
     "components/nv-menuitem/nv-menuitem.js",
     "components/nv-notification/nv-notification.js",
+    "components/nv-notificationcontainer/nv-notificationcontainer.js",
     "components/nv-popover/nv-popover.js",
     "components/nv-row/nv-row.js",
     "components/nv-stack/nv-stack.js",
     "components/nv-table/nv-table.js",
-    "components/nv-tablecolumn/nv-tablecolumn.js",
     "components/nv-toggle/nv-toggle.js",
     "components/nv-togglebutton/nv-togglebutton.js",
     "components/nv-togglebuttongroup/nv-togglebuttongroup.js",

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

@@ -50,7 +50,7 @@ export class NvAccordion {
         const item = items[index];
         if (!item || item.disabled) {
             console.warn('[toggleItem] Item not found or disabled:', index);
-            this.openChanged.emit({ openIndexes: [...(this.openIndexes || [])] });
+            this.openIndexesChanged.emit([...(this.openIndexes || [])]);
             return;
         }
         let openIndexes = [...(this.openIndexes || [])];
@@ -78,7 +78,7 @@ export class NvAccordion {
         this.openIndexes = [...openIndexes];
         this.updateChildrenState();
         this.updatingFromInternal = false;
-        this.openChanged.emit({ openIndexes: [...openIndexes] });
+        this.openIndexesChanged.emit([...openIndexes]);
     }
     /**
      * Updates the open state of child elements based on openIndexes
@@ -145,7 +145,7 @@ export class NvAccordion {
                 this.updatingFromInternal = true;
                 this.openIndexes = [...childOpenIndexes];
                 this.updatingFromInternal = false;
-                this.openChanged.emit({ openIndexes: [...this.openIndexes] });
+                this.openIndexesChanged.emit([...this.openIndexes]);
             }
         }
         // Ensure children are in sync with current openIndexes state
@@ -156,7 +156,7 @@ export class NvAccordion {
     //#region RENDER
     render() {
         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) => {
+        return (h(Host, { key: 'b7fa476c7830d6c5715ce53e42ad37253942e0e1', 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.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))));
@@ -239,18 +239,21 @@ export class NvAccordion {
     }
     static get events() {
         return [{
-                "method": "openChanged",
-                "name": "openChanged",
+                "method": "openIndexesChanged",
+                "name": "openIndexesChanged",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "bind",
+                            "text": "openIndexes"
+                        }],
                     "text": "Event emitted when an item's open state changes"
                 },
                 "complexType": {
-                    "original": "{\n    /** Index of open items */\n    openIndexes: number[];\n  }",
-                    "resolved": "{ openIndexes: number[]; }",
+                    "original": "number[]",
+                    "resolved": "number[]",
                     "references": {}
                 }
             }];

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

@@ -1 +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  forceUpdate,\n  Watch,\n} from '@stencil/core';\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  /**\n   * Data to display as a list of items (title, subtitle, content).\n   */\n  @Prop({ reflect: false })\n  readonly data: {\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   * 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: false, mutable: true })\n  openIndexes?: number[] = [];\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  private updatingFromInternal: boolean = false;\n\n  /**\n   * Reference to host element to access children\n   */\n  @Element() el!: HTMLNvAccordionElement;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item's open state changes\n   */\n  @Event()\n  openChanged: EventEmitter<{\n    /** Index of open items */\n    openIndexes: number[];\n  }>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\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  /**\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  /**\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    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n    const item = items[index];\n\n    if (!item || item.disabled) {\n      console.warn('[toggleItem] Item not found or disabled:', index);\n      this.openChanged.emit({ openIndexes: [...(this.openIndexes || [])] });\n      return;\n    }\n\n    let openIndexes = [...(this.openIndexes || [])];\n    const isOpen = openIndexes.includes(index);\n\n    if (this.mode === 'accordion') {\n      openIndexes =\n        forceOpen === false || (forceOpen === undefined && isOpen)\n          ? []\n          : [index];\n    } else {\n      if (forceOpen === false) {\n        openIndexes = openIndexes.filter(i => i !== index);\n      } else if (forceOpen === true && !isOpen) {\n        openIndexes.push(index);\n      } else if (forceOpen === undefined) {\n        openIndexes = isOpen\n          ? openIndexes.filter(i => i !== index)\n          : [...openIndexes, index];\n      }\n    }\n\n    this.updatingFromInternal = true;\n    this.openIndexes = [...openIndexes];\n    this.updateChildrenState();\n    this.updatingFromInternal = false;\n\n    this.openChanged.emit({ openIndexes: [...openIndexes] });\n  }\n\n  /**\n   * Updates the open state of child elements based on openIndexes\n   */\n  private async updateChildrenState() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n\n    items.forEach((item, i) => {\n      const shouldBeOpen = (this.openIndexes || []).includes(i);\n      item.open = shouldBeOpen;\n      item.mode = this.mode;\n      item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n      forceUpdate(item);\n    });\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    if (this.updatingFromInternal) {\n      return;\n    }\n\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      this.toggleItem(index, event.detail);\n    } else {\n      console.warn('[onItemToggle] Target item not found in items list');\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('openIndexes')\n  onOpenIndexesChange(\n    newValue: number[] | undefined,\n    oldValue: number[] | undefined,\n  ) {\n    if (\n      !this.updatingFromInternal &&\n      newValue !== undefined &&\n      newValue !== oldValue\n    ) {\n      this.updateChildrenState();\n    }\n  }\n\n  @Watch('mode')\n  onModeChange() {\n    this.updateChildrenState();\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.openIndexes === undefined) {\n      this.openIndexes = [];\n    }\n  }\n\n  async componentDidLoad() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n\n    // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n    if (\n      !this.data?.length &&\n      (!this.openIndexes || this.openIndexes.length === 0)\n    ) {\n      const childOpenIndexes = items\n        .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))\n        .filter(i => i !== -1);\n\n      if (childOpenIndexes.length > 0) {\n        this.updatingFromInternal = true;\n        this.openIndexes = [...childOpenIndexes];\n        this.updatingFromInternal = false;\n\n        this.openChanged.emit({ openIndexes: [...this.openIndexes] });\n      }\n    }\n\n    // Ensure children are in sync with current openIndexes state\n    await this.updateChildrenState();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"list\" class=\"nv-accordion\">\n        {this.data?.length ? (\n          this.data.map((item, i) => (\n            <nv-accordion-item\n              key={item.id ?? i}\n              itemTitle={item.title}\n              disabled={item.disabled}\n              open={(this.openIndexes || []).includes(i)}\n              mode={this.mode}\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\n  // #endregion RENDER\n}\n"]}
+{"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  forceUpdate,\n  Watch,\n} from '@stencil/core';\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  /**\n   * Data to display as a list of items (title, subtitle, content).\n   */\n  @Prop({ reflect: false })\n  readonly data: {\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   * 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: false, mutable: true })\n  openIndexes?: number[] = [];\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  private updatingFromInternal: boolean = false;\n\n  /**\n   * Reference to host element to access children\n   */\n  @Element() el!: HTMLNvAccordionElement;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item's open state changes\n   * @bind openIndexes\n   */\n  @Event()\n  openIndexesChanged: EventEmitter<number[]>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\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  /**\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  /**\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    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n    const item = items[index];\n\n    if (!item || item.disabled) {\n      console.warn('[toggleItem] Item not found or disabled:', index);\n      this.openIndexesChanged.emit([...(this.openIndexes || [])]);\n      return;\n    }\n\n    let openIndexes = [...(this.openIndexes || [])];\n    const isOpen = openIndexes.includes(index);\n\n    if (this.mode === 'accordion') {\n      openIndexes =\n        forceOpen === false || (forceOpen === undefined && isOpen)\n          ? []\n          : [index];\n    } else {\n      if (forceOpen === false) {\n        openIndexes = openIndexes.filter(i => i !== index);\n      } else if (forceOpen === true && !isOpen) {\n        openIndexes.push(index);\n      } else if (forceOpen === undefined) {\n        openIndexes = isOpen\n          ? openIndexes.filter(i => i !== index)\n          : [...openIndexes, index];\n      }\n    }\n\n    this.updatingFromInternal = true;\n    this.openIndexes = [...openIndexes];\n    this.updateChildrenState();\n    this.updatingFromInternal = false;\n\n    this.openIndexesChanged.emit([...openIndexes]);\n  }\n\n  /**\n   * Updates the open state of child elements based on openIndexes\n   */\n  private async updateChildrenState() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n\n    items.forEach((item, i) => {\n      const shouldBeOpen = (this.openIndexes || []).includes(i);\n      item.open = shouldBeOpen;\n      item.mode = this.mode;\n      item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n      forceUpdate(item);\n    });\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    if (this.updatingFromInternal) {\n      return;\n    }\n\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      this.toggleItem(index, event.detail);\n    } else {\n      console.warn('[onItemToggle] Target item not found in items list');\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('openIndexes')\n  onOpenIndexesChange(\n    newValue: number[] | undefined,\n    oldValue: number[] | undefined,\n  ) {\n    if (\n      !this.updatingFromInternal &&\n      newValue !== undefined &&\n      newValue !== oldValue\n    ) {\n      this.updateChildrenState();\n    }\n  }\n\n  @Watch('mode')\n  onModeChange() {\n    this.updateChildrenState();\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.openIndexes === undefined) {\n      this.openIndexes = [];\n    }\n  }\n\n  async componentDidLoad() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n\n    // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n    if (\n      !this.data?.length &&\n      (!this.openIndexes || this.openIndexes.length === 0)\n    ) {\n      const childOpenIndexes = items\n        .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))\n        .filter(i => i !== -1);\n\n      if (childOpenIndexes.length > 0) {\n        this.updatingFromInternal = true;\n        this.openIndexes = [...childOpenIndexes];\n        this.updatingFromInternal = false;\n\n        this.openIndexesChanged.emit([...this.openIndexes]);\n      }\n    }\n\n    // Ensure children are in sync with current openIndexes state\n    await this.updateChildrenState();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"list\" class=\"nv-accordion\">\n        {this.data?.length ? (\n          this.data.map((item, i) => (\n            <nv-accordion-item\n              key={item.id ?? i}\n              itemTitle={item.title}\n              disabled={item.disabled}\n              open={(this.openIndexes || []).includes(i)}\n              mode={this.mode}\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\n  // #endregion RENDER\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n  private isToggling: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Item title (displayed if header slot is absent)\n   */\n  @Prop({ reflect: true })\n  readonly itemTitle?: string;\n\n  /**\n   * Item subtitle (displayed if header slot is absent)\n   */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n\n  /**\n   * Open or closed\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Disables the item\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Maximum content height (in px, optional). If not defined, auto height.\n   */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n\n  /**\n   * Parent expansion mode (accordion or multi)\n   */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted on toggle (header click or programmatic change)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n\n  /**\n   * Internal state for open/close rendering\n   */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    if (this.disabled) {\n      console.warn('[onOpenChanged] Item is disabled, forcing closed state');\n      this.currentOpenState = false;\n      this.open = false;\n      return;\n    }\n\n    this.currentOpenState = newValue;\n\n    const isInitialRender = oldValue === undefined;\n    if (!isInitialRender) {\n      if (newValue === false && !this.isToggling) {\n        this.itemToggle.emit(newValue);\n      } else if (newValue && !this.isToggling) {\n        this.itemToggle.emit(newValue);\n      }\n      await this.updateVisibility(newValue);\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) {\n      console.error('[updateVisibility] No contentRef available');\n      return;\n    }\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      await expand();\n    } else {\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.currentOpenState = this.open;\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      setTimeout(() => {\n        const { setExpanded, setCollapsed } = useCollapse(this.contentRef!, {\n          duration: 200,\n        });\n\n        if (this.open) {\n          setExpanded();\n          this.currentOpenState = true;\n        } else {\n          setCollapsed();\n          this.currentOpenState = false;\n        }\n        this.isInitialized = true;\n      }, 0);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.isToggling = true;\n      const newOpen = !this.open;\n\n      this.open = newOpen;\n      this.itemToggle.emit(newOpen);\n\n      this.isToggling = false;\n    } else {\n      console.warn('[toggle] Ignored toggle (disabled or animating)');\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation();\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) {\n      console.warn('[handleHeaderKeyDown] Ignored (disabled)');\n      return;\n    }\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.isToggling = true;\n          this.open = true;\n          this.itemToggle.emit(true);\n          this.isToggling = false;\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.isToggling = true;\n          this.open = false;\n          this.itemToggle.emit(false);\n          this.isToggling = false;\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    const name = this.open ? 'chevron-top' : 'chevron-down';\n    return name;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.currentOpenState,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.currentOpenState ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemTitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-controls=\"content\"\n            aria-label={\n              this.currentOpenState ? 'Close the section' : 'Open the section'\n            }\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n  private isToggling: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Item title (displayed if header slot is absent)\n   */\n  @Prop({ reflect: true })\n  readonly itemTitle?: string;\n\n  /**\n   * Item subtitle (displayed if header slot is absent)\n   */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n\n  /**\n   * Open or closed\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Disables the item\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Maximum content height (in px, optional). If not defined, auto height.\n   */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n\n  /**\n   * Parent expansion mode (accordion or multi)\n   */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted on toggle (header click or programmatic change)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n\n  /**\n   * Internal state for open/close rendering\n   */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    if (this.disabled) {\n      console.warn('[onOpenChanged] Item is disabled, forcing closed state');\n      this.currentOpenState = false;\n      this.open = false;\n      return;\n    }\n\n    this.currentOpenState = newValue;\n\n    const isInitialRender = oldValue === undefined;\n    if (!isInitialRender) {\n      if (newValue === false && !this.isToggling) {\n        this.itemToggle.emit(newValue);\n      } else if (newValue && !this.isToggling) {\n        this.itemToggle.emit(newValue);\n      }\n      await this.updateVisibility(newValue);\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) {\n      console.error('[updateVisibility] No contentRef available');\n      return;\n    }\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      await expand();\n    } else {\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.currentOpenState = this.open;\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      setTimeout(() => {\n        const { setExpanded, setCollapsed } = useCollapse(this.contentRef!, {\n          duration: 200,\n        });\n\n        if (this.open) {\n          setExpanded();\n          this.currentOpenState = true;\n        } else {\n          setCollapsed();\n          this.currentOpenState = false;\n        }\n        this.isInitialized = true;\n      }, 0);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.isToggling = true;\n      const newOpen = !this.open;\n\n      this.open = newOpen;\n      this.itemToggle.emit(newOpen);\n\n      this.isToggling = false;\n    } else {\n      console.warn('[toggle] Ignored toggle (disabled or animating)');\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation();\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) {\n      console.warn('[handleHeaderKeyDown] Ignored (disabled)');\n      return;\n    }\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.isToggling = true;\n          this.open = true;\n          this.itemToggle.emit(true);\n          this.isToggling = false;\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.isToggling = true;\n          this.open = false;\n          this.itemToggle.emit(false);\n          this.isToggling = false;\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    const name = this.open ? 'chevron-top' : 'chevron-down';\n    return name;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.currentOpenState,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.currentOpenState ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemTitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-controls=\"content\"\n            aria-label={\n              this.currentOpenState ? 'Close the section' : 'Open the section'\n            }\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -54,7 +54,7 @@ nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner
   /* text/md/medium */
   font-size: var(--font-size-md);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--line-height-base); /* 150% */
 }
 nv-accordion-item.is-disabled {

package/dist/collection/components/nv-alert/nv-alert.css

@@ -6,7 +6,7 @@ nv-alert {
   position: relative;
   gap: var(--alert-gap-x);
   border-radius: var(--alert-radius);
-  font-family: "TT Norms Pro", "Montserrat", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
 }
 nv-alert > nv-icon {
   margin-left: var(--alert-icon-position-x);

package/dist/collection/components/nv-avatar/nv-avatar.css

@@ -7,7 +7,7 @@ nv-avatar {
   border-radius: var(--radius-rounded-full) !important;
   display: flex !important;
   flex-shrink: 0 !important;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-style: normal;
   font-weight: var(--font-weight-medium-emphasis);
   justify-content: center !important;

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

@@ -89,8 +89,8 @@ export class NvBadge {
         this.hiddenChanged.emit(hidden);
         if (this._isHidden === true)
             this._isHidden = hidden;
-        const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
-        const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
+        const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });
+        const { collapse, expand } = useCollapse(this.el, { duration: 150 });
         if (hidden === true)
             await timeline(fadeOut, collapse).start();
         if (hidden === false)
@@ -114,8 +114,8 @@ export class NvBadge {
         }
         if (this.hidden) {
             this._isHidden = true;
-            const { setCollapsed } = useCollapse(this.ref);
-            const { setFadeOut } = useFade(this.ref);
+            const { setCollapsed } = useCollapse(this.el);
+            const { setFadeOut } = useFade(this.el);
             setCollapsed();
             setFadeOut();
         }
@@ -124,12 +124,12 @@ export class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '0e8a142c25a7cb078e8b953794f199135c11b616', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
                 'is-icon-only': this.isIconOnly,
-            }) }, h("slot", { key: '271dc833471e026af5088f48227639682e661e97', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'e578eabf4c5a09e61e28c3839b943804acdf88e8', name: this.leadIcon, size: "sm" })), h("span", { key: '24d16a21b2b4499be712f9b747c9ab63c5e6ca0c', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '3e3827620e6ade8be256ce7dd0b8bb949f36f2d5' })), this.dismissible && (h("button", { key: '90ed9ec1b71815554b963b0eafeb5536578700cf', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: 'df426e5d88c2bf02e7aa83c179c05db4795f03db', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: 'a3862245400e63270443b78f21dad3571eb08e5b', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: '46b69a8544e01ff2f738a050cb2502528fa42b04', name: this.leadIcon, size: "sm" })), h("span", { key: '8b17eeb60dee162baa98c14ccd4d5aa52c01fffc', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: 'e7bad18f496e001acbdae89b93b8e614f4fcc914' })), this.dismissible && (h("button", { key: '66cdb2c94b7832ea8cd4612326e6399a9ea77bb7', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '399de04fb2fc7d5391c9ebf39e953b12e21fb219', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {
@@ -406,7 +406,7 @@ export class NvBadge {
                 }
             }];
     }
-    static get elementRef() { return "ref"; }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "dismissal",

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

@@ -1 +1 @@
-{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop({ reflect: true })\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge.\n   * deprecated Use status values or named colors instead.\n   * Use a string between 1 to 10\n   * or one of the status values: error, information, neutral, success, warning\n   * or one of the color names: amber, orange, turquoise, crimson, lime\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * When true, the badge will only display an icon without label.\n   * The label will be visually hidden but still accessible for screen readers.\n   */\n  @Prop({ reflect: true })\n  readonly isIconOnly?: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      this._isHidden = true;\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   */\n  private readonly handleClose = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n          'is-icon-only': this.isIconOnly,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n        </slot>\n\n        <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n          {this.label}\n          <slot></slot>\n        </span>\n\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() el: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop({ reflect: true })\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge.\n   * deprecated Use status values or named colors instead.\n   * Use a string between 1 to 10\n   * or one of the status values: error, information, neutral, success, warning\n   * or one of the color names: amber, orange, turquoise, crimson, lime\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * When true, the badge will only display an icon without label.\n   * The label will be visually hidden but still accessible for screen readers.\n   */\n  @Prop({ reflect: true })\n  readonly isIconOnly?: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.el, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      this._isHidden = true;\n      const { setCollapsed } = useCollapse(this.el);\n      const { setFadeOut } = useFade(this.el);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   */\n  private readonly handleClose = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n          'is-icon-only': this.isIconOnly,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n        </slot>\n\n        <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n          {this.label}\n          <slot></slot>\n        </span>\n\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.css

@@ -4,7 +4,7 @@ nv-breadcrumb {
   color: var(--components-breadcrumb-text);
   font-size: var(--font-size-sm);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--line-height-sm);
 }
 nv-breadcrumb.visually-hidden {

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

@@ -5,7 +5,7 @@ nv-button {
   align-items: center;
   font-style: normal;
   font-weight: var(--font-weight-medium-emphasis);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   transition: background-color 150ms ease-out;
   user-select: none;
   cursor: pointer;

package/dist/collection/components/nv-datagrid/nv-datagrid.css

@@ -37,7 +37,7 @@ nv-datagrid th {
   height: var(--spacing-12);
   padding: var(--spacing-3) var(--spacing-4);
   font-size: var(--font-size-md);
-  font-weight: 700;
+  font-weight: var(--font-weight-high-emphasis);
   color: var(--components-datagrid-header-text);
 }
 nv-datagrid td {
@@ -46,7 +46,7 @@ nv-datagrid td {
   max-height: var(--spacing-14);
   padding: var(--spacing-2) var(--spacing-4);
   font-size: var(--font-size-md);
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   color: var(--components-datagrid-body-text);
   white-space: nowrap;
   text-overflow: ellipsis;

package/dist/collection/components/nv-dialog/nv-dialog.css

@@ -48,10 +48,10 @@ dialog .content .content-body {
   padding: var(--dialog-body-padding-y) var(--dialog-body-padding-x);
   scrollbar-gutter: stable both-edges;
   /* text/md/regular */
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--font-size-md);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--line-height-base); /* 150% */
   color: var(--color-content-medium-text);
 }