@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldselect.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldselect/nv-fieldselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldselect',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n  @Element() el: HTMLNvFieldselectElement;\n  private selectElement!: HTMLSelectElement;\n  private internals: ElementInternals;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  private computedDisplayValue: string = '';\n\n  @State()\n  private internalReadonly: boolean = false;\n\n  /**\n   * Options to display in the select.\n   * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n   */\n  @Prop({ reflect: false })\n  readonly options?: Array<{\n    /**\n     * The label of the option\n     */\n    label: string;\n    /**\n     * The value of the option\n     */\n    value: string;\n    /**\n     * Whether the option is selected\n     */\n    selected?: boolean;\n    /**\n     * Whether the option is disabled\n     */\n    disabled?: boolean;\n  }>;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the select element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should choose in the\n   * select field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Add helpful hints or extra information under the select field. This is\n   * where you can clarify what users should choose or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Defines the name attribute of the select field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the selected data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the select field so that users can’t\n   * choose something. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the select field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to change or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the select field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   * @note This uses the native HTML `required` attribute, which triggers browser validation.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Marks the select field as required for accessibility purposes without triggering\n   * native HTML validation. Use this when implementing custom validation logic.\n   * @note When set, this uses `aria-required` instead of the native `required` attribute.\n   * This allows developers to implement custom validation while maintaining accessibility.\n   * @note If this prop is not explicitly set, the component will check for the HTML attribute\n   * 'aria-required' directly to determine if it should be applied.\n   */\n  @Prop({ reflect: true, attribute: 'aria-required' })\n  readonly ariaRequiredAttr: boolean = false;\n\n  /**\n   * Alters the select field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the select field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the select field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * When enabled, allows the select to handle multiple selections.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * The value of the select field.\n   * - If `multiple` is `false`, it's a single string.\n   * - If `multiple` is `true`, it's a comma-separated string of selected values.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * When enabled, displays the value element instead of the label when readonly.\n   * By default, the label is displayed in readonly mode. Also it automatically\n   * sets the component to readonly.\n   */\n  @Prop({ reflect: true })\n  readonly displayValue: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on a <select>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected value changes.\n   * @bind value\n   */\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<string>; // Emit as a string\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Updates the display value when the value property changes. This watcher is\n   * used to update the display value when the selected value changes. This is\n   * necessary for readonly select fields to display the selected value.\n   * @internal This watcher is not intended to be called outside of the component.\n   * @param {string} newValue - The new value of the select field.\n   */\n  @Watch('value')\n  updateDisplayValueWatcher(newValue: string) {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      const selectedValues = newValue.split(',').map(val => val.trim());\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n\n        if (!this.multiple) {\n          this.selectElement.value = newValue; // Only set when not multiple\n        }\n      } else {\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Update form value\n    this.setFormValue();\n  }\n\n  /**\n   * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n   * @param {boolean} newValue - The new value of displayValue.\n   */\n  @Watch('displayValue')\n  handleDisplayValueChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.readonly) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n   * @param {boolean} newValue - The new value of readonly.\n   */\n  @Watch('readonly')\n  handleReadonlyChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Handle options change and update the internal state\n   * @param {typeof this.options} newValue - The new value of options\n   */\n  @Watch('options')\n  handleOptionsChange(newValue: typeof this.options) {\n    if (!newValue) return;\n\n    // Update the value if an option is pre-selected\n    const selectedOption = newValue.find(opt => opt.selected);\n    if (selectedOption) {\n      this.value = selectedOption.value;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the change event on the select element. This method is used to\n   * update the value property when the selected options change. It is also\n   * used to emit the selectChanged event when the selected value changes.\n   * @param {Event} event - The change event on the select element.\n   * @emits selectChanged\n   */\n  private readonly handleSelectChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    let selectedValues: string[] = Array.from(select.selectedOptions).map(\n      option => option.value,\n    );\n\n    if (!this.multiple) {\n      selectedValues = selectedValues.slice(0, 1);\n    }\n\n    this.value = this.multiple\n      ? selectedValues.join(', ')\n      : selectedValues[0] || '';\n    this.valueChanged.emit(this.value);\n\n    // Update form value\n    this.setFormValue();\n  };\n\n  /**\n   * Handles focus when the select container is clicked.\n   */\n  private readonly handleSelectContainerClick = () => {\n    if (!this.internalReadonly && this.selectElement) {\n      this.selectElement.focus();\n    }\n  };\n\n  /**\n   * Updates the display value of the select field. This method is used to\n   * update the display value when the selected value changes. This is necessary\n   * for readonly select fields to display the selected value. This method is\n   * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n   * watcher.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private updateDisplayValue(): void {\n    if (this.internalReadonly && !this.displayValue) {\n      if (this.multiple) {\n        const selectedLabels = this.value\n          .split(',')\n          .map(key => key.trim())\n          .map(key => this.getLabelFromId(key) || '')\n          .filter(label => label !== '');\n        this.computedDisplayValue = selectedLabels.join(', ') || '';\n      } else {\n        this.computedDisplayValue = this.getLabelFromId(this.value) || '';\n      }\n    } else if (this.internalReadonly && this.displayValue) {\n      this.computedDisplayValue = this.value || '';\n    }\n  }\n\n  /**\n   * Retrieves the label from the <option> elements based on the provided key (value).\n   * This method uses the id or value attribute directly from the <select> options.\n   * @param {string} key - The key (value) for which to find the corresponding label.\n   * @returns {string} The label if found; otherwise, an empty string.\n   */\n  private getLabelFromId(key: string): string {\n    this.ensureSelectElement();\n    if (!this.selectElement) {\n      return '';\n    }\n\n    // Cache the option list\n    const options = this.selectElement.options;\n\n    if (options) {\n      const option = Array.from(options).find(option => option.value === key);\n      return option ? option.textContent.trim() || '' : '';\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Sets the value of the form element for form submission. This method is\n   * called when the selected value changes or when the value property is set.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private setFormValue(): void {\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Ensures the select element is available. This method is used to ensure\n   * the select element is available before attempting to access it.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private ensureSelectElement(): void {\n    if (!this.selectElement) {\n      this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    this.updateDisplayValue(); // Ensure display value is updated before render\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  /**\n   * Lifecycle method that is called before the component is rendered. This is\n   * where the internal state is set up before rendering occurs.\n   */\n  componentWillLoad() {\n    // Set internalReadonly based on the readonly prop\n    this.internalReadonly = this.readonly;\n\n    // Ensure internalReadonly is true if displayValue is true during loading\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n\n    if ('attachInternals' in this.el) {\n      this.internals = (\n        this.el as HTMLElement & {\n          /**\n           * Attach the element to the form internals.\n           * @returns {ElementInternals} - The element internals object.\n           */\n          attachInternals: () => ElementInternals;\n        }\n      ).attachInternals();\n    } else {\n      // Fallback logic for browsers without attachInternals support\n      this.internals = {\n        setFormValue: (value: string) => {\n          const formElement = this.el.closest('form');\n          if (formElement) {\n            const input = document.createElement('input');\n            input.type = 'hidden';\n            input.name = this.name;\n            input.value = value;\n            formElement.appendChild(input);\n          }\n        },\n      } as ElementInternals;\n    }\n\n    // Initialize value as an empty string if multiple is true\n    if (this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n\n    // Parse initial options if present\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n  }\n\n  /**\n   * Lifecycle method that is called after the component has been rendered.\n   * This is where the display value is updated and the initial select element's\n   * state is set.\n   */\n  componentDidLoad() {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      // Only set the value for single selection, skip for multiple\n      if (!this.multiple) {\n        this.selectElement.value = this.value;\n      }\n\n      const selectedValues = this.multiple\n        ? this.value.split(',').map(v => v.trim())\n        : [this.value];\n\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n      } else {\n        // Handle case where there are no options\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Set the initial form value\n    this.setFormValue();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDERING\n\n  /**\n   * The render method creates the HTML structure for the component, including\n   * the label, select element, and any error or description messages. It also\n   * applies the appropriate CSS classes based on the readonly state and\n   * displayValue prop. This method is called when the component is rendered.\n   * @returns {HTMLStencilElement} The HTML element to render.\n   */\n  render() {\n    // Check aria-required from multiple sources:\n    // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n    // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n    // We use hasAttribute to determine if the attribute was explicitly set by the user,\n    // since the prop now defaults to false (to maintain Blazor compatibility)\n    const hasAriaRequiredAttr =\n      this.el.hasAttribute('aria-required') ||\n      this.el.hasAttribute('aria-required-attr');\n\n    const ariaRequiredFromAttr = hasAriaRequiredAttr\n      ? this.el.getAttribute('aria-required') ||\n        this.el.getAttribute('aria-required-attr')\n      : null;\n\n    // Use aria-required if the attribute was explicitly set\n    // With reflect: true, setting the prop will also set the attribute\n    const useAriaRequired = hasAriaRequiredAttr;\n\n    // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n    // If attribute doesn't exist, the prop was never set and we don't use aria-required\n    const ariaRequiredAttrValue = hasAriaRequiredAttr\n      ? ariaRequiredFromAttr\n      : null;\n\n    // Determine which attributes to use\n    // If aria-required HTML attribute is present, use it (convert string to boolean)\n    // If required is set and aria-required is not \"false\", use native required\n    // If aria-required is \"false\", don't use native required even if required is set\n    const ariaRequiredValue = useAriaRequired\n      ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''\n      : undefined;\n\n    const useNativeRequired =\n      this.required && (!useAriaRequired || ariaRequiredValue === true);\n\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"select-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div\n            class=\"select-container\"\n            onClick={this.handleSelectContainerClick}\n          >\n            <slot name=\"leading-input\"></slot>\n\n            {this.internalReadonly && (\n              <input\n                id={this.inputId + '-readonly'}\n                type=\"text\"\n                value={this.computedDisplayValue}\n                readonly\n                class=\"readonly-input\"\n                aria-readonly=\"true\"\n                aria-label={this.label}\n                aria-describedby={\n                  this.error\n                    ? `${this.inputId}-error`\n                    : `${this.inputId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.inputId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              autofocus={this.autofocus}\n              disabled={this.disabled}\n              required={useNativeRequired ? this.required : undefined}\n              {...(ariaRequiredValue !== undefined && {\n                'aria-required': String(ariaRequiredValue),\n              })}\n              multiple={this.multiple}\n              onChange={this.handleSelectChange}\n              class={this.internalReadonly ? 'hidden' : ''}\n              aria-label={this.label}\n              aria-describedby={\n                this.error\n                  ? `${this.inputId}-error`\n                  : `${this.inputId}-description`\n              }\n            >\n              {this.options && this.options.length > 0 ? (\n                this.options.map(option => (\n                  <option\n                    value={option.value}\n                    selected={option.selected}\n                    disabled={option.disabled}\n                  >\n                    {option.label}\n                  </option>\n                ))\n              ) : (\n                <slot />\n              )}\n            </select>\n            <div class=\"select-icons\">\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n              {this.success && (\n                <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n              )}\n\n              {!this.multiple && (\n                <nv-iconbutton\n                  name=\"chevron-down\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  tabindex={-1}\n                />\n              )}\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\" id={`${this.inputId}-description`}>\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div class=\"error-description\" id={`${this.inputId}-error`}>\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDERING\n}\n"]}
+{"version":3,"file":"nv-fieldselect.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldselect/nv-fieldselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldselect',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n  @Element() el: HTMLNvFieldselectElement;\n  private selectElement!: HTMLSelectElement;\n  private internals: ElementInternals;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  private computedDisplayValue: string = '';\n\n  @State()\n  private internalReadonly: boolean = false;\n\n  /**\n   * Options to display in the select.\n   * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n   */\n  @Prop({ reflect: false })\n  readonly options?: Array<{\n    /**\n     * The label of the option\n     */\n    label: string;\n    /**\n     * The value of the option\n     */\n    value: string;\n    /**\n     * Whether the option is selected\n     */\n    selected?: boolean;\n    /**\n     * Whether the option is disabled\n     */\n    disabled?: boolean;\n  }>;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the select element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should choose in the\n   * select field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Add helpful hints or extra information under the select field. This is\n   * where you can clarify what users should choose or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Defines the name attribute of the select field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the selected data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the select field so that users can’t\n   * choose something. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the select field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to change or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the select field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   * @note This uses the native HTML `required` attribute, which triggers browser validation.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Marks the select field as required for accessibility purposes without triggering\n   * native HTML validation. Use this when implementing custom validation logic.\n   * @note When set, this uses `aria-required` instead of the native `required` attribute.\n   * This allows developers to implement custom validation while maintaining accessibility.\n   * @note If this prop is not explicitly set, the component will check for the HTML attribute\n   * 'aria-required' directly to determine if it should be applied.\n   */\n  @Prop({ reflect: true, attribute: 'aria-required' })\n  readonly ariaRequiredAttr: boolean = false;\n\n  /**\n   * Alters the select field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the select field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the select field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * When enabled, allows the select to handle multiple selections.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * The value of the select field.\n   * - If `multiple` is `false`, it's a single string.\n   * - If `multiple` is `true`, it's a comma-separated string of selected values.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * When enabled, displays the value element instead of the label when readonly.\n   * By default, the label is displayed in readonly mode. Also it automatically\n   * sets the component to readonly.\n   */\n  @Prop({ reflect: true })\n  readonly displayValue: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on a <select>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected value changes.\n   * @bind value\n   */\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<string>; // Emit as a string\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Updates the display value when the value property changes. This watcher is\n   * used to update the display value when the selected value changes. This is\n   * necessary for readonly select fields to display the selected value.\n   * @internal This watcher is not intended to be called outside of the component.\n   * @param {string} newValue - The new value of the select field.\n   */\n  @Watch('value')\n  updateDisplayValueWatcher(newValue: string) {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      const selectedValues = newValue.split(',').map(val => val.trim());\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n\n        if (!this.multiple) {\n          this.selectElement.value = newValue; // Only set when not multiple\n        }\n      } else {\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Update form value\n    this.setFormValue();\n  }\n\n  /**\n   * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n   * @param {boolean} newValue - The new value of displayValue.\n   */\n  @Watch('displayValue')\n  handleDisplayValueChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.readonly) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n   * @param {boolean} newValue - The new value of readonly.\n   */\n  @Watch('readonly')\n  handleReadonlyChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Handle options change and update the internal state\n   * @param {typeof this.options} newValue - The new value of options\n   */\n  @Watch('options')\n  handleOptionsChange(newValue: typeof this.options) {\n    if (!newValue) return;\n\n    // Update the value if an option is pre-selected\n    const selectedOption = newValue.find(opt => opt.selected);\n    if (selectedOption) {\n      this.value = selectedOption.value;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the change event on the select element. This method is used to\n   * update the value property when the selected options change. It is also\n   * used to emit the selectChanged event when the selected value changes.\n   * @param {Event} event - The change event on the select element.\n   * @emits selectChanged\n   */\n  private readonly handleSelectChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    let selectedValues: string[] = Array.from(select.selectedOptions).map(\n      option => option.value,\n    );\n\n    if (!this.multiple) {\n      selectedValues = selectedValues.slice(0, 1);\n    }\n\n    this.value = this.multiple\n      ? selectedValues.join(', ')\n      : selectedValues[0] || '';\n    this.valueChanged.emit(this.value);\n\n    // Update form value\n    this.setFormValue();\n  };\n\n  /**\n   * Handles focus when the select container is clicked.\n   */\n  private readonly handleSelectContainerClick = () => {\n    if (!this.internalReadonly && this.selectElement) {\n      this.selectElement.focus();\n    }\n  };\n\n  /**\n   * Updates the display value of the select field. This method is used to\n   * update the display value when the selected value changes. This is necessary\n   * for readonly select fields to display the selected value. This method is\n   * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n   * watcher.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private updateDisplayValue(): void {\n    if (this.internalReadonly && !this.displayValue) {\n      if (this.multiple) {\n        const selectedLabels = this.value\n          .split(',')\n          .map(key => key.trim())\n          .map(key => this.getLabelFromId(key) || '')\n          .filter(label => label !== '');\n        this.computedDisplayValue = selectedLabels.join(', ') || '';\n      } else {\n        this.computedDisplayValue = this.getLabelFromId(this.value) || '';\n      }\n    } else if (this.internalReadonly && this.displayValue) {\n      this.computedDisplayValue = this.value || '';\n    }\n  }\n\n  /**\n   * Retrieves the label from the <option> elements based on the provided key (value).\n   * This method uses the id or value attribute directly from the <select> options.\n   * @param {string} key - The key (value) for which to find the corresponding label.\n   * @returns {string} The label if found; otherwise, an empty string.\n   */\n  private getLabelFromId(key: string): string {\n    this.ensureSelectElement();\n    if (!this.selectElement) {\n      return '';\n    }\n\n    // Cache the option list\n    const options = this.selectElement.options;\n\n    if (options) {\n      const option = Array.from(options).find(option => option.value === key);\n      return option ? option.textContent.trim() || '' : '';\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Sets the value of the form element for form submission. This method is\n   * called when the selected value changes or when the value property is set.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private setFormValue(): void {\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Ensures the select element is available. This method is used to ensure\n   * the select element is available before attempting to access it.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private ensureSelectElement(): void {\n    if (!this.selectElement) {\n      this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    this.updateDisplayValue(); // Ensure display value is updated before render\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  /**\n   * Lifecycle method that is called before the component is rendered. This is\n   * where the internal state is set up before rendering occurs.\n   */\n  componentWillLoad() {\n    // Set internalReadonly based on the readonly prop\n    this.internalReadonly = this.readonly;\n\n    // Ensure internalReadonly is true if displayValue is true during loading\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n\n    if ('attachInternals' in this.el) {\n      this.internals = (\n        this.el as HTMLElement & {\n          /**\n           * Attach the element to the form internals.\n           * @returns {ElementInternals} - The element internals object.\n           */\n          attachInternals: () => ElementInternals;\n        }\n      ).attachInternals();\n    } else {\n      // Fallback logic for browsers without attachInternals support\n      this.internals = {\n        setFormValue: (value: string) => {\n          const formElement = this.el.closest('form');\n          if (formElement) {\n            const input = document.createElement('input');\n            input.type = 'hidden';\n            input.name = this.name;\n            input.value = value;\n            formElement.appendChild(input);\n          }\n        },\n      } as ElementInternals;\n    }\n\n    // Initialize value as an empty string if multiple is true\n    if (this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n\n    // Parse initial options if present\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n  }\n\n  /**\n   * Lifecycle method that is called after the component has been rendered.\n   * This is where the display value is updated and the initial select element's\n   * state is set.\n   */\n  componentDidLoad() {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      // Only set the value for single selection, skip for multiple\n      if (!this.multiple) {\n        this.selectElement.value = this.value;\n      }\n\n      const selectedValues = this.multiple\n        ? this.value.split(',').map(v => v.trim())\n        : [this.value];\n\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n      } else {\n        // Handle case where there are no options\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Set the initial form value\n    this.setFormValue();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDERING\n\n  /**\n   * The render method creates the HTML structure for the component, including\n   * the label, select element, and any error or description messages. It also\n   * applies the appropriate CSS classes based on the readonly state and\n   * displayValue prop. This method is called when the component is rendered.\n   * @returns {HTMLStencilElement} The HTML element to render.\n   */\n  render() {\n    // Check aria-required from multiple sources:\n    // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n    // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n    // We use hasAttribute to determine if the attribute was explicitly set by the user,\n    // since the prop now defaults to false (to maintain Blazor compatibility)\n    const hasAriaRequiredAttr =\n      this.el.hasAttribute('aria-required') ||\n      this.el.hasAttribute('aria-required-attr');\n\n    const ariaRequiredFromAttr = hasAriaRequiredAttr\n      ? this.el.getAttribute('aria-required') ||\n        this.el.getAttribute('aria-required-attr')\n      : null;\n\n    // Use aria-required if the attribute was explicitly set\n    // With reflect: true, setting the prop will also set the attribute\n    const useAriaRequired = hasAriaRequiredAttr;\n\n    // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n    // If attribute doesn't exist, the prop was never set and we don't use aria-required\n    const ariaRequiredAttrValue = hasAriaRequiredAttr\n      ? ariaRequiredFromAttr\n      : null;\n\n    // Determine which attributes to use\n    // If aria-required HTML attribute is present, use it (convert string to boolean)\n    // If required is set and aria-required is not \"false\", use native required\n    // If aria-required is \"false\", don't use native required even if required is set\n    const ariaRequiredValue = useAriaRequired\n      ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''\n      : undefined;\n\n    const useNativeRequired =\n      this.required && (!useAriaRequired || ariaRequiredValue === true);\n\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"select-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div\n            class=\"select-container\"\n            onClick={this.handleSelectContainerClick}\n          >\n            <slot name=\"leading-input\"></slot>\n\n            {this.internalReadonly && (\n              <input\n                id={this.inputId + '-readonly'}\n                type=\"text\"\n                value={this.computedDisplayValue}\n                readonly\n                class=\"readonly-input\"\n                aria-readonly=\"true\"\n                aria-label={this.label}\n                aria-describedby={\n                  this.error\n                    ? `${this.inputId}-error`\n                    : `${this.inputId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.inputId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              autofocus={this.autofocus}\n              disabled={this.disabled}\n              required={useNativeRequired ? this.required : undefined}\n              {...(ariaRequiredValue !== undefined && {\n                'aria-required': String(ariaRequiredValue),\n              })}\n              multiple={this.multiple}\n              onChange={this.handleSelectChange}\n              class={this.internalReadonly ? 'hidden' : ''}\n              aria-label={this.label}\n              aria-describedby={\n                this.error\n                  ? `${this.inputId}-error`\n                  : `${this.inputId}-description`\n              }\n            >\n              {this.options && this.options.length > 0 ? (\n                this.options.map(option => (\n                  <option\n                    value={option.value}\n                    selected={option.selected}\n                    disabled={option.disabled}\n                  >\n                    {option.label}\n                  </option>\n                ))\n              ) : (\n                <slot />\n              )}\n            </select>\n            <div class=\"select-icons\">\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n              {this.success && (\n                <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n              )}\n\n              {!this.multiple && (\n                <nv-iconbutton\n                  name=\"chevron-down\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  tabindex={-1}\n                />\n              )}\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\" id={`${this.inputId}-description`}>\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div class=\"error-description\" id={`${this.inputId}-error`}>\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDERING\n}\n"]}

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

@@ -171,7 +171,7 @@ nv-fieldselect .select-wrapper .select-container input {
   overflow: hidden;
   background-color: transparent;
   color: var(--components-form-field-content-text);
-  padding: var(--form-field-padding-y) var(--form-field-padding-x);
+  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
   font-weight: var(--font-weight-medium-emphasis);

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

@@ -3,10 +3,12 @@ import { nameof } from "../../utils/class.utils";
 const NvFieldsliderDocs = {
     component: 'nv-fieldslider',
     stories: [
+        // Default
         {
             name: 'Default',
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // labelBeforeValue
         {
             name: nameof(x => x.labelBeforeValue),
             args: {
@@ -16,6 +18,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // labelAfterValue
         {
             name: nameof(x => x.labelAfterValue),
             args: {
@@ -25,18 +28,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
-        {
-            name: 'MinMax',
-            description: 'Slider with custom min/max range and initial value.',
-            args: {
-                label: 'Temperature (°C)',
-                min: -20,
-                max: 40,
-                value: [22],
-                labelAfterValue: '°C',
-            },
-            template: h("nv-fieldslider", { "data-storybook-args": true }),
-        },
+        // step
         {
             name: nameof(x => x.step),
             args: {
@@ -48,6 +40,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // snap
         {
             name: nameof(x => x.snap),
             args: {
@@ -60,6 +53,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // showTicks
         {
             name: nameof(x => x.showTicks),
             args: {
@@ -73,6 +67,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // ticks
         {
             name: nameof(x => x.ticks),
             args: {
@@ -89,6 +84,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // snapTicks
         {
             name: nameof(x => x.snapTicks),
             description: 'When snapTicks is true, the slider will snap to custom tick values rather than regular steps.',
@@ -110,6 +106,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // hasField
         {
             name: nameof(x => x.hasField),
             args: {
@@ -122,6 +119,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // range
         {
             name: nameof(x => x.range),
             args: {
@@ -135,21 +133,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
-        {
-            name: 'RangeFields',
-            description: 'Range slider with editable numeric fields for both values.',
-            args: {
-                label: 'Filter by Price ($)',
-                min: 0,
-                max: 1000,
-                value: [250, 750],
-                step: 10,
-                range: true,
-                hasField: true,
-                labelAfterValue: '$',
-            },
-            template: h("nv-fieldslider", { "data-storybook-args": true }),
-        },
+        // hideLabel
         {
             name: nameof(x => x.hideLabel),
             args: {
@@ -159,6 +143,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // error
         {
             name: nameof(x => x.error),
             args: {
@@ -172,6 +157,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // errorDescription
         {
             name: nameof(x => x.errorDescription),
             args: {
@@ -186,6 +172,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // success
         {
             name: nameof(x => x.success),
             args: {
@@ -198,6 +185,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // disabled
         {
             name: nameof(x => x.disabled),
             args: {
@@ -207,6 +195,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // readonly
         {
             name: nameof(x => x.readonly),
             args: {
@@ -216,6 +205,7 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // fluid
         {
             name: nameof(x => x.fluid),
             args: {
@@ -225,8 +215,124 @@ const NvFieldsliderDocs = {
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
+        // startInputId
+        {
+            name: nameof(x => x.startInputId),
+            description: 'Sets the ID for the start input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated.',
+            args: {
+                label: 'Custom Start ID',
+                value: [50],
+                startInputId: 'custom-start-id',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // endInputId
+        {
+            name: nameof(x => x.endInputId),
+            description: 'Sets the ID for the end input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated.',
+            args: {
+                label: 'Custom End ID',
+                value: [25, 75],
+                range: true,
+                endInputId: 'custom-end-id',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // label
+        {
+            name: nameof(x => x.label),
+            description: "Provides a textual description of the slider's function, helping users understand what the control adjusts. It also supports accessibility by serving as the accessible name for the component.",
+            args: {
+                label: 'Volume Level',
+                value: [60],
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // description
+        {
+            name: nameof(x => x.description),
+            description: 'Add helpful hints or extra information under the slider. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.',
+            args: {
+                label: 'Brightness',
+                description: 'Adjust the screen brightness level',
+                value: [70],
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // value
+        {
+            name: nameof(x => x.value),
+            description: 'Numeric value of the slider as an array of numbers. When in single mode, the value should be an array of one number. When in range mode, the value should be an array of two numbers.',
+            args: {
+                label: 'Initial Value',
+                value: [42],
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // name
+        {
+            name: nameof(x => x.name),
+            description: 'Name attribute for the form input element. Required for form submission. For range sliders, this will be used for the start value input and add -end to the end input name.',
+            args: {
+                label: 'Price',
+                name: 'price-slider',
+                value: [250],
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // endName
+        {
+            name: nameof(x => x.endName),
+            description: "Name attribute for the end value input when using range mode. If not provided, the name attribute will be used with '-end' appended.",
+            args: {
+                label: 'Price Range',
+                name: 'price-start',
+                endName: 'price-end',
+                value: [100, 500],
+                range: true,
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // min
+        {
+            name: nameof(x => x.min),
+            description: 'Defines the minimum allowed value for the slider. The thumb cannot move below this value, and manual input is also constrained accordingly.',
+            args: {
+                label: 'Temperature',
+                min: -10,
+                max: 40,
+                value: [5],
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // max
+        {
+            name: nameof(x => x.max),
+            description: 'Defines the maximum allowed value for the slider. The thumb cannot move above this value, and manual input is also constrained accordingly.',
+            args: {
+                label: 'Capacity',
+                min: 0,
+                max: 200,
+                value: [150],
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // MinMax
+        {
+            name: 'MinMax',
+            description: 'Slider with custom min/max range and initial value.',
+            args: {
+                label: 'Temperature (°C)',
+                min: -20,
+                max: 40,
+                value: [22],
+                labelAfterValue: '°C',
+            },
+            template: h("nv-fieldslider", { "data-storybook-args": true }),
+        },
+        // SlotLabel
         {
-            name: 'labelSlot',
+            name: 'SlotLabel',
             description: 'Content to be placed as the label, will override the label prop.',
             args: {
                 label: 'Original Label',
@@ -234,8 +340,9 @@ const NvFieldsliderDocs = {
             },
             template: (h("nv-fieldslider", { "data-storybook-args": true }, h("span", { slot: "label" }, "Custom Label"))),
         },
+        // SlotDescription
         {
-            name: 'descriptionSlot',
+            name: 'SlotDescription',
             description: 'Content to be placed as the description, will override the description prop.',
             args: {
                 label: 'Description Example',
@@ -244,8 +351,9 @@ const NvFieldsliderDocs = {
             },
             template: (h("nv-fieldslider", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
         },
+        // SlotErrorDescription
         {
-            name: 'errorDescriptionSlot',
+            name: 'SlotErrorDescription',
             description: 'Content to be placed as the error description, will override the errorDescription prop.',
             args: {
                 label: 'Error Description Example',

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldslider.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/nv-fieldslider.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldsliderDocs: NovaDocs<Components.NvFieldslider> = {\n  component: 'nv-fieldslider',\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelBeforeValue),\n      args: {\n        label: 'Price',\n        value: [50],\n        labelBeforeValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelAfterValue),\n      args: {\n        label: 'Distance',\n        value: [25],\n        labelAfterValue: 'km',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'MinMax',\n      description: 'Slider with custom min/max range and initial value.',\n      args: {\n        label: 'Temperature (°C)',\n        min: -20,\n        max: 40,\n        value: [22],\n        labelAfterValue: '°C',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.step),\n      args: {\n        label: 'Volume (increments of 5)',\n        min: 0,\n        max: 100,\n        value: [25],\n        step: 5,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snap),\n      args: {\n        label: 'Snapping Slider',\n        min: 0,\n        max: 100,\n        value: [35],\n        step: 5,\n        snap: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.showTicks),\n      args: {\n        label: 'Volume',\n        min: 0,\n        max: 100,\n        value: [40],\n        step: 10,\n        snap: true,\n        showTicks: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.ticks),\n      args: {\n        label: 'Temperature (°C)',\n        min: 0,\n        max: 100,\n        value: [7],\n        step: 1,\n        labelAfterValue: '°C',\n        ticks: [\n          { value: 10, label: 'Cold' },\n          { value: 80, label: 'Hot' },\n        ],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snapTicks),\n      description:\n        'When snapTicks is true, the slider will snap to custom tick values rather than regular steps.',\n      args: {\n        label: 'Custom Pricing Tiers ($)',\n        min: 0,\n        max: 100,\n        value: [10],\n        step: 1,\n        snapTicks: true,\n        ticks: [\n          { value: 0, label: 'Free' },\n          { value: 10, label: 'Basic' },\n          { value: 30, label: 'Pro' },\n          { value: 75, label: 'Business' },\n          { value: 100, label: 'Enterprise' },\n        ],\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hasField),\n      args: {\n        label: 'Price',\n        min: 0,\n        max: 1000,\n        value: [550],\n        step: 10,\n        hasField: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.range),\n      args: {\n        label: 'Price Range ($)',\n        min: 0,\n        max: 1000,\n        value: [200, 800],\n        step: 50,\n        range: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'RangeFields',\n      description: 'Range slider with editable numeric fields for both values.',\n      args: {\n        label: 'Filter by Price ($)',\n        min: 0,\n        max: 1000,\n        value: [250, 750],\n        step: 10,\n        range: true,\n        hasField: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hideLabel),\n      args: {\n        label: 'Volume Level',\n        hideLabel: true,\n        value: [75],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.error),\n      args: {\n        label: 'Budget ($)',\n        value: [1500, 20000],\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.errorDescription),\n      args: {\n        label: 'Budget ($)',\n        value: [1500, 20000],\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        errorDescription: 'Not enough funds!',\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.success),\n      args: {\n        label: 'Target Achieved',\n        value: [30, 70],\n        range: true,\n        min: 0,\n        max: 100,\n        success: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.disabled),\n      args: {\n        label: 'Settings (Locked)',\n        value: [30],\n        disabled: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.readonly),\n      args: {\n        label: 'Current Progress',\n        value: [65],\n        readonly: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.fluid),\n      args: {\n        label: 'Full Width Slider',\n        value: [50],\n        fluid: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'labelSlot',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n        value: [45],\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldslider>\n      ),\n    },\n    {\n      name: 'descriptionSlot',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Example',\n        description: 'Original description',\n        value: [60],\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldslider>\n      ),\n    },\n    {\n      name: 'errorDescriptionSlot',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Example',\n        errorDescription: 'Original error description',\n        value: [150],\n        min: 0,\n        max: 100,\n        error: true,\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldslider>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldsliderDocs;\n"]}
+{"version":3,"file":"nv-fieldslider.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/nv-fieldslider.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldsliderDocs: NovaDocs<Components.NvFieldslider> = {\n  component: 'nv-fieldslider',\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // labelBeforeValue\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelBeforeValue),\n      args: {\n        label: 'Price',\n        value: [50],\n        labelBeforeValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // labelAfterValue\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelAfterValue),\n      args: {\n        label: 'Distance',\n        value: [25],\n        labelAfterValue: 'km',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // step\n    {\n      name: nameof<Components.NvFieldslider>(x => x.step),\n      args: {\n        label: 'Volume (increments of 5)',\n        min: 0,\n        max: 100,\n        value: [25],\n        step: 5,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // snap\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snap),\n      args: {\n        label: 'Snapping Slider',\n        min: 0,\n        max: 100,\n        value: [35],\n        step: 5,\n        snap: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // showTicks\n    {\n      name: nameof<Components.NvFieldslider>(x => x.showTicks),\n      args: {\n        label: 'Volume',\n        min: 0,\n        max: 100,\n        value: [40],\n        step: 10,\n        snap: true,\n        showTicks: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // ticks\n    {\n      name: nameof<Components.NvFieldslider>(x => x.ticks),\n      args: {\n        label: 'Temperature (°C)',\n        min: 0,\n        max: 100,\n        value: [7],\n        step: 1,\n        labelAfterValue: '°C',\n        ticks: [\n          { value: 10, label: 'Cold' },\n          { value: 80, label: 'Hot' },\n        ],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // snapTicks\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snapTicks),\n      description:\n        'When snapTicks is true, the slider will snap to custom tick values rather than regular steps.',\n      args: {\n        label: 'Custom Pricing Tiers ($)',\n        min: 0,\n        max: 100,\n        value: [10],\n        step: 1,\n        snapTicks: true,\n        ticks: [\n          { value: 0, label: 'Free' },\n          { value: 10, label: 'Basic' },\n          { value: 30, label: 'Pro' },\n          { value: 75, label: 'Business' },\n          { value: 100, label: 'Enterprise' },\n        ],\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // hasField\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hasField),\n      args: {\n        label: 'Price',\n        min: 0,\n        max: 1000,\n        value: [550],\n        step: 10,\n        hasField: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // range\n    {\n      name: nameof<Components.NvFieldslider>(x => x.range),\n      args: {\n        label: 'Price Range ($)',\n        min: 0,\n        max: 1000,\n        value: [200, 800],\n        step: 50,\n        range: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // hideLabel\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hideLabel),\n      args: {\n        label: 'Volume Level',\n        hideLabel: true,\n        value: [75],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // error\n    {\n      name: nameof<Components.NvFieldslider>(x => x.error),\n      args: {\n        label: 'Budget ($)',\n        value: [1500, 20000],\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // errorDescription\n    {\n      name: nameof<Components.NvFieldslider>(x => x.errorDescription),\n      args: {\n        label: 'Budget ($)',\n        value: [1500, 20000],\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        errorDescription: 'Not enough funds!',\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // success\n    {\n      name: nameof<Components.NvFieldslider>(x => x.success),\n      args: {\n        label: 'Target Achieved',\n        value: [30, 70],\n        range: true,\n        min: 0,\n        max: 100,\n        success: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // disabled\n    {\n      name: nameof<Components.NvFieldslider>(x => x.disabled),\n      args: {\n        label: 'Settings (Locked)',\n        value: [30],\n        disabled: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // readonly\n    {\n      name: nameof<Components.NvFieldslider>(x => x.readonly),\n      args: {\n        label: 'Current Progress',\n        value: [65],\n        readonly: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // fluid\n    {\n      name: nameof<Components.NvFieldslider>(x => x.fluid),\n      args: {\n        label: 'Full Width Slider',\n        value: [50],\n        fluid: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // startInputId\n    {\n      name: nameof<Components.NvFieldslider>(x => x.startInputId),\n      description:\n        'Sets the ID for the start input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated.',\n      args: {\n        label: 'Custom Start ID',\n        value: [50],\n        startInputId: 'custom-start-id',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // endInputId\n    {\n      name: nameof<Components.NvFieldslider>(x => x.endInputId),\n      description:\n        'Sets the ID for the end input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated.',\n      args: {\n        label: 'Custom End ID',\n        value: [25, 75],\n        range: true,\n        endInputId: 'custom-end-id',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // label\n    {\n      name: nameof<Components.NvFieldslider>(x => x.label),\n      description:\n        \"Provides a textual description of the slider's function, helping users understand what the control adjusts. It also supports accessibility by serving as the accessible name for the component.\",\n      args: {\n        label: 'Volume Level',\n        value: [60],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // description\n    {\n      name: nameof<Components.NvFieldslider>(x => x.description),\n      description:\n        'Add helpful hints or extra information under the slider. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.',\n      args: {\n        label: 'Brightness',\n        description: 'Adjust the screen brightness level',\n        value: [70],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // value\n    {\n      name: nameof<Components.NvFieldslider>(x => x.value),\n      description:\n        'Numeric value of the slider as an array of numbers. When in single mode, the value should be an array of one number. When in range mode, the value should be an array of two numbers.',\n      args: {\n        label: 'Initial Value',\n        value: [42],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // name\n    {\n      name: nameof<Components.NvFieldslider>(x => x.name),\n      description:\n        'Name attribute for the form input element. Required for form submission. For range sliders, this will be used for the start value input and add -end to the end input name.',\n      args: {\n        label: 'Price',\n        name: 'price-slider',\n        value: [250],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // endName\n    {\n      name: nameof<Components.NvFieldslider>(x => x.endName),\n      description:\n        \"Name attribute for the end value input when using range mode. If not provided, the name attribute will be used with '-end' appended.\",\n      args: {\n        label: 'Price Range',\n        name: 'price-start',\n        endName: 'price-end',\n        value: [100, 500],\n        range: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // min\n    {\n      name: nameof<Components.NvFieldslider>(x => x.min),\n      description:\n        'Defines the minimum allowed value for the slider. The thumb cannot move below this value, and manual input is also constrained accordingly.',\n      args: {\n        label: 'Temperature',\n        min: -10,\n        max: 40,\n        value: [5],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // max\n    {\n      name: nameof<Components.NvFieldslider>(x => x.max),\n      description:\n        'Defines the maximum allowed value for the slider. The thumb cannot move above this value, and manual input is also constrained accordingly.',\n      args: {\n        label: 'Capacity',\n        min: 0,\n        max: 200,\n        value: [150],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // MinMax\n    {\n      name: 'MinMax',\n      description: 'Slider with custom min/max range and initial value.',\n      args: {\n        label: 'Temperature (°C)',\n        min: -20,\n        max: 40,\n        value: [22],\n        labelAfterValue: '°C',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    // SlotLabel\n    {\n      name: 'SlotLabel',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n        value: [45],\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldslider>\n      ),\n    },\n    // SlotDescription\n    {\n      name: 'SlotDescription',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Example',\n        description: 'Original description',\n        value: [60],\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldslider>\n      ),\n    },\n    // SlotErrorDescription\n    {\n      name: 'SlotErrorDescription',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Example',\n        errorDescription: 'Original error description',\n        value: [150],\n        min: 0,\n        max: 100,\n        error: true,\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldslider>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldsliderDocs;\n"]}

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

@@ -464,11 +464,11 @@ export class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2d84cdd34a50e9118eb6fc0b2385187a3c2f3eae' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '9afc2d5b912fbc31f9e5302ca0cdc50bdcf790b5', htmlFor: this.startInputId }, h("slot", { key: '411ebd67ea420b5103c2c7213eacee1e127a1305', name: "label" }, this.label))), h("div", { key: '372c7b4322bc9e82a4ef7c660b423d4cd8ddc393', class: "slider-container" }, this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, h("div", { key: 'cf3163864d8bac7045e30633ed642cdd44f14b74', class: "track-container" }, h("div", { key: 'b2a02cd1d3cb7d776de3f2c31323df042f2589ed', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: 'aa4aca71ac6f07dcc48dd46b04c8e186d7cf95e8', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (h(Host, { key: '554f94dc79adf1edbfa80bdc17bb41af26da871c' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '98ffb9c9332a9fef9c37088b48b80eaec2930417', htmlFor: this.startInputId }, h("slot", { key: '084d8c1fbdc91d8bd26016489b6ef86a3c334a6b', name: "label" }, this.label))), h("div", { key: 'ce62bedafa8b20ce952944b61638f61585fc7044', class: "slider-container" }, this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, h("div", { key: 'd4dd3f3cc00a19b166b27158c30f193096553127', class: "track-container" }, h("div", { key: 'd37bd4c7463d3a987d300082f2db4519af7fd652', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: '0c3b4b90851cb8cf80b3803fbb5e85f8e3d98aed', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '37ad97d2a1f289b21bd87b5c3743aa39d9486034', class: "description" }, this.success && (h("nv-icon", { key: 'd1e2b0fa7d849eb339f528be3e13268a56b61cb5', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: '629a64d36c7fd91fa0e814df4d49418db3d8a55c', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '7674d49cfe01b7ac5be21c3cbc2ff4e625c27298', class: "description" }, this.success && (h("nv-icon", { key: '7342bca8ef60d227cd630affc37815bafa9736f7', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'c9221aadf6e2328bc5781d74c044b6911221dbe8', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '301ac12a0262156c149c3884eff0a5a19669a54d', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: 'ddd638b17aed6e466d8a9e5c6f1548bcec18e0b3', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'ff599d9302e6ddf856fc5004e7df32ca87a51769', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '34f339f8e25ffb2c481b2472939d9ef14292c2f9', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '6a941595fc494afb7e580a98f968a628371b1a33', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'c77b3881b302a65c43098479aa445751314c2714', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldslider"; }
     static get formAssociated() { return true; }

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

@@ -38,6 +38,6 @@ export const FieldInput = props => {
             index,
         });
     };
-    return hasField ? (h("div", { class: clsx(!hasField && 'hidden-input') }, h("nv-fieldnumber", Object.assign({ id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: e => e.stopPropagation(), onValueChanged: handleValueChanged }), labelBeforeValue && (h("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)), labelAfterValue && (h("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
+    return hasField ? (h("div", { class: clsx(!hasField && 'hidden-input') }, h("nv-fieldnumber", { id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName, ...dataAttrs, onInput: e => e.stopPropagation(), onValueChanged: handleValueChanged }, labelBeforeValue && (h("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)), labelAfterValue && (h("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
 };
 //# sourceMappingURL=field-input.js.map