@nova-design-system/nova-webcomponents 3.20.0 → 3.21.0

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

@@ -46,6 +46,11 @@ export class NvIconbutton {
          * Sets the shape of the button. Choose between square and rounded.
          */
         this.shape = 'square';
+        /**
+         * Use this to make the button skip-able when users navigate with the keyboard.
+         * The button remains clickable but won’t be reached via the Tab key.
+         */
+        this.disableTabindex = false;
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region METHODS
@@ -111,7 +116,7 @@ export class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '5590d5f6378669a2f74ce93d33ac14c86f435523', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: 'f88ed8a8b579d15318f419c8072a4c14e56990ce', size: this.size }), !this.loading && h("nv-icon", { key: '12b3fc9818014ea93237e8037ce2d90ee214517a', name: this.name, size: this.size }), h("slot", { key: '97e130b7caf544954f3168866429ed7633e46301' })));
+        return (h(Host, { key: 'f3d9a8c4f5f3b549595b1a4b8eecddae89b23909', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '9f25f8a2c72279f1ad4c92ed6e17341e4b43f26e', size: this.size }), !this.loading && h("nv-icon", { key: 'aa0d10482d4dded8f6680afe066c3c8d781160ef', name: this.name, size: this.size }), h("slot", { key: 'dc2a1ca7305ae4b14924d7acb79286596e5b358f' })));
     }
     static get is() { return "nv-iconbutton"; }
     static get formAssociated() { return true; }
@@ -315,6 +320,26 @@ export class NvIconbutton {
                 "attribute": "shape",
                 "reflect": true,
                 "defaultValue": "'square'"
+            },
+            "disableTabindex": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to make the button skip-able when users navigate with the keyboard.\nThe button remains clickable but won\u2019t be reached via the Tab key."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-tabindex",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"nv-iconbutton.js","sourceRoot":"","sources":["../../../src/components/nv-iconbutton/nv-iconbutton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: `${IconButtonShape}` = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-iconbutton.js","sourceRoot":"","sources":["../../../src/components/nv-iconbutton/nv-iconbutton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AAUxB;;GAEG;AAQH,MAAM,OAAO,YAAY;IAPzB;QAWE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAAoB,IAAI,CAAC;QAEtC;;;;WAIG;QAEM,aAAQ,GAAwB,MAAM,CAAC;QAEhD;;;;;;WAMG;QAEH,YAAO,GAAY,KAAK,CAAC;QAEzB;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAUjC;;;;WAIG;QAEM,SAAI,GAAoB,QAAQ,CAAC;QAE1C;;WAEG;QAEM,UAAK,GAAyB,QAAQ,CAAC;QAEhD;;;WAGG;QAEM,oBAAe,GAAY,KAAK,CAAC;QAE1C,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;;WAKG;QACK,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;;YACrC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;YACxC,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;KAgFH;IA9EC,oBAAoB;IACpB,8EAA8E;IAC9E,kBAAkB;IAGlB,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,gBAAgB;IAGhB,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAGD,gBAAgB,CAAC,KAAiB;QAChC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QACrC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,mBAAmB;IACnB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,IAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW;YAExB,IAAI,CAAC,OAAO,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc;YAExD,CAAC,IAAI,CAAC,OAAO,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YAE/D,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: `${IconButtonShape}` = 'square';\n\n  /**\n   * Use this to make the button skip-able when users navigate with the keyboard.\n   * The button remains clickable but won’t be reached via the Tab key.\n   */\n  @Prop({ reflect: true })\n  readonly disableTabindex: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex={this.disableTabindex ? -1 : 0}\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -82,7 +82,7 @@ export class NvMenuitem {
                 "mutable": false,
                 "complexType": {
                     "original": "`${IconName}`",
-                    "resolved": "\"home\" | \"photo\" | \"access-point-off\" | \"access-point\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"adjustments\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back-up\" | \"arrow-back\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-forward-up\" | \"arrow-forward\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrow-up\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"battery\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bell\" | \"bike\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bluetooth\" | \"bolt-off\" | \"bolt\" | \"book\" | \"bookmark-off\" | \"bookmark\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"browser\" | \"brush\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"building\" | \"bulb-off\" | \"bulb\" | \"cake\" | \"calendar-time\" | \"calendar\" | \"camera-off\" | \"camera\" | \"car-crane\" | \"car\" | \"caravan\" | \"cash-banknote\" | \"cash\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area-line\" | \"chart-area\" | \"chart-arrows-vertical\" | \"chart-arrows\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clipboard\" | \"clock-edit\" | \"clock\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"cloud\" | \"collapse-close\" | \"collapse-open\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile-rotated\" | \"device-mobile\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction-horizontal\" | \"direction-sign\" | \"direction\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots-vertical\" | \"dots\" | \"download\" | \"drone\" | \"droplet-filled\" | \"droplet-half\" | \"droplet\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser-off\" | \"eraser\" | \"external-link\" | \"eye-off\" | \"eye\" | \"face-id\" | \"feather\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text-bookmark\" | \"file-text\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"file\" | \"files-off\" | \"files\" | \"filter-off\" | \"filter-sort\" | \"filter\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folder\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge-off\" | \"gauge\" | \"gift\" | \"git-branch-delete\" | \"git-branch\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"git-pull-request\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones-off\" | \"headphones\" | \"headset\" | \"heart-off\" | \"heart\" | \"heartbeat\" | \"helicopter\" | \"helmet-swopp\" | \"helmet\" | \"help\" | \"history\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"hourglass\" | \"inbox\" | \"info-circle\" | \"keyboard-hide\" | \"keyboard-show\" | \"keyboard\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"layout\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list-search\" | \"list\" | \"loader\" | \"location\" | \"lock-off\" | \"lock-open\" | \"lock\" | \"login\" | \"logout\" | \"mail-forward\" | \"mail-opened\" | \"mail\" | \"map-pin-2\" | \"map-pin-off\" | \"map-pin\" | \"map\" | \"master-data\" | \"menu\" | \"message-dots\" | \"message-off\" | \"message\" | \"messages\" | \"microphone-off\" | \"microphone\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"phone\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned-off\" | \"pinned\" | \"plane-off\" | \"plane\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug-connected\" | \"plug\" | \"plus\" | \"power-ac\" | \"power-dc\" | \"power\" | \"presentation-analytics\" | \"presentation\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle-2\" | \"puzzle\" | \"pylon\" | \"qrcode\" | \"quotes-open\" | \"quotes\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt\" | \"recharging\" | \"recycle\" | \"refresh-alert\" | \"refresh-off\" | \"refresh\" | \"repeat-once\" | \"repeat\" | \"replace\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"report\" | \"ripple-off\" | \"ripple\" | \"rocket\" | \"rotate-2\" | \"rotate-clockwise-2\" | \"rotate-clockwise\" | \"rotate-dot\" | \"rotate\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share-2\" | \"share\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"shield\" | \"ship-off\" | \"ship\" | \"shopping-cart\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature-off\" | \"temperature\" | \"template\" | \"terminal\" | \"text-size\" | \"text\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash-off\" | \"trash\" | \"tree\" | \"trees\" | \"truck-delivery\" | \"truck\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"user\" | \"users\" | \"versions\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"video\" | \"volume-2\" | \"volume-3\" | \"volume\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi-off\" | \"wifi\" | \"wind-direction\" | \"wind\" | \"windmill\" | \"wood\" | \"world-code\" | \"world\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "resolved": "\"home\" | \"photo\" | \"access-point-off\" | \"access-point\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"adjustments\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back-up\" | \"arrow-back\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-forward-up\" | \"arrow-forward\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrow-up\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"battery\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bell\" | \"bike\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bluetooth\" | \"bolt-off\" | \"bolt\" | \"book\" | \"bookmark-off\" | \"bookmark\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"browser\" | \"brush\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"building\" | \"bulb-off\" | \"bulb\" | \"cake\" | \"calendar-time\" | \"calendar\" | \"camera-off\" | \"camera\" | \"car-crane\" | \"car\" | \"caravan\" | \"cash-banknote\" | \"cash\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area-line\" | \"chart-area\" | \"chart-arrows-vertical\" | \"chart-arrows\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clipboard\" | \"clock-edit\" | \"clock\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"cloud\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile-rotated\" | \"device-mobile\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction-horizontal\" | \"direction-sign\" | \"direction\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots-vertical\" | \"dots\" | \"download\" | \"drone\" | \"droplet-filled\" | \"droplet-half\" | \"droplet\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser-off\" | \"eraser\" | \"external-link\" | \"eye-off\" | \"eye\" | \"face-id\" | \"feather\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text-bookmark\" | \"file-text\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"file\" | \"files-off\" | \"files\" | \"filter-off\" | \"filter-sort\" | \"filter\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folder\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge-off\" | \"gauge\" | \"gift\" | \"git-branch-delete\" | \"git-branch\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"git-pull-request\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones-off\" | \"headphones\" | \"headset\" | \"heart-off\" | \"heart\" | \"heartbeat\" | \"helicopter\" | \"helmet-swopp\" | \"helmet\" | \"help\" | \"history\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"hourglass\" | \"inbox\" | \"info-circle\" | \"keyboard-hide\" | \"keyboard-show\" | \"keyboard\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"layout\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list-search\" | \"list\" | \"loader\" | \"location\" | \"lock-off\" | \"lock-open\" | \"lock\" | \"login\" | \"logout\" | \"mail-forward\" | \"mail-opened\" | \"mail\" | \"map-pin-2\" | \"map-pin-off\" | \"map-pin\" | \"map\" | \"master-data\" | \"menu\" | \"message-dots\" | \"message-off\" | \"message\" | \"messages\" | \"microphone-off\" | \"microphone\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"phone\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned-off\" | \"pinned\" | \"plane-off\" | \"plane\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug-connected\" | \"plug\" | \"plus\" | \"power-ac\" | \"power-dc\" | \"power\" | \"presentation-analytics\" | \"presentation\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle-2\" | \"puzzle\" | \"pylon\" | \"qrcode\" | \"quotes-open\" | \"quotes\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt\" | \"recharging\" | \"recycle\" | \"refresh-alert\" | \"refresh-off\" | \"refresh\" | \"repeat-once\" | \"repeat\" | \"replace\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"report\" | \"ripple-off\" | \"ripple\" | \"rocket\" | \"rotate-2\" | \"rotate-clockwise-2\" | \"rotate-clockwise\" | \"rotate-dot\" | \"rotate\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share-2\" | \"share\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"shield\" | \"ship-off\" | \"ship\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature-off\" | \"temperature\" | \"template\" | \"terminal\" | \"text-size\" | \"text\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash-off\" | \"trash\" | \"tree\" | \"trees\" | \"truck-delivery\" | \"truck\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"user\" | \"users\" | \"versions\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"video\" | \"volume-2\" | \"volume-3\" | \"volume\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi-off\" | \"wifi\" | \"wind-direction\" | \"wind\" | \"windmill\" | \"wood\" | \"world-code\" | \"world\" | \"writing\" | \"x\" | \"zoom-reset\"",
                     "references": {
                         "IconName": {
                             "location": "import",

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
 const NvTableDocs = {
     component: 'nv-table',
+    subcomponents: ['nv-tableheader'],
+    composedComponents: ['nv-tableheader'],
     stories: [
         {
             name: 'Default',
             description: 'The NvTable behaves just like a native HTML table element, but is enhanced with Nova styles and additional functionality. Use standard table elements (thead, tbody, tfoot, tr, th, td) as children.',
             template: (h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", null, "Name"), h("th", null, "Age"), h("th", null, "Email"))), h("tbody", null, h("tr", null, h("td", null, "Alice Johnson"), h("td", null, "25"), h("td", null, "alice.johnson@example.com")), h("tr", null, h("td", null, "Bob Smith"), h("td", null, "30"), h("td", null, "bob.smith@example.com")), h("tr", null, h("td", null, "Charlie Brown"), h("td", null, "35"), h("td", null, "charlie.brown@example.com")))))),
         },
+        {
+            name: 'TableWithTableheader',
+            description: 'Use the nv-tableheader component to add a header with additional features row to the table.',
+            template: (h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", null, h("nv-tableheader", { sortable: true }, "Name")), h("th", null, h("nv-tableheader", { sortable: true }, "Age")))), h("tbody", null, h("tr", null, h("td", null, "Alice Johnson"), h("td", null, "25")), h("tr", null, h("td", null, "Bob Smith"), h("td", null, "30")), h("tr", null, h("td", null, "Charlie Brown"), h("td", null, "35")))))),
+        },
         {
             name: 'ColumnResizingWidthClasses',
             description: 'Columns can be resized by default. Use width classes (like w-10) to set initial column widths. Use data-no-resize attribute to prevent specific columns from being resized. Columns without fixed widths will grow to fill available space.',

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

@@ -1 +1 @@
-{"version":3,"file":"nv-table.docs.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.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 NvTableDocs: NovaDocs<Components.NvTable> = {\n  component: 'nv-table',\n  stories: [\n    {\n      name: 'Default',\n      description:\n        'The NvTable behaves just like a native HTML table element, but is enhanced with Nova styles and additional functionality. Use standard table elements (thead, tbody, tfoot, tr, th, td) as children.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Age</th>\n                <th>Email</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n                <td>alice.johnson@example.com</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n                <td>bob.smith@example.com</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n                <td>charlie.brown@example.com</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'ColumnResizingWidthClasses',\n      description:\n        'Columns can be resized by default. Use width classes (like w-10) to set initial column widths. Use data-no-resize attribute to prevent specific columns from being resized. Columns without fixed widths will grow to fill available space.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th data-class=\"w-10\">Name</th>\n                <th data-class=\"w-10\">Age</th>\n                <th data-no-resize>Email (grows to fill space)</th>\n                <th data-class=\"w-10\" data-no-resize>\n                  Actions\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n                <td>alice.johnson@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n                <td>bob.smith@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n                <td>charlie.brown@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'RowSelection',\n      description:\n        'Use the data-selected attribute on table rows to apply selection styling and indicate the currently selected row.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Department</th>\n                <th>Status</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>Engineering</td>\n                <td>Active</td>\n              </tr>\n              <tr data-selected>\n                <td>Bob Smith</td>\n                <td>Design</td>\n                <td>Active</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>Product</td>\n                <td>Inactive</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'StickyHeader',\n      description:\n        'Use data-sticky-top on thead elements to make the header stick to the top during vertical scrolling. This is useful for long tables where you want to keep column headers visible.',\n      template: (\n        <div data-class=\"h-40 overflow-y-auto\">\n          <nv-table data-storybook-args>\n            <table>\n              <thead data-sticky-top>\n                <tr>\n                  <th>Name</th>\n                  <th>Position</th>\n                  <th>Department</th>\n                </tr>\n              </thead>\n              <tbody>\n                {Array(10)\n                  .fill(0)\n                  .map((_, index) => (\n                    <tr key={index}>\n                      <td>Employee {index + 1}</td>\n                      <td>Developer</td>\n                      <td>Engineering</td>\n                    </tr>\n                  ))}\n              </tbody>\n            </table>\n          </nv-table>\n        </div>\n      ),\n    },\n    {\n      name: 'StickyColumnsHorizontalScroll',\n      description:\n        'Use data-sticky-left and data-sticky-right on th/td elements to make columns stick during horizontal scrolling. Apply the same attribute to both header and data cells. Requires an overflow-x-auto container.',\n      template: (\n        <div data-class=\"overflow-x-auto\">\n          <nv-table data-storybook-args>\n            <table>\n              <thead>\n                <tr>\n                  <th data-sticky-left>Name</th>\n                  <th>Position</th>\n                  <th>Department</th>\n                  <th>Email</th>\n                  <th>Phone</th>\n                  <th>Address</th>\n                  <th>Start Date</th>\n                  <th>Salary</th>\n                  <th>Manager</th>\n                  <th>Skills</th>\n                  <th>Notes</th>\n                  <th>Website</th>\n                  <th data-sticky-right>Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <td data-sticky-left>John Doe</td>\n                  <td>Senior Developer</td>\n                  <td>Engineering</td>\n                  <td>john.doe@company.com</td>\n                  <td>+1-555-0123</td>\n                  <td>123 Main St, NY 10001</td>\n                  <td>2022-03-10</td>\n                  <td>$95,000</td>\n                  <td>Sarah Wilson</td>\n                  <td>React, TypeScript, Node.js</td>\n                  <td>Team lead with React expertise</td>\n                  <td>johndoe.dev</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n                <tr>\n                  <td data-sticky-left>Jane Smith</td>\n                  <td>UX Designer</td>\n                  <td>Design</td>\n                  <td>jane.smith@company.com</td>\n                  <td>+1-555-0456</td>\n                  <td>456 Oak Ave, LA 90210</td>\n                  <td>2021-09-15</td>\n                  <td>$87,000</td>\n                  <td>Tom Anderson</td>\n                  <td>Figma, Adobe CC, User Research</td>\n                  <td>Creative designer with 8 years experience</td>\n                  <td>janesmith.design</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n                <tr>\n                  <td data-sticky-left>Mike Johnson</td>\n                  <td>Product Manager</td>\n                  <td>Product</td>\n                  <td>mike.johnson@company.com</td>\n                  <td>+1-555-0789</td>\n                  <td>789 Pine St, Chicago 60601</td>\n                  <td>2020-01-08</td>\n                  <td>$110,000</td>\n                  <td>Lisa Chen</td>\n                  <td>Agile, Scrum, Product Strategy</td>\n                  <td>Experienced project manager and strategist</td>\n                  <td>mikejohnson.biz</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n              </tbody>\n            </table>\n          </nv-table>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvTableDocs;\n"]}
+{"version":3,"file":"nv-table.docs.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.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 NvTableDocs: NovaDocs<Components.NvTable> = {\n  component: 'nv-table',\n  subcomponents: ['nv-tableheader'],\n  composedComponents: ['nv-tableheader'],\n  stories: [\n    {\n      name: 'Default',\n      description:\n        'The NvTable behaves just like a native HTML table element, but is enhanced with Nova styles and additional functionality. Use standard table elements (thead, tbody, tfoot, tr, th, td) as children.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Age</th>\n                <th>Email</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n                <td>alice.johnson@example.com</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n                <td>bob.smith@example.com</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n                <td>charlie.brown@example.com</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'TableWithTableheader',\n      description:\n        'Use the nv-tableheader component to add a header with additional features row to the table.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>\n                  <nv-tableheader sortable>Name</nv-tableheader>\n                </th>\n                <th>\n                  <nv-tableheader sortable>Age</nv-tableheader>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'ColumnResizingWidthClasses',\n      description:\n        'Columns can be resized by default. Use width classes (like w-10) to set initial column widths. Use data-no-resize attribute to prevent specific columns from being resized. Columns without fixed widths will grow to fill available space.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th data-class=\"w-10\">Name</th>\n                <th data-class=\"w-10\">Age</th>\n                <th data-no-resize>Email (grows to fill space)</th>\n                <th data-class=\"w-10\" data-no-resize>\n                  Actions\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n                <td>alice.johnson@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n                <td>bob.smith@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n                <td>charlie.brown@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'RowSelection',\n      description:\n        'Use the data-selected attribute on table rows to apply selection styling and indicate the currently selected row.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Department</th>\n                <th>Status</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>Engineering</td>\n                <td>Active</td>\n              </tr>\n              <tr data-selected>\n                <td>Bob Smith</td>\n                <td>Design</td>\n                <td>Active</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>Product</td>\n                <td>Inactive</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'StickyHeader',\n      description:\n        'Use data-sticky-top on thead elements to make the header stick to the top during vertical scrolling. This is useful for long tables where you want to keep column headers visible.',\n      template: (\n        <div data-class=\"h-40 overflow-y-auto\">\n          <nv-table data-storybook-args>\n            <table>\n              <thead data-sticky-top>\n                <tr>\n                  <th>Name</th>\n                  <th>Position</th>\n                  <th>Department</th>\n                </tr>\n              </thead>\n              <tbody>\n                {Array(10)\n                  .fill(0)\n                  .map((_, index) => (\n                    <tr key={index}>\n                      <td>Employee {index + 1}</td>\n                      <td>Developer</td>\n                      <td>Engineering</td>\n                    </tr>\n                  ))}\n              </tbody>\n            </table>\n          </nv-table>\n        </div>\n      ),\n    },\n    {\n      name: 'StickyColumnsHorizontalScroll',\n      description:\n        'Use data-sticky-left and data-sticky-right on th/td elements to make columns stick during horizontal scrolling. Apply the same attribute to both header and data cells. Requires an overflow-x-auto container.',\n      template: (\n        <div data-class=\"overflow-x-auto\">\n          <nv-table data-storybook-args>\n            <table>\n              <thead>\n                <tr>\n                  <th data-sticky-left>Name</th>\n                  <th>Position</th>\n                  <th>Department</th>\n                  <th>Email</th>\n                  <th>Phone</th>\n                  <th>Address</th>\n                  <th>Start Date</th>\n                  <th>Salary</th>\n                  <th>Manager</th>\n                  <th>Skills</th>\n                  <th>Notes</th>\n                  <th>Website</th>\n                  <th data-sticky-right>Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <td data-sticky-left>John Doe</td>\n                  <td>Senior Developer</td>\n                  <td>Engineering</td>\n                  <td>john.doe@company.com</td>\n                  <td>+1-555-0123</td>\n                  <td>123 Main St, NY 10001</td>\n                  <td>2022-03-10</td>\n                  <td>$95,000</td>\n                  <td>Sarah Wilson</td>\n                  <td>React, TypeScript, Node.js</td>\n                  <td>Team lead with React expertise</td>\n                  <td>johndoe.dev</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n                <tr>\n                  <td data-sticky-left>Jane Smith</td>\n                  <td>UX Designer</td>\n                  <td>Design</td>\n                  <td>jane.smith@company.com</td>\n                  <td>+1-555-0456</td>\n                  <td>456 Oak Ave, LA 90210</td>\n                  <td>2021-09-15</td>\n                  <td>$87,000</td>\n                  <td>Tom Anderson</td>\n                  <td>Figma, Adobe CC, User Research</td>\n                  <td>Creative designer with 8 years experience</td>\n                  <td>janesmith.design</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n                <tr>\n                  <td data-sticky-left>Mike Johnson</td>\n                  <td>Product Manager</td>\n                  <td>Product</td>\n                  <td>mike.johnson@company.com</td>\n                  <td>+1-555-0789</td>\n                  <td>789 Pine St, Chicago 60601</td>\n                  <td>2020-01-08</td>\n                  <td>$110,000</td>\n                  <td>Lisa Chen</td>\n                  <td>Agile, Scrum, Product Strategy</td>\n                  <td>Experienced project manager and strategist</td>\n                  <td>mikejohnson.biz</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n              </tbody>\n            </table>\n          </nv-table>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvTableDocs;\n"]}

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

@@ -0,0 +1,28 @@
+nv-tableheader {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+nv-tableheader:focus-visible {
+  border-radius: var(--radius-rounded-sm);
+}
+nv-tableheader:focus-visible:focus, nv-tableheader:focus-visible:focus-within {
+  outline: none;
+}
+nv-tableheader:focus-visible:focus-visible, nv-tableheader:focus-visible:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-tableheader nv-iconbutton {
+  transition: transform 120ms ease, opacity 120ms ease;
+}
+nv-tableheader nv-iconbutton svg {
+  transition: transform 240ms ease;
+}
+nv-tableheader nv-iconbutton.is-none {
+  opacity: 0.5;
+}
+nv-tableheader nv-iconbutton.is-desc svg {
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+const NvTableheaderDocs = {
+    component: 'nv-tableheader',
+    badge: 'beta',
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-tableheader", { "data-storybook-args": true }, "Child Content")),
+        },
+    ],
+};
+export default NvTableheaderDocs;
+//# sourceMappingURL=nv-tableheader.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-tableheader.docs.js","sourceRoot":"","sources":["../../../src/components/nv-tableheader/nv-tableheader.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EAAE,MAAM;IACb,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR,qEAAkE,CACnE;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvTableheaderDocs: NovaDocs<Components.NvTableheader> = {\n  component: 'nv-tableheader',\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-tableheader data-storybook-args>Child Content</nv-tableheader>\n      ),\n    },\n  ],\n};\n\nexport default NvTableheaderDocs;\n"]}

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

@@ -0,0 +1,139 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - Child content of the component.
+ */
+export class NvTableheader {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Will render the header as sortable with the corresponding icon button.
+         * Allows the header to be tabbed, and trigger sorting via click or keyboard
+         * navigation
+         */
+        this.sortable = false;
+        /**
+         * The current sort direction of the header. Will be 'none' if the header is
+         * not sortable or if the sort direction is not set.
+         */
+        this.sortDirection = 'none';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    cycleSortDirection(e) {
+        if (!this.sortable)
+            return;
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        const next = {
+            none: 'asc',
+            asc: 'desc',
+            desc: 'none',
+        };
+        this.sortDirection = next[this.sortDirection];
+        this.sortDirectionChanged.emit(this.sortDirection);
+    }
+    handleKeyDown(event) {
+        if (!this.sortable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.cycleSortDirection();
+        }
+    }
+    get ariaSort() {
+        const sortMap = {
+            none: 'none',
+            asc: 'ascending',
+            desc: 'descending',
+        };
+        if (!this.sortable)
+            return sortMap.none;
+        return sortMap[this.sortDirection];
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'ff2fc290253d468d2d139afdc708b012258b3f31', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: '3c70c590cc33ca2d722dbc3313c9e10583bfa631' }), this.sortable && (h("span", { key: '219a872d53157545302495cec6844d55b5026e00', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: 'd39698493a8504bb7e2af6fa52ac4c548b91bf40', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+            // prevent mousedown from selecting text
+            onMouseDown: (e) => e.preventDefault(), class: {
+                'is-none': this.sortDirection === 'none',
+                'is-desc': this.sortDirection === 'desc',
+            } })))));
+    }
+    static get is() { return "nv-tableheader"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-tableheader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-tableheader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Will render the header as sortable with the corresponding icon button.\nAllows the header to be tabbed, and trigger sorting via click or keyboard\nnavigation"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sortable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "sortDirection": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'none' | 'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current sort direction of the header. Will be 'none' if the header is\nnot sortable or if the sort direction is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sort-direction",
+                "reflect": true,
+                "defaultValue": "'none'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sortDirectionChanged",
+                "name": "sortDirectionChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the sort direction changes. Payload is the new sort\ndirection."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=nv-tableheader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-tableheader.js","sourceRoot":"","sources":["../../../src/components/nv-tableheader/nv-tableheader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;GAEG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAEnC;;;WAGG;QAEH,kBAAa,GAA4B,MAAM,CAAC;KA2FjD;IAzFC,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IAET,kBAAkB,CAAC,CAAS;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,cAAc,EAAE,CAAC;QAEpB,MAAM,IAAI,GAAG;YACX,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;SACJ,CAAC;QAEX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,IAAI,QAAQ;QACV,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,MAAM;YACZ,GAAG,EAAE,WAAW;YAChB,IAAI,EAAE,YAAY;SACV,CAAC;QAEX,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrC,CAAC;IAmBD,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;YAE3C,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;gBAC7C,sEACE,eAAe,QACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;oBACzD,wCAAwC;oBACxC,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAClD,KAAK,EAAE;wBACL,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;wBACxC,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;qBACzC,GACD,CACG,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-tableheader',\n  styleUrl: 'nv-tableheader.scss',\n  shadow: false,\n})\nexport class NvTableheader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Will render the header as sortable with the corresponding icon button.\n   * Allows the header to be tabbed, and trigger sorting via click or keyboard\n   * navigation\n   */\n  @Prop({ reflect: true })\n  readonly sortable: boolean = false;\n\n  /**\n   * The current sort direction of the header. Will be 'none' if the header is\n   * not sortable or if the sort direction is not set.\n   */\n  @Prop({ reflect: true, mutable: true })\n  sortDirection: 'none' | 'asc' | 'desc' = 'none';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private cycleSortDirection(e?: Event) {\n    if (!this.sortable) return;\n    e?.preventDefault();\n\n    const next = {\n      none: 'asc',\n      asc: 'desc',\n      desc: 'none',\n    } as const;\n\n    this.sortDirection = next[this.sortDirection];\n    this.sortDirectionChanged.emit(this.sortDirection);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!this.sortable) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.cycleSortDirection();\n    }\n  }\n\n  get ariaSort() {\n    const sortMap = {\n      none: 'none',\n      asc: 'ascending',\n      desc: 'descending',\n    } as const;\n\n    if (!this.sortable) return sortMap.none;\n    return sortMap[this.sortDirection];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the sort direction changes. Payload is the new sort\n   * direction.\n   */\n  @Event()\n  sortDirectionChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"columnheader\"\n        aria-sort={this.ariaSort}\n        tabindex={this.sortable ? 0 : undefined}\n        onKeyDown={this.handleKeyDown.bind(this)}\n        onClick={this.cycleSortDirection.bind(this)}\n      >\n        <slot></slot>\n\n        {this.sortable && (\n          <span class=\"sort-icon-wrap\" aria-hidden=\"true\">\n            <nv-iconbutton\n              disableTabindex\n              name=\"arrow-up\"\n              size=\"xs\"\n              emphasis={this.sortDirection === 'none' ? 'lower' : 'low'}\n              // prevent mousedown from selecting text\n              onMouseDown={(e: MouseEvent) => e.preventDefault()}\n              class={{\n                'is-none': this.sortDirection === 'none',\n                'is-desc': this.sortDirection === 'desc',\n              }}\n            />\n          </span>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

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

@@ -60,8 +60,8 @@ export class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '65222149af4edb9f8fd2da7efe9a01e15dec4722', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '7edd5587281b5610269f1ac09826ce379abfae24', class: "input-container" }, h("input", { key: '30d3db3cbdc263259a5ba1bf8e637225c4db3b4a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: 'a8a6d3c2774560b7d43cda75882d90cc564f4c54', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'fe980a07df4901081fda42df758236da0b8a11d0', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '723cec5914c6c0bed7e14e61e2f64e83c8e8b7b8', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f811065ed06f0816d8f0f1f65d4c659cbde3f683', class: "description" }, h("slot", { key: '541946e3f33a315bf667999c30a44fd93fc5f07f', name: "description" }, this.description))))));
+        return (h(Host, { key: '8e5b801ed4263b02b9b00628e94de448986eca98', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'b25ed406fae37d41f1c1fbe4234ded3f94db14b0', class: "input-container" }, h("input", { key: '5a98b81705597f2a115517b6031289ee9be54bda', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '89366dfe5c0106d7e28a858745941f0358220ce7', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3f0192378adbd8d5d5f5f5684d1e929462d7832b', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'ee95958740e62af025bc4a456fe1b9f12b9aac71', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'eee5a91ccbe1eed1d2ce41c0ce08cf8b49440501', class: "description" }, h("slot", { key: 'a925c57db61229d032412e315ff1f738a479b090', name: "description" }, this.description))))));
     }
     static get is() { return "nv-toggle"; }
     static get formAssociated() { return true; }

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

@@ -41,7 +41,7 @@ export class NvTogglebutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c4b698b1fb80f0dcca5d7a77bc20d22db1cbf538', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '605385f07f32b989685983cfd1a082525741fba4' })));
+        return (h(Host, { key: 'a36d2ac3ed287145dae1812e8488313e7509b979', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '463f95e6e68148d94047e8b71c99c449dccffbd6' })));
     }
     static get is() { return "nv-togglebutton"; }
     static get originalStyleUrls() {

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

@@ -11,6 +11,7 @@ nv-togglebutton[size=xs] {
   gap: var(--button-xs-gap);
   border-radius: var(--button-xs-border-radius);
   line-height: var(--button-xs-line-height);
+  height: var(--button-xs-height);
   font-size: var(--button-xs-font-size);
   padding-top: calc(var(--togglegroup-xs-button-padding-y) - 1px);
   padding-bottom: calc(var(--togglegroup-xs-button-padding-y) - 1px);
@@ -27,6 +28,7 @@ nv-togglebutton[size=sm] {
   gap: var(--button-sm-gap);
   border-radius: var(--button-sm-border-radius);
   line-height: var(--button-sm-line-height);
+  height: var(--button-sm-height);
   font-size: var(--button-sm-font-size);
   padding-top: calc(var(--togglegroup-sm-button-padding-y) - 1px);
   padding-bottom: calc(var(--togglegroup-sm-button-padding-y) - 1px);
@@ -43,6 +45,7 @@ nv-togglebutton[size=md] {
   gap: var(--button-md-gap);
   border-radius: var(--button-md-border-radius);
   line-height: var(--button-md-line-height);
+  height: var(--button-md-height);
   font-size: var(--button-md-font-size);
   padding-top: calc(var(--togglegroup-md-button-padding-y) - 1px);
   padding-bottom: calc(var(--togglegroup-md-button-padding-y) - 1px);
@@ -59,6 +62,7 @@ nv-togglebutton[size=lg] {
   gap: var(--button-lg-gap);
   border-radius: var(--button-lg-border-radius);
   line-height: var(--button-lg-line-height);
+  height: var(--button-lg-height);
   font-size: var(--button-lg-font-size);
   padding-top: calc(var(--togglegroup-lg-button-padding-y) - 1px);
   padding-bottom: calc(var(--togglegroup-lg-button-padding-y) - 1px);

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

@@ -149,7 +149,7 @@ export class NvTogglebuttongroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ab91ff1817e3388508ed1da7a9ed57a79cf8c4bc' }, h("slot", { key: '4a3280db78c1f0cd120a0cb32d95eabaf69995a6' })));
+        return (h(Host, { key: '02b7814ffceeaa875edcbce4ebdd6465b24abf62' }, h("slot", { key: '89c9387a50ec0c1c660e490b66742be96e6f6b3e' })));
     }
     static get is() { return "nv-togglebuttongroup"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,7 @@ export class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c2fdcd47be909554e31a3a7d77cd94dcb07c0d6e' }, h("slot", { key: '2305f6b7175d0ba84819351f60f2a4d76d117df9' }), h("nv-popover", { key: 'e388730b5858671d08981c6bbf72588a5084edbf', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '73f548a1c822f7c6d5a97bb4ef8da0d335cf049e', slot: "content" }, this.message), h("slot", { key: 'abb7a2dfa6a327122732802a867c5d4057fd1616', name: "content" }))));
+        return (h(Host, { key: '2ec10db6ad78e1637696e383069caf3fc8919587' }, h("slot", { key: '0df02ac8d76de82ae25ec3d9c73ef18cd6eee4d8' }), h("nv-popover", { key: '1ed0766ed0c3d43952be2be0dbafd94f07ec44b3', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'bd44fba212d86969688bdf3e00a711f152500952', slot: "content" }, this.message), h("slot", { key: '31f2c47d800e4bd057c7475de931e11542eb5208', name: "content" }))));
     }
     static get is() { return "nv-tooltip"; }
     static get originalStyleUrls() {

package/dist/components/index.js

@@ -200,8 +200,6 @@ const iconNames = [
     'cloud-snow',
     'cloud-upload',
     'cloud',
-    'collapse-close',
-    'collapse-open',
     'color-picker',
     'color-swatch',
     'columns-1',
@@ -495,6 +493,7 @@ const iconNames = [
     'ship-off',
     'ship',
     'shopping-cart',
+    'sitemap',
     'slash',
     'smart-home',
     'snowflake',