@nova-design-system/nova-webcomponents 3.3.0 → 3.4.0

package/dist/collection/components/nv-fieldslider/partials/field-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-input.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/partials/field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAwCvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyC,KAAK,CAAC,EAAE;IACtE,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,0DAA0D;IAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,uDAAuD;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,yDAAyD;IACzD,IAAI,SAAiB,CAAC;IACtB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,+DAA+D;YAC/D,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,8EAA8E;IAC9E,MAAM,cAAc,GAAG,QAAQ;QAC7B,CAAC,CAAC,iBAAiB;QACnB,CAAC,CAAC,8BAA8B,CAAC;IAEnC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,cAAc;QACvB,gBAAgB,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,gBAAgB,CAAQ;QACzE,2BACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,IACX,SAAS,IACb,OAAO,EAAE,OAAO,IAChB;QACD,eAAe,IAAI,YAAM,KAAK,EAAC,aAAa,IAAE,eAAe,CAAQ,CAClE,CACP,CAAC,CAAC,CAAC,CACF,aACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,GACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the FieldInput component\n */\ninterface FieldInputProps {\n  /** Whether this is a range slider */\n  range: boolean;\n  /** Whether to show the input field */\n  hasField: boolean;\n  /** The value for single mode */\n  value: number;\n  /** The values for range mode [min, max] */\n  rangeValue: number[];\n  /** Index (0 or 1) for range mode, ignored in single mode */\n  index?: number;\n  /** ID for the input field */\n  inputId: string;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Step size */\n  step: number;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Handler for input changes */\n  onInput: (event: Event) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n  /** Name attribute for the input field (for form submission) */\n  name?: string;\n  /** Name attribute for the end input field (when in range mode) */\n  endName?: string;\n}\n\n/**\n * Renders field input for direct value entry\n * @param {FieldInputProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the field input\n */\nexport const FieldInput: FunctionalComponent<FieldInputProps> = props => {\n  const {\n    range,\n    hasField,\n    value,\n    rangeValue,\n    index,\n    inputId,\n    min,\n    max,\n    step,\n    disabled,\n    readonly,\n    onInput,\n    labelBeforeValue,\n    labelAfterValue,\n    name,\n    endName,\n  } = props;\n\n  // Determine the appropriate value based on mode and index\n  const fieldValue = range ? rangeValue[index] : value;\n\n  // In range mode, we need data-index for event handling\n  const dataAttrs = range ? { 'data-index': index.toString() } : {};\n\n  // Determine the appropriate name based on mode and index\n  let inputName: string;\n  if (range) {\n    if (index === 0) {\n      inputName = name || '';\n    } else {\n      // Use endName if provided, otherwise append \"-end\" to the name\n      inputName = endName || (name ? `${name}-end` : '');\n    }\n  } else {\n    inputName = name || '';\n  }\n\n  // If hasField is false, only the containers are visible, not the input fields\n  const containerClass = hasField\n    ? 'input-container'\n    : 'input-container hidden-input';\n\n  return hasField ? (\n    <div class={containerClass}>\n      {labelBeforeValue && <span class=\"label-before\">{labelBeforeValue}</span>}\n      <input\n        id={inputId}\n        type=\"number\"\n        value={fieldValue}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        readonly={readonly}\n        name={inputName}\n        {...dataAttrs}\n        onInput={onInput}\n      />\n      {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n    </div>\n  ) : (\n    <input\n      id={inputId}\n      type=\"hidden\"\n      value={fieldValue}\n      disabled={disabled}\n      readonly={readonly}\n      name={inputName}\n    />\n  );\n};\n"]}
+{"version":3,"file":"field-input.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/partials/field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAwCvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyC,KAAK,CAAC,EAAE;IACtE,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,0DAA0D;IAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,uDAAuD;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,yDAAyD;IACzD,IAAI,SAAiB,CAAC;IACtB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,+DAA+D;YAC/D,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,8EAA8E;IAC9E,MAAM,cAAc,GAAG,QAAQ;QAC7B,CAAC,CAAC,iBAAiB;QACnB,CAAC,CAAC,8BAA8B,CAAC;IAEnC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,cAAc;QACxB,oCACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,IACX,SAAS,IACb,OAAO,EAAE,OAAO;YAEf,gBAAgB,IAAI,CACnB,YAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,IAC5C,gBAAgB,CACZ,CACR;YACA,eAAe,IAAI,CAClB,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,gBAAgB,IAC5C,eAAe,CACX,CACR,CACc,CACb,CACP,CAAC,CAAC,CAAC,CACF,aACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,GACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the FieldInput component\n */\ninterface FieldInputProps {\n  /** Whether this is a range slider */\n  range: boolean;\n  /** Whether to show the input field */\n  hasField: boolean;\n  /** The value for single mode */\n  value: number;\n  /** The values for range mode [min, max] */\n  rangeValue: number[];\n  /** Index (0 or 1) for range mode, ignored in single mode */\n  index?: number;\n  /** ID for the input field */\n  inputId: string;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Step size */\n  step: number;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Handler for input changes */\n  onInput: (event: Event) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n  /** Name attribute for the input field (for form submission) */\n  name?: string;\n  /** Name attribute for the end input field (when in range mode) */\n  endName?: string;\n}\n\n/**\n * Renders field input for direct value entry\n * @param {FieldInputProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the field input\n */\nexport const FieldInput: FunctionalComponent<FieldInputProps> = props => {\n  const {\n    range,\n    hasField,\n    value,\n    rangeValue,\n    index,\n    inputId,\n    min,\n    max,\n    step,\n    disabled,\n    readonly,\n    onInput,\n    labelBeforeValue,\n    labelAfterValue,\n    name,\n    endName,\n  } = props;\n\n  // Determine the appropriate value based on mode and index\n  const fieldValue = range ? rangeValue[index] : value;\n\n  // In range mode, we need data-index for event handling\n  const dataAttrs = range ? { 'data-index': index.toString() } : {};\n\n  // Determine the appropriate name based on mode and index\n  let inputName: string;\n  if (range) {\n    if (index === 0) {\n      inputName = name || '';\n    } else {\n      // Use endName if provided, otherwise append \"-end\" to the name\n      inputName = endName || (name ? `${name}-end` : '');\n    }\n  } else {\n    inputName = name || '';\n  }\n\n  // If hasField is false, only the containers are visible, not the input fields\n  const containerClass = hasField\n    ? 'input-container'\n    : 'input-container hidden-input';\n\n  return hasField ? (\n    <div class={containerClass}>\n      <nv-fieldnumber\n        id={inputId}\n        value={fieldValue}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        readonly={readonly}\n        name={inputName}\n        {...dataAttrs}\n        onInput={onInput}\n      >\n        {labelBeforeValue && (\n          <span class=\"label-before\" slot=\"leading-input\">\n            {labelBeforeValue}\n          </span>\n        )}\n        {labelAfterValue && (\n          <span class=\"label-after\" slot=\"trailing-input\">\n            {labelAfterValue}\n          </span>\n        )}\n      </nv-fieldnumber>\n    </div>\n  ) : (\n    <input\n      id={inputId}\n      type=\"hidden\"\n      value={fieldValue}\n      disabled={disabled}\n      readonly={readonly}\n      name={inputName}\n    />\n  );\n};\n"]}

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

@@ -197,7 +197,7 @@ nv-fieldslider .slider-container .input-container {
   opacity: var(--components-form-opacity-default, 1);
   background: var(--nv-field-background);
   transition: all 150ms ease-out;
-  width: 70px;
+  width: 90px;
   flex-grow: unset;
 }
 nv-fieldslider .slider-container .input-container:hover {
@@ -250,6 +250,14 @@ nv-fieldslider .slider-container .input-container input[type=password]::-ms-clea
   width: 0;
   height: 0;
 }
+nv-fieldslider .slider-container .input-container .label-before {
+  margin-left: var(--spacing-2);
+  color: var(--components-form-field-icon-default);
+}
+nv-fieldslider .slider-container .input-container .label-after {
+  margin-right: var(--spacing-2);
+  color: var(--components-form-field-icon-default);
+}
 nv-fieldslider[fluid]:not([fluid=false]) {
   max-width: unset;
 }

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

@@ -111,9 +111,9 @@ export class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '852a919f0fcf19b0b67ddf6b0cc2762fc41c9388' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3c99f456e76ddbc6ec21d3390aea76f849d72b88', htmlFor: this.inputId }, h("slot", { key: '5a11c6f3f0f56b8ab05d0390fec6bd1b15763d02', name: "label" }, this.label))), h("div", { key: 'a305c2ffb63cfd66c70d0074fc62c823cce37f8e', class: "input-wrapper" }, h("slot", { key: '0efd115ea0805160dee0c4b58ad137be2aabc741', name: "before-input" }), h("div", { key: 'ccaaa74adf0df1667bc971eaedb4b9883061851d', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'f81025cb44b30e185b3057527cdc2a1662f5252a', name: "leading-input" }), h("input", { key: 'a8b2356d0b5372823f3da9f053d0de8e28bf8c08', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'aa531021a4d3db52839c280cda21d06be6deaa79', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'fc590ef5879887b2990912b16cc247db875af237', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '68023589dc8340647b1aa5fa07f1b9bda248049d', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '3d0a53914d87559eab76f4d0b8165ad1d7e4eccf', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '8641ee0c8638ec43d5a3da0d08ed29991cedfc6a', class: "description" }, h("slot", { key: 'fe4ee537f946b69ef9908f1d086046b03c777f90', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '865c34d486b86223fbbbc81f22cd3428e4110af8', hidden: !this.error, class: "error-description" }, h("slot", { key: 'ac80b543c58bed6db534b8f1571a70aabf811918', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '376745526ad4350a50ef017acceb43d77414ddaf' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f03087361cb8f347d6fffb1dc234f3d041109229', htmlFor: this.inputId }, h("slot", { key: 'cea3904cf5522359426b47e7d4e8f4a71da6fb00', name: "label" }, this.label))), h("div", { key: '9f766da6a0962d3e865388d732109c81b03a5802', class: "input-wrapper" }, h("slot", { key: 'f9cd30cda301c60f89263eef30c178ccbbf2fa18', name: "before-input" }), h("div", { key: '086b7a59b7883aea0f5a93945d40a642f3b0fef2', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'caa4cf0d9d1e2990c438aea19e6afa29a11163b9', name: "leading-input" }), h("input", { key: '36fda559fb8609c8275fa3f3d14142d0cf4fc2db', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'dd6564d4960fff20e8204dab2cad3ae07ec433ad', name: "trailing-input" }), this.error && (h("nv-icon", { key: '203a3a51cf3db17b6544b327d692d8805c9577ee', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '13f4d73e72745cbb06cdb3969f94ad5627822743', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '1c9b1388173a7ad98b3ec2ac7663d77588d71c8d', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '71797445f8593485ec2c0030c90eef6649d25f7f', class: "description" }, h("slot", { key: '296dbddd49b791284734254bcd07400532e9e8ce', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'a2cf61e30ff98da3b3c4134f0669ef6f63cdc62f', hidden: !this.error, class: "error-description" }, h("slot", { key: 'fd4ba3d94a266ce096ca3f1b016b05040813cc37', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }

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

@@ -177,9 +177,9 @@ export class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '405a8423bb391cc8c1e32d8d64ab587c71b355d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'dc5a90e0f9cde1946966cb5b2ad98050c6740869', htmlFor: this.inputId }, h("slot", { key: 'a2c78f23289fcdb742000fa949b98359441268dc', name: "label" }, this.label))), h("div", { key: 'be9840925f442ad964597e77d7c6b9b29b5bae0f', class: "textarea-wrapper" }, h("div", { key: '11b986940cfff801c6599f03850b1fc8c5cf2800', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: 'b4d7bbec6ed6d38545935eef997fbc73499bdc15', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'fc2b00df7fccc60ee9ff1f04cd81e059839b29c0', class: "description" }, h("slot", { key: '9cfaf267dfec3412a5a09ee8fe64b244fda69c7b', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'a56439ef49efeffe303d13f56a0b00f648a7979d', hidden: !this.error, class: "error-description" }, h("slot", { key: '5337f43770894cf6898fcbdc3b77f8a337061597', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '1ee58085eaa986a995b26dce3ec149130831bb42' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'dc8ede45802fa28d9bf616e534f4ca50b8f74f63', htmlFor: this.inputId }, h("slot", { key: '498b99a1e7b82694be943dffc1181c9f0a4c9f5e', name: "label" }, this.label))), h("div", { key: '9a9b90d5398f2ba010384b7b9cb64865329b019c', class: "textarea-wrapper" }, h("div", { key: '4d48453ac04146e6ad25e650995df5e4f550e35e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '2190886c348e78073f5d8f6afc04cf3e91423b16', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '55475e861f4b63ae2806141eb148d62864615b97', class: "description" }, h("slot", { key: 'da2d6533d1b86f7ad3cb436650e3691cc155a1dd', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '239cc36f8db7855aeedf3c8f428099921142f249', hidden: !this.error, class: "error-description" }, h("slot", { key: '97cd804f0c573da6042a6194c263d8580931ca55', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }

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

@@ -970,26 +970,26 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: 'f2e316b464ef324043fca47a25d7511fed662fe9', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '738dd3f9ba307a21ad7f16f77eb09f4f9fed8ccb', htmlFor: this.inputId }, h("slot", { key: '8106132899c67bbc7e9ffb82caf575d599239b9a', name: "label" }, this.label))), h("nv-popover", { key: '8306d0204039862466d83c7e5e2f42b87ea331c4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '0355aee332a5c5cd2492f22b7d820625273c74e6', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'a6aaeaba4901b4fe0b0266796c84531d57fbb719', name: "before-input" }), h("div", { key: 'ae78ff8fc1a857a0da7be6e3c29464dbc0b80771', class: "input-container" }, h("slot", { key: '6455a51b2f1edf565ac754e61ac773a920f319d4', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            h("input", { key: '9a48b8ea04698b9443774a2e2bf41383144ba29a', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (h(Host, { key: 'c93db13f558128b6923ef9c0a5a96f3a1df15a23', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3049f15468677e1214e627352e6d0c5bfedf2aa8', htmlFor: this.inputId }, h("slot", { key: '00291784c0f7074a9b6e42b9e884c58735fadee9', name: "label" }, this.label))), h("nv-popover", { key: '38d2995f5698c21cc8e10d02e57cf1c617188aed', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'd71f02fb8cfd8c7ccd96e17e06ab6e930ae437a8', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'b4fa621c1189efb75d786e87d48eb6e754987358', name: "before-input" }), h("div", { key: '00d7bb6ae8945d946182fbe01faea79c4176b66a', class: "input-container" }, h("slot", { key: '6d5fc613e05a7a353f96fb6f8b30dd606627c742', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            h("input", { key: '4a062db12b9b750c6d327fcadff850571e92f674', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            h("span", { key: '5f75d09a90c0a8f6f106eb3e24f4f342fcc36d67' }, ":"),
-            h("input", { key: 'b3cc508705147ea07218a037f21f425deb9b94af', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            h("span", { key: '629882cf244f54684e1997c7dd60d32deb5fad5a' }, ":"),
+            h("input", { key: '14ae0159a0e5d616d8734e12deffb0f392ee315a', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            h("span", { key: '00b9320c275b027f9b2fbbebc1f56431783c874e' }, ":"),
-            h("input", { key: '3421fb11a4c9d9ba58bbf6f809070ce35d3d1ad6', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            h("span", { key: '4d1fb67d409976c5510773c409441f330f627ea4' }, ":"),
+            h("input", { key: 'ea04cddd6f7534f88bc79f82ddcb4a111bffb492', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], h("nv-iconbutton", { key: 'c61dc8780e1d668f2bf11ac2ace21b89ed460fdb', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '5963651793c9c1ec5d47be2a8cea9fed22490bb9', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '79953118d4206363f97ffb8d69dd76545795e419', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: 'd0a8c104a671f997e6a9da223baa2a37dd3bf349', name: "after-input" })), h("div", { key: '7dec8335599d59e116065bdb0053a9096acaae88', class: "time-dropdown", slot: "content" }, h("div", { key: 'be7d3a3fa7b4def66a7ebdf2f29b489540fa5802', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], h("nv-iconbutton", { key: '1eaf8a58a077bfd9c3d93f9277aa8db6e16cbc80', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'e3ce880982184b1d31f6a15163361997deca7ac6', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '6bcf818a4713e4420d79bf8b0f447ff41dfe5d6f', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '55538603473159890b542b3953b73c43bb8ff262', name: "after-input" })), h("div", { key: '577234c4d732118b059e5a5aa8626677f40ba864', class: "time-dropdown", slot: "content" }, h("div", { key: '25d144cb214a37420182e121078e9f690ee21271', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ec98cc31482efab33ace4e0bf62c6d5d82890df5', class: "description" }, h("slot", { key: '307b134933cca699d6f00d891a440281f2427d79', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '71763de75be4e9f14e1cd1788ca06f2265a46d7e', hidden: !this.error, class: "error-description" }, h("slot", { key: 'dbe05c00515a5ccf1b4ba4736b943cfd8cefaaa0', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '875466380478b23bbc56e661a93392b27fa7af7d', class: "description" }, h("slot", { key: 'ae870e00e1b92f44ea6a3e08b844b9de21060a01', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'aaca1281abe877b9696931d5cc1ab567441f3de9', hidden: !this.error, class: "error-description" }, h("slot", { key: '4e17b0085732e9a47c9637c4ad9b145b5a705e2a', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }

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

@@ -48,7 +48,7 @@ export class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '107d58f8858951a11af7bc23be7ae8564ece6b15', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '3e7d4827757d59019b3661a5994d99c5eca995f2', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '0bc93cc49237854d5a8ca2bb50c25e7660c2dfa1', href: `#${this.name}` }))));
+        return (h(Host, { key: '26f1c3b326b50a317bfef8f8415fa76c28b08253', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '7a998a855a9526b9e86e0b19f4f03f8e0cdf235d', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '9f2681f14c37da95909b8dc6abcac22adf906a11', href: `#${this.name}` }))));
     }
     static get is() { return "nv-icon"; }
     static get originalStyleUrls() {

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

@@ -111,7 +111,7 @@ export class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'eb27cfea5e30fa97e9950d76f3038dc9ff4f4116', 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: '6f24a71b7ecab3168567a76b67f0b226f3afa9c3', size: this.size }), !this.loading && h("nv-icon", { key: 'f4a0eb19d8bc08a0c8dbc8cedca249bf417eeb1b', name: this.name, size: this.size }), h("slot", { key: '2994118659b1ad184a42ea4b20ea754427dae279' })));
+        return (h(Host, { key: '1536dd34c53c9eaf67914fcdf869a0274aa6cf87', 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: '241d18417cd2c4a55c1dcc3fb328edfd8b95a95f', size: this.size }), !this.loading && h("nv-icon", { key: '1cadeaa79ff4992fb88b6703c4e7d6feee37440c', name: this.name, size: this.size }), h("slot", { key: '9d205fbc548c91990fac461f7722f69470b58913' })));
     }
     static get is() { return "nv-iconbutton"; }
     static get formAssociated() { return true; }

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

@@ -16,7 +16,7 @@ export class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: '0048566e92b54cf51ef761b8cce814aab1f78707', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: '5e3cf72314d0355d5a979cf1c8561312eed50644', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get is() { return "nv-loader"; }
     static get originalStyleUrls() {

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

@@ -189,7 +189,7 @@ export class NvMenu {
         });
     }
     render() {
-        return (h(Host, { key: '55cb23963aea78dabf518a9a54308391ed5c5dcb' }, h("slot", { key: 'b7bd9090491a34f3205afb8db8d7ca87864d0c04', name: "trigger" }), h("nv-popover", { key: '8b7e35e0b394827a5bd66858a4f3e81e90dcb597', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: 'e95adf4b7d951357f550a8084ce957c97134d58f' }, h("slot", { key: 'e2db24c208c716c24c3357c95983c87ee0f11d88', name: "trigger" }), h("nv-popover", { key: '735f6d29c7333293aea263eea751b021fbfd0943', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
     }
     static get is() { return "nv-menu"; }
     static get originalStyleUrls() {

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

@@ -43,7 +43,7 @@ export class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b1eeb8aaaab3daf8e247d2ca60ca4ea91828dc25', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '48a9145eec4d5fd701fa975000bf29e4f8e7b018', name: this.icon }), h("slot", { key: 'a3212c6b899ce3dd2f538d8ea2163355ced9a57e' }), this.label && h("span", { key: '9b64bfabd9c2d2e25702e1e06f53dd76a1405a0e', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'adca0ce4f6c9c53f965d0d71b7f0a9d7675091b4' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '5d55fc8fe1b1fc32fef9ee38b8dd53d7617ed0e0', name: "chevron-right" })));
+        return (h(Host, { key: '12438da400f424a313c213b0950fcca96fd42442', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '83a86971ac01576cfbfbe3d07e39e0c54f813bde', name: this.icon }), h("slot", { key: '0b6fc3c1e0eaa6dedee1aa5c99fc39ee4899e400' }), this.label && h("span", { key: 'fb85b1ace8d7cd479c9f78d48950110fd592788d', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'fd42e2eb808d318a9f5e7aaa18da7f4e85293ec3' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '51a5accbc105843b9e7a40209bd9139c16eec4b0', name: "chevron-right" })));
     }
     static get is() { return "nv-menuitem"; }
     static get originalStyleUrls() {

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

@@ -48,7 +48,7 @@ export class NvPopover {
         /**
          * Sets how many pixels the popover should stay from the edge of the viewport.
          */
-        this.shiftPadding = 16;
+        this.shiftPadding = 0;
         /**
          * Use this to set a delay before the popover appears on hover. If the mouse
          * leaves before this time, the popover won't show. This only works when the
@@ -306,7 +306,7 @@ export class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'af402e7713ddfed886a9965c0bde847be7399f7e' }, h("slot", { key: 'bdef517573a37c420109712631120377fb862ab1', name: "trigger" }), h("div", { key: '8c2004b6d92bb09a1d19ea1f709b2f104695e111', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '11d1b809fcdfddf55b471e12618ec4b8735d4a31', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '989d8f02e4044d4963d3152f137f691fd80ef818', name: "content" }))));
+        return (h(Host, { key: '3ab4e0f245ab925d2336f09b0cfa1c5c81a7eb32' }, h("slot", { key: '54d237432f4f69f517f0182e58a3e6d75c658382', name: "trigger" }), h("div", { key: 'ea6d9cedbade36ca48f9e72ec139720caeae1e35', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'f7cc6db85501f067317f66cc500b21e6571feeb6', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '2330178c2adfd93eea13286ec3efee5c495b2680', name: "content" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {
@@ -510,7 +510,7 @@ export class NvPopover {
                 "setter": false,
                 "attribute": "shift-padding",
                 "reflect": true,
-                "defaultValue": "16"
+                "defaultValue": "0"
             },
             "enterDelay": {
                 "type": "number",

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

@@ -1 +1 @@
-{"version":3,"file":"nv-popover.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  h,\n  EventEmitter,\n  Event,\n  Watch,\n  Listen,\n  Element,\n  Method,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  type Placement,\n} from '@floating-ui/dom';\nimport { createStore } from '@stencil/store';\n\nimport { useGrow, useFade } from '../../animations';\nimport {\n  addEventListeners,\n  removeEventListeners,\n  type EventsAndListeners,\n} from '../../utils/events.utils';\n\nconst { state } = createStore<{\n  /**\n   * A map of popover groups, used to manage the opening and closing of multiple\n   */\n  groups: Map<\n    string,\n    {\n      /**\n       * The popover element that opened the group.\n       */\n      openedBy: HTMLNvPopoverElement;\n    }\n  >;\n}>({\n  groups: new Map(),\n});\n\n/**\n * @slot trigger - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover.\n */\n@Component({\n  tag: 'nv-popover',\n  styleUrl: 'nv-popover.scss',\n  shadow: false,\n})\nexport class NvPopover {\n  @Element() el: HTMLNvPopoverElement;\n  private popoverElement!: HTMLDivElement;\n  private arrowElement!: HTMLDivElement;\n  private eventsAttached = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ reflect: false, mutable: true })\n  triggerElement: Element;\n\n  /**\n   * Use this prop to toggle the visibility of the popover. Set to true to show\n   * the popover and false to hide it.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Sets the interaction mode for triggering the popover. Options include:\n   * - `hover`: The popover is shown on trigger hover.\n   * - `click`: The popover toggles on trigger click.\n   * - `controlled`: The visibility is managed manually through methods or the\n   *   open prop.\n   */\n  @Prop({ reflect: true })\n  readonly triggerMode: 'hover' | 'click' | 'controlled' = 'click';\n\n  /**\n   * Defines where the popover appears relative to the trigger.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Use this to group popovers together so that opening one will not animate\n   * the closing of another. This is helpful when popovers are placed close\n   * together, preventing animation overlap.\n   */\n  @Prop({ reflect: true })\n  readonly groupName: string;\n\n  /**\n   * Adjust the gap between the popover and its trigger element by setting how\n   * many pixels they should be apart.\n   */\n  @Prop({ reflect: true })\n  readonly offset: number = 6;\n\n  /**\n   * Use this to decide if the popover should include a small arrow pointing to\n   * the trigger element, making the connection between them more clear.\n   */\n  @Prop({ reflect: true })\n  readonly hasArrow: boolean = false;\n\n  /**\n   * Disables the automatic flipping of the popover when the trigger element is\n   * out of the viewport. The popover will flip automatically by default.\n   */\n  @Prop({ reflect: true })\n  readonly disableFlip: boolean = false;\n\n  /**\n   * Sets how many pixels the popover should stay from the edge of the viewport.\n   */\n  @Prop({ reflect: true })\n  readonly shiftPadding: number = 16;\n\n  /**\n   * Use this to set a delay before the popover appears on hover. If the mouse\n   * leaves before this time, the popover won't show. This only works when the\n   * trigger mode is set to `hover`.\n   */\n  @Prop({ reflect: true })\n  readonly enterDelay: number = 0;\n\n  /**\n   * Use this to set the popover to be nested inside another popover. This will\n   * prevent the parent popover from closing when the child popover is opened.\n   */\n  @Prop({ reflect: true })\n  readonly nested: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Call this method to show the popover, making it visible on the screen.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Use this method to hide the popover, making it disappear from view.\n   */\n  @Method()\n  async hide() {\n    this.open = false;\n  }\n\n  /**\n   * Call this method to toggle between showing and hiding the popover, based on\n   * its current state.\n   */\n  @Method()\n  async toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Attaches event listeners to the trigger element, and makes sure this only\n   * happens once.\n   */\n  private attachEventListeners() {\n    if (this.triggerElement && !this.eventsAttached) {\n      addEventListeners(this.closeEvents, document, this);\n\n      if (this.triggerMode === 'click') {\n        addEventListeners(this.clickEvents, this.triggerElement, this);\n\n        // Add document click and touch listeners\n        addEventListeners(this.outsideClickEvents, document, this);\n      }\n\n      if (this.triggerMode === 'hover') {\n        addEventListeners(this.hoverEvents, this.triggerElement, this);\n      }\n      this.eventsAttached = true;\n    }\n  }\n\n  /**\n   * Handles the click outside event.\n   * @param {MouseEvent | TouchEvent} event - The event object.\n   */\n  private handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    // This popover should close when the user clicks outside of it.\n    if (this.el.contains(event.target as Node)) return;\n    if (this.triggerElement?.contains(event.target as Node)) return;\n    this.open = false;\n  };\n\n  /**\n   * Calculates the position of the popover relative to the trigger.\n   * @docs https://floating-ui.com/docs/computePosition\n   */\n  private positionPopover() {\n    if (!this.triggerElement) return;\n\n    computePosition(this.triggerElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [\n        offset(this.offset),\n        !this.disableFlip &&\n          flip({\n            fallbackStrategy: 'bestFit',\n            crossAxis: true,\n            fallbackPlacements: ['bottom'],\n          }),\n        shift({ padding: this.shiftPadding }),\n        this.hasArrow && arrow({ element: this.arrowElement }),\n      ],\n    }).then(({ x, y, placement, middlewareData }) => {\n      Object.assign(this.popoverElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.hasArrow) {\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        const transform = {\n          top: 'rotate(225deg)',\n          right: 'rotate(315deg)',\n          bottom: 'rotate(45deg)',\n          left: 'rotate(135deg)',\n        }[placement.split('-')[0]];\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        Object.assign(this.arrowElement.style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          transform,\n          [staticSide]: '-4px',\n        });\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the popover is toggled.\n   * @bind open\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  @Listen('openChanged', { target: 'document' })\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (this.triggerMode === 'controlled') return;\n    if (this.nested) return;\n    if ((event.target as Element)?.hasAttribute('nested')) return;\n    // This popover should close when another one is opened.\n    if (event.target !== this.el && event.detail === true) this.open = false;\n  }\n\n  private clickEvents: EventsAndListeners = [\n    ['click', () => (this.open = !this.open)],\n  ];\n\n  private outsideClickEvents: EventsAndListeners = [\n    ['click', this.handleClickOutside],\n    ['touchstart', this.handleClickOutside],\n  ];\n\n  private hideTimeout: ReturnType<typeof setTimeout>;\n  private showTimeout: ReturnType<typeof setTimeout>;\n  private hoverEvents: EventsAndListeners = [\n    [\n      'focus',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(\n          () => (this.open = true),\n          this.enterDelay,\n        );\n      },\n    ],\n    [\n      'blur',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => (this.open = false), 50);\n      },\n    ],\n    [\n      'mouseenter',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(\n          () => (this.open = true),\n          this.enterDelay,\n        );\n      },\n    ],\n    [\n      'mouseleave',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => (this.open = false), 100);\n      },\n    ],\n  ];\n\n  private closeEvents: EventsAndListeners = [\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.open = false;\n        }\n      },\n    ],\n  ];\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n  private isAnimating = false;\n\n  @Watch('open')\n  async handleOpenChange(open: boolean) {\n    // Prevent multiple animations from running at the same time.\n    while (this.isAnimating) {\n      await new Promise(resolve => setTimeout(resolve, 50));\n    }\n\n    this.isAnimating = true;\n\n    const group = state.groups.get(this.groupName);\n    const isOtherMemberOpen = group && group.openedBy !== this.el;\n    const isThisMemberOpen = group && group.openedBy === this.el;\n\n    if (open) this.popoverElement.style.removeProperty('display');\n    if (isThisMemberOpen && !open) state.groups.delete(this.groupName);\n    if (this.groupName && open)\n      state.groups.set(this.groupName, { openedBy: this.el });\n\n    const { growIn } = useGrow(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n      amount: 0.85,\n    });\n\n    const { fadeOut } = useFade(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n    });\n\n    if (open === true) {\n      this.popoverElement.removeAttribute('hidden');\n      this.positionPopover();\n      await growIn();\n    }\n    if (open === false) {\n      await fadeOut();\n      this.popoverElement.setAttribute('hidden', '');\n    }\n\n    this.isAnimating = false;\n    this.openChanged.emit(open);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === 'trigger',\n      );\n  }\n\n  componentWillUpdate() {\n    this.attachEventListeners();\n  }\n\n  componentDidLoad() {\n    // Initial inline style setup\n    if (!this.open) {\n      const { setGrowOut } = useGrow(this.popoverElement);\n      setGrowOut();\n    } else {\n      const { setFadeIn } = useFade(this.popoverElement);\n      setFadeIn();\n      this.popoverElement.removeAttribute('hidden');\n    }\n\n    this.positionPopover();\n    this.attachEventListeners();\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.closeEvents, document, this);\n\n    if (this.triggerMode === 'click') {\n      removeEventListeners(this.clickEvents, this.triggerElement, this);\n      // Remove document listeners\n      removeEventListeners(this.outsideClickEvents, document, this);\n    }\n\n    if (this.triggerMode === 'hover')\n      removeEventListeners(this.hoverEvents, this.triggerElement, this);\n\n    // Reset flag so events can be reattached if component is reconnected\n    this.eventsAttached = false;\n\n    // Clean up any pending timeouts\n    if (this.hideTimeout) clearTimeout(this.hideTimeout);\n    if (this.showTimeout) clearTimeout(this.showTimeout);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <div data-scope=\"popover\" hidden ref={el => (this.popoverElement = el)}>\n          {this.hasArrow && (\n            <div data-scope=\"arrow\" ref={el => (this.arrowElement = el)}></div>\n          )}\n\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-popover.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  h,\n  EventEmitter,\n  Event,\n  Watch,\n  Listen,\n  Element,\n  Method,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  type Placement,\n} from '@floating-ui/dom';\nimport { createStore } from '@stencil/store';\n\nimport { useGrow, useFade } from '../../animations';\nimport {\n  addEventListeners,\n  removeEventListeners,\n  type EventsAndListeners,\n} from '../../utils/events.utils';\n\nconst { state } = createStore<{\n  /**\n   * A map of popover groups, used to manage the opening and closing of multiple\n   */\n  groups: Map<\n    string,\n    {\n      /**\n       * The popover element that opened the group.\n       */\n      openedBy: HTMLNvPopoverElement;\n    }\n  >;\n}>({\n  groups: new Map(),\n});\n\n/**\n * @slot trigger - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover.\n */\n@Component({\n  tag: 'nv-popover',\n  styleUrl: 'nv-popover.scss',\n  shadow: false,\n})\nexport class NvPopover {\n  @Element() el: HTMLNvPopoverElement;\n  private popoverElement!: HTMLDivElement;\n  private arrowElement!: HTMLDivElement;\n  private eventsAttached = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ reflect: false, mutable: true })\n  triggerElement: Element;\n\n  /**\n   * Use this prop to toggle the visibility of the popover. Set to true to show\n   * the popover and false to hide it.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Sets the interaction mode for triggering the popover. Options include:\n   * - `hover`: The popover is shown on trigger hover.\n   * - `click`: The popover toggles on trigger click.\n   * - `controlled`: The visibility is managed manually through methods or the\n   *   open prop.\n   */\n  @Prop({ reflect: true })\n  readonly triggerMode: 'hover' | 'click' | 'controlled' = 'click';\n\n  /**\n   * Defines where the popover appears relative to the trigger.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Use this to group popovers together so that opening one will not animate\n   * the closing of another. This is helpful when popovers are placed close\n   * together, preventing animation overlap.\n   */\n  @Prop({ reflect: true })\n  readonly groupName: string;\n\n  /**\n   * Adjust the gap between the popover and its trigger element by setting how\n   * many pixels they should be apart.\n   */\n  @Prop({ reflect: true })\n  readonly offset: number = 6;\n\n  /**\n   * Use this to decide if the popover should include a small arrow pointing to\n   * the trigger element, making the connection between them more clear.\n   */\n  @Prop({ reflect: true })\n  readonly hasArrow: boolean = false;\n\n  /**\n   * Disables the automatic flipping of the popover when the trigger element is\n   * out of the viewport. The popover will flip automatically by default.\n   */\n  @Prop({ reflect: true })\n  readonly disableFlip: boolean = false;\n\n  /**\n   * Sets how many pixels the popover should stay from the edge of the viewport.\n   */\n  @Prop({ reflect: true })\n  readonly shiftPadding: number = 0;\n\n  /**\n   * Use this to set a delay before the popover appears on hover. If the mouse\n   * leaves before this time, the popover won't show. This only works when the\n   * trigger mode is set to `hover`.\n   */\n  @Prop({ reflect: true })\n  readonly enterDelay: number = 0;\n\n  /**\n   * Use this to set the popover to be nested inside another popover. This will\n   * prevent the parent popover from closing when the child popover is opened.\n   */\n  @Prop({ reflect: true })\n  readonly nested: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Call this method to show the popover, making it visible on the screen.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Use this method to hide the popover, making it disappear from view.\n   */\n  @Method()\n  async hide() {\n    this.open = false;\n  }\n\n  /**\n   * Call this method to toggle between showing and hiding the popover, based on\n   * its current state.\n   */\n  @Method()\n  async toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Attaches event listeners to the trigger element, and makes sure this only\n   * happens once.\n   */\n  private attachEventListeners() {\n    if (this.triggerElement && !this.eventsAttached) {\n      addEventListeners(this.closeEvents, document, this);\n\n      if (this.triggerMode === 'click') {\n        addEventListeners(this.clickEvents, this.triggerElement, this);\n\n        // Add document click and touch listeners\n        addEventListeners(this.outsideClickEvents, document, this);\n      }\n\n      if (this.triggerMode === 'hover') {\n        addEventListeners(this.hoverEvents, this.triggerElement, this);\n      }\n      this.eventsAttached = true;\n    }\n  }\n\n  /**\n   * Handles the click outside event.\n   * @param {MouseEvent | TouchEvent} event - The event object.\n   */\n  private handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    // This popover should close when the user clicks outside of it.\n    if (this.el.contains(event.target as Node)) return;\n    if (this.triggerElement?.contains(event.target as Node)) return;\n    this.open = false;\n  };\n\n  /**\n   * Calculates the position of the popover relative to the trigger.\n   * @docs https://floating-ui.com/docs/computePosition\n   */\n  private positionPopover() {\n    if (!this.triggerElement) return;\n\n    computePosition(this.triggerElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [\n        offset(this.offset),\n        !this.disableFlip &&\n          flip({\n            fallbackStrategy: 'bestFit',\n            crossAxis: true,\n            fallbackPlacements: ['bottom'],\n          }),\n        shift({ padding: this.shiftPadding }),\n        this.hasArrow && arrow({ element: this.arrowElement }),\n      ],\n    }).then(({ x, y, placement, middlewareData }) => {\n      Object.assign(this.popoverElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.hasArrow) {\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        const transform = {\n          top: 'rotate(225deg)',\n          right: 'rotate(315deg)',\n          bottom: 'rotate(45deg)',\n          left: 'rotate(135deg)',\n        }[placement.split('-')[0]];\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        Object.assign(this.arrowElement.style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          transform,\n          [staticSide]: '-4px',\n        });\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the popover is toggled.\n   * @bind open\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  @Listen('openChanged', { target: 'document' })\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (this.triggerMode === 'controlled') return;\n    if (this.nested) return;\n    if ((event.target as Element)?.hasAttribute('nested')) return;\n    // This popover should close when another one is opened.\n    if (event.target !== this.el && event.detail === true) this.open = false;\n  }\n\n  private clickEvents: EventsAndListeners = [\n    ['click', () => (this.open = !this.open)],\n  ];\n\n  private outsideClickEvents: EventsAndListeners = [\n    ['click', this.handleClickOutside],\n    ['touchstart', this.handleClickOutside],\n  ];\n\n  private hideTimeout: ReturnType<typeof setTimeout>;\n  private showTimeout: ReturnType<typeof setTimeout>;\n  private hoverEvents: EventsAndListeners = [\n    [\n      'focus',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(\n          () => (this.open = true),\n          this.enterDelay,\n        );\n      },\n    ],\n    [\n      'blur',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => (this.open = false), 50);\n      },\n    ],\n    [\n      'mouseenter',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(\n          () => (this.open = true),\n          this.enterDelay,\n        );\n      },\n    ],\n    [\n      'mouseleave',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => (this.open = false), 100);\n      },\n    ],\n  ];\n\n  private closeEvents: EventsAndListeners = [\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.open = false;\n        }\n      },\n    ],\n  ];\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n  private isAnimating = false;\n\n  @Watch('open')\n  async handleOpenChange(open: boolean) {\n    // Prevent multiple animations from running at the same time.\n    while (this.isAnimating) {\n      await new Promise(resolve => setTimeout(resolve, 50));\n    }\n\n    this.isAnimating = true;\n\n    const group = state.groups.get(this.groupName);\n    const isOtherMemberOpen = group && group.openedBy !== this.el;\n    const isThisMemberOpen = group && group.openedBy === this.el;\n\n    if (open) this.popoverElement.style.removeProperty('display');\n    if (isThisMemberOpen && !open) state.groups.delete(this.groupName);\n    if (this.groupName && open)\n      state.groups.set(this.groupName, { openedBy: this.el });\n\n    const { growIn } = useGrow(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n      amount: 0.85,\n    });\n\n    const { fadeOut } = useFade(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n    });\n\n    if (open === true) {\n      this.popoverElement.removeAttribute('hidden');\n      this.positionPopover();\n      await growIn();\n    }\n    if (open === false) {\n      await fadeOut();\n      this.popoverElement.setAttribute('hidden', '');\n    }\n\n    this.isAnimating = false;\n    this.openChanged.emit(open);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === 'trigger',\n      );\n  }\n\n  componentWillUpdate() {\n    this.attachEventListeners();\n  }\n\n  componentDidLoad() {\n    // Initial inline style setup\n    if (!this.open) {\n      const { setGrowOut } = useGrow(this.popoverElement);\n      setGrowOut();\n    } else {\n      const { setFadeIn } = useFade(this.popoverElement);\n      setFadeIn();\n      this.popoverElement.removeAttribute('hidden');\n    }\n\n    this.positionPopover();\n    this.attachEventListeners();\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.closeEvents, document, this);\n\n    if (this.triggerMode === 'click') {\n      removeEventListeners(this.clickEvents, this.triggerElement, this);\n      // Remove document listeners\n      removeEventListeners(this.outsideClickEvents, document, this);\n    }\n\n    if (this.triggerMode === 'hover')\n      removeEventListeners(this.hoverEvents, this.triggerElement, this);\n\n    // Reset flag so events can be reattached if component is reconnected\n    this.eventsAttached = false;\n\n    // Clean up any pending timeouts\n    if (this.hideTimeout) clearTimeout(this.hideTimeout);\n    if (this.showTimeout) clearTimeout(this.showTimeout);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <div data-scope=\"popover\" hidden ref={el => (this.popoverElement = el)}>\n          {this.hasArrow && (\n            <div data-scope=\"arrow\" ref={el => (this.arrowElement = el)}></div>\n          )}\n\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -6,7 +6,7 @@ export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f5e01b297dcede0d11045bc52f7f75278bc66c43' }, h("slot", { key: '158a47218c5edff393c19207dbb7987a25779e6d' })));
+        return (h(Host, { key: '5cd3c7b2db57e433f37a086d0cda9bb0335c84fc' }, h("slot", { key: 'ca4003ec7100ee2979ba7b00352c19ecf1d62e05' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

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

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'bc18faae4116df9b3a2f944b97c5e5cf096654ae', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'fe3a07a01bd3a5898bcd1533c7966241cff21b44' })));
+        return (h(Host, { key: '61662dda82c5191e4d90098e10d01bad6524e8c7', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '7ee777cdebbfe9d4f6438a2a79407d9f670f2885' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {

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

@@ -314,14 +314,14 @@ export class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (h(Host, { key: 'b1df9cabce9289f174177a6b28851c3fa4788529' }, h("div", { key: '5e27d3ad0d34f64c9e9b5c9f43ac025603c08530', class: "hidden" }, h("slot", { key: 'aaef162487498f64c21fb1071b2863e8fa4e5a5c' })), h("slot", { key: '34325af8079d76a7599c1c4516fa8f371ce2fe75', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
+        return (h(Host, { key: '510ea0b8404254faa7b2add62884da77232bf13d' }, h("div", { key: '482a3cfb6fb948d7280b7c0ea70035a9c6385615', class: "hidden" }, h("slot", { key: 'da7aa706d453676212e260e9454ed4e5143f2ccc' })), h("slot", { key: '78054c9a10623c82d7cc7fef5619053c89b70944', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (h("tr", null, h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), h("slot", { key: '49cdd7614ab002f5a3de09d414df6bb46c72a28f', name: "after" })));
+        })))))))), h("slot", { key: '8e5b8eee3870e0d38944370a3d9500f641914935', name: "after" })));
     }
     static get is() { return "nv-table"; }
     static get originalStyleUrls() {

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

@@ -60,8 +60,8 @@ export class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'cb88cfea301859b05adedf15690027b21cd4837e', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '307011c7dcbbe5a6dfc9b2bc1a5bd9842b99f68c', class: "input-container" }, h("input", { key: 'ff87395a3a737a1daaae243176975856a571cac1', 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: 'c190ac33b861a5f92869c83249b441e243b2ee21', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'cfd87cc4e3c68bedf4729a0b62f192077c4b4813', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '81de13cc0e98b4bdb494cc20fb1af59be66952b0', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '69647c010b34a94afb215f9e56b5fba0bd114581', class: "description" }, h("slot", { key: 'ecf7b68b862976907c2d4605a65ee24875b926d3', name: "description" }, this.description))))));
+        return (h(Host, { key: '4c1b964876714244584d1dd4e949cf920312d0bf', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'b593008916115afefa8eebeaffde07c3a576089b', class: "input-container" }, h("input", { key: '20783b13ea6e1b427fd79db1ff46d5685e7c7d89', 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: 'b2c9e1d17dbf53a42fdd0612c1ba507ea15c2775', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd5ac7d57befa88f4b1fa752d95dce9ea50db577c', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '63817f8322de43590bd2052d3695a3e090c466bc', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f33e45707f6cde570f7d4e3f44aece36413cf7c8', class: "description" }, h("slot", { key: '3dcbe64426121cd2541fc545606f1b1381d51fdf', name: "description" }, this.description))))));
     }
     static get is() { return "nv-toggle"; }
     static get formAssociated() { return true; }

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

@@ -31,7 +31,7 @@ export class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '893071a64f973b33dccbf3acec95db46e592b717' }, h("slot", { key: '010776550ed5f942c02540b12756f0c0f64e31c4' }), h("nv-popover", { key: '21a669333da9e55b697f8a0b0962a8328beac55a', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'ed89d0bfe1e9e8d12e33e3d7fb0f5b7f2685bbb9', slot: "content" }, this.message), h("slot", { key: 'fa2d9602e003f1da5c3d23156db7b2ac482966bd', name: "content" }))));
+        return (h(Host, { key: '34431c56ab8f0d9581d7bae170eea34972594a3c' }, h("slot", { key: '0e9b3492b07b23e3eb5e7475d174aca7f3d18cdb' }), h("nv-popover", { key: '2a3eccd8a928114ad8df6ce67a19948fab772654', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '286fad171703def16f9a1b95f2e8dc01afc062a0', slot: "content" }, this.message), h("slot", { key: '502d9abb156d4a40f36f442a6629e08b754a983f', name: "content" }))));
     }
     static get is() { return "nv-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/templates/navigation.docs.js

@@ -20,7 +20,7 @@ const NavigationDocs = {
         {
             name: 'Sidenav',
             description: 'A Navigation bar using Tailwind CSS for styling. It’s easy to jump between sections like the Home page, Dashboard, Projects, and Tasks. Each tab has its own icon and a clear border that shows you which one’s active.',
-            template: (h("nav", { "data-class": "nv-sidenav flex flex-1 flex-col" }, h("ul", { role: "list", class: "flex flex-1 flex-col gap-y-0.5" }, h("li", null, h("a", { href: "/login", "data-class": "nv-link" }, h("nv-icon", { role: "img", "aria-label": "home-icon", name: "home", size: "md" }), "Home")), h("li", null, h("a", { href: "/form", "data-class": "nv-link active" }, h("nv-icon", { role: "img", "aria-label": "layout-dashboard-icon", name: "layout-dashboard", size: "md" }), "Dashboard")), h("li", { "data-class": "collapsible" }, h("a", { href: "/typo", "data-class": "nv-link" }, h("span", { "data-class": "flex items-center gap-x-2" }, h("nv-icon", { role: "img", "aria-label": "stack-icon", name: "stack", size: "md" }), "Projects"), h("nv-iconbutton", { "data-class": "nv-iconbutton", size: "md", name: "chevron-down", emphasis: "lower" }))), h("li", null, h("a", { href: "#", "data-class": "nv-link" }, h("nv-icon", { role: "img", "aria-label": "checklist-icon", name: "checklist", size: "md" }), "Tasks")), h("li", null, h("a", { href: "#", "data-class": "nv-link" }, h("nv-icon", { role: "img", "aria-label": "notebook-icon", name: "notebook", size: "md" }), "Documentation")), h("li", null, h("a", { href: "#", "data-class": "nv-link" }, h("nv-icon", { role: "img", "aria-label": "headset-icon", name: "headset", size: "md" }), "Support")), h("li", null, h("a", { href: "#", "data-class": "nv-link disabled" }, h("nv-icon", { role: "img", "aria-label": "contract-icon", name: "contract", size: "md" }), "Contracts"))))),
+            template: (h("nav", { "data-class": "nv-sidenav flex flex-1 flex-col" }, h("ul", { role: "list", "data-class": "flex flex-1 flex-col gap-y-0.5" }, h("li", null, h("a", { href: "/login", "data-class": "nv-link" }, h("nv-icon", { role: "img", "aria-label": "home-icon", name: "home", size: "md" }), "Home")), h("li", null, h("a", { href: "/form", "data-class": "nv-link active" }, h("nv-icon", { role: "img", "aria-label": "layout-dashboard-icon", name: "layout-dashboard", size: "md" }), "Dashboard")), h("li", { "data-class": "collapsible" }, h("a", { href: "/typo", "data-class": "nv-link" }, h("span", { "data-class": "flex items-center gap-x-2" }, h("nv-icon", { role: "img", "aria-label": "stack-icon", name: "stack", size: "md" }), "Projects"), h("nv-iconbutton", { "data-class": "nv-iconbutton", size: "md", name: "chevron-down", emphasis: "lower" }))), h("li", null, h("a", { href: "#", "data-class": "nv-link" }, h("nv-icon", { role: "img", "aria-label": "checklist-icon", name: "checklist", size: "md" }), "Tasks")), h("li", null, h("a", { href: "#", "data-class": "nv-link" }, h("nv-icon", { role: "img", "aria-label": "notebook-icon", name: "notebook", size: "md" }), "Documentation")), h("li", null, h("a", { href: "#", "data-class": "nv-link" }, h("nv-icon", { role: "img", "aria-label": "headset-icon", name: "headset", size: "md" }), "Support")), h("li", null, h("a", { href: "#", "data-class": "nv-link disabled" }, h("nv-icon", { role: "img", "aria-label": "contract-icon", name: "contract", size: "md" }), "Contracts"))))),
         },
     ],
 };

package/dist/collection/templates/navigation.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.docs.js","sourceRoot":"","sources":["../../src/templates/navigation.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,MAAM,cAAc,GAA2B;IAC7C,aAAa,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC;IAC3C,OAAO,EAAE;QACP;YACE,IAAI,EAAE,aAAa;YACnB,WAAW,EACT,+RAA+R;YACjS,QAAQ,EAAE,CACR,yBAAgB,4BAA4B;gBAC1C,wBAAe,MAAM;oBACnB;wBACE,SAAG,IAAI,EAAC,QAAQ,gBAAY,SAAS;4BACnC,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAW;yCACvC,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,OAAO,gBAAY,gBAAgB;4BACzC,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAW;oCAC7C,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,OAAO,gBAAY,SAAS;4BAClC,eAAS,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAW;oCAC1C,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,kBAAkB;4BACvC,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAW;oCACvC,CACD,CACF,CACD,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM;YACZ,WAAW,EACT,gMAAgM;YAClM,QAAQ,EAAE,CACR,yBAAgB,qBAAqB;gBACnC,wBAAe,MAAM;oBACnB;wBACE,SAAG,IAAI,EAAC,QAAQ,gBAAY,SAAS;4BACnC,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAW;yCACvC,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,OAAO,gBAAY,gBAAgB;4BACzC,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAW;oCAC7C,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,OAAO,gBAAY,SAAS;4BAClC,eAAS,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAW;oCAC1C,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,kBAAkB;4BACvC,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAW;oCACvC,CACD,CACF,CACD,CACP;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,qCAAqC;YAClD,QAAQ,EAAE,CACR,yBAAgB,WAAW;gBACzB,wBAAe,gBAAgB;oBAC7B;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,SAAS;4BAC9B,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAW;mCACvC,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,SAAS;4BAC9B,eAAS,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,GAAW;wCAEnD,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,gBAAgB;4BACrC,eAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAW;;4BAE1C,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAW,CAC/C,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,SAAS;4BAC9B,eAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAW;;4BAE1C,0BAAiB,wHAAwH,QAElI,CACL,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,SAAS;4BAC9B,eAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAW;4CAC3C,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,SAAS;4BAC9B,eAAS,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAW;sCAC1C,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,kBAAkB;4BACvC,eAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAW;wCAC3C,CACD,CACF,CACD,CACP;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,WAAW,EACT,yNAAyN;YAC3N,QAAQ,EAAE,CACR,yBAAgB,iCAAiC;gBAC/C,UAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gCAAgC;oBACpD;wBACE,SAAG,IAAI,EAAC,QAAQ,gBAAY,SAAS;4BACnC,eACE,IAAI,EAAC,KAAK,gBACC,WAAW,EACtB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,GACA;mCAET,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,OAAO,gBAAY,gBAAgB;4BACzC,eACE,IAAI,EAAC,KAAK,gBACC,uBAAuB,EAClC,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAC,IAAI,GACA;wCAET,CACD;oBACL,wBAAe,aAAa;wBAC1B,SAAG,IAAI,EAAC,OAAO,gBAAY,SAAS;4BAClC,0BAAiB,2BAA2B;gCAC1C,eACE,IAAI,EAAC,KAAK,gBACC,YAAY,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA;2CAEN;4BAEP,mCACa,eAAe,EAC1B,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,OAAO,GACD,CACf,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,SAAS;4BAC9B,eACE,IAAI,EAAC,KAAK,gBACC,gBAAgB,EAC3B,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,IAAI,GACA;oCAET,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,SAAS;4BAC9B,eACE,IAAI,EAAC,KAAK,gBACC,eAAe,EAC1B,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,GACA;4CAET,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,SAAS;4BAC9B,eACE,IAAI,EAAC,KAAK,gBACC,cAAc,EACzB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,GACA;sCAET,CACD;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,gBAAY,kBAAkB;4BACvC,eACE,IAAI,EAAC,KAAK,gBACC,eAAe,EAC1B,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,GACA;wCAET,CACD,CACF,CACD,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs, NovaTemplate } from '../nova-docs';\n\nconst NavigationDocs: NovaDocs<NovaTemplate> = {\n  subcomponents: ['nv-icon', 'nv-iconbutton'],\n  stories: [\n    {\n      name: 'Buttongroup',\n      description:\n        'A button group that lets users switch seamlessly between related options, like different view modes or settings. Each button has a clear visual distinction for the active state, ensuring clarity and ease of use. Icons or labels provide quick recognition, making interactions intuitive.',\n      template: (\n        <nav data-class=\"nv-buttongroup bg-level-00\">\n          <ul data-class=\"flex\">\n            <li>\n              <a href=\"/login\" data-class=\"nv-link\">\n                <nv-icon name=\"lock\" size=\"md\"></nv-icon>Login page\n              </a>\n            </li>\n            <li>\n              <a href=\"/form\" data-class=\"nv-link active\">\n                <nv-icon name=\"chart-dots\" size=\"md\"></nv-icon>Forms\n              </a>\n            </li>\n            <li>\n              <a href=\"/typo\" data-class=\"nv-link\">\n                <nv-icon name=\"feather\" size=\"md\"></nv-icon>Typos\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link disabled\">\n                <nv-icon name=\"user\" size=\"md\"></nv-icon>Other\n              </a>\n            </li>\n          </ul>\n        </nav>\n      ),\n    },\n    {\n      name: 'Tabs',\n      description:\n        'A navigation bar using a tab view so it’s easy to jump between sections like the Login page, Forms, and Typos. Each tab has its own icon and a clear border that shows you which one’s active.',\n      template: (\n        <nav data-class=\"nv-tabs bg-level-00\">\n          <ul data-class=\"flex\">\n            <li>\n              <a href=\"/login\" data-class=\"nv-link\">\n                <nv-icon name=\"lock\" size=\"md\"></nv-icon>Login page\n              </a>\n            </li>\n            <li>\n              <a href=\"/form\" data-class=\"nv-link active\">\n                <nv-icon name=\"chart-dots\" size=\"md\"></nv-icon>Forms\n              </a>\n            </li>\n            <li>\n              <a href=\"/typo\" data-class=\"nv-link\">\n                <nv-icon name=\"feather\" size=\"md\"></nv-icon>Typos\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link disabled\">\n                <nv-icon name=\"user\" size=\"md\"></nv-icon>Other\n              </a>\n            </li>\n          </ul>\n        </nav>\n      ),\n    },\n    {\n      name: 'Navbar',\n      description: 'It is an horizontal navigation bar.',\n      template: (\n        <nav data-class=\"nv-navbar\">\n          <ul data-class=\"flex gap-x-0.5\">\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"home\" size=\"md\"></nv-icon>Home\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"layout-dashboard\" size=\"md\"></nv-icon>\n                Dashboard\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link active\">\n                <nv-icon name=\"stack\" size=\"md\"></nv-icon>\n                Projects\n                <nv-icon name=\"chevron-down\" size=\"sm\"></nv-icon>\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"stack\" size=\"md\"></nv-icon>\n                Tasks\n                <span data-class=\"nv-badge bg-feedback-warning-high text-feedback-warning-high rounded-full w-5 flex items-center justify-center text-sm\">\n                  3\n                </span>\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"notebook\" size=\"md\"></nv-icon>Documentation\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"headset\" size=\"md\"></nv-icon>Support\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link disabled\">\n                <nv-icon name=\"contract\" size=\"md\"></nv-icon>Contracts\n              </a>\n            </li>\n          </ul>\n        </nav>\n      ),\n    },\n    {\n      name: 'Sidenav',\n      description:\n        'A Navigation bar using Tailwind CSS for styling. It’s easy to jump between sections like the Home page, Dashboard, Projects, and Tasks. Each tab has its own icon and a clear border that shows you which one’s active.',\n      template: (\n        <nav data-class=\"nv-sidenav flex flex-1 flex-col\">\n          <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-0.5\">\n            <li>\n              <a href=\"/login\" data-class=\"nv-link\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"home-icon\"\n                  name=\"home\"\n                  size=\"md\"\n                ></nv-icon>\n                Home\n              </a>\n            </li>\n            <li>\n              <a href=\"/form\" data-class=\"nv-link active\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"layout-dashboard-icon\"\n                  name=\"layout-dashboard\"\n                  size=\"md\"\n                ></nv-icon>\n                Dashboard\n              </a>\n            </li>\n            <li data-class=\"collapsible\">\n              <a href=\"/typo\" data-class=\"nv-link\">\n                <span data-class=\"flex items-center gap-x-2\">\n                  <nv-icon\n                    role=\"img\"\n                    aria-label=\"stack-icon\"\n                    name=\"stack\"\n                    size=\"md\"\n                  ></nv-icon>\n                  Projects\n                </span>\n\n                <nv-iconbutton\n                  data-class=\"nv-iconbutton\"\n                  size=\"md\"\n                  name=\"chevron-down\"\n                  emphasis=\"lower\"\n                ></nv-iconbutton>\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"checklist-icon\"\n                  name=\"checklist\"\n                  size=\"md\"\n                ></nv-icon>\n                Tasks\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"notebook-icon\"\n                  name=\"notebook\"\n                  size=\"md\"\n                ></nv-icon>\n                Documentation\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"headset-icon\"\n                  name=\"headset\"\n                  size=\"md\"\n                ></nv-icon>\n                Support\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link disabled\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"contract-icon\"\n                  name=\"contract\"\n                  size=\"md\"\n                ></nv-icon>\n                Contracts\n              </a>\n            </li>\n          </ul>\n        </nav>\n      ),\n    },\n  ],\n};\n\nexport default NavigationDocs;\n"]}
+{"version":3,"file":"navigation.docs.js","sourceRoot":"","sources":["../../src/templates/navigation.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs, NovaTemplate } from '../nova-docs';\n\nconst NavigationDocs: NovaDocs<NovaTemplate> = {\n  subcomponents: ['nv-icon', 'nv-iconbutton'],\n  stories: [\n    {\n      name: 'Buttongroup',\n      description:\n        'A button group that lets users switch seamlessly between related options, like different view modes or settings. Each button has a clear visual distinction for the active state, ensuring clarity and ease of use. Icons or labels provide quick recognition, making interactions intuitive.',\n      template: (\n        <nav data-class=\"nv-buttongroup bg-level-00\">\n          <ul data-class=\"flex\">\n            <li>\n              <a href=\"/login\" data-class=\"nv-link\">\n                <nv-icon name=\"lock\" size=\"md\"></nv-icon>Login page\n              </a>\n            </li>\n            <li>\n              <a href=\"/form\" data-class=\"nv-link active\">\n                <nv-icon name=\"chart-dots\" size=\"md\"></nv-icon>Forms\n              </a>\n            </li>\n            <li>\n              <a href=\"/typo\" data-class=\"nv-link\">\n                <nv-icon name=\"feather\" size=\"md\"></nv-icon>Typos\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link disabled\">\n                <nv-icon name=\"user\" size=\"md\"></nv-icon>Other\n              </a>\n            </li>\n          </ul>\n        </nav>\n      ),\n    },\n    {\n      name: 'Tabs',\n      description:\n        'A navigation bar using a tab view so it’s easy to jump between sections like the Login page, Forms, and Typos. Each tab has its own icon and a clear border that shows you which one’s active.',\n      template: (\n        <nav data-class=\"nv-tabs bg-level-00\">\n          <ul data-class=\"flex\">\n            <li>\n              <a href=\"/login\" data-class=\"nv-link\">\n                <nv-icon name=\"lock\" size=\"md\"></nv-icon>Login page\n              </a>\n            </li>\n            <li>\n              <a href=\"/form\" data-class=\"nv-link active\">\n                <nv-icon name=\"chart-dots\" size=\"md\"></nv-icon>Forms\n              </a>\n            </li>\n            <li>\n              <a href=\"/typo\" data-class=\"nv-link\">\n                <nv-icon name=\"feather\" size=\"md\"></nv-icon>Typos\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link disabled\">\n                <nv-icon name=\"user\" size=\"md\"></nv-icon>Other\n              </a>\n            </li>\n          </ul>\n        </nav>\n      ),\n    },\n    {\n      name: 'Navbar',\n      description: 'It is an horizontal navigation bar.',\n      template: (\n        <nav data-class=\"nv-navbar\">\n          <ul data-class=\"flex gap-x-0.5\">\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"home\" size=\"md\"></nv-icon>Home\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"layout-dashboard\" size=\"md\"></nv-icon>\n                Dashboard\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link active\">\n                <nv-icon name=\"stack\" size=\"md\"></nv-icon>\n                Projects\n                <nv-icon name=\"chevron-down\" size=\"sm\"></nv-icon>\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"stack\" size=\"md\"></nv-icon>\n                Tasks\n                <span data-class=\"nv-badge bg-feedback-warning-high text-feedback-warning-high rounded-full w-5 flex items-center justify-center text-sm\">\n                  3\n                </span>\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"notebook\" size=\"md\"></nv-icon>Documentation\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon name=\"headset\" size=\"md\"></nv-icon>Support\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link disabled\">\n                <nv-icon name=\"contract\" size=\"md\"></nv-icon>Contracts\n              </a>\n            </li>\n          </ul>\n        </nav>\n      ),\n    },\n    {\n      name: 'Sidenav',\n      description:\n        'A Navigation bar using Tailwind CSS for styling. It’s easy to jump between sections like the Home page, Dashboard, Projects, and Tasks. Each tab has its own icon and a clear border that shows you which one’s active.',\n      template: (\n        <nav data-class=\"nv-sidenav flex flex-1 flex-col\">\n          <ul role=\"list\" data-class=\"flex flex-1 flex-col gap-y-0.5\">\n            <li>\n              <a href=\"/login\" data-class=\"nv-link\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"home-icon\"\n                  name=\"home\"\n                  size=\"md\"\n                ></nv-icon>\n                Home\n              </a>\n            </li>\n            <li>\n              <a href=\"/form\" data-class=\"nv-link active\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"layout-dashboard-icon\"\n                  name=\"layout-dashboard\"\n                  size=\"md\"\n                ></nv-icon>\n                Dashboard\n              </a>\n            </li>\n            <li data-class=\"collapsible\">\n              <a href=\"/typo\" data-class=\"nv-link\">\n                <span data-class=\"flex items-center gap-x-2\">\n                  <nv-icon\n                    role=\"img\"\n                    aria-label=\"stack-icon\"\n                    name=\"stack\"\n                    size=\"md\"\n                  ></nv-icon>\n                  Projects\n                </span>\n\n                <nv-iconbutton\n                  data-class=\"nv-iconbutton\"\n                  size=\"md\"\n                  name=\"chevron-down\"\n                  emphasis=\"lower\"\n                ></nv-iconbutton>\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"checklist-icon\"\n                  name=\"checklist\"\n                  size=\"md\"\n                ></nv-icon>\n                Tasks\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"notebook-icon\"\n                  name=\"notebook\"\n                  size=\"md\"\n                ></nv-icon>\n                Documentation\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"headset-icon\"\n                  name=\"headset\"\n                  size=\"md\"\n                ></nv-icon>\n                Support\n              </a>\n            </li>\n            <li>\n              <a href=\"#\" data-class=\"nv-link disabled\">\n                <nv-icon\n                  role=\"img\"\n                  aria-label=\"contract-icon\"\n                  name=\"contract\"\n                  size=\"md\"\n                ></nv-icon>\n                Contracts\n              </a>\n            </li>\n          </ul>\n        </nav>\n      ),\n    },\n  ],\n};\n\nexport default NavigationDocs;\n"]}

package/dist/components/nv-alert.js

@@ -3,7 +3,7 @@ import { c as clsx } from './p-8a1a6e56.js';
 import { F as FeedbackColors } from './p-1f505531.js';
 import { u as useCollapse, t as timeline } from './p-42301d8f.js';
 import { u as useFade } from './p-1daca48a.js';
-import { d as defineCustomElement$2 } from './p-9fa0de38.js';
+import { d as defineCustomElement$2 } from './p-b207be02.js';
 
 const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
 const NvAlertStyle0 = nvAlertCss;

package/dist/components/nv-avatar.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
 import { S as SemanticSizes } from './p-1f505531.js';
-import { d as defineCustomElement$2 } from './p-9fa0de38.js';
+import { d as defineCustomElement$2 } from './p-b207be02.js';
 
 const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
 const NvAvatarStyle0 = nvAvatarCss;

package/dist/components/nv-badge.js

@@ -1,4 +1,4 @@
-import { N as NvBadge$1, d as defineCustomElement$1 } from './p-e28c4707.js';
+import { N as NvBadge$1, d as defineCustomElement$1 } from './p-953d8b4d.js';
 
 const NvBadge = NvBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-breadcrumb.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { d as defineCustomElement$3 } from './p-eabbc885.js';
-import { d as defineCustomElement$2 } from './p-3e32b5a1.js';
+import { d as defineCustomElement$3 } from './p-131e5140.js';
+import { d as defineCustomElement$2 } from './p-f7c7a406.js';
 
 const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
 const NvBreadcrumbStyle0 = nvBreadcrumbCss;

package/dist/components/nv-button.js

@@ -1,4 +1,4 @@
-import { N as NvButton$1, d as defineCustomElement$1 } from './p-5ee4015d.js';
+import { N as NvButton$1, d as defineCustomElement$1 } from './p-dcaf9010.js';
 
 const NvButton = NvButton$1;
 const defineCustomElement = defineCustomElement$1;