@nova-design-system/nova-webcomponents 3.9.1 → 3.10.0

package/dist/cjs/nv-fieldradio.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nv-fieldradio.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,2sJAA2sJ,CAAC;AACpuJ,2BAAe,eAAe;;MC0BjB,YAAY;IANzB;;;;;;;QAwBW,gBAAW,GAAY,KAAK,CAAC;;;;;;;;;;QAuB7B,YAAO,GAAWA,KAAM,EAAE,CAAC;;;;;;;QAiD3B,UAAK,GAAY,KAAK,CAAC;;;;QAchC,YAAO,GAAY,KAAK,CAAC;;;;QAMhB,aAAQ,GAAY,KAAK,CAAC;;;;;;QAS1B,cAAS,GAAY,KAAK,CAAC;KAiGrC;IApMC,mBAAmB;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;;;;;;;;IAiHD,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,OAAO,EAAE;YAC5B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAChE,OAAO;gBACL,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;oBAC9B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;iBACzB;aACF,CACF,CAAC;YAEF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,EAC5D,IAAI,CAAC,KAAK,IAAI,OAAO,CACtB,IAEDF,oEACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,EAEFA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDA,oEAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1BA,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,EAEA,CAAC,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,MACnDA,kEAAK,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,mBAAmB,IACjDA,mEAAM,IAAI,EAAC,mBAAmB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CACzD,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-fieldradio/nv-fieldradio.scss?tag=nv-fieldradio","src/components/nv-fieldradio/nv-fieldradio.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldradio-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-default);\n  --nv-fieldradio-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-default);\n  --nv-fieldradio-background-default: var(--components-form-field-background-default);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldradio-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldradio-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldradio-error-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-error);\n  --nv-fieldradio-border-hover: var(--nv-fieldradio-border-default);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-error);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-error);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-field-border-error);\n  --nv-fieldradio-outline-color: var(--color-focus-destructive);\n\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n\n  &:not([disabled]),\n  &[disabled=\"false\"] {\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-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-radio-size);\n  height: var(--form-radio-size);\n  padding: var(--form-radio-inner-circle-padding);\n  flex-direction: column;\n  align-items: flex-start;\n  //gap: 10px;\n  border-radius: var(--radius-rounded-full);\n  border-width: var(--form-radio-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldradio-border-default);\n  background: var(--nv-fieldradio-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldradio-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldradio-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldradio-outline-color));\n\n  &:checked {\n    background: var(--nv-fieldradio-background-checked);\n    border-color: var(--nv-fieldradio-background-checked);\n\n    &:hover,\n    &:focus {\n      border-color: var(--nv-fieldradio-background-checked);\n      background: var(--nv-fieldradio-background-checked);\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      transform: translate(50%, -50%);\n      left: 0;\n      width: var(--form-radio-inner-circle-size);\n      height: var(--form-radio-inner-circle-size);\n      flex-shrink: 0;\n      border-radius: var(--radius-rounded-full);\n      background: var(--nv-fieldradio-dot-color-checked);\n    }\n  }\n\n  &:disabled {\n    border-radius: var(--radius-rounded-full);\n    border-width: var(--form-radio-border-width);\n    border-style: solid;\n    border-color: var(--nv-fieldradio-border-default);\n    background: var(--nv-fieldradio-background-disabled);\n\n    &:checked {\n      &::before {\n        background: var(--nv-fieldradio-dot-color-disabled);\n      }\n    }\n\n    &:hover {\n      border-color: var(--nv-fieldradio-border-default);\n      background: var(--nv-fieldradio-background-disabled);\n    }\n  }\n}\n\nnv-fieldradio {\n  @include fieldradio-variables();\n  @include root-styles();\n\n  &.error {\n    @include fieldradio-error-variables();\n  }\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\n  label {\n    @include label-styles();\n  }\n\n  input[type=\"radio\"] {\n    @include input-styles();\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  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\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 */\n@Component({\n  tag: 'nv-fieldradio',\n  shadow: false,\n  styleUrl: 'nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop({ reflect: true })\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\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   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\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 radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: 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  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\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 === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\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        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autofocus={this.autofocus}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\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          {(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"],"version":3}
+{"file":"nv-fieldradio.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,utJAAutJ,CAAC;AAChvJ,2BAAe,eAAe;;MC0BjB,YAAY;IANzB;;;;;;;QAwBW,gBAAW,GAAY,KAAK,CAAC;;;;;;;;;;QAuB7B,YAAO,GAAWA,KAAM,EAAE,CAAC;;;;;;;QAiD3B,UAAK,GAAY,KAAK,CAAC;;;;QAchC,YAAO,GAAY,KAAK,CAAC;;;;QAMhB,aAAQ,GAAY,KAAK,CAAC;;;;;;QAS1B,cAAS,GAAY,KAAK,CAAC;KAiGrC;IApMC,mBAAmB;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;;;;;;;;IAiHD,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,OAAO,EAAE;YAC5B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAChE,OAAO;gBACL,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;oBAC9B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;iBACzB;aACF,CACF,CAAC;YAEF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,EAC5D,IAAI,CAAC,KAAK,IAAI,OAAO,CACtB,IAEDF,oEACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,EAEFA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDA,oEAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1BA,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,EAEA,CAAC,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,MACnDA,kEAAK,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,mBAAmB,IACjDA,mEAAM,IAAI,EAAC,mBAAmB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CACzD,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-fieldradio/nv-fieldradio.scss?tag=nv-fieldradio","src/components/nv-fieldradio/nv-fieldradio.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldradio-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-default);\n  --nv-fieldradio-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-default);\n  --nv-fieldradio-background-default: var(--components-form-field-background-default);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldradio-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldradio-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldradio-error-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-error);\n  --nv-fieldradio-border-hover: var(--nv-fieldradio-border-default);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-error);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-error);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-field-border-error);\n  --nv-fieldradio-outline-color: var(--color-focus-destructive);\n\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n\n  &:not([disabled]),\n  &[disabled=\"false\"] {\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-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-radio-size);\n  height: var(--form-radio-size);\n  padding: var(--form-radio-inner-circle-padding);\n  flex-direction: column;\n  align-items: flex-start;\n  //gap: 10px;\n  border-radius: var(--radius-rounded-full);\n  border-width: var(--form-radio-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldradio-border-default);\n  background: var(--nv-fieldradio-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldradio-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldradio-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldradio-outline-color));\n\n  &:checked {\n    background: var(--nv-fieldradio-background-checked);\n    border-color: var(--nv-fieldradio-background-checked);\n\n    &:hover,\n    &:focus {\n      border-color: var(--nv-fieldradio-background-checked);\n      background: var(--nv-fieldradio-background-checked);\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      transform: translate(50%, -50%);\n      left: 0;\n      width: var(--form-radio-inner-circle-size);\n      height: var(--form-radio-inner-circle-size);\n      flex-shrink: 0;\n      border-radius: var(--radius-rounded-full);\n      background: var(--nv-fieldradio-dot-color-checked);\n    }\n  }\n\n  &:disabled {\n    border-radius: var(--radius-rounded-full);\n    border-width: var(--form-radio-border-width);\n    border-style: solid;\n    border-color: var(--nv-fieldradio-border-default);\n    background: var(--nv-fieldradio-background-disabled);\n\n    &:checked {\n      &::before {\n        background: var(--nv-fieldradio-dot-color-disabled);\n      }\n    }\n\n    &:hover {\n      border-color: var(--nv-fieldradio-border-default);\n      background: var(--nv-fieldradio-background-disabled);\n    }\n  }\n}\n\nnv-fieldradio {\n  @include fieldradio-variables();\n  @include root-styles();\n\n  &.error {\n    @include fieldradio-error-variables();\n  }\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\n  label {\n    @include label-styles();\n  }\n\n  input[type=\"radio\"] {\n    @include input-styles();\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  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\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 */\n@Component({\n  tag: 'nv-fieldradio',\n  shadow: false,\n  styleUrl: 'nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop({ reflect: true })\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\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   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\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 radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: 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  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\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 === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\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        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autofocus={this.autofocus}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\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          {(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"],"version":3}

package/dist/cjs/nv-fieldselect.cjs.entry.js

@@ -336,13 +336,13 @@ const NvFieldselect = class {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (index.h(index.Host, { key: '6db1f2e159308d8b1e78932522c62f73e78db893' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c329b6bb95018b0d9e574516ca8e801ea82828be', htmlFor: this.inputId }, index.h("slot", { key: '94d57fd7026986a8ef86dacffb70f0e590c8d2d7', name: "label" }, this.label))), index.h("div", { key: 'fca0df783ac46ebd16aa8b6e8db1450d81d2a0e7', class: "select-wrapper" }, index.h("slot", { key: 'bd944f336912516b83f32f58bd76a7ff80de2fb6', name: "before-input" }), index.h("div", { key: '42729a7ba192d85fa76abef9b928c98e514f7ff3', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '90ca0a9446a62a756e19b0b71db10fe8147eba25', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '55b2cf61b1ad07479a104c8d2ff4f46f41dd1677', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (index.h(index.Host, { key: '8db3dc06b44e4db7e2a0742e601c12e18e758ce4' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'ba4f797c94d2e8155758caf61ac58ad81ec76e9c', htmlFor: this.inputId }, index.h("slot", { key: '066e33d824ae5cf44e3c7e0ca63784d945a89fff', name: "label" }, this.label))), index.h("div", { key: '0c07cf2f4628ef816e6d1e927fef0da2f822ca54', class: "select-wrapper" }, index.h("slot", { key: '53dbbfa9adc491c47896c3898a3e2004a3ee7e54', name: "before-input" }), index.h("div", { key: 'c31b867bd77008caca565d81805964da23f8330c', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '7be8d229d57c77ec4c02761ae8c7e8bb7238a185', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '282485f65b1a7bc5b85623d5f892cb1d83a9e99c', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), index.h("select", { key: '482be9d241679ad9f77f199c00b4a8d0434ac91e', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), index.h("select", { key: '1170c1fc05941662434a7720cf00de136969621b', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '17a31f45608536be911f3fca1e28e11caac7a065', class: "select-icons" }, this.error && (index.h("nv-icon", { key: 'f8f6f1545d87cfdf174755da82780356480de737', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f79e5968a6fc70cf56c07223a8a569648d77c082', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'd7f2c576a6c6c5d964f692c1f520d0e71af82f35', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '852c05430b705347f473899ff884725b511d527d', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3f98fb2ee526fae3c74f2e2dd78d5f10b9e13475', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '268191d3ffc3191d7c946d805c6cd58dc1855dda', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '24b5935d22d7971f6aa5922a1fa8c47b8beb069f', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '5492aecb0537f91f8cf38430b4048bb7bd13edf8', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '349a41292a5e2c20783884b04295f3fdfd40df42', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '586c197ccb0797b6e051c52e4734d06ae9fdff15', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '506fbbb4c0248ce93b9c240b0db6f7714f285e09', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: '848c3638af8d84eeb2a6b884c8e3c5aa549a053f', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '77e8ed090caf243296918a2916d5964090783a10', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3b6f24dc66bbca05210bc77f64ef47524d6d4460', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '1e23487e1008b2c2c9c9208e315509be2a46eba3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '8073f26e95848f831b210e3a8d730458d2b62e89', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '8980e5890052257fef11e0fe0b932ef933d34316', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-fieldslider.cjs.entry.js

@@ -696,11 +696,11 @@ const NvFieldslider = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd255ebffd908e0b64a9d80316de351c5a35fc230' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e618f586707865f67d4008855299d4983b2bbb9d', htmlFor: this.startInputId }, index.h("slot", { key: 'fb9131f051ad669a797b5784f1cceee2169f8b8f', name: "label" }, this.label))), index.h("div", { key: '37147af53e7e0a0145f543c2a1070378e41e6605', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: '64a7232e46499efb355deea683113042bc745ae0', class: "track-container" }, index.h("div", { key: 'b9f5f5dc7f5e98aaa44b6e361786804af1a9798c', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: '40e2bc4b91cf40a1d0c7e1f126b092f9d149912b', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (index.h(index.Host, { key: '7dafd85aa9bae558c6339bacc1ab0f9ca284f252' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5a85de0b6d1216a1cdfa27172def79c7e2d17142', htmlFor: this.startInputId }, index.h("slot", { key: '5f17b24bc70f148a70677f52dfe0be84162a675b', name: "label" }, this.label))), index.h("div", { key: '5fb5d887c5fe61febfd877876365863f0657af93', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: '801e4189130725d5f4b3b0f116761e35a89f1236', class: "track-container" }, index.h("div", { key: 'fba52a45d3b5ba937b3e87441e17df458c490755', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: '1530c379bac4d4d0d7ef2eb22ddabe507ace1c0a', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '830b5921d75ee627002ef19ddc7946948d1bb6a7', class: "description" }, this.success && (index.h("nv-icon", { key: '451d013f7a3ffa19cb12df406187ec4001bbad2a', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: '59f84a04d635db6ceb465a642d8584167bd0cd9d', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '032ea2e613073412908abe35fe04545d2369f04a', class: "description" }, this.success && (index.h("nv-icon", { key: 'ff7a4249402880359bc46dd07ff39acd196a7630', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: '2fc0542506811cfc2d50eac140aae4cf97d279ea', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '10a5a273b0feeb9c0248b8aadcb801d7e832dcab', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '7540ff563068f83701d82a8a948473b20351021f', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: 'b76bfbbd817b15faf4f963f9c93c7d04cbbdade4', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'd7ac4fc356cef87c86f7bd75dd4d5b4151379cfa', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '598353c10d3f709fee22b44b8f831f22c2804d08', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: 'a426ae3e63aafeea9d74cba5baa4bbf0fb65b0d1', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-fieldtext.cjs.entry.js

@@ -112,9 +112,9 @@ const NvFieldtext = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '35382ab52aa48116fbedc7683aff4729f06f5969' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6f849db1b7603fc4de4fb23075fd7daa72438dd2', htmlFor: this.inputId }, index.h("slot", { key: '24bc67fe3a8de24a8601a2cf3c5afd2532e17c4a', name: "label" }, this.label))), index.h("div", { key: '8ffd2d0f048082c71a76054842fffd22452b9ad2', class: "input-wrapper" }, index.h("slot", { key: '478020c16e29399dcc6566651f88acc8d88ef36d', name: "before-input" }), index.h("div", { key: '1aa0bac3947bdff209268619202ccc38da691761', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '369b5f0a4c4d1d16217ad5de9221273ece41e1f0', name: "leading-input" }), index.h("input", { key: '91446fe15f48f45693f56b3fd21926b8114c1dca', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: '505a9ed004c4492f8daaef9a92bcaf344e2a10fb', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'c1e9ecd4f901862391daa6c9f5c75d3c1b81810f', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '15a452bdbbb386a51e4fe51370bd09521cc6f47f', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '7e7e3969dd6f3d1b80eab00ac966f7ba9f13895c', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'b4ca95846a8fdf68e95d602968506bf009f9334f', class: "description" }, index.h("slot", { key: 'fce329e819b837318b2d9bf9e16a8ef886aa940a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c3800ac457b5f0f87a3bdf9e9e37a36f5905786c', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f77d02598ba261bf2b48b16ecfa3fc15fe221599', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: 'c807258b41bcaada1a02abf56171f84a4dadc981' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9ba74a42aaddc54af913d8e9a76ad596f0b0ca02', htmlFor: this.inputId }, index.h("slot", { key: '7b0c763c5034807aceaf883dc8a7097cc5d21586', name: "label" }, this.label))), index.h("div", { key: '89396cfa77b11ea2499292448f43303ec1419432', class: "input-wrapper" }, index.h("slot", { key: '0574e6280a9f8575a555ed71cb380f8d622019a3', name: "before-input" }), index.h("div", { key: 'a7822f74ded6e21992ebf15afbbcaea449195c6a', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'af6789b67cea21c9445bd1000fa582c092daccf6', name: "leading-input" }), index.h("input", { key: '00118f95a1555d601cf5de2b4703e064dc31250a', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: '67e4fecbfd6c938e77b98416d0d6229993ec4592', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '5f11f64460e003859fefffa904c70719ebf87a26', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '161fec1690c7672be64684c0121a802406b1d30b', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '05d808bc7c372d5c911d03c074c89a829e42083b', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '07818a5aec0540a8758ccdfc32dbc15129adf5e9', class: "description" }, index.h("slot", { key: 'cc7b3a9086b4afae71c25964a92ea2ed5f07813a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'a313507b2c8f88c5d7304513b84f9bb360886961', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '796a5b0c0df37196a4c71bef6a35814fff1eae47', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-fieldtextarea.cjs.entry.js

@@ -182,9 +182,9 @@ const NvFieldtextarea = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2b054e4460ac1532cb2006feaa3930abc8e21505' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5058a7c4a77a37336bcc58fd6b727f1f9564d7b2', htmlFor: this.inputId }, index.h("slot", { key: '0c5abb11d0c2377b702ae1614134e28e53a6e1e2', name: "label" }, this.label))), index.h("div", { key: 'e6d9981eaab913b3cf04fd99e0fbd07830fbebff', class: "textarea-wrapper" }, index.h("div", { key: '23392da0e927d2eb5720fa98499afd2fcb33d840', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '9b9521f4e033002ea346e3054118a114349dd7ee', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '27411a39625e1f03bbe23ae52ceadb04ab0afd4e', class: "description" }, index.h("slot", { key: '56a5e1a95376899525911e096ded708a4987711d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2336848d28c0d67c95607da5bcab3348c4c15e0a', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'a200628a9ed75402395e415eab743afddf0a5d27', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '8f7f14974b855a44e88a951ff0795e11e3ab7d61' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9b438132196d7bc75cc4efdae736451bd7a23cdc', htmlFor: this.inputId }, index.h("slot", { key: 'f64e341eccefed72152326fadd9287f056842634', name: "label" }, this.label))), index.h("div", { key: '454213728d3b455d602a21653c1fc784bc411477', class: "textarea-wrapper" }, index.h("div", { key: '9ab87f44cf9622ca7c389d797a7e777eda7621d9', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: 'd8c66568fa9c581063e2b9f531f3442020d07b70', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '92700f5775053107569d2a2a0857c939a882debb', class: "description" }, index.h("slot", { key: 'd38ebd52d5d08ffe286acbee11e8733023c45824', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '872008326796f477c7c48ee2e8eec60ca51135ba', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'eae9c837562d2b39bbe5813390c9bf63d86dcf36', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-fieldtime.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c56424e5.js');
 const string_utils = require('./string.utils-9c581350.js');
-const constants = require('./constants-8fb8ccc0.js');
+const constants = require('./constants-3b6beb66.js');
 const v4 = require('./v4-7014b8b0.js');
 
 const nvFieldtimeCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtime{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtime[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtime[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtime[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);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-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
@@ -971,26 +971,26 @@ const NvFieldtime = class {
             }, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (index.h(index.Host, { key: 'a8d08a4dac97430398e3f769f353e91ef08de9c0', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e7d4a858f6194f085144fd59894ad54220a17a03', htmlFor: this.inputId }, index.h("slot", { key: '69901d62cdd32e3d7d1efe14066ef5ab42eed0d5', name: "label" }, this.label))), index.h("nv-popover", { key: '2541a920b4ce7b98515c58867ab1ab25d9cace9d', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '2f501df272714fd912b0d0981c27db89b46ae424', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '41ee670692e5facaa0ddd065a2a79a66825d207b', name: "before-input" }), index.h("div", { key: '24e41277073946b78ae4d1f8f38173045e699845', class: "input-container" }, index.h("slot", { key: '6db3ce5df588697b9183225be3b603a3b51a156f', name: "leading-input" }), string_utils.startsWithIgnoreCase(this.format, 'HH') && [
-            index.h("input", { key: 'ee093f322342ac3572ad76c48ebc2ecbed63ac01', ref: el => (this.inputElements[constants.TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, constants.TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(constants.TimeType.Hours), name: this.name
+        return (index.h(index.Host, { key: 'a960e7daf8d9a323a55b0f248dd24f8e94321161', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '23c78f159cb32ef76d0d8b5a1171246c9c69fdb7', htmlFor: this.inputId }, index.h("slot", { key: '70b2361b44414dba4ca91b487a7b04872cc0d75d', name: "label" }, this.label))), index.h("nv-popover", { key: '80de55aa7eb0c165ed6871cb0ac6a5aec9046769', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'fcd670c6dd32e6687540ddbdaefc2808898a459f', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'cea8867cee99035e97bc9ad40a7f20cf1091f415', name: "before-input" }), index.h("div", { key: 'b68a1a7477baaa3fbf39182a36fe4a693e29a688', class: "input-container" }, index.h("slot", { key: '3bb50bb3ad0207ded63bddfff6b5c5afda7ddfd4', name: "leading-input" }), string_utils.startsWithIgnoreCase(this.format, 'HH') && [
+            index.h("input", { key: '236b3a8067f50c443a117e6b3e8e4b882a84eb01', ref: el => (this.inputElements[constants.TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, constants.TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(constants.TimeType.Hours), name: this.name
                     ? `${constants.TimeType.Hours}-${this.name}`
                     : constants.TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            index.h("span", { key: '9cec44d707277c298ba7a70934e1593a12207799' }, ":"),
-            index.h("input", { key: '2acaf3b143f0f5e9e04005213bdfe9ea5334bf53', ref: el => (this.inputElements[constants.TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, constants.TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(constants.TimeType.Minutes), name: this.name
+            index.h("span", { key: '2440acab80a0d91ebe758f5a329ac5d805a18f9a' }, ":"),
+            index.h("input", { key: '72bc71a8bce65be766c899738745d85da7ef3530', ref: el => (this.inputElements[constants.TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, constants.TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(constants.TimeType.Minutes), name: this.name
                     ? `${constants.TimeType.Minutes}-${this.name}`
                     : constants.TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            index.h("span", { key: '07e0b374bdcad92339c4ddc10d71cc963a8a71ff' }, ":"),
-            index.h("input", { key: '84838544717af0bc967258d91fbee2748072be4f', ref: el => (this.inputElements[constants.TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, constants.TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(constants.TimeType.Seconds), name: this.name
+            index.h("span", { key: '0afdff59b999c346b455ed7408332d087ae48b12' }, ":"),
+            index.h("input", { key: '0ecf4b18af18b6184e0ccdd00ddea561ee403195', ref: el => (this.inputElements[constants.TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, constants.TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(constants.TimeType.Seconds), name: this.name
                     ? `${constants.TimeType.Seconds}-${this.name}`
                     : constants.TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], index.h("nv-iconbutton", { key: 'ec8d0d5c7eb9aa720deef07f23c712287246f3a8', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: 'dbef458469153ef93ad94903a2bcf439f6243d40', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: '3dfb5e5b32dc91ebe53502f9117f628ae79bf57c', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: '744e72f9c7828f8487f58265dac564670ba26329', name: "after-input" })), index.h("div", { key: '72dc9823125b9109bc27e049936007e796a97a06', class: "time-dropdown", slot: "content" }, index.h("div", { key: '1b1f8241a25500cf9ce22ebea20becd6882760cc', class: "time-columns" }, string_utils.startsWithIgnoreCase(this.format, 'HH') &&
+        ], index.h("nv-iconbutton", { key: '2d3d19d683d85110df8aab9d7c70fb377b189381', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: '8b49cb73821fea8926ede8406019fa68baa8500e', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: '372b8e95455c269a988257f2504fc24c680d7f4b', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: '9e23fd13862e6218cd7213729b3e165ae74fe2eb', name: "after-input" })), index.h("div", { key: 'c5b99d58c96a055ea8aeade81fb5d75490421716', class: "time-dropdown", slot: "content" }, index.h("div", { key: '2bcee9fa41574db70850445bba4d4041c9471a46', class: "time-columns" }, string_utils.startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(constants.TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(constants.TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(constants.TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '57985d7f2626853a24db80d56607b5453b00b6c9', class: "description" }, index.h("slot", { key: 'ba3383c066c6bcac3b1e6183b84528723de9cddc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '6f02373e082fcc7e34e0d35441783122cd7c0266', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '43508d63829f53f5b5c718f1a112abbe5919b900', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '822534262bb1769294be95c1a240a2753d556e1c', class: "description" }, index.h("slot", { key: '62489b82bee33610b55dfa4c2f9997b5d68b6bfe', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '9cedb395a09c4243c7c714574ad8d41b6a836fbb', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7b8802739ad74756f2843dd8807afe6abda92831', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }