@nova-design-system/nova-webcomponents 3.0.0-beta.36 → 3.0.0-beta.38

package/dist/native/p-c398cdb4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldmultiselectCss","NvFieldmultiselectStyle0","NvFieldmultiselect","constructor","hostRef","this","inputId","uuidv4","maxHeight","badgeLabel","emptyresult","required","error","readonly","disabled","autocomplete","filterable","open","parsedOptions","selectedValues","sortedOptions","filterText","isFilterable","debounceDelay","modeState","isHandlingEscape","handleBadgeCloseOptions","multiselectChange","emit","items","Array","from","el","querySelectorAll","forEach","item","checked","style","display","filter","option","isDivider","reorderOptionsContent","handleBadgeCloseSlots","reorderSlotContent","handlePopoverClose","resetFilter","handleInputBlurOptions","setTimeout","contains","document","activeElement","popoverElement","hide","handleInputContainerClickOptions","event","target","tagName","show","inputContainer","querySelector","classList","add","removeFocusWithin","remove","addEventListener","handleInputContainerClickSlots","handleInputOptions","input","value","valueChanged","debounceTimer","window","clearTimeout","toLowerCase","filterItemsOption","handleInputSlots","filterSlotsItems","handleInputFocusOptions","handleInputFocusSlots","handleInputBlurSlots","togglePopoverOptions","focusFirstItem","togglePopoverSlots","connectedCallback","handleClickOutside","bind","componentWillLoad","mode","handleOptionsChange","options","requestAnimationFrame","Promise","resolve","then","hasAttribute","map","getAttribute","String","toLocaleLowerCase","filterItems","componentDidLoad","disconnectedCallback","removeEventListener","handleOpenChanged","detail","handleItemChecked","undefined","newSelectedValues","valueIndex","indexOf","push","splice","JSON","stringify","console","warn","newValue","parsedOpts","parse","isArray","watchValueHandler","setInitialSelection","watchFilterableHandler","handleSlotChange","slot","name","getFilterText","selectedItem","find","_a","textContent","trim","removeAttribute","setAttribute","inputElement","ul","emptyMessage","selectedItems","includes","unselectedItems","length","manageDivider","getSelectedValues","divider","hasEmptyMessage","appendChild","createElement","className","existingEmptyMessage","normalizedFilter","normalizeText","hasVisibleItems","opt","matchesFilter","label","visibleItems","visibleSelected","visibleUnselected","removeEmptyMessageOption","addEmptyMessageOption","visibleSelectedItems","text","normalize","replace","handleKeyDown","key","preventDefault","currentIndex","findIndex","updateHighlightedItem","isCurrentlyChecked","dispatchEvent","MouseEvent","view","bubbles","cancelable","stopPropagation","handleEscape","async","blur","index","i","scrollIntoView","block","checkbox","focus","firstItem","existingMessage","handleModeChange","shouldShowDivider","lastSelectedItem","after","renderOptionsMode","h","Host","htmlFor","ref","triggerMode","placement","class","color","dismissible","hidden","onCloseClicked","id","e","placeholder","readOnly","onInput","onFocus","onBlur","onKeyDown","onClick","tabIndex","role","size","emphasis","toString","description","renderDescriptions","renderSlotsMode","errorDescription","render"],"sources":["src/components/nv-fieldmultiselect/nv-fieldmultiselect.scss?tag=nv-fieldmultiselect","src/components/nv-fieldmultiselect/nv-fieldmultiselect.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldmultiselect {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[required]:not([required='false']) {\n    > label {\n      @include form-field-label-required();\n    }\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    @include form-field-popover();\n  }\n\n  .input-wrapper-multiselect {\n    @include form-field-input-wrapper();\n    width: 100%;\n  }\n\n  .input-container-multiselect {\n    @include form-field-input-container();\n    position: relative;\n    width: 100%;\n    min-height: 40px;\n\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n      width: 100%;\n      padding-right: 2rem;\n      flex-grow: 1;\n      margin: 0;\n      min-height: 100%;\n      box-sizing: border-box;\n    }\n\n    .toggle-dropdown-icon {\n      position: absolute;\n      right: 0;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 2;\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n      position: absolute;\n      right: 50px;\n    }\n/*\n    &:hover{\n      border-color: var(--components-form-field-border-hover);\n    }\n\n    &:focus-visible,\n    &:focus-within,\n    &:focus,\n    &.focus-within  {\n      border-color: var(--components-form-field-border-focus);\n      box-shadow: 0px 0px 0px var(--focus-field-stroke)\n      var(--nv-field-focus-box-shadow);\n    }*/\n  }\n\n  .non-filterable-text {\n    display: block;\n    border-radius: var(--form-field-radius);\n    background-color: var(--nv-field-background);\n    color: var(--components-form-field-content-text);\n    font-size: var(--form-field-font-size);\n    font-weight: 500;\n    line-height: var(--form-field-line-height);\n    box-sizing: border-box;\n    cursor: pointer;\n    height: 100%;\n    min-height: 40px;\n\n    span {\n      display: inline-block;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n\n.no-results-message {\n  text-align: center;\n  padding: 10px;\n  color: var(--components-form-text-description-error);\n}\n\n.multiselect-divider {\n  display: block;\n  width: 100%;\n  height: 1px;\n  background-color: var(--components-list-dropdown-separator);\n  margin: var(--list-dropdown-item-padding-y) 0;\n  border: 0;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - The content of the list.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input 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-fieldmultiselect',\n  styleUrl: 'nv-fieldmultiselect.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldmultiselect {\n  @Element() el: HTMLNvFieldmultiselectElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  /**\n   * Timer for debouncing input events.\n   * Private property preferred over @State as it:\n   * - Doesn't need to trigger re-renders\n   * - Is purely for internal logic\n   * - Improves performance by avoiding Stencil's reactivity system\n   */\n  private debounceTimer: number;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input 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   * Defines the name attribute of the input 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 input's 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   * Lets you define the text that explains what users should enter in the text\n   * input field. It's a crucial element for making forms clear and user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the maximum height of the multiselect list when open.\n   */\n  @Prop({ reflect: true })\n  readonly maxHeight: string = '200px';\n\n  /**\n   * Text for the badge showing the number of selected items.\n   */\n  @Prop({ reflect: true })\n  readonly badgeLabel: string = '';\n\n  /**\n   * The text to display when no items match the filter.\n   */\n  @Prop({ reflect: true })\n  readonly emptyresult: string = 'No results found';\n\n  /**\n   * Marks the input field as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the multiselect\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Display the input field's content without allowing users to change it.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * The autocomplete prop for faster input filling.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Enables or disables the filtering feature for the multiselect items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  /**\n   * Specifies the value of the input field.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * State of the multiselect popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Multiselect mode: 'options' (JSON data) or 'slots' (custom items).\n   * This property is now reflected in the modeState.\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'options' | 'slots';\n\n  /**\n   * List of options available in the multiselect.\n   * @description The options are passed as a JSON string.\n   * @example options='[{\"label\": \"Option 1\", \"value\": \"option1\"}, {\"label\": \"Option 2\", \"value\": \"option2\"}]'\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Options configuration for the multiselect items.\n   */\n  @State()\n  parsedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Additional description for the option */\n    description?: string;\n    /** Whether this option is pre-checked */\n    checked?: boolean;\n  }> = [];\n\n  /**\n   * List of selected values in the multiselect.\n   */\n  @State()\n  selectedValues: string[] = [];\n\n  /**\n   * Sorted options for display.\n   */\n  @State()\n  sortedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n  }> = [];\n\n  /**\n   * The text entered by the user for filtering multiselect items.\n   */\n  @State()\n  filterText: string = '';\n\n  /**\n   * Determines whether the multiselect is filterable.\n   */\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  /**\n   * Delay in milliseconds before the search is triggered when typing in the filter input.\n   * @default 300\n   */\n  @Prop({ reflect: true })\n  readonly debounceDelay: number = 300;\n\n  /**\n   * State for the mode of the multiselect.\n   * @type {'options' | 'slots'}\n   * @default 'options'\n   */\n  @State()\n  modeState: 'options' | 'slots' = 'options'; // Default value\n\n  @State()\n  private isHandlingEscape: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Subscribe to click outside event.\n   */\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  /**\n   * Set the mode state and handle options change.\n   */\n  componentWillLoad() {\n    this.modeState = this.mode;\n\n    // Don't call handleOptionsChange if we are in slots mode\n    if (this.modeState === 'options') {\n      this.handleOptionsChange(this.options);\n    }\n\n    // Add the listener for the hide event\n    requestAnimationFrame(() => {\n      if (this.popoverElement) {\n        this.popoverElement.addEventListener('hide', () => {\n          this.handlePopoverClose();\n        });\n      }\n    });\n\n    // Specific initialization for slots mode\n    if (this.modeState === 'slots') {\n      Promise.resolve().then(() => {\n        const items = Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n        );\n\n        // Initialize selectedValues with checked items\n        this.selectedValues = items\n          .filter(item => item.hasAttribute('checked'))\n          .map(item => item.getAttribute('value') || '');\n\n        // Force a reorder after initialization\n        requestAnimationFrame(() => {\n          this.reorderSlotContent();\n        });\n      });\n    }\n\n    // Initialize the sorted options array with the parsed options for initial rendering\n    if (this.modeState === 'options') {\n      this.sortedOptions = [...this.parsedOptions];\n    }\n\n    // Apply filtering if the multiselect is filterable and there is a value\n    if (this.filterable && this.value) {\n      this.filterText = String(this.value).toLocaleLowerCase();\n      this.filterItems();\n    } else {\n      // Reset visibility state of all dropdown items\n      this.resetFilter();\n    }\n  }\n\n  /**\n   * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch\n   */\n  componentDidLoad() {\n    if (this.modeState === 'options') {\n      requestAnimationFrame(() => {\n        this.reorderOptionsContent();\n      });\n    }\n  }\n\n  /**\n   * Unsubscribe from click outside event.\n   */\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n\n    // Remove the listener for the hide event\n    if (this.popoverElement) {\n      this.popoverElement.removeEventListener('hide', () => {\n        this.handlePopoverClose();\n      });\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item is selected.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Event emitted when the selection changes in the multiselect.\n   * Emits the current list of selected values.\n   */\n  @Event()\n  multiselectChange: EventEmitter<string[]>;\n\n  /**\n   * Emitted when the input loses focus.\n   * @param {CustomEvent<boolean>} event - The event object containing the focus state.\n   */\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    // Update the open state of popover\n    this.open = event.detail;\n\n    if (this.open) {\n      if (this.filterText) {\n        this.filterItems();\n      }\n    } else if (this.modeState === 'options') {\n      this.reorderOptionsContent();\n    } else {\n      this.reorderSlotContent();\n    }\n  }\n\n  /**\n   * Listen for the `itemChecked` event emitted by child items.\n   * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.\n   */\n  @Listen('itemChecked')\n  handleItemChecked(\n    event: CustomEvent<{\n      /** Value associated with the option */\n      value: string;\n      /** Whether this option is checked */\n      checked: boolean;\n    }>,\n  ) {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const { value, checked } = event.detail;\n\n    if (value !== undefined && value !== null) {\n      const newSelectedValues = [...this.selectedValues];\n      const valueIndex = newSelectedValues.indexOf(value);\n\n      if (checked && valueIndex === -1) {\n        newSelectedValues.push(value);\n      } else if (!checked && valueIndex > -1) {\n        newSelectedValues.splice(valueIndex, 1);\n      }\n\n      // Update the state and emit the event only if the selection has changed\n      if (\n        JSON.stringify(this.selectedValues) !==\n        JSON.stringify(newSelectedValues)\n      ) {\n        this.selectedValues = newSelectedValues;\n\n        // Use requestAnimationFrame to ensure the state is updated before emitting the event\n        requestAnimationFrame(() => {\n          this.multiselectChange.emit(this.selectedValues);\n        });\n      }\n    } else {\n      console.warn('Received itemChecked event with undefined or null value'); // Warning log\n    }\n  }\n\n  /**\n   * Emitted when the options change.\n   * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.\n   */\n  @Watch('options')\n  handleOptionsChange(\n    newValue:\n      | string\n      | Array<{\n          /** Label to display for the option */\n          label: string;\n          /** Value associated with the option */\n          value: string;\n          /** Whether this option is a divider */\n          isDivider?: boolean;\n          /** Whether this option is disabled */\n          disabled?: boolean;\n          /** Additional description for the option */\n          description?: string;\n          /** Whether this option is pre-checked */\n          checked?: boolean;\n        }>,\n  ) {\n    if (typeof newValue === 'string') {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.selectedValues = parsedOpts\n          .filter(option => option.checked)\n          .map(option => option.value);\n        this.parsedOptions = [...parsedOpts];\n      } catch (error) {\n        console.error('Error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    } else if (Array.isArray(newValue)) {\n      this.selectedValues = newValue\n        .filter(option => option.checked)\n        .map(option => option.value);\n      this.parsedOptions = [...newValue];\n    } else {\n      this.parsedOptions = [];\n    }\n\n    // Wait for the options to be fully loaded\n    Promise.resolve().then(() => {\n      requestAnimationFrame(() => {\n        if (this.modeState === 'options') {\n          this.reorderOptionsContent();\n        }\n      });\n    });\n  }\n\n  /**\n   * Emitted when the value changes.\n   */\n  @Watch('value')\n  watchValueHandler() {\n    // Handle value change and update the corresponding multiselect item if it exists\n    this.setInitialSelection();\n  }\n\n  /**\n   * Emitted when the filterable property changes.\n   * @param {boolean} newValue - The new value of the filterable property.\n   */\n  @Watch('filterable')\n  watchFilterableHandler(newValue: boolean) {\n    this.isFilterable = newValue;\n    this.filterable = newValue;\n  }\n\n  // Add a listener for the slot content\n  @Listen('slotchange')\n  handleSlotChange(event: Event) {\n    // Check: we only want to reorder if it's the \"content\" slot\n    const slot = event.target as HTMLSlotElement;\n    if (slot && slot.name === 'content') {\n      // To give other platforms (VueJS, React, etc.) time to insert all their items,\n      // we place the reorder in a requestAnimationFrame\n      requestAnimationFrame(() => {\n        this.reorderSlotContent();\n      });\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Retrieves the current filter text entered by the user.\n   * @returns {string} The filter text.\n   */\n  @Method()\n  async getFilterText(): Promise<string> {\n    return this.filterText;\n  }\n\n  /**\n   * Set the initial selection based on the current value and update the inputElement value.\n   */\n  private setInitialSelection() {\n    const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));\n\n    const selectedItem = items.find(\n      item =>\n        item.getAttribute('label') === this.value ||\n        item.getAttribute('value') === this.value ||\n        item.textContent?.trim() === this.value,\n    );\n\n    // Remove 'selected' from all items first to reset the state\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      // Add the `selected` attribute and `selected` class for visual styling\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\n\n      // Update the value and inputElement value to reflect the pre-selected item\n      this.value =\n        selectedItem.getAttribute('label') ||\n        selectedItem.getAttribute('value') ||\n        selectedItem.textContent?.trim() ||\n        '';\n      if (this.inputElement) {\n        this.inputElement.value = this.value;\n      }\n    }\n  }\n\n  /**\n   * Reset the filter and make all items visible.\n   */\n  @Method()\n  async resetFilter(): Promise<void> {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    // Reset visibility state of all dropdown items\n    items.forEach(item => {\n      item.style.display = '';\n    });\n\n    // Clean up filter-related UI elements\n    const ul = this.el.querySelector('ul');\n    if (ul) {\n      const emptyMessage = ul.querySelector('[data-empty]');\n      if (emptyMessage) emptyMessage.remove();\n\n      // Reorder with divider if needed\n      const selectedItems = items.filter(item =>\n        this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      const unselectedItems = items.filter(\n        item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n\n      if (selectedItems.length > 0) {\n        this.manageDivider(ul as HTMLElement, selectedItems, unselectedItems);\n      }\n    }\n  }\n\n  /**\n   * Returns the list of selected values.\n   * @returns {string[]} The selected values.\n   */\n  @Method()\n  async getSelectedValues(): Promise<string[]> {\n    return this.selectedValues;\n  }\n\n  /**\n   * Reorder the content of the slot.\n   */\n  private reorderSlotContent() {\n    if (this.modeState === 'options') return;\n\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove all existing <hr class=\"multiselect-divider\">\n    ul.querySelectorAll('hr.multiselect-divider').forEach(divider =>\n      divider.remove(),\n    );\n\n    // Retrieve all items (not hidden)\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ).filter(item => item.style.display !== 'none');\n\n    // If you possibly have a \"No results\" message:\n    const hasEmptyMessage = ul.querySelector('[data-empty]');\n    if (hasEmptyMessage) {\n      // if there is a \"No results found\" message, do not reorder\n      return;\n    }\n\n    // Separate checked vs unchecked\n    const selectedItems = items.filter(item =>\n      this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n    const unselectedItems = items.filter(\n      item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n\n    // Reinsert CHECKED items FIRST\n    // appendChild() moves the element without recreating it\n    // this is not trigger a re-rendering of the component in the platforms\n    selectedItems.forEach(item => {\n      ul.appendChild(item); // <-- The <li> (or <nv-fielddropdownitemcheck>) is just \"moved\" to the end of the list\n    });\n\n    // Add a divider if needed\n    if (selectedItems.length > 0 && unselectedItems.length > 0) {\n      const divider = document.createElement('hr');\n      divider.className = 'multiselect-divider';\n      ul.appendChild(divider);\n    }\n\n    // Reinsert UNCHECKED items at the end\n    unselectedItems.forEach(item => {\n      ul.appendChild(item);\n    });\n  }\n\n  /**\n   * Reorder the content for options mode with async handling\n   */\n  private reorderOptionsContent() {\n    const ul = this.el.querySelector('ul[role=\"content\"]') as HTMLElement;\n    if (!ul) return;\n\n    const items = Array.from(\n      ul.querySelectorAll('nv-fielddropdownitemcheck'),\n    ).filter(item => item.style.display !== 'none');\n\n    const selectedItems = items.filter(item =>\n      this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n    const unselectedItems = items.filter(\n      item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n\n    // Reorder the elements\n    selectedItems.forEach(item => ul.appendChild(item));\n    unselectedItems.forEach(item => ul.appendChild(item));\n\n    // Manage the divider after the reordering\n    this.manageDivider(ul, selectedItems, unselectedItems);\n  }\n\n  /**\n   * Filter multiselect items based on the text entered by the user.\n   */\n  private filterItems() {\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove existing empty message if any\n    const existingEmptyMessage = ul.querySelector('[data-empty]');\n    if (existingEmptyMessage) {\n      existingEmptyMessage.remove();\n    }\n\n    if (!this.filterText.trim()) {\n      if (this.parsedOptions && this.parsedOptions.length > 0) {\n        // Reset options display\n        const items = Array.from(\n          ul.querySelectorAll('nv-fielddropdownitemcheck'),\n        );\n        items.forEach(item => {\n          item.style.display = '';\n        });\n      } else {\n        // Reset slot items display\n        const items = Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n        );\n        items.forEach(item => {\n          item.style.display = '';\n        });\n      }\n\n      // Reorder with divider\n      const items = Array.from(\n        ul.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n      const selectedItems = items.filter(item =>\n        this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      const unselectedItems = items.filter(\n        item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      this.manageDivider(ul, selectedItems, unselectedItems);\n      return;\n    }\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    if (this.parsedOptions && this.parsedOptions.length > 0) {\n      // Filter options mode\n      const items = Array.from(\n        ul.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n\n      items.forEach(item => {\n        const option = this.parsedOptions.find(\n          opt => opt.value === item.getAttribute('value'),\n        );\n        if (option && !option.isDivider) {\n          const matchesFilter =\n            this.normalizeText(option.label).includes(normalizedFilter) ||\n            this.normalizeText(option.value).includes(normalizedFilter);\n\n          item.style.display = matchesFilter ? '' : 'none';\n          if (matchesFilter) hasVisibleItems = true;\n        }\n      });\n\n      // Manage the divider with the visible items\n      const visibleItems = items.filter(item => item.style.display !== 'none');\n      const visibleSelected = visibleItems.filter(item =>\n        this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      const visibleUnselected = visibleItems.filter(\n        item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n      );\n      this.manageDivider(ul, visibleSelected, visibleUnselected);\n    } else {\n      // Filter slot items mode\n      const items = Array.from(\n        this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n\n      items.forEach(item => {\n        const label = item.getAttribute('label') || '';\n        const value = item.getAttribute('value') || '';\n        const textContent = item.textContent || '';\n\n        const matchesFilter =\n          this.normalizeText(label).includes(normalizedFilter) ||\n          this.normalizeText(value).includes(normalizedFilter) ||\n          this.normalizeText(textContent).includes(normalizedFilter);\n\n        item.style.display = matchesFilter ? '' : 'none';\n        if (matchesFilter) hasVisibleItems = true;\n      });\n    }\n\n    // Add empty message if no items match the filter\n    if (!hasVisibleItems) {\n      const emptyMessage = document.createElement('li');\n      emptyMessage.setAttribute('data-empty', 'true');\n      emptyMessage.textContent = this.emptyresult;\n      emptyMessage.classList.add('no-results-message');\n      ul.appendChild(emptyMessage);\n    }\n\n    this.reorderSlotContent();\n  }\n\n  /**\n   * Filter multiselect items in options mode.\n   */\n  private filterItemsOption() {\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));\n\n    // Reset items if the filter text is empty\n    if (!this.filterText.trim()) {\n      // Remove the empty message if it exists\n      this.removeEmptyMessageOption(ul);\n      items.forEach(item => (item.style.display = ''));\n      this.reorderOptionsContent(); // Reorder after reset\n      return;\n    }\n\n    // Filter the items\n    items.forEach(item => {\n      const label = item.getAttribute('label') || '';\n      const value = item.getAttribute('value') || '';\n\n      const matchesFilter =\n        this.normalizeText(label).includes(normalizedFilter) ||\n        this.normalizeText(value).includes(normalizedFilter);\n\n      item.style.display = matchesFilter ? '' : 'none';\n      if (matchesFilter) hasVisibleItems = true;\n    });\n\n    // Manage the divider with the visible items\n    const visibleItems = items.filter(item => item.style.display !== 'none');\n    const visibleSelected = visibleItems.filter(item =>\n      this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n    const visibleUnselected = visibleItems.filter(\n      item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n\n    this.manageDivider(ul, visibleSelected, visibleUnselected);\n\n    // Add or remove the empty message based on the case\n    if (!hasVisibleItems) {\n      this.addEmptyMessageOption(ul);\n    } else {\n      this.removeEmptyMessageOption(ul);\n    }\n  }\n\n  /**\n   * Filter multiselect items in slots mode\n   */\n  private filterSlotsItems() {\n    if (this.modeState === 'options') return;\n\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove existing empty message if any\n    const existingEmptyMessage = ul.querySelector('[data-empty]');\n    if (existingEmptyMessage) {\n      existingEmptyMessage.remove();\n    }\n\n    // If filter text is empty, reset all items visibility\n    if (!this.filterText.trim()) {\n      this.resetFilter();\n      return;\n    }\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    // Get all items and preserve them in the DOM\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    // Instead of removing/reordering, just hide/show items\n    items.forEach(item => {\n      const label = item.getAttribute('label') || '';\n      const value = item.getAttribute('value') || '';\n      const textContent = item.textContent?.trim() || '';\n\n      const matchesFilter =\n        this.normalizeText(label).includes(normalizedFilter) ||\n        this.normalizeText(value).includes(normalizedFilter) ||\n        this.normalizeText(textContent).includes(normalizedFilter);\n\n      item.style.display = matchesFilter ? '' : 'none';\n      if (matchesFilter) hasVisibleItems = true;\n    });\n\n    // Get visible items after filtering\n    const visibleItems = items.filter(item => item.style.display !== 'none');\n    const visibleSelectedItems = visibleItems.filter(item =>\n      this.selectedValues.includes(item.getAttribute('value') || ''),\n    );\n\n    this.manageDivider(\n      ul,\n      visibleSelectedItems,\n      visibleItems.filter(\n        item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n      ),\n    );\n\n    // Add empty message if no items match the filter\n    if (!hasVisibleItems) {\n      const emptyMessage = document.createElement('li');\n      emptyMessage.setAttribute('data-empty', 'true');\n      emptyMessage.textContent = this.emptyresult;\n      emptyMessage.classList.add('no-results-message');\n      ul.appendChild(emptyMessage);\n    }\n  }\n\n  /**x\n   * Handle badge close for options mode.\n   */\n  private handleBadgeCloseOptions = (): void => {\n    this.selectedValues = [];\n    this.multiselectChange.emit(this.selectedValues);\n\n    // Uncheck all elements\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    items.forEach(item => {\n      item.checked = false;\n      item.style.display = '';\n    });\n\n    // Reorder options without the divider since there are no selected elements\n    this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);\n\n    // Reorder options without the divider since there are no selected elements\n    this.reorderOptionsContent();\n  };\n\n  /**\n   * Handle badge close for slots mode.\n   */\n  private handleBadgeCloseSlots = (): void => {\n    this.selectedValues = [];\n    this.multiselectChange.emit(this.selectedValues);\n\n    // Uncheck all elements\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    items.forEach(item => {\n      item.checked = false;\n      item.style.display = '';\n    });\n\n    // Reorder slot content\n    this.reorderSlotContent();\n  };\n\n  /**\n   * Normalizes text by removing accents and converting to lowercase\n   * @param {string} text - The text to normalize\n   * @returns {string} The normalized text\n   *\n   * @example\n   * normalizeText(\"Café Latte\") => \"cafe latte\"\n   *\n   * @description\n   * This function performs text normalization in three steps:\n   * 1. Decomposes characters into their base form and combining characters (NFD)\n   * 2. Removes all diacritical marks (accents, umlauts, etc.)\n   * 3. Converts to lowercase and trims whitespace\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize} - MDN documentation on String.normalize()\n   * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms\n   */\n  private normalizeText(text: string): string {\n    return text\n      .normalize('NFD') // Decompose characters into base + combining characters (e.g., é => e + ´)\n      .replace(/[\\u0300-\\u036f]/g, '') // Remove all diacritical marks (Unicode range for combining characters)\n      .toLowerCase() // Convert to lowercase\n      .trim(); // Remove leading and trailing whitespace\n  }\n\n  /**\n   * Handle click outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside(event: MouseEvent) {\n    if (\n      this.el.contains(event.target as Node) ||\n      (this.inputElement && this.inputElement.contains(event.target as Node))\n    ) {\n      return;\n    }\n\n    // Use handlePopoverClose for all cases\n    this.handlePopoverClose();\n  }\n\n  /**\n   * Handle popover close\n   */\n  private handlePopoverClose = () => {\n    // If we are handling Escape, ignore this event\n    if (this.isHandlingEscape) {\n      return;\n    }\n\n    this.open = false;\n    this.filterText = '';\n\n    // Only reorder based on the mode\n    if (this.modeState === 'options') {\n      this.reorderOptionsContent();\n    } else {\n      this.reorderSlotContent();\n    }\n\n    // Reset filter if needed\n    if (this.filterable) {\n      this.resetFilter();\n    }\n  };\n\n  /**\n   * Handle input blur for options mode.\n   */\n  private handleInputBlurOptions = () => {\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        // Close the popover without affecting the divider\n        this.open = false;\n        this.popoverElement.hide();\n\n        // Reset filter if needed\n        if (this.filterable) {\n          this.filterText = '';\n          this.resetFilter();\n        }\n      }\n    }, 150);\n  };\n\n  /**\n   * Handle keyboard events & arrow key navigation.\n   * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.\n   * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.\n   * @param {KeyboardEvent} event - The keyboard event.\n   */\n  @Listen('keydown', { passive: false })\n  async handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n        this.popoverElement.show();\n\n        // Focus on the first item if the list is not filterable\n        if (!this.filterable) {\n          requestAnimationFrame(() => {\n            this.focusFirstItem();\n          });\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll(\n        'nv-fielddropdownitemcheck:not([style*=\"display: none\"])',\n      ),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    if (items.length === 0) {\n      console.warn('No visible items found to navigate');\n      return;\n    }\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex =\n        currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex =\n        currentIndex === -1\n          ? items.length - 1\n          : (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Enter' && currentIndex >= 0) {\n      event.preventDefault();\n      const selectedItem = items[currentIndex];\n\n      // Toggle the checked state\n      const isCurrentlyChecked = selectedItem.hasAttribute('checked');\n      selectedItem.checked = !isCurrentlyChecked;\n\n      // Trigger a click event to ensure proper event handling\n      selectedItem.dispatchEvent(\n        new MouseEvent('click', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        }),\n      );\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation(); // Prevent the event from propagating to the popover\n\n      // Do the reorder and wait a bit before closing\n      const handleEscape = async () => {\n        this.isHandlingEscape = true; // Disable the hide listener\n\n        if (this.modeState === 'options') {\n          this.reorderOptionsContent();\n        } else {\n          this.reorderSlotContent();\n        }\n\n        // Wait for the reorder to be applied\n        await new Promise(resolve => setTimeout(resolve, 100));\n\n        // Reactivate the hide listener after a short delay\n        setTimeout(() => {\n          this.isHandlingEscape = false;\n          this.open = false;\n          this.popoverElement.hide();\n        }, 150);\n\n        if (this.inputElement) {\n          this.inputElement.blur();\n        }\n      };\n\n      await handleEscape();\n    }\n  }\n\n  /**\n   * Updates the highlighted item in the dropdown list.\n   *\n   * @param {(HTMLNvFielddropdownitemElement | HTMLNvFielddropdownitemcheckElement)[]} items - The items to update.\n   * @param {number} index - The index of the item to highlight.\n   */\n  private updateHighlightedItem(\n    items: (\n      | HTMLNvFielddropdownitemElement\n      | HTMLNvFielddropdownitemcheckElement\n    )[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.setAttribute('tabindex', '0');\n        item.scrollIntoView({ block: 'nearest' });\n        // Focus on the nv-fieldcheckbox inside\n        const checkbox = item.querySelector('nv-fieldcheckbox');\n        if (checkbox) {\n          (checkbox as HTMLElement).focus();\n        }\n      } else {\n        item.classList.remove('highlighted');\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  /**\n   * Focus on the first item in the dropdown list.\n   */\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector(\n      'nv-fielddropdownitemcheck:not([style*=\"display: none\"])',\n    ) as HTMLNvFielddropdownitemcheckElement;\n\n    if (firstItem) {\n      firstItem.setAttribute('tabindex', '0');\n      firstItem.classList.add('highlighted');\n      firstItem.scrollIntoView({ block: 'nearest' });\n      // Focus on the nv-fieldcheckbox inside\n      const checkbox = firstItem.querySelector('nv-fieldcheckbox');\n      if (checkbox) {\n        (checkbox as HTMLElement).focus();\n      }\n    } else {\n      console.warn('No visible first item found to focus');\n    }\n  }\n\n  /**\n   * Handle click on the input container for options mode.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClickOptions = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n      this.popoverElement.show();\n\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle click on the input container for slots mode.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClickSlots = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n      this.popoverElement.show();\n\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle input change for options mode.\n   * @param {Event} event - The input event.\n   */\n  private readonly handleInputOptions = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(this.value);\n\n    // Clear any existing timer\n    if (this.debounceTimer) {\n      window.clearTimeout(this.debounceTimer);\n    }\n\n    // Set a new timer for filtering\n    this.debounceTimer = window.setTimeout(() => {\n      this.filterText = input.value.toLowerCase();\n      this.filterItemsOption();\n    }, this.debounceDelay);\n  };\n\n  private addEmptyMessageOption(ul: HTMLElement) {\n    const existingMessage = ul.querySelector('[data-empty]');\n    if (existingMessage) return;\n\n    const emptyMessage = document.createElement('li');\n    emptyMessage.setAttribute('data-empty', 'true');\n    emptyMessage.textContent = this.emptyresult;\n    emptyMessage.classList.add('no-results-message');\n    ul.appendChild(emptyMessage);\n  }\n\n  private removeEmptyMessageOption(ul: HTMLElement) {\n    const existingMessage = ul.querySelector('[data-empty]');\n    if (existingMessage) existingMessage.remove();\n  }\n\n  /**\n   * Handle input change for slots mode\n   * @param {Event} event - The input event.\n   */\n  private readonly handleInputSlots = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) return;\n\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(this.value);\n\n    // Clear any existing timer\n    if (this.debounceTimer) {\n      window.clearTimeout(this.debounceTimer);\n    }\n\n    // Set a new timer for filtering\n    this.debounceTimer = window.setTimeout(() => {\n      this.filterText = input.value.toLowerCase();\n      this.filterSlotsItems();\n    }, this.debounceDelay);\n  };\n\n  /**\n   * Handle input focus for options mode.\n   */\n  private handleInputFocusOptions = () => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n    this.open = true;\n  };\n\n  /**\n   * Handle input focus for slots mode.\n   */\n  private handleInputFocusSlots = () => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n    this.open = true;\n  };\n\n  /**\n   * Handle input blur for slots mode.\n   */\n  private handleInputBlurSlots = () => {\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        // Close the popover without affecting the divider\n        this.open = false;\n        this.popoverElement.hide();\n\n        // Reset filter if needed\n        if (this.filterable) {\n          this.filterText = '';\n          this.resetFilter();\n        }\n      }\n    }, 150);\n  };\n\n  /**\n   * Toggle the multiselect popover for options mode.\n   */\n  private togglePopoverOptions = (): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.open) {\n      this.handlePopoverClose();\n    } else {\n      this.open = true;\n      this.popoverElement.show();\n\n      if (!this.filterable) {\n        this.focusFirstItem();\n      }\n    }\n  };\n\n  /**\n   * Toggle the multiselect popover for slots mode.\n   */\n  private togglePopoverSlots = (): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.open) {\n      this.handlePopoverClose();\n    } else {\n      this.open = true;\n      this.popoverElement.show();\n\n      if (!this.filterable) {\n        this.focusFirstItem();\n      }\n    }\n  };\n\n  /**\n   * Watch for changes in the mode prop and update modeState accordingly\n   * @param {string} newValue - The new mode value\n   */\n  @Watch('mode')\n  handleModeChange(newValue: 'options' | 'slots') {\n    this.modeState = newValue;\n  }\n\n  private manageDivider(\n    ul: HTMLElement,\n    selectedItems: Element[],\n    unselectedItems: Element[],\n  ) {\n    let divider = ul.querySelector('hr.multiselect-divider') as HTMLElement;\n    if (!divider) {\n      divider = document.createElement('hr');\n      divider.className = 'multiselect-divider';\n      ul.appendChild(divider);\n    }\n\n    const shouldShowDivider =\n      selectedItems.length > 0 && unselectedItems.length > 0;\n\n    if (shouldShowDivider) {\n      // Place the divider after the last selected item\n      const lastSelectedItem = selectedItems[selectedItems.length - 1];\n      lastSelectedItem.after(divider);\n      divider.style.display = '';\n    } else {\n      divider.style.display = 'none';\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\n   * Renders the component in options mode\n   * @returns {any} The JSX for options mode\n   */\n  private renderOptionsMode() {\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        <nv-popover\n          ref={el => (this.popoverElement = el)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div class=\"input-container-multiselect\">\n              <slot name=\"leading-input\"></slot>\n\n              <nv-badge\n                slot=\"leading-input\"\n                prevent-auto-close=\"true\"\n                color=\"10\"\n                dismissible={this.selectedValues.length > 0}\n                hidden={this.selectedValues.length <= 0}\n                label={`${this.selectedValues.length} ${this.badgeLabel}`}\n                aria-label={`Clear all ${this.selectedValues.length} ${this.badgeLabel} items`}\n                onCloseClicked={this.handleBadgeCloseOptions}\n              ></nv-badge>\n\n              {this.isFilterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.value}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInputOptions}\n                  onFocus={this.handleInputFocusOptions}\n                  onBlur={this.handleInputBlurOptions}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClickOptions}\n                  tabIndex={0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocusOptions}\n                  role=\"combobox\"\n                  aria-expanded={this.open}\n                >\n                  <span>{this.value || this.placeholder}</span>\n                </p>\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-dropdown-icon\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopoverOptions}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div\n            slot=\"content\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            style={{ 'max-height': this.maxHeight, 'overflow-y': 'auto' }}\n          >\n            <ul role=\"content\">\n              {this.parsedOptions.map(option => (\n                <nv-fielddropdownitemcheck\n                  label={option.label}\n                  description={option.description}\n                  value={option.value}\n                  checked={this.selectedValues.includes(option.value)}\n                  disabled={option.disabled}\n                ></nv-fielddropdownitemcheck>\n              ))}\n              <hr class=\"multiselect-divider\" style={{ display: 'none' }} />\n            </ul>\n          </div>\n        </nv-popover>\n\n        {this.renderDescriptions()}\n      </Host>\n    );\n  }\n\n  /**\n   * Renders the component in slots mode\n   * @returns {any} The JSX for slots mode\n   */\n  private renderSlotsMode() {\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        <nv-popover\n          ref={el => (this.popoverElement = el)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container-multiselect\"\n              onClick={this.handleInputContainerClickSlots}\n            >\n              <slot name=\"leading-input\">\n                <p>No leading input</p>\n              </slot>\n\n              <nv-badge\n                slot=\"leading-input\"\n                prevent-auto-close=\"true\"\n                color=\"10\"\n                dismissible={this.selectedValues.length > 0}\n                hidden={this.selectedValues.length <= 0}\n                label={`${this.selectedValues.length} ${this.badgeLabel}`}\n                aria-label={`Clear all ${this.selectedValues.length} ${this.badgeLabel} items`}\n                onCloseClicked={this.handleBadgeCloseSlots}\n              ></nv-badge>\n\n              {this.isFilterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.value}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInputSlots}\n                  onFocus={this.handleInputFocusSlots}\n                  onBlur={this.handleInputBlurSlots}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClickSlots}\n                  tabIndex={0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocusSlots}\n                  role=\"combobox\"\n                  aria-expanded={this.open}\n                >\n                  <span>{this.value || this.placeholder}</span>\n                </p>\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-dropdown-icon\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopoverSlots}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div\n            slot=\"content\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            style={{ 'max-height': this.maxHeight, 'overflow-y': 'auto' }}\n          >\n            <slot name=\"content\"></slot>\n          </div>\n        </nv-popover>\n\n        {this.renderDescriptions()}\n      </Host>\n    );\n  }\n\n  /**\n   * Renders description and error description sections\n   * @returns {any} The JSX for descriptions\n   */\n  private renderDescriptions() {\n    return [\n      (this.description || this.el.querySelector('[slot=\"description\"]')) && (\n        <div class=\"description\">\n          <slot name=\"description\">{this.description}</slot>\n        </div>\n      ),\n      (this.errorDescription ||\n        this.el.querySelector('[slot=\"error-description\"]')) && (\n        <div hidden={!this.error} class=\"error-description\">\n          <slot name=\"error-description\">{this.errorDescription}</slot>\n        </div>\n      ),\n    ];\n  }\n\n  /**\n   * Main render method that decides which mode to render\n   * @returns {any} The JSX for the component\n   */\n  render() {\n    return this.modeState === 'options'\n      ? this.renderOptionsMode()\n      : this.renderSlotsMode();\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/{p-2063c768.entry.js → p-d24586ed.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,h as t,a as r}from"./p-9b093b92.js";import{c as o}from"./p-8a1a6e56.js";import{S as n}from"./p-74407727.js";const v='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 i=v;const s=class{constructor(t){a(this,t);this.size="md";this.color="1"}componentWillRender(){if(this.xsmall){this.size=n.ExtraSmall}if(this.small){this.size=n.Small}if(this.medium){this.size=n.Medium}if(this.large){this.size=n.Large}if(this.xlarge){this.size=n.ExtraLarge}if(this.text){this.initials=this.text}if(this.url){this.src=this.url}}trimInitials(a){return a.trim().substring(0,2)}render(){return t(r,{key:"4543ac26e2c1d6d91de2c4671657e584486daefe",class:o(`avatar-${this.size}`,`avatar-color-${this.color}`),"aria-label":this.alt},this.src?t("img",{src:this.src,alt:this.alt}):this.initials?this.trimInitials(this.initials):t("slot",{name:"icon"},t("nv-icon",{name:"user"})))}};s.style=i;export{s as nv_avatar};
-//# sourceMappingURL=p-2063c768.entry.js.map
+import{r as a,h as t,a as r}from"./p-5439afb8.js";import{c as o}from"./p-8a1a6e56.js";import{S as n}from"./p-56f71851.js";const v='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 i=v;const s=class{constructor(t){a(this,t);this.size="md";this.color="1"}componentWillRender(){if(this.xsmall){this.size=n.ExtraSmall}if(this.small){this.size=n.Small}if(this.medium){this.size=n.Medium}if(this.large){this.size=n.Large}if(this.xlarge){this.size=n.ExtraLarge}if(this.text){this.initials=this.text}if(this.url){this.src=this.url}}trimInitials(a){return a.trim().substring(0,2)}render(){return t(r,{key:"4543ac26e2c1d6d91de2c4671657e584486daefe",class:o(`avatar-${this.size}`,`avatar-color-${this.color}`),"aria-label":this.alt},this.src?t("img",{src:this.src,alt:this.alt}):this.initials?this.trimInitials(this.initials):t("slot",{name:"icon"},t("nv-icon",{name:"user"})))}};s.style=i;export{s as nv_avatar};
+//# sourceMappingURL=p-d24586ed.entry.js.map

package/dist/native/p-d429a343.js

@@ -0,0 +1,2 @@
+function e(e,n,t){e.forEach((([e,s])=>n.addEventListener(e,s.bind(t))))}function n(e,n,t){e.forEach((([e,s])=>n.removeEventListener(e,s.bind(t))))}const t=Object.freeze({__proto__:null,addEventListeners:e,removeEventListeners:n});export{e as a,t as e,n as r};
+//# sourceMappingURL=p-d429a343.js.map

package/dist/native/p-d429a343.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["addEventListeners","events","target","context","forEach","event","listener","addEventListener","bind","removeEventListeners","removeEventListener"],"sources":["src/utils/events.utils.ts"],"sourcesContent":["export type EventsAndListeners = [string, EventListener][];\n\n/**\n * Adds a set of event listeners to the given target.\n * @param {EventsAndListeners} events - The events and listeners to add.\n * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.\n * @param {T} context - The class context to bind the event listeners to.\n */\nexport function addEventListeners<T>(\n  events: EventsAndListeners,\n  target: Element | Window | Document,\n  context: T,\n) {\n  events.forEach(([event, listener]) =>\n    target.addEventListener(event, listener.bind(context)),\n  );\n}\n\n/**\n * Removes a set of event listeners from the given target.\n * @param {EventsAndListeners} events - The events and listeners to remove.\n * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.\n * @param {T} context - The class context to bind the event listeners to.\n */\nexport function removeEventListeners<T>(\n  events: EventsAndListeners,\n  target: Element | Window | Document,\n  context: T,\n) {\n  events.forEach(([event, listener]) =>\n    target.removeEventListener(event, listener.bind(context)),\n  );\n}\n"],"mappings":"SAQgBA,EACdC,EACAC,EACAC,GAEAF,EAAOG,SAAQ,EAAEC,EAAOC,KACtBJ,EAAOK,iBAAiBF,EAAOC,EAASE,KAAKL,KAEjD,C,SAQgBM,EACdR,EACAC,EACAC,GAEAF,EAAOG,SAAQ,EAAEC,EAAOC,KACtBJ,EAAOQ,oBAAoBL,EAAOC,EAASE,KAAKL,KAEpD,C","ignoreList":[]}

package/dist/native/p-d67b7502.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,a as n,g as r}from"./p-5439afb8.js";import{c as i}from"./p-8a1a6e56.js";import{v as a}from"./p-f5ff676c.js";const c='nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const l=c;const s=class{constructor(t){e(this,t);this.checkedChanged=o(this,"checkedChanged",7);this.inputId=a();this.hideLabel=false;this.checked=false;this.disabled=false;this.readonly=false}onCheckedChanged(e){this.checkedChanged.emit(e)}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}this.checked=o.checked}}render(){return t(n,{key:"fd7d393f428febc115781037af278a63e885b050",class:i(this.labelPlacement==="before"&&"label-placement-before")},t("div",{key:"438c1274a3b4232bbfc4bb85949ce8f47c53f427",class:"input-container"},t("input",{key:"21e8bcb0ab978e4121865d19347200a3bb764f80",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})),t("div",{key:"087fa18da2cf5e0c6a3820315849789fe78773e6",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"b675e8019b0f01d42c36c8a9531ddfc4f1d228c0",htmlFor:this.inputId,class:i(this.hideLabel&&"visually-hidden")},t("slot",{key:"060b5ad24ba0425d0f528d06e268c83631b1c4b8",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"c6ff377866f8811173ff06b8aad0fc86d2f4baa8",class:"description"},t("slot",{key:"3fc242b00e50b5d504226cf3352859fa9e1571fa",name:"description"},this.description))))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=l;export{s as nv_toggle};
+//# sourceMappingURL=p-d67b7502.entry.js.map

package/dist/native/p-d67b7502.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvToggleCss","NvToggleStyle0","NvToggle","constructor","hostRef","this","inputId","uuidv4","hideLabel","checked","disabled","readonly","onCheckedChanged","checkedChanged","emit","handleChange","event","target","type","id","preventDefault","render","h","Host","key","class","clsx","labelPlacement","name","autocomplete","value","Boolean","label","el","querySelector","htmlFor","description"],"sources":["src/components/nv-toggle/nv-toggle.scss?tag=nv-toggle","src/components/nv-toggle/nv-toggle.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: 450;\n  line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--components-form-shape-foreground-default);\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--components-form-shape-foreground-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-toggle-width);\n  height: var(--form-toggle-height);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-toggle-radius);\n  border-width: var(--form-toggle-border-width);\n  border-style: solid;\n  border-color: var(--components-form-field-border-default);\n  background: var(--components-form-field-background-default);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--form-toggle-switch-dot-default);\n    height: var(--form-toggle-switch-dot-default);\n    background-color: var(--components-form-shape-foreground-switch-dot);\n    border-radius: var(--radius-rounded-full);\n    position: absolute;\n    top: 50%;\n    left: 25%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:hover {\n    border-color: var(--components-form-field-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--components-form-field-border-default);\n  }\n\n  @include focus-ring();\n\n  &:checked {\n    background: var(--components-form-field-background-checked);\n    border-color: var(--components-form-field-background-checked);\n\n    &::after {\n      content: '';\n      display: block;\n      width: var(--form-toggle-switch-dot-default);\n      height: var(--form-toggle-switch-dot-default);\n      background-color: var(--components-form-shape-foreground-default);\n      border-radius: var(--radius-rounded-full);\n      position: absolute;\n      top: 50%;\n      left: 75%;\n      transform: translate(-50%, -50%);\n    }\n\n    &:focus {\n      background: var(--components-form-field-background-checked);\n      border-color: var(--components-form-field-border-focus);\n    }\n  }\n\n  &:disabled:not([readonly]) {\n    box-shadow: unset;\n    background: var(--components-form-field-background-disabled);\n    border-color: var(--components-form-field-border-default);\n\n    &:checked {\n      &::after {\n        background-color: var(--components-form-shape-foreground-disabled);\n      }\n    }\n  }\n}\n\nnv-toggle {\n  @include root-styles();\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-toggle',\n  styleUrl: 'nv-toggle.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvToggle {\n  @Element() el!: HTMLNvToggleElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop()\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the toggle input, used to reference the form data\n   * after submission.\n   */\n  @Prop()\n  readonly name?: string;\n\n  /**\n   * The value attribute of the toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop()\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop()\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop()\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop()\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop()\n  readonly readonly: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the toggle input element and updates the checked state.\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly}\n          />\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"wIAAA,MAAMA,EAAc,i+GACpB,MAAAC,EAAeD,E,MCyBFE,EAAQ,MANrB,WAAAC,CAAAC,G,yDAmBWC,KAAAC,QAAkBC,IAgClBF,KAAAG,UAAqB,MAW9BH,KAAAI,QAAmB,MAIVJ,KAAAK,SAAoB,MAOpBL,KAAAM,SAAoB,K,CAsB7B,gBAAAC,CAAiBH,GACfJ,KAAKQ,eAAeC,KAAKL,E,CAS3B,YAAAM,CAAaC,GACX,MAAMC,EAASD,EAAMC,OAErB,GAAIA,EAAOC,OAAS,YAAcD,EAAOE,KAAOd,KAAKC,QAAS,CAC5D,GAAID,KAAKM,UAAYN,KAAKK,SAAU,CAClCM,EAAMI,iBACN,M,CAGFf,KAAKI,QAAUQ,EAAOR,O,EAQ1B,MAAAY,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EACLrB,KAAKsB,iBAAmB,UAAY,2BAGtCL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,SAAAE,IAAA,2CACEN,KAAK,WACLC,GAAId,KAAKC,QACTsB,KAAMvB,KAAKuB,KACXC,aAAa,MACbC,MAAOzB,KAAKyB,MACZrB,QAASsB,QAAQ1B,KAAKI,SACtBC,SAAUL,KAAKK,UAAYL,KAAKM,SAChCA,SAAUN,KAAKM,YAInBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPpB,KAAK2B,OAAS3B,KAAK4B,GAAGC,cAAc,oBACpCZ,EAAA,SAAAE,IAAA,2CACEW,QAAS9B,KAAKC,QACdmB,MAAOC,EAAKrB,KAAKG,WAAa,oBAE9Bc,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAASvB,KAAK2B,SAI3B3B,KAAK+B,aACL/B,KAAK4B,GAAGC,cAAc,0BACtBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAAevB,KAAK+B,e","ignoreList":[]}

package/dist/native/p-d776ed48.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,F as e,a,g as o}from"./p-5439afb8.js";const n="nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";const l=n;const r=class{constructor(s){t(this,s);this.nvDialogCanceled=i(this,"nvDialogCanceled",7);this.nvDialogConfirmed=i(this,"nvDialogConfirmed",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.hasSlot=false;this.disabled=false;this.undismissable=false;this.leadingIcon="";this.trailingIcon="";this.danger=false;this.cancelLabel="Cancel";this.submitLabel="Submit";this.handleConfirm=t=>{t.stopPropagation();this.nvDialogConfirmed.emit()};this.handleCancel=t=>{t.stopPropagation();this.nvDialogCanceled.emit()}}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"d8e7012231c3afdd987561eaf19568012a13c28b"},!this.hasSlot?s(e,null,!this.undismissable&&s("nv-button",{onClick:this.handleCancel,emphasis:"low",size:"sm"},this.cancelLabel),s("nv-button",{onClick:this.handleConfirm,disabled:this.disabled,danger:this.danger,size:"sm",emphasis:"high",type:"submit"},this.leadingIcon&&s("nv-icon",{slot:"leading-icon",name:this.leadingIcon,size:"sm"}),this.submitLabel,this.trailingIcon&&s("nv-icon",{slot:"trailing-icon",name:this.trailingIcon,size:"sm"}))):s("slot",null))}static get formAssociated(){return true}get el(){return o(this)}};r.style=l;const d='nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:500;line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:var(--line-height-sm);}';const h=d;const g=class{constructor(i){t(this,i);this.hasSlot=false;this.heading="Dialog Title"}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"57c18e06633951d2d82006d5b28cf863e9414bf4"},!this.hasSlot?s(e,null,s("div",{class:"heading"},this.heading),s("div",{class:"subheading"},this.subheading)):s("slot",null))}get el(){return o(this)}};g.style=h;export{r as nv_dialogfooter,g as nv_dialogheader};
+//# sourceMappingURL=p-d776ed48.entry.js.map

package/dist/native/p-d776ed48.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvDialogfooterCss","NvDialogfooterStyle0","NvDialogfooter","constructor","hostRef","this","hasSlot","disabled","undismissable","leadingIcon","trailingIcon","danger","cancelLabel","submitLabel","handleConfirm","event","stopPropagation","nvDialogConfirmed","emit","handleCancel","nvDialogCanceled","componentWillLoad","Array","from","el","childNodes","some","node","nodeType","Node","ELEMENT_NODE","hasAttribute","render","h","Host","key","Fragment","onClick","emphasis","size","type","slot","name","nvDialogheaderCss","NvDialogheaderStyle0","NvDialogheader","heading","class","subheading"],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx","src/components/nv-dialogheader/nv-dialogheader.scss?tag=nv-dialogheader","src/components/nv-dialogheader/nv-dialogheader.tsx"],"sourcesContent":["nv-dialogfooter {\n  display: flex;\n  padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n    var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--dialog-footer-gap-y);\n  align-self: stretch;\n}\n","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogfooter',\n  styleUrl: 'nv-dialogfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDialogfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDialogfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the confirm button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the submit button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon: string = '';\n\n  /**\n   * Sets the trailing icon for the submit button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon: string = '';\n\n  /**\n   * Sets the danger state for the submit button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string = 'Cancel';\n\n  /**\n   * Sets the label for the submit button.\n   */\n  @Prop({ reflect: true })\n  readonly submitLabel: string = 'Submit';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the dialog.\n   */\n  @Event()\n  public nvDialogCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the submit button is clicked. This allows to handle the submit action and potential data capture before closing the dialog.\n   */\n  @Event()\n  public nvDialogConfirmed: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the submit action when the submit button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handleConfirm = (event: Event) => {\n    event.stopPropagation();\n    this.nvDialogConfirmed.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.nvDialogCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handleConfirm}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              type=\"submit\"\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.submitLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","nv-dialogheader {\n  // calc(var(--dialog-header-padding-x, 24px) + var(--dialog-dismissible-position-right, 12px) + var(--button-sm-icon-size, 16px) + var(--button-sm-icon-button-padding, 8px))\n  padding: var(--dialog-header-padding-top)\n    var(--dialog-header-padding-x)\n    var(--dialog-header-padding-bottom)\n    var(--dialog-header-padding-x);\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  .heading {\n    color: var(--color-content-high-text);\n\n\n    /* heading/xs/medium */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-lg);\n    font-style: normal;\n    font-weight: 500;\n    line-height: var(--leading-px-6); /* 133.333% */\n    letter-spacing: var(--letter-spacing-heading-xs);\n  }\n\n  .subheading {\n    color: var(--color-content-low-text);\n\n\n    /* text/sm/regular */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-sm);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--line-height-sm); /* 142.857% */\n  }\n}\n","import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/**\n * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogheader',\n  styleUrl: 'nv-dialogheader.scss',\n  shadow: false,\n})\nexport class NvDialogheader {\n  @Element() el: HTMLNvDialogheaderElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the heading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string = 'Dialog Title';\n\n  /**\n   * Sets the subheading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly subheading: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"subheading\">{this.subheading}</div>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"kEAAA,MAAMA,EAAoB,2QAC1B,MAAAC,EAAeD,E,MCoBFE,EAAc,MAN3B,WAAAC,CAAAC,G,kRASUC,KAAAC,QAAU,MASTD,KAAAE,SAAoB,MAOpBF,KAAAG,cAAyB,MAMzBH,KAAAI,YAAsB,GAMtBJ,KAAAK,aAAuB,GAMvBL,KAAAM,OAAkB,MAMlBN,KAAAO,YAAsB,SAMtBP,KAAAQ,YAAsB,SA2BvBR,KAAAS,cAAiBC,IACvBA,EAAMC,kBACNX,KAAKY,kBAAkBC,MAAM,EAOvBb,KAAAc,aAAgBJ,IACtBA,EAAMC,kBACNX,KAAKe,iBAAiBF,MAAM,C,CAO9B,iBAAAG,GAEEhB,KAAKC,QAAUgB,MAAMC,KAAKlB,KAAKmB,GAAGC,YAAYC,MAAKC,GAE/CA,EAAKC,WAAaC,KAAKC,eACrBH,EAAiBI,aAAa,S,CAStC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD9B,KAAKC,QACL2B,EAACG,EAAQ,MACL/B,KAAKG,eACLyB,EAAA,aAAWI,QAAShC,KAAKc,aAAcmB,SAAS,MAAMC,KAAK,MACxDlC,KAAKO,aAGVqB,EAAA,aACEI,QAAShC,KAAKS,cACdP,SAAUF,KAAKE,SACfI,OAAQN,KAAKM,OACb4B,KAAK,KACLD,SAAS,OACTE,KAAK,UAEJnC,KAAKI,aACJwB,EAAA,WACEQ,KAAK,eACLC,KAAMrC,KAAKI,YACX8B,KAAK,OAGRlC,KAAKQ,YACLR,KAAKK,cACJuB,EAAA,WACEQ,KAAK,gBACLC,KAAMrC,KAAKK,aACX6B,KAAK,SAMbN,EAAA,a,6ECrKV,MAAMU,EAAoB,qqBAC1B,MAAAC,EAAeD,E,MCSFE,EAAc,MAL3B,WAAA1C,CAAAC,G,UAOUC,KAAAC,QAAU,MASTD,KAAAyC,QAAkB,c,CAY3B,iBAAAzB,GAEEhB,KAAKC,QAAUgB,MAAMC,KAAKlB,KAAKmB,GAAGC,YAAYC,MAAKC,GAE/CA,EAAKC,WAAaC,KAAKC,eACrBH,EAAiBI,aAAa,S,CAStC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD9B,KAAKC,QACL2B,EAACG,EAAQ,KACPH,EAAA,OAAKc,MAAM,WAAW1C,KAAKyC,SAC3Bb,EAAA,OAAKc,MAAM,cAAc1C,KAAK2C,aAGhCf,EAAA,a","ignoreList":[]}

package/dist/native/p-dc9dd5a7.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as t,a as c}from"./p-5439afb8.js";const s="";const e=s;const r=class{constructor(t){a(this,t)}render(){return t(c,{key:"4272b96994034a45def24742b8a6a23458928190"},t("td",{key:"798abaa3cf121af378be170230d080740578fb70"},t("slot",{key:"09335c80966c4fd10329cf6f2821c6f5409eb806"})))}};r.style=e;export{r as nv_datagriddatacell};
+//# sourceMappingURL=p-dc9dd5a7.entry.js.map

package/dist/native/p-e192c25c.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as n,a as t,g as i}from"./p-5439afb8.js";import{c as e}from"./p-8a1a6e56.js";const s='nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:"TT Norms Pro", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}';const a=s;const r=class{constructor(n){o(this,n);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.size="md";this.emphasis="high";this.loading=false;this.disabled=false;this.active=false;this.type="button";this.shape="square";this.handleClick=o=>{var n,t,i,e;if(this.disabled){o.preventDefault();return}if(this.type==="submit"){(t=(n=this.internals)===null||n===void 0?void 0:n.form)===null||t===void 0?void 0:t.requestSubmit()}if(this.type==="reset"){(e=(i=this.internals)===null||i===void 0?void 0:i.form)===null||e===void 0?void 0:e.reset()}}}handleLoadingChange(o){this.loading=o;this.disabled=o}handleDisabledChange(o){if(this.loading){this.disabled=this.loading}else{this.disabled=o}}componentWillLoad(){if(this.loading){this.disabled=this.loading}}render(){return n(t,{key:"1a3545bbe5f6b93f6caa60c2cd21716775406690",role:"button",type:this.type,tabindex:"0",disabled:this.disabled?true:undefined,class:e("root",`size-${this.size}`,`emphasis-${this.emphasis}`,this.loading&&"loading",`shape-${this.shape}`),onClick:this.handleClick},this.loading&&n("nv-loader",{key:"e209ec5c84eb52be65348eb2ce0e37d90b285a99",size:this.size}),!this.loading&&n("nv-icon",{key:"c887eb9cae5b21fb2bc5de1588aac2aec4bb233b",name:this.name,size:this.size}),n("slot",{key:"3d75b5fc607fde251700f115cfd48113642a26d5"}))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{loading:["handleLoadingChange"],disabled:["handleDisabledChange"]}}};r.style=a;export{r as nv_iconbutton};
+//# sourceMappingURL=p-e192c25c.entry.js.map

package/dist/native/p-e192c25c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvIconbuttonCss","NvIconbuttonStyle0","NvIconbutton","constructor","hostRef","this","size","emphasis","loading","disabled","active","type","shape","handleClick","event","preventDefault","_b","_a","internals","form","requestSubmit","_d","_c","reset","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","key","role","tabindex","undefined","class","clsx","onClick","name"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: `${IconButtonShape}` = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,qqJACxB,MAAAC,EAAeD,E,MC4BFE,EAAY,MAPzB,WAAAC,CAAAC,G,0KAoBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAUzCF,KAAAG,QAAmB,MAMnBH,KAAAI,SAAoB,MAOXJ,KAAAK,OAAkB,MAgBlBL,KAAAM,KAAwB,SAMxBN,KAAAO,MAA8B,SAY/BP,KAAAQ,YAAeC,I,YACrB,GAAIT,KAAKI,SAAU,CACjBK,EAAMC,iBACN,M,CAGF,GAAIV,KAAKM,OAAS,SAAU,EAC1BK,GAAAC,EAAAZ,KAAKa,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEI,e,CAExB,GAAIf,KAAKM,OAAS,QAAS,EACzBU,GAAAC,EAAAjB,KAAKa,aAAS,MAAAI,SAAA,SAAAA,EAAEH,QAAI,MAAAE,SAAA,SAAAA,EAAEE,O,GAS1B,mBAAAC,CAAoBhB,GAClBH,KAAKG,QAAUA,EACfH,KAAKI,SAAWD,C,CAIlB,oBAAAiB,CAAqBhB,GACnB,GAAIJ,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,KAChB,CACLH,KAAKI,SAAWA,C,EAQpB,iBAAAiB,GACE,GAAIrB,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,EAQzB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SACLpB,KAAMN,KAAKM,KACXqB,SAAS,IACTvB,SAAUJ,KAAKI,SAAW,KAAOwB,UACjCC,MAAOC,EACL,OACA,QAAQ9B,KAAKC,OACb,YAAYD,KAAKE,WACjBF,KAAKG,SAAW,UAChB,SAASH,KAAKO,SAEhBwB,QAAS/B,KAAKQ,aAEbR,KAAKG,SAAWoB,EAAA,aAAAE,IAAA,2CAAWxB,KAAMD,KAAKC,QAErCD,KAAKG,SAAWoB,EAAA,WAAAE,IAAA,2CAASO,KAAMhC,KAAKgC,KAAM/B,KAAMD,KAAKC,OAEvDsB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/native/p-e3827605.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as c,a as i,g as r}from"./p-5439afb8.js";import{c as t}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const a='nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(--components-form-field-border-default);--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(--components-form-field-background-default);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-checked);--nv-fieldcheckbox-background-disabled:var(--components-form-field-background-disabled);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(--components-form-shape-foreground-default);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error .input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled-error);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-error);--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]{opacity:0.5}nv-fieldcheckbox label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox .input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox .input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox .input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox .input-container input[type=checkbox]:focus,nv-fieldcheckbox .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox .input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox .input-container input[type=checkbox]:checked,nv-fieldcheckbox .input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox .input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox .input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldcheckbox .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const d=a;const s=class{constructor(c){e(this,c);this.checkedChanged=o(this,"checkedChanged",7);this.labelBefore=false;this.inputId=n();this.hideLabel=false;this.error=false;this.checked=false;this.indeterminate=false;this.disabled=false;this.readonly=false;this.required=false}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}if(this.indeterminate){this.indeterminate=false}this.checked=o.checked}}onCheckedChanged(e){this.checkedChanged.emit(e)}componentWillRender(){if(this.message){this.description=this.message}if(this.labelBefore){this.labelPlacement="before"}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return c(i,{key:"e2cfa1c1852963dd0a7cfeb0c8922e863838d306",class:t(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},c("div",{key:"3404c7fa3a6291ca44c46df97c4c0e5f8841c183",class:"input-container"},c("input",{key:"d1e19cb0980c42895e75cfe02682b9247068fac1",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&&!this.required,required:this.required,indeterminate:this.indeterminate,ref:e=>{if(e){e.indeterminate=this.indeterminate}}}),c("span",{key:"36763dc1a6895f1f3cfa67bad6beaf9df75c0e42",class:"icon"},this.checked&&!this.indeterminate&&c("slot",{key:"8991155af383d94aceaaa692c0e14113867bff11",name:"checked-icon"},c("svg",{key:"9103f809481495676417216201952a7ceab2a104",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none"},c("path",{key:"1e22abf1f34fc5dfa40d63da1d193f0de2a64a19",d:"M11.6667 3.5L5.25004 9.91667L2.33337 7","stroke-linecap":"round","stroke-linejoin":"round"}))),this.indeterminate&&c("slot",{key:"69b67227f1061b43990c6d730c2f50e4c409bbc7",name:"indeterminate-icon"},c("svg",{key:"e5ea7ec7309102b980d3a6d8b77b5250c3efbbb7",class:"indeterminate-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14",fill:"none"},c("path",{key:"594493f97b46bb4c652d2fbc7f851eb913ce81b3",d:"M2.9165 7H11.0832","stroke-linecap":"round","stroke-linejoin":"round"}))))),c("div",{key:"93862e8b1ae3be930ac05ea53ba51128e4dd3810",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&c("label",{key:"21b5023d3a84695b17cbfc19d9aab8f56ec380b5",htmlFor:this.inputId,class:t(this.hideLabel&&"visually-hidden")},c("slot",{key:"52ed9dfe69a442aeea95406e8520ba3ad457f712",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&c("div",{key:"4151d56507a8f7daa87820eeb161209ccd5cec37",class:"description"},c("slot",{key:"a511f6cada8055b9b731a86a3f6dfff2aca48953",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&c("div",{key:"0f0ac4c183fa4c78074b4a7dc0c05ceb7737bbe9",hidden:!this.error,class:"error-description"},c("slot",{key:"2de4e9fec5258eb70e3169612c3ee2667dd59f7b",name:"error-description"},this.errorDescription))))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=d;export{s as nv_fieldcheckbox};
+//# sourceMappingURL=p-e3827605.entry.js.map

package/dist/native/{p-5d0dc7c8.entry.js.map → p-e3827605.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","constructor","hostRef","this","labelBefore","inputId","uuidv4","hideLabel","error","checked","indeterminate","disabled","readonly","required","componentWillRender","message","description","labelPlacement","validation","errorDescription","onCheckedChanged","checkedChanged","emit","handleChange","event","target","type","id","preventDefault","render","h","Host","key","class","clsx","name","autocomplete","value","Boolean","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(--components-form-field-background-default);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldcheckbox-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled-error);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-error);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type=checkbox][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop()\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` instead.\n   * */\n  @Prop()\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop()\n  readonly labelBefore?: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","constructor","hostRef","this","labelBefore","inputId","uuidv4","hideLabel","error","checked","indeterminate","disabled","readonly","required","handleChange","event","target","type","id","preventDefault","onCheckedChanged","checkedChanged","emit","componentWillRender","message","description","labelPlacement","validation","errorDescription","render","h","Host","key","class","clsx","name","autocomplete","value","Boolean","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(--components-form-field-background-default);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldcheckbox-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled-error);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-error);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type=checkbox][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop()\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   * */\n  @Prop()\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop()\n  readonly labelBefore?: boolean = false;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-e5a7596b.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,a as f}from"./p-5439afb8.js";const c="";const s=c;const t=class{constructor(a){e(this,a)}render(){return a(f,{key:"b2169c2fb8df2c2270de682161e3afd63faaeeac"},a("tbody",{key:"b4037e80ffd57138c7b9091ea1836eafe13c18e7"},a("slot",{key:"9f91c8bf946750466b09f778f0471e3d967166d1"})))}};t.style=s;export{t as nv_datagridbody};
+//# sourceMappingURL=p-e5a7596b.entry.js.map

package/dist/native/p-e6f45df2.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as c,a as r}from"./p-5439afb8.js";const s="";const t=s;const b=class{constructor(c){a(this,c)}render(){return c(r,{key:"d0620053b5cc816c5869c75884fc8e4bdae90577"},c("tr",{key:"86f5107709792be9f27999ab5481b8dbb5ec66f3"},c("slot",{key:"5a15389d2b7a2cf9dd4fdab34aaa2424067b459d"})))}};b.style=t;export{b as nv_datagridrow};
+//# sourceMappingURL=p-e6f45df2.entry.js.map

package/dist/native/p-ed47a702.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,a as c}from"./p-5439afb8.js";const d="";const r=d;const s=class{constructor(a){e(this,a)}render(){return a(c,{key:"065e38cdcbd56b69dba909bc2d5d6e0eb8ab51df"},a("tr",{key:"0cdd81a4089dec01ed317a47353fdd0cc531e142"},a("slot",{key:"c1a734288012582482531e75e50a94556a6d809f"})))}};s.style=r;export{s as nv_tablerow};
+//# sourceMappingURL=p-ed47a702.entry.js.map

package/dist/native/p-f30ce086.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as f,a}from"./p-5439afb8.js";const c="";const s=c;const t=class{constructor(f){e(this,f)}render(){return f(a,{key:"a9f6f5c945e1b7fb7466c04efc212e4f61f625be"},f("th",{key:"5d073bd0eaf6f38121470f2daf5b0023a601bee3"},f("slot",{key:"252de21f8cab57ddcf7b1d5a42e0394ffac5db46"})))}};t.style=s;export{t as nv_datagridcolumn};
+//# sourceMappingURL=p-f30ce086.entry.js.map

package/dist/native/{p-eda8cd9d.entry.js.map → p-f30ce086.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvDatagridcolumnCss","NvDatagridcolumnStyle0","NvDatagridcolumn","render","h","Host","key"],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.scss?tag=nv-datagridcolumn","src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  styleUrl: 'nv-datagridcolumn.scss',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop()\n  readonly header: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop()\n  readonly accessor: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <th>\n          <slot></slot>\n        </th>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"kDAAA,MAAMA,EAAsB,GAC5B,MAAAC,EAAeD,E,MCSFE,EAAgB,M,yBAoB3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,MAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["nvDatagridcolumnCss","NvDatagridcolumnStyle0","NvDatagridcolumn","render","h","Host","key"],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.scss?tag=nv-datagridcolumn","src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  styleUrl: 'nv-datagridcolumn.scss',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop()\n  readonly header: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop()\n  readonly accessor: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <th>\n          <slot></slot>\n        </th>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"6CAAA,MAAMA,EAAsB,GAC5B,MAAAC,EAAeD,E,MCSFE,EAAgB,M,yBAoB3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,MAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/native/p-f3fbdea6.js

@@ -0,0 +1,2 @@
+import"./p-5439afb8.js";const o=()=>{};const s=o;export{s as g};
+//# sourceMappingURL=p-f3fbdea6.js.map

package/dist/types/components/nv-breadcrumb/nv-breadcrumb.d.ts

@@ -1,6 +1,5 @@
 /**
  * @slot default - Pass an icon, a link, or text to render the breadcrumb content.
- * @slot separator - The separator between breadcrumb items.
  */
 export declare class NvBreadcrumb {
     el: HTMLNvBreadcrumbElement;

package/dist/types/components/nv-button/nv-button.d.ts

@@ -20,6 +20,11 @@ export declare class NvButton {
      * on less critical ones
      */
     readonly emphasis: `${ButtonEmphasis}`;
+    /**
+     * Use this prop to highlight the button when it represents the current page
+     * or active selection. This helps users understand their navigation context.
+     */
+    readonly active: boolean;
     /**
      * Applies styling that visually indicates the button represents a dangerous
      * action.
@@ -54,6 +59,9 @@ export declare class NvButton {
      */
     private handleClick;
     /****************************************************************************/
+    handleKeyDown(event: KeyboardEvent): void;
+    handleTouchStart(event: TouchEvent): void;
+    /****************************************************************************/
     handleLoadingChange(loading: boolean): void;
     handleDisabledChange(disabled: boolean): void;
     /****************************************************************************/

package/dist/types/components/nv-datagrid/nv-datagrid.d.ts

@@ -6,6 +6,9 @@ import { Column } from '../../interfaces/Column';
  * @slot before - Use this slot to insert HTML before the data grid.
  * @slot after - Use this slot to insert HTML after the data grid.
  * @slot body - Use this slot to insert HTML into the data grid body.
+ *
+ * @deprecated [EXPERIMENTAL]
+ * @experimental - This component is still under development and is not ready for use.
  */
 export declare class NvDatagrid {
     el: HTMLNvDatagridElement;