@nova-design-system/nova-webcomponents 3.0.0-beta.27 → 3.0.0-beta.28

package/dist/components/nv-fieldtoggle.js.map

@@ -1 +1 @@
-{"file":"nv-fieldtoggle.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,ilHAAilH,CAAC;AAC3mH,4BAAe,gBAAgB;;MCwBlBA,eAAa;;;;;uBAWGC,EAAM,EAAE;;;;;yBAgCL,KAAK;;uBAWhB,KAAK;wBAIK,KAAK;wBAOL,KAAK;;;;;;;IAgBlC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvFieldtoggle","uuidv4"],"sources":["src/components/nv-fieldtoggle/nv-fieldtoggle.scss?tag=nv-fieldtoggle","src/components/nv-fieldtoggle/nv-fieldtoggle.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: 450;\n  line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--components-form-shape-foreground-default);\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--components-form-shape-foreground-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-toggle-width);\n  height: var(--form-toggle-height);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-toggle-radius);\n  border-width: var(--form-toggle-border-width);\n  border-style: solid;\n  border-color: var(--components-form-field-border-default);\n  background: var(--components-form-field-background-default);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--form-toggle-switch-dot-default);\n    height: var(--form-toggle-switch-dot-default);\n    background-color: var(--components-form-shape-foreground-switch-dot);\n    border-radius: var(--radius-rounded-full);\n    position: absolute;\n    top: 50%;\n    left: 25%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:hover {\n    border-color: var(--components-form-field-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--components-form-field-border-default);\n  }\n\n  @include focus-ring();\n\n  &:checked {\n    background: var(--components-form-field-background-checked);\n    border-color: var(--components-form-field-background-checked);\n\n    &::after {\n      content: '';\n      display: block;\n      width: var(--form-toggle-switch-dot-default);\n      height: var(--form-toggle-switch-dot-default);\n      background-color: var(--components-form-shape-foreground-default);\n      border-radius: var(--radius-rounded-full);\n      position: absolute;\n      top: 50%;\n      left: 75%;\n      transform: translate(-50%, -50%);\n    }\n\n    &:focus {\n      background: var(--components-form-field-background-checked);\n      border-color: var(--components-form-field-border-focus);\n    }\n  }\n\n  &:disabled:not([readonly]) {\n    box-shadow: unset;\n    background: var(--components-form-field-background-disabled);\n    border-color: var(--components-form-field-border-default);\n\n    &:checked {\n      &::after {\n        background-color: var(--components-form-shape-foreground-disabled);\n      }\n    }\n  }\n}\n\nnv-fieldtoggle {\n  @include root-styles();\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-fieldtoggle',\n  styleUrl: 'nv-fieldtoggle.scss',\n  shadow: false,\n})\nexport class NvFieldtoggle {\n  @Element() el!: HTMLNvFieldtoggleElement;\n\n  /******************************** PROPERTIES ********************************/\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop()\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the toggle input, used to reference the form data\n   * after submission.\n   */\n  @Prop()\n  readonly name?: string;\n\n  /**\n   * The value attribute of the toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop()\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop()\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop()\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop()\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop()\n  readonly readonly: boolean = false;\n\n  /******************************** EVENTS ************************************/\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  /****************************** WATCHERS ************************************/\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the toggle input element and updates the checked state.\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  /********************************* RENDER ***********************************/\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly}\n          />\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nv-fieldtoggle.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,ilHAAilH,CAAC;AAC3mH,4BAAe,gBAAgB;;MCwBlBA,eAAa;;;;;uBAaGC,EAAM,EAAE;;;;;yBAgCL,KAAK;;uBAWhB,KAAK;wBAIK,KAAK;wBAOL,KAAK;;;;;;;;;IAsBlC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvFieldtoggle","uuidv4"],"sources":["src/components/nv-fieldtoggle/nv-fieldtoggle.scss?tag=nv-fieldtoggle","src/components/nv-fieldtoggle/nv-fieldtoggle.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: 450;\n  line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--components-form-shape-foreground-default);\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--components-form-shape-foreground-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-toggle-width);\n  height: var(--form-toggle-height);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-toggle-radius);\n  border-width: var(--form-toggle-border-width);\n  border-style: solid;\n  border-color: var(--components-form-field-border-default);\n  background: var(--components-form-field-background-default);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--form-toggle-switch-dot-default);\n    height: var(--form-toggle-switch-dot-default);\n    background-color: var(--components-form-shape-foreground-switch-dot);\n    border-radius: var(--radius-rounded-full);\n    position: absolute;\n    top: 50%;\n    left: 25%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:hover {\n    border-color: var(--components-form-field-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--components-form-field-border-default);\n  }\n\n  @include focus-ring();\n\n  &:checked {\n    background: var(--components-form-field-background-checked);\n    border-color: var(--components-form-field-background-checked);\n\n    &::after {\n      content: '';\n      display: block;\n      width: var(--form-toggle-switch-dot-default);\n      height: var(--form-toggle-switch-dot-default);\n      background-color: var(--components-form-shape-foreground-default);\n      border-radius: var(--radius-rounded-full);\n      position: absolute;\n      top: 50%;\n      left: 75%;\n      transform: translate(-50%, -50%);\n    }\n\n    &:focus {\n      background: var(--components-form-field-background-checked);\n      border-color: var(--components-form-field-border-focus);\n    }\n  }\n\n  &:disabled:not([readonly]) {\n    box-shadow: unset;\n    background: var(--components-form-field-background-disabled);\n    border-color: var(--components-form-field-border-default);\n\n    &:checked {\n      &::after {\n        background-color: var(--components-form-shape-foreground-disabled);\n      }\n    }\n  }\n}\n\nnv-fieldtoggle {\n  @include root-styles();\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-fieldtoggle',\n  styleUrl: 'nv-fieldtoggle.scss',\n  shadow: false,\n})\nexport class NvFieldtoggle {\n  @Element() el!: HTMLNvFieldtoggleElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop()\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the toggle input, used to reference the form data\n   * after submission.\n   */\n  @Prop()\n  readonly name?: string;\n\n  /**\n   * The value attribute of the toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop()\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop()\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop()\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop()\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop()\n  readonly readonly: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the toggle input element and updates the checked state.\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly}\n          />\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-icon.js

@@ -1,4 +1,4 @@
-import { N as NvIcon$1, d as defineCustomElement$1 } from './p-9be1ebd4.js';
+import { N as NvIcon$1, d as defineCustomElement$1 } from './p-689a7b38.js';
 
 const NvIcon = NvIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-iconbutton.js

@@ -1,4 +1,4 @@
-import { N as NvIconbutton$1, d as defineCustomElement$1 } from './p-9647924f.js';
+import { N as NvIconbutton$1, d as defineCustomElement$1 } from './p-45c63143.js';
 
 const NvIconbutton = NvIconbutton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-loader.js

@@ -1,4 +1,4 @@
-import { N as NvLoader$1, d as defineCustomElement$1 } from './p-69cc7819.js';
+import { N as NvLoader$1, d as defineCustomElement$1 } from './p-8c8cf8ea.js';
 
 const NvLoader = NvLoader$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-menu.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d506ae63.js';
-import { d as defineCustomElement$2 } from './p-ff97f99e.js';
+import { d as defineCustomElement$2 } from './p-89fb6636.js';
 
 const nvMenuCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";
 const NvMenuStyle0 = nvMenuCss;
@@ -176,7 +176,7 @@ const NvMenu$1 = /*@__PURE__*/ proxyCustomElement(class NvMenu extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '7a68c75f464a73f44ca5e9b586f14074f8997ef7' }, h("slot", { key: '844e291a25b0761e00b3d491fca937b652d9289b', name: "trigger" }), h("nv-popover", { key: 'cb231870f62e952483ee32fe07e92c03dfa18acf', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, h("slot", { key: 'b59e6458addf054a4ef370a50498bb6620676166', name: "content" }))));
+        return (h(Host, { key: '23fdff061d4aa8364590e2486c60b26684400a34' }, h("slot", { key: '50ff6d6a5b84ad83a9b9deefed42335e663c989d', name: "trigger" }), h("nv-popover", { key: 'ee15458289098254b7074452b2c25a32a7e82b3e', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, h("slot", { key: 'bccea8f6469c29bad2e764c6628b6a783890d10d', name: "content" }))));
     }
     get el() { return this; }
     static get style() { return NvMenuStyle0; }

package/dist/components/nv-menuitem.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
-import { d as defineCustomElement$2 } from './p-9be1ebd4.js';
+import { d as defineCustomElement$2 } from './p-689a7b38.js';
 
 const nvMenuitemCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";
 const NvMenuitemStyle0 = nvMenuitemCss;
@@ -17,7 +17,7 @@ const NvMenuitem$1 = /*@__PURE__*/ proxyCustomElement(class NvMenuitem extends H
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '45f0235ad70e94c32498584b38da8528b76e7986', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: 'fb70b1d5249b850dc69fd777f75f17dec6d65a43', name: this.icon }), h("span", { key: '7d66467d43ee486a187b6da0559d28fe4db1aa8b', "data-scope": "text" }, h("slot", { key: '1525c465235670b1396a74d53244f54b6e8b400d' })), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'cfc92cdc9ea84dec4494a4aab43f98fa1f92f2e7' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '1002e887cc7a41858e36c1499aebe85cd320af2d', name: "chevron-right" })));
+        return (h(Host, { key: 'c2d22d3d9da87cf9397d53bc1d04664f2b2fdaf6', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '1e058e4ab0d0d8a38e832bbfecc89b68f308c5b3', name: this.icon }), h("span", { key: 'c2320e9145f09aa561103e594b8921aa067f50ac', "data-scope": "text" }, h("slot", { key: '4783773cfc252c76ff5e23a776cc81b3ddefaa08' })), this.shortcut && !this.hasSubmenu && h("kbd", { key: '5ae203ed4236966e3f72e587d047f5d6e3a1ebbd' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: 'a92df958241abeb73584d780777afb5967a45753', name: "chevron-right" })));
     }
     get el() { return this; }
     static get style() { return NvMenuitemStyle0; }

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

@@ -1 +1 @@
-{"file":"nv-menuitem.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,64BAA64B,CAAC;AACp6B,yBAAe,aAAa;;MCafA,YAAU;;;;;wBAiBQ,KAAK;;0BAYH,KAAK;;;;;IAMpC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAClD,2EAAiB,MAAM,IACrB,8DAAa,CACR,EACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvMenuitem"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  max-width: 300px;\n  width: 100vw;\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  gap: var(--menu-contextual-item-gap-x);\n  padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n  transition: background-color 150ms ease-out;\n  cursor: pointer;\n  &:hover, &:focus, &:focus-within {\n    @include focused-styles();\n  }\n}\n\n@mixin focused-styles() {\n  background-color: var(--components-menu-contextual-item-background-hover);\n  color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n  cursor: unset;\n  background-color: unset;\n  color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n  margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n  color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n  @include root-styles();\n\n  kbd {\n    @include shortcut-styles();\n  }\n\n  [data-scope=\"text\"] {\n    @include text-styles();\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    @include disabled-styles();\n  }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\nexport type MenuitemSelectedEventDetail = { itemId?: HTMLElement['id'] };\n\n/**\n * @slot default - The content to render, usually just text\n */\n@Component({\n  tag: 'nv-menuitem',\n  styleUrl: 'nv-menuitem.scss',\n  shadow: false,\n})\nexport class NvMenuitem {\n  @Element() el: HTMLNvMenuitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\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 icon: `${IconName}`;\n\n  /**\n   * Disables the item, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Show a shortcut key for the action represented in the menu item.\n   */\n  @Prop({ reflect: true })\n  readonly shortcut: string;\n\n  /**\n   * If the menu item has a submenu, the a caret icon will be displayed.\n   */\n  @Prop({ reflect: true })\n  readonly hasSubmenu: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n        {this.icon && <nv-icon name={this.icon}></nv-icon>}\n        <span data-scope=\"text\">\n          <slot></slot>\n        </span>\n        {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n        {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-menuitem.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,64BAA64B,CAAC;AACp6B,yBAAe,aAAa;;MCkBfA,YAAU;;;;;wBAiBQ,KAAK;;0BAYH,KAAK;;;;;IAMpC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAClD,2EAAiB,MAAM,IACrB,8DAAa,CACR,EACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvMenuitem"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  max-width: 300px;\n  width: 100vw;\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  gap: var(--menu-contextual-item-gap-x);\n  padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n  transition: background-color 150ms ease-out;\n  cursor: pointer;\n  &:hover, &:focus, &:focus-within {\n    @include focused-styles();\n  }\n}\n\n@mixin focused-styles() {\n  background-color: var(--components-menu-contextual-item-background-hover);\n  color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n  cursor: unset;\n  background-color: unset;\n  color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n  margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n  color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n  @include root-styles();\n\n  kbd {\n    @include shortcut-styles();\n  }\n\n  [data-scope=\"text\"] {\n    @include text-styles();\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    @include disabled-styles();\n  }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\nexport type MenuitemSelectedEventDetail = {\n  /**\n   * The id of the menu item that was selected.\n   */\n  itemId?: HTMLElement['id'];\n};\n\n/**\n * @slot default - The content to render, usually just text\n */\n@Component({\n  tag: 'nv-menuitem',\n  styleUrl: 'nv-menuitem.scss',\n  shadow: false,\n})\nexport class NvMenuitem {\n  @Element() el: HTMLNvMenuitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\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 icon: `${IconName}`;\n\n  /**\n   * Disables the item, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Show a shortcut key for the action represented in the menu item.\n   */\n  @Prop({ reflect: true })\n  readonly shortcut: string;\n\n  /**\n   * If the menu item has a submenu, the a caret icon will be displayed.\n   */\n  @Prop({ reflect: true })\n  readonly hasSubmenu: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n        {this.icon && <nv-icon name={this.icon}></nv-icon>}\n        <span data-scope=\"text\">\n          <slot></slot>\n        </span>\n        {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n        {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-popover.js

@@ -1,4 +1,4 @@
-import { N as NvPopover$1, d as defineCustomElement$1 } from './p-ff97f99e.js';
+import { N as NvPopover$1, d as defineCustomElement$1 } from './p-89fb6636.js';
 
 const NvPopover = NvPopover$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-row.js

@@ -11,7 +11,7 @@ const NvRow$1 = /*@__PURE__*/ proxyCustomElement(class NvRow extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0509e4652dd679fbfb5b4eadb3aaef8979d879e7' }, h("slot", { key: '75a3a0b83eec4f573a3e54340b3679dc8f529fda' })));
+        return (h(Host, { key: '559c93b3961fdee5d278df42693dd4faae1f1eaf' }, h("slot", { key: '3cbf2c0ed7a07e23537ae6fb3cc999fef27561ea' })));
     }
     static get style() { return NvRowStyle0; }
 }, [4, "nv-row"]);

package/dist/components/nv-row.js.map

@@ -1 +1 @@
-{"file":"nv-row.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+IAA+I,CAAC;AACjK,oBAAe,QAAQ;;MCSVA,OAAK;;;;;;;IAIhB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":["NvRow"],"sources":["src/components/nv-row/nv-row.scss?tag=nv-row","src/components/nv-row/nv-row.tsx"],"sourcesContent":["nv-row {\n  display: flex;\n  flex-wrap: wrap;\n  margin-right: calc(var(--spacing-4) * -1);\n  margin-left: calc(var(--spacing-4) * -1);\n  row-gap: var(--spacing-4);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - The row content.\n */\n@Component({\n  tag: 'nv-row',\n  styleUrl: './nv-row.scss',\n  shadow: false,\n})\nexport class NvRow {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nv-row.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+IAA+I,CAAC;AACjK,oBAAe,QAAQ;;MCSVA,OAAK;;;;;;;IAIhB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":["NvRow"],"sources":["src/components/nv-row/nv-row.scss?tag=nv-row","src/components/nv-row/nv-row.tsx"],"sourcesContent":["nv-row {\n  display: flex;\n  flex-wrap: wrap;\n  margin-right: calc(var(--spacing-4) * -1);\n  margin-left: calc(var(--spacing-4) * -1);\n  row-gap: var(--spacing-4);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - The row content.\n */\n@Component({\n  tag: 'nv-row',\n  styleUrl: './nv-row.scss',\n  shadow: false,\n})\nexport class NvRow {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-stack.js

@@ -18,7 +18,7 @@ const NvStack$1 = /*@__PURE__*/ proxyCustomElement(class NvStack extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c644c9312f247c75b8eecc0903fb16d36e9ed4e5', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '654459698308057e20afc68fc046364cd32c2512' })));
+        return (h(Host, { key: '900b3afd3b0394433a719769797b4275998be59d', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'de28519746e3c18f04bdaea3f13258bc3d3d49a9' })));
     }
     static get style() { return NvStackStyle0; }
 }, [4, "nv-stack", {

package/dist/components/nv-stack.js.map

@@ -1 +1 @@
-{"file":"nv-stack.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,s8BAAs8B,CAAC;AAC19B,sBAAe,UAAU;;MCWZA,SAAO;;;;sBASQ,CAAC;;;;;;;;;IAoC3B,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,QAAQ,EACrB,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EAC1D,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EACzD,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CACrC,IAED,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvStack"],"sources":["src/components/nv-stack/nv-stack.scss?tag=nv-stack","src/components/nv-stack/nv-stack.tsx"],"sourcesContent":["nv-stack {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n\n  nv-col {\n    display: flex;\n  }\n\n  &:not(nv-row) {\n    flex-wrap: nowrap;\n  }\n\n  > .nv-stack-item-flex {\n    flex-shrink: 1;\n    flex-grow: 1;\n  }\n\n  > .nv-stack-item-lead {\n    margin-right: auto;\n  }\n\n  > .nv-stack-item-lead + * {\n    margin-left: 0;\n  }\n\n  > .nv-stack-item-center {\n    margin-right: auto;\n    margin-left: auto;\n  }\n\n  > .nv-stack-item-tail {\n    margin-left: auto;\n  }\n\n  > .nv-stack-nowrap {\n    white-space: nowrap;\n  }\n\n  // Vertical\n  &.nv-stack-vertical {\n    align-items: stretch;\n    flex-direction: column;\n\n    > .nv-stack-item-lead {\n      margin-right: 0;\n      margin-bottom: auto;\n    }\n\n    > .nv-stack-item-lead + * {\n      margin-top: 0;\n    }\n\n    > .nv-stack-item-tail {\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    > .nv-stack-item-center {\n      margin: auto 0;\n    }\n  }\n\n  &.nv-stack-flex {\n    > * {\n      flex-shrink: 1;\n      flex-grow: 1;\n    }\n  }\n\n  &.nv-stack-fill {\n    > * {\n      height: 100%;\n    }\n\n    &.nv-stack-vertical {\n      > * {\n        height: auto;\n        width: 100%;\n      }\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Please use tailwind classes instead\n * @slot default - Content of the stack\n */\n@Component({\n  tag: 'nv-stack',\n  styleUrl: './nv-stack.scss',\n  shadow: false,\n})\nexport class NvStack {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Gutter refers to the space that exists between children components inside\n   * the stack container.\n   */\n  @Prop({ reflect: true })\n  readonly gutter: number = 2;\n\n  /**\n   * Fill will force the children to fill the stack depending of the direction\n   * of the stack. In horizontal position, the children take the height of the\n   * stack. In vertical position, the children take the width of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly fill: boolean;\n\n  /**\n   * Flex will force the children to share the stack between the children\n   * depending of the direction of the stack. In horizontal position, the\n   * children width will share the width of the stack. In vertical position,\n   * the children height will share the height of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly flex: boolean;\n\n  /**\n   * Full set the width of the stack to 100%.\n   * (same effect as WFull props)\n   */\n  @Prop({ reflect: true })\n  readonly full: boolean;\n\n  /**\n   * Display the element of the stack vertically.\n   */\n  @Prop({ reflect: true })\n  readonly vertical: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.fill && 'nv-stack-fill',\n          this.flex && 'nv-stack-flex',\n          this.full && 'w-full',\n          this.gutter && !this.vertical && `gutter-x-${this.gutter}`,\n          this.gutter && this.vertical && `gutter-y-${this.gutter}`,\n          this.vertical && 'nv-stack-vertical',\n        )}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nv-stack.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,s8BAAs8B,CAAC;AAC19B,sBAAe,UAAU;;MCWZA,SAAO;;;;sBASQ,CAAC;;;;;;;;;IAoC3B,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,QAAQ,EACrB,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EAC1D,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EACzD,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CACrC,IAED,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvStack"],"sources":["src/components/nv-stack/nv-stack.scss?tag=nv-stack","src/components/nv-stack/nv-stack.tsx"],"sourcesContent":["nv-stack {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n\n  nv-col {\n    display: flex;\n  }\n\n  &:not(nv-row) {\n    flex-wrap: nowrap;\n  }\n\n  > .nv-stack-item-flex {\n    flex-shrink: 1;\n    flex-grow: 1;\n  }\n\n  > .nv-stack-item-lead {\n    margin-right: auto;\n  }\n\n  > .nv-stack-item-lead + * {\n    margin-left: 0;\n  }\n\n  > .nv-stack-item-center {\n    margin-right: auto;\n    margin-left: auto;\n  }\n\n  > .nv-stack-item-tail {\n    margin-left: auto;\n  }\n\n  > .nv-stack-nowrap {\n    white-space: nowrap;\n  }\n\n  // Vertical\n  &.nv-stack-vertical {\n    align-items: stretch;\n    flex-direction: column;\n\n    > .nv-stack-item-lead {\n      margin-right: 0;\n      margin-bottom: auto;\n    }\n\n    > .nv-stack-item-lead + * {\n      margin-top: 0;\n    }\n\n    > .nv-stack-item-tail {\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    > .nv-stack-item-center {\n      margin: auto 0;\n    }\n  }\n\n  &.nv-stack-flex {\n    > * {\n      flex-shrink: 1;\n      flex-grow: 1;\n    }\n  }\n\n  &.nv-stack-fill {\n    > * {\n      height: 100%;\n    }\n\n    &.nv-stack-vertical {\n      > * {\n        height: auto;\n        width: 100%;\n      }\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Please use tailwind classes instead\n * @slot default - Content of the stack\n */\n@Component({\n  tag: 'nv-stack',\n  styleUrl: './nv-stack.scss',\n  shadow: false,\n})\nexport class NvStack {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Gutter refers to the space that exists between children components inside\n   * the stack container.\n   */\n  @Prop({ reflect: true })\n  readonly gutter: number = 2;\n\n  /**\n   * Fill will force the children to fill the stack depending of the direction\n   * of the stack. In horizontal position, the children take the height of the\n   * stack. In vertical position, the children take the width of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly fill: boolean;\n\n  /**\n   * Flex will force the children to share the stack between the children\n   * depending of the direction of the stack. In horizontal position, the\n   * children width will share the width of the stack. In vertical position,\n   * the children height will share the height of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly flex: boolean;\n\n  /**\n   * Full set the width of the stack to 100%.\n   * (same effect as WFull props)\n   */\n  @Prop({ reflect: true })\n  readonly full: boolean;\n\n  /**\n   * Display the element of the stack vertically.\n   */\n  @Prop({ reflect: true })\n  readonly vertical: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.fill && 'nv-stack-fill',\n          this.flex && 'nv-stack-flex',\n          this.full && 'w-full',\n          this.gutter && !this.vertical && `gutter-x-${this.gutter}`,\n          this.gutter && this.vertical && `gutter-y-${this.gutter}`,\n          this.vertical && 'nv-stack-vertical',\n        )}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-table.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvTable extends Components.NvTable, HTMLElement {}
+export const NvTable: {
+    prototype: NvTable;
+    new (): NvTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-table.js

@@ -0,0 +1,164 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
+
+const nvTableCss = "nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0}";
+const NvTableStyle0 = nvTableCss;
+
+const NvTable$1 = /*@__PURE__*/ proxyCustomElement(class NvTable extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.parsedColumns = [];
+        this.parsedData = [];
+        this.hasSlotHead = false;
+        this.hasSlotBody = false;
+        this.columns = [];
+        this.columnsJson = undefined;
+        this.data = [];
+        this.dataJson = undefined;
+        this.noDataMessage = 'No data available';
+        this.noColumnsNoDataMessage = 'No data or columns available to display.';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region WATCHERS
+    parseColumns(newValue, oldValue) {
+        this.parseColumnsArray(newValue, oldValue);
+    }
+    parseJsonColumns(newValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseColumnsArray(newItems, this.parsedColumns);
+        }
+        catch (e) {
+            console.error('Invalid JSON format for columnsJson:', e.message);
+            this.parsedColumns = [];
+        }
+    }
+    parseData(newValue, oldValue) {
+        this.parseDataArray(newValue, oldValue);
+    }
+    parseJsonData(newValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseDataArray(newItems, this.parsedData);
+        }
+        catch (e) {
+            console.error('Invalid JSON format for dataJson:', e.message);
+            this.parsedData = [];
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Parses the columns array.
+     * @param {string[]} newValue - The new value of the columns array.
+     * @param {string[]} oldValue - The old value of the columns array.
+     */
+    parseColumnsArray(newValue, oldValue) {
+        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
+            return; // Deep comparison
+        this.parsedColumns = Array.isArray(newValue) ? newValue : [];
+    }
+    /**
+     * Parses the data array.
+     * @param {any[]} newValue - The new value of the data array.
+     * @param {any[]} oldValue - The old value of the data array.
+     */
+    parseDataArray(newValue, oldValue) {
+        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
+            return; // Deep comparison
+        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.hasSlotHead = !!this.el.querySelector('[slot="head"]');
+        this.hasSlotBody = !!this.el.querySelector('[slot="body"]');
+        if (this.columnsJson) {
+            this.parseJsonColumns(this.columnsJson);
+        }
+        else {
+            this.parseColumns(this.columns, this.parsedColumns);
+        }
+        if (this.dataJson) {
+            this.parseJsonData(this.dataJson);
+        }
+        else {
+            this.parseData(this.data, this.parsedData);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const headerRows = this.hasSlotHead
+            ? Array.from(this.el
+                .querySelector('[slot="head"]')
+                .querySelectorAll('nv-tablerow'))
+            : [];
+        const bodyRows = this.hasSlotBody
+            ? Array.from(this.el
+                .querySelector('[slot="body"]')
+                .querySelectorAll('nv-tablerow'))
+            : [];
+        return (h(Host, { key: 'ab2f459ea80c9f134a537b62298ffd55ad7b719f' }, h("div", { key: '081211573d87749e8b133b89e9da2a201b9e8bf3', class: "hidden" }, h("slot", { key: '7dd2c168d379818e1456eb2117e14cf79e44f33e' }), h("slot", { key: '7c8e1b4cf0b223257148459d753c2eb325a7cd17', name: "head" }), h("slot", { key: 'd107814f31a82e3fd6e22dbccff319c5baf2b3db', name: "body" })), h("slot", { key: 'd704c43a322b073ed459947f23950bc719402656', name: "before" }), this.parsedColumns.length === 0 &&
+            this.parsedData.length === 0 &&
+            headerRows.length === 0 &&
+            bodyRows.length === 0 ? (h("p", null, this.noColumnsNoDataMessage)) : (h("table", null, this.parsedColumns.length > 0 ? (h("thead", null, h("tr", null, this.parsedColumns.map(column => (h("th", null, column)))))) : headerRows.length > 0 ? (h("thead", null, headerRows.map(row => {
+            const cells = Array.from(row.querySelectorAll('nv-tablecolumn'));
+            return (h("tr", null, cells.map(cell => (h("th", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, scope: cell.scope, innerHTML: cell.innerHTML })))));
+        }))) : null, h("tbody", null, this.parsedData.length === 0 && bodyRows.length === 0 ? (h("tr", null, h("td", { colSpan: this.parsedColumns.length || 12 }, this.noDataMessage))) : this.parsedData.length > 0 ? (this.parsedData.map(row => (h("tr", null, this.parsedColumns.length > 0
+            ? this.parsedColumns.map(column => (h("td", null, row[column.toLowerCase()] || '')))
+            : Object.values(row).map(value => h("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
+            const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
+            return (h("tr", null, cells.map(cell => (h("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
+        })) : null))), h("slot", { key: '727d2040bec14d6632d062637b86b3a79e30b88d', name: "after" })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "columns": ["parseColumns"],
+        "columnsJson": ["parseJsonColumns"],
+        "data": ["parseData"],
+        "dataJson": ["parseJsonData"]
+    }; }
+    static get style() { return NvTableStyle0; }
+}, [4, "nv-table", {
+        "columns": [16],
+        "columnsJson": [513, "columns-json"],
+        "data": [16],
+        "dataJson": [513, "data-json"],
+        "noDataMessage": [1, "no-data-message"],
+        "noColumnsNoDataMessage": [1, "no-columns-no-data-message"],
+        "parsedColumns": [32],
+        "parsedData": [32],
+        "hasSlotHead": [32],
+        "hasSlotBody": [32]
+    }, undefined, {
+        "columns": ["parseColumns"],
+        "columnsJson": ["parseJsonColumns"],
+        "data": ["parseData"],
+        "dataJson": ["parseJsonData"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvTable$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvTable = NvTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvTable, defineCustomElement };
+
+//# sourceMappingURL=nv-table.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-table.js","mappings":"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","names":["NvTable"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["nv-table {\n  table {\n    border-collapse: collapse;\n    border-color: inherit;\n    text-indent: 0;\n  }\n}\n\n// https://tailwindcss.com/docs/table-layout\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n */\n@Component({\n  tag: 'nv-table',\n  styleUrl: './nv-table.scss',\n  shadow: false,\n})\nexport class NvTable {\n  @Element() el: HTMLNvTableElement;\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  parsedColumns: string[] = []; // Parsed array of column headers\n\n  @State()\n  parsedData: any[] = []; // Parsed array of data rows\n\n  @State()\n  hasSlotHead: boolean = false;\n\n  @State()\n  hasSlotBody: boolean = false;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the table columns.\n   * @example ['Name', 'Age', 'Email']\n   * @default []\n   */\n  @Prop()\n  readonly columns: string[] = [];\n\n  /**\n   * Defines the table columns.\n   * It can be passed directly as an array of strings or as a JSON string.\n   * @example '[\"Name\", \"Age\", \"Email\"]'\n   */\n  @Prop({ reflect: true })\n  readonly columnsJson?: string;\n\n  /**\n   * Defines the table data.\n   * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n   * @default []\n   */\n  @Prop()\n  readonly data: any[] = [];\n\n  /**\n   * Defines the table data.\n   * It can be passed directly as an array of objects or as a JSON string.\n   * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n   */\n  @Prop({ reflect: true })\n  readonly dataJson?: string;\n\n  /**\n   * The message to display when there is no data available.\n   * @default 'No data available'\n   */\n  @Prop()\n  readonly noDataMessage: string = 'No data available';\n\n  /**\n   * The message to display when there are no columns or data available.\n   * @default 'No data or columns available to display.'\n   */\n  @Prop()\n  readonly noColumnsNoDataMessage: string =\n    'No data or columns available to display.';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('columns')\n  parseColumns(newValue: string[], oldValue: string[]) {\n    this.parseColumnsArray(newValue, oldValue);\n  }\n\n  @Watch('columnsJson')\n  parseJsonColumns(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseColumnsArray(newItems, this.parsedColumns);\n    } catch (e) {\n      console.error('Invalid JSON format for columnsJson:', e.message);\n      this.parsedColumns = [];\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: any[], oldValue: any[]) {\n    this.parseDataArray(newValue, oldValue);\n  }\n\n  @Watch('dataJson')\n  parseJsonData(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseDataArray(newItems, this.parsedData);\n    } catch (e) {\n      console.error('Invalid JSON format for dataJson:', e.message);\n      this.parsedData = [];\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Parses the columns array.\n   * @param {string[]} newValue - The new value of the columns array.\n   * @param {string[]} oldValue - The old value of the columns array.\n   */\n  private parseColumnsArray(newValue: string[], oldValue: string[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n  }\n\n  /**\n   * Parses the data array.\n   * @param {any[]} newValue - The new value of the data array.\n   * @param {any[]} oldValue - The old value of the data array.\n   */\n  private parseDataArray(newValue: any[], oldValue: any[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedData = Array.isArray(newValue) ? newValue : [];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n    this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n    if (this.columnsJson) {\n      this.parseJsonColumns(this.columnsJson);\n    } else {\n      this.parseColumns(this.columns, this.parsedColumns);\n    }\n\n    if (this.dataJson) {\n      this.parseJsonData(this.dataJson);\n    } else {\n      this.parseData(this.data, this.parsedData);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const headerRows = this.hasSlotHead\n      ? Array.from(\n          this.el\n            .querySelector('[slot=\"head\"]')\n            .querySelectorAll('nv-tablerow'),\n        )\n      : [];\n    const bodyRows = this.hasSlotBody\n      ? Array.from(\n          this.el\n            .querySelector('[slot=\"body\"]')\n            .querySelectorAll('nv-tablerow'),\n        )\n      : [];\n\n    return (\n      <Host>\n        <div class=\"hidden\">\n          <slot></slot>\n          <slot name=\"head\"></slot>\n          <slot name=\"body\"></slot>\n        </div>\n\n        <slot name=\"before\"></slot>\n\n        {this.parsedColumns.length === 0 &&\n        this.parsedData.length === 0 &&\n        headerRows.length === 0 &&\n        bodyRows.length === 0 ? (\n          <p>{this.noColumnsNoDataMessage}</p>\n        ) : (\n          <table>\n            {this.parsedColumns.length > 0 ? (\n              <thead>\n                <tr>\n                  {this.parsedColumns.map(column => (\n                    <th>{column}</th>\n                  ))}\n                </tr>\n              </thead>\n            ) : headerRows.length > 0 ? (\n              <thead>\n                {headerRows.map(row => {\n                  const cells = Array.from(\n                    row.querySelectorAll('nv-tablecolumn'),\n                  );\n                  return (\n                    <tr>\n                      {cells.map(cell => (\n                        <th\n                          colSpan={cell.colspan}\n                          rowSpan={cell.rowspan}\n                          headers={cell.headers}\n                          scope={cell.scope}\n                          innerHTML={cell.innerHTML}\n                        ></th>\n                      ))}\n                    </tr>\n                  );\n                })}\n              </thead>\n            ) : null}\n\n            <tbody>\n              {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n                <tr>\n                  <td colSpan={this.parsedColumns.length || 12}>\n                    {this.noDataMessage}\n                  </td>\n                </tr>\n              ) : this.parsedData.length > 0 ? (\n                this.parsedData.map(row => (\n                  <tr>\n                    {this.parsedColumns.length > 0\n                      ? this.parsedColumns.map(column => (\n                          <td>{row[column.toLowerCase()] || ''}</td>\n                        ))\n                      : Object.values(row).map(value => <td>{value}</td>)}\n                  </tr>\n                ))\n              ) : bodyRows.length > 0 ? (\n                bodyRows.map(row => {\n                  const cells = Array.from(\n                    row.querySelectorAll('nv-tabledatacell'),\n                  );\n                  return (\n                    <tr>\n                      {cells.map(cell => (\n                        <td\n                          colSpan={cell.colspan}\n                          rowSpan={cell.rowspan}\n                          headers={cell.headers}\n                          innerHTML={cell.innerHTML}\n                        ></td>\n                      ))}\n                    </tr>\n                  );\n                })\n              ) : null}\n            </tbody>\n          </table>\n        )}\n\n        <slot name=\"after\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}

package/dist/components/nv-tablebody.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvTablebody extends Components.NvTablebody, HTMLElement {}
+export const NvTablebody: {
+    prototype: NvTablebody;
+    new (): NvTablebody;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-tablebody.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
+
+const nvTablebodyCss = "";
+const NvTablebodyStyle0 = nvTablebodyCss;
+
+const NvTablebody$1 = /*@__PURE__*/ proxyCustomElement(class NvTablebody extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '033046403a927a4e738ee0b17491436872845375' }, h("tbody", { key: 'e9dd64ba4c4463b64f7c48ea01aa8d577d1abddd' }, h("slot", { key: '3790e34a3f1c0c870e41f5259edf956253cf031d' }))));
+    }
+    static get style() { return NvTablebodyStyle0; }
+}, [4, "nv-tablebody"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-tablebody"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-tablebody":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvTablebody$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvTablebody = NvTablebody$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvTablebody, defineCustomElement };
+
+//# sourceMappingURL=nv-tablebody.js.map

package/dist/components/nv-tablebody.js.map

@@ -0,0 +1 @@
+{"file":"nv-tablebody.js","mappings":";;AAAA,MAAM,cAAc,GAAG,EAAE,CAAC;AAC1B,0BAAe,cAAc;;MCShBA,aAAW;;;;;;;IAItB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEACE,8DAAa,CACP,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTablebody"],"sources":["src/components/nv-tablebody/nv-tablebody.scss?tag=nv-tablebody","src/components/nv-tablebody/nv-tablebody.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table body.\n */\n@Component({\n  tag: 'nv-tablebody',\n  styleUrl: 'nv-tablebody.scss',\n  shadow: false,\n})\nexport class NvTablebody {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <tbody>\n          <slot></slot>\n        </tbody>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}

package/dist/components/nv-tablecolumn.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvTablecolumn extends Components.NvTablecolumn, HTMLElement {}
+export const NvTablecolumn: {
+    prototype: NvTablecolumn;
+    new (): NvTablecolumn;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-tablecolumn.js

@@ -0,0 +1,50 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
+
+const nvTablecolumnCss = "";
+const NvTablecolumnStyle0 = nvTablecolumnCss;
+
+const NvTablecolumn$1 = /*@__PURE__*/ proxyCustomElement(class NvTablecolumn extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.abbr = undefined;
+        this.colspan = 1;
+        this.rowspan = 1;
+        this.headers = undefined;
+        this.scope = undefined;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '9e3e12375467e02e9e964b3f008aaee842704132' }, h("th", { key: '9e4ee5f486d53a6200bd73652d35783da9d56eae', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, h("slot", { key: 'b59a867f3fad0e30e475f730aaaf482564969807' }))));
+    }
+    static get style() { return NvTablecolumnStyle0; }
+}, [4, "nv-tablecolumn", {
+        "abbr": [1],
+        "colspan": [2],
+        "rowspan": [2],
+        "headers": [1],
+        "scope": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-tablecolumn"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-tablecolumn":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvTablecolumn$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvTablecolumn = NvTablecolumn$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvTablecolumn, defineCustomElement };
+
+//# sourceMappingURL=nv-tablecolumn.js.map

package/dist/components/nv-tablecolumn.js.map

@@ -0,0 +1 @@
+{"file":"nv-tablecolumn.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAC5B,4BAAe,gBAAgB;;MCSlBA,eAAa;;;;;uBAoBG,CAAC;uBAWD,CAAC;;;;;;;IA8B5B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,2DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,IAEjB,8DAAa,CACV,CACA,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTablecolumn"],"sources":["src/components/nv-tablecolumn/nv-tablecolumn.scss?tag=nv-tablecolumn","src/components/nv-tablecolumn/nv-tablecolumn.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table column.\n */\n@Component({\n  tag: 'nv-tablecolumn',\n  styleUrl: 'nv-tablecolumn.scss',\n  shadow: false,\n})\nexport class NvTablecolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * A short, abbreviated description of the header cell's content provided as an\n   * alternative label to use for the header cell when referencing the cell in other\n   * contexts. Some user-agents, such as speech readers, may present this description\n   * before the content itself.\n   */\n  @Prop()\n  readonly abbr: string;\n\n  /**\n   * A non-negative integer value indicating how many columns the header cell spans\n   * or extends. The default value is 1. User agents dismiss values higher than 1000\n   * as incorrect, defaulting such values to 1.\n   * @default 1\n   */\n  @Prop()\n  readonly colspan: number = 1;\n\n  /**\n   * A non-negative integer value indicating how many rows the header cell spans or\n   * extends. The default value is 1; if its value is set to 0, the header cell will\n   * extends to the end of the table grouping section (`<thead>`, `<tbody>`, `<tfoot>`,\n   * even if implicitly defined), that the `<th>` belongs to. Values higher than 65534\n   * are clipped at 65534.\n   * @default 1\n   */\n  @Prop()\n  readonly rowspan: number = 1;\n\n  /**\n   * A list of space-separated strings corresponding to the id attributes of the `<th>`\n   * elements that provide the headers for this header cell.\n   * @example 'col1 col2'\n   */\n  @Prop()\n  readonly headers: string;\n\n  /**\n   * Defines the cells that the header (defined in the `<th>`) element relates to.\n   * Possible enumerated values are:\n   *\n   * - `col`: The header relates to all cells of the column it belongs to.\n   * - `row`: The header relates to all cells of the row it belongs to.\n   * - `colgroup`: The header relates to all cells of the column group it belongs to.\n   * - `rowgroup`: The header relates to all cells of the row group it belongs to.\n   *\n   * If the `scope` attribute is not specified, or its value is not `row`, `col`,\n   * `rowgroup`, or `colgroup`, then browsers automatically select the set of cells to\n   * which the header cell applies.\n   */\n  @Prop()\n  readonly scope: 'col' | 'row' | 'colgroup' | 'rowgroup';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <th\n          abbr={this.abbr}\n          colSpan={this.colspan}\n          headers={this.headers}\n          rowSpan={this.rowspan}\n          scope={this.scope}\n        >\n          <slot></slot>\n        </th>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}

package/dist/components/nv-tabledatacell.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvTabledatacell extends Components.NvTabledatacell, HTMLElement {}
+export const NvTabledatacell: {
+    prototype: NvTabledatacell;
+    new (): NvTabledatacell;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-tabledatacell.js

@@ -0,0 +1,46 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
+
+const nvTabledatacellCss = "";
+const NvTabledatacellStyle0 = nvTabledatacellCss;
+
+const NvTabledatacell$1 = /*@__PURE__*/ proxyCustomElement(class NvTabledatacell extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.colspan = 1;
+        this.rowspan = 1;
+        this.headers = undefined;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '2b8dd0b288e8771055c061f42bae406e35618394' }, h("td", { key: '4c77b5ddb3e992816a9f74097b184cf0a4299a1d', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, h("slot", { key: '9698292b649e85f9d1a6578ae6b6166c33594eab' }))));
+    }
+    static get style() { return NvTabledatacellStyle0; }
+}, [4, "nv-tabledatacell", {
+        "colspan": [2],
+        "rowspan": [2],
+        "headers": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-tabledatacell"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-tabledatacell":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvTabledatacell$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvTabledatacell = NvTabledatacell$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvTabledatacell, defineCustomElement };
+
+//# sourceMappingURL=nv-tabledatacell.js.map

package/dist/components/nv-tabledatacell.js.map

@@ -0,0 +1 @@
+{"file":"nv-tabledatacell.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,8BAAe,kBAAkB;;MCSpBA,iBAAe;;;;uBAWC,CAAC;uBAWD,CAAC;;;;;;IAc5B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,2DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,8DAAa,CACV,CACA,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTabledatacell"],"sources":["src/components/nv-tabledatacell/nv-tabledatacell.scss?tag=nv-tabledatacell","src/components/nv-tabledatacell/nv-tabledatacell.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table data cell.\n */\n@Component({\n  tag: 'nv-tabledatacell',\n  styleUrl: 'nv-tabledatacell.scss',\n  shadow: false,\n})\nexport class NvTabledatacell {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Contains a non-negative integer value that indicates how many columns the data\n   * cell spans or extends. The default value is 1. User agents dismiss values higher\n   * than 1000 as incorrect, setting to the default value (1).\n   * @default 1\n   */\n  @Prop()\n  readonly colspan: number = 1;\n\n  /**\n   * Contains a non-negative integer value that indicates for how many rows the data\n   * cell spans or extends. The default value is 1; if its value is set to 0, it\n   * extends until the end of the table grouping section (`<thead>`, `<tbody>`,\n   * `<tfoot>`, even if implicitly defined), that the cell belongs to. Values higher\n   * than 65534 are clipped to 65534.\n   * @default 1\n   */\n  @Prop()\n  readonly rowspan: number = 1;\n\n  /**\n   * Contains a list of space-separated strings, each corresponding to the id\n   * attribute of the `<th>` elements that provide headings for this table cell.\n   * @example 'col1 col2'\n   */\n  @Prop()\n  readonly headers: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <td\n          colSpan={this.colspan}\n          rowSpan={this.rowspan}\n          headers={this.headers}\n        >\n          <slot></slot>\n        </td>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}