@govtechsg/sgds-web-component 3.23.0-rc.1 → 3.23.0-rc.3

package/react/components/Select/sgds-select.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-select.cjs.js","sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: MouseEvent) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          part=\"menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["SelectElement","html","ref","classMap","ifDefined","nothing","formTextControlStyles","selectStyle","SgdsIcon","SgdsSpinner","SgdsSelectOption","__decorate","queryAssignedElements","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-select.cjs.js","sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the select's invalid state is set to true.\n * @event sgds-valid - Emitted when the select's invalid state is set to false.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  /** Disables native and sgds validation for the select. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: Event) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          part=\"menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["SelectElement","html","ref","classMap","ifDefined","nothing","formTextControlStyles","selectStyle","SgdsIcon","SgdsSpinner","SgdsSelectOption","__decorate","property","queryAssignedElements","watch"],"mappings":"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"}

package/react/components/Select/sgds-select.js

@@ -1,7 +1,7 @@
 'use client';
 import { __decorate } from 'tslib';
 import { html, nothing } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ref } from 'lit/directives/ref.js';
@@ -20,12 +20,16 @@ import { SgdsSpinner } from '../Spinner/sgds-spinner.js';
  * @event sgds-change - Emitted when the select value changes.
  * @event sgds-focus -  Emitted when user input is focused.
  * @event sgds-blur -  Emitted when user input is blurred.
+ * @event sgds-invalid - Emitted when the select's invalid state is set to true.
+ * @event sgds-valid - Emitted when the select's invalid state is set to false.
  *
  * @slot default - slot for sgds-select-option passed into select's menu
  */
 class SgdsSelect extends SelectElement {
     constructor() {
         super(...arguments);
+        /** Disables native and sgds validation for the select. */
+        this.noValidate = false;
         this._blockInputKeydown = (e) => {
             if (e.key !== "Tab") {
                 e.preventDefault();
@@ -92,6 +96,8 @@ class SgdsSelect extends SelectElement {
         this._updateDisplayValue();
         if (!this._isTouched && this.value === "")
             return;
+        if (this._mixinShouldSkipSgdsValidation())
+            return;
         this.invalid = !this._mixinReportValidity();
     }
     async _handleItemSelected(e) {
@@ -223,6 +229,9 @@ SgdsSelect.dependencies = {
     "sgds-spinner": SgdsSpinner,
     [SgdsSelect.childName]: SgdsSelectOption
 };
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsSelect.prototype, "noValidate", void 0);
 __decorate([
     queryAssignedElements({ flatten: true, selector: "sgds-select-option" })
 ], SgdsSelect.prototype, "options", void 0);

package/react/components/Select/sgds-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-select.js","sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: MouseEvent) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          part=\"menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["formTextControlStyles","selectStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-select.js","sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the select's invalid state is set to true.\n * @event sgds-valid - Emitted when the select's invalid state is set to false.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  /** Disables native and sgds validation for the select. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: Event) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          part=\"menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["formTextControlStyles","selectStyle"],"mappings":"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"}

package/react/radio-group/index.cjs.js

@@ -34,7 +34,9 @@ var index = react.createComponent({
     tagName: "sgds-radio-group",
     elementClass: sgdsRadioGroup.SgdsRadioGroup,
     events: {
-        onSgdsChange: "sgds-change"
+        onSgdsChange: "sgds-change",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid"
     }
 });
 

package/react/radio-group/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/radio-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Radio/sgds-radio-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-radio-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-radio-group\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,kBAAkB,EAAEC,6BAAS,CAAC,CAAC;AAExC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/radio-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Radio/sgds-radio-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-radio-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-radio-group\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,kBAAkB,EAAEC,6BAAS,CAAC,CAAC;AAExC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/radio-group/index.js

@@ -10,7 +10,9 @@ var index = createComponent({
     tagName: "sgds-radio-group",
     elementClass: SgdsRadioGroup,
     events: {
-        onSgdsChange: "sgds-change"
+        onSgdsChange: "sgds-change",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid"
     }
 });
 

package/react/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/radio-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Radio/sgds-radio-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-radio-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-radio-group\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,kBAAkB,EAAEA,cAAS,CAAC,CAAC;AAExC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/radio-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Radio/sgds-radio-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-radio-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-radio-group\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,kBAAkB,EAAEA,cAAS,CAAC,CAAC;AAExC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/select/index.cjs.js

@@ -38,6 +38,8 @@ var index = react.createComponent({
         onSgdsChange: "sgds-change",
         onSgdsFocus: "sgds-focus",
         onSgdsBlur: "sgds-blur",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid",
         onSgdsShow: "sgds-show",
         onSgdsAfterShow: "sgds-after-show",
         onSgdsHide: "sgds-hide",

package/react/select/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/select/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Select/sgds-select\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-select\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-select\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,aAAa,EAAEC,qBAAS,CAAC,CAAC;AAEnC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAEF,qBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/select/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Select/sgds-select\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-select\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-select\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,aAAa,EAAEC,qBAAS,CAAC,CAAC;AAEnC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAEF,qBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/select/index.js

@@ -14,6 +14,8 @@ var index = createComponent({
         onSgdsChange: "sgds-change",
         onSgdsFocus: "sgds-focus",
         onSgdsBlur: "sgds-blur",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid",
         onSgdsShow: "sgds-show",
         onSgdsAfterShow: "sgds-after-show",
         onSgdsHide: "sgds-hide",

package/react/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/select/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Select/sgds-select\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-select\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-select\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,aAAa,EAAEA,UAAS,CAAC,CAAC;AAEnC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAEA,UAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/select/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Select/sgds-select\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-select\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-select\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,aAAa,EAAEA,UAAS,CAAC,CAAC;AAEnC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAEA,UAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/styles/form-label.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = lit.css`.form-label{color:var(--sgds-form-color-default);font-weight:var(--sgds-font-weight-semibold);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-label.cjs.js.map

package/react/styles/form-label.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = css`.form-label{color:var(--sgds-form-color-default);font-weight:var(--sgds-font-weight-semibold);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-label.js.map

package/react/styles/form-text-control.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-text-control.cjs.js.map

package/react/styles/form-text-control.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/react/utils/validatorMixin.cjs.js

@@ -24,9 +24,7 @@ const SgdsFormValidatorMixin = (superClass) => {
         connectedCallback() {
             var _a;
             super.connectedCallback();
-            if (this._mixinShouldSkipSgdsValidation())
-                return;
-            /** Idempotency guarantee */
+            /** Idempotency guarantee — always create so reset can clear validity even with noValidate */
             (_a = this.inputValidationController) !== null && _a !== void 0 ? _a : (this.inputValidationController = new inputValidationController.InputValidationController(this));
         }
         async firstUpdated(changedProperties) {
@@ -83,19 +81,19 @@ const SgdsFormValidatorMixin = (superClass) => {
         }
         /**
          * During form resetting,
-         * 1. ValidityState is reset
-         * 2. invalid reactive prop is updated after the reset
-         * 3. Revalidates the ValidityState (but do not update invalid prop)
-         * to prepare for the next validity check
-         * 4. Reset touched state to false for a pristine form
+         * 1. ValidityState is reset (always, regardless of noValidate)
+         * 2. invalid reactive prop is updated after the reset (always)
+         * 3. Reset touched state to false for a pristine form (always)
+         * 4. Revalidates the ValidityState (but do not update invalid prop)
+         * to prepare for the next validity check (skipped when noValidate)
          */
         _mixinResetValidity(input) {
-            if (this._mixinShouldSkipSgdsValidation())
-                return;
             this.inputValidationController.resetValidity();
             this.inputValidationController.updateInvalidState();
-            this.inputValidationController.validateInput(input);
             this._isTouched ? (this._isTouched = false) : null;
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
+            this.inputValidationController.validateInput(input);
         }
         _mixinValidate(input) {
             if (this._mixinShouldSkipSgdsValidation())

package/react/utils/validatorMixin.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.cjs.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      /** Idempotency guarantee */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"names":["InputValidationController","__decorate","queryAsync"],"mappings":"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"}
+{"version":3,"file":"validatorMixin.cjs.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"names":["InputValidationController","__decorate","queryAsync"],"mappings":"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"}

package/react/utils/validatorMixin.js

@@ -20,9 +20,7 @@ const SgdsFormValidatorMixin = (superClass) => {
         connectedCallback() {
             var _a;
             super.connectedCallback();
-            if (this._mixinShouldSkipSgdsValidation())
-                return;
-            /** Idempotency guarantee */
+            /** Idempotency guarantee — always create so reset can clear validity even with noValidate */
             (_a = this.inputValidationController) !== null && _a !== void 0 ? _a : (this.inputValidationController = new InputValidationController(this));
         }
         async firstUpdated(changedProperties) {
@@ -79,19 +77,19 @@ const SgdsFormValidatorMixin = (superClass) => {
         }
         /**
          * During form resetting,
-         * 1. ValidityState is reset
-         * 2. invalid reactive prop is updated after the reset
-         * 3. Revalidates the ValidityState (but do not update invalid prop)
-         * to prepare for the next validity check
-         * 4. Reset touched state to false for a pristine form
+         * 1. ValidityState is reset (always, regardless of noValidate)
+         * 2. invalid reactive prop is updated after the reset (always)
+         * 3. Reset touched state to false for a pristine form (always)
+         * 4. Revalidates the ValidityState (but do not update invalid prop)
+         * to prepare for the next validity check (skipped when noValidate)
          */
         _mixinResetValidity(input) {
-            if (this._mixinShouldSkipSgdsValidation())
-                return;
             this.inputValidationController.resetValidity();
             this.inputValidationController.updateInvalidState();
-            this.inputValidationController.validateInput(input);
             this._isTouched ? (this._isTouched = false) : null;
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
+            this.inputValidationController.validateInput(input);
         }
         _mixinValidate(input) {
             if (this._mixinShouldSkipSgdsValidation())

package/react/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      /** Idempotency guarantee */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"validatorMixin.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"names":[],"mappings":";;;;;AAQA;;;;AAIG;AACU,MAAA,sBAAsB,GAAG,CAAoC,UAAa,KAAI;IACzF,MAAM,oBAAqB,SAAQ,UAAU,CAAA;;;AAW3C,QAAA,WAAA,CAAY,GAAG,IAAW,EAAA;AACxB,YAAA,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YART,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AASzB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1C;QAED,iBAAiB,GAAA;;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;;AAG1B,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,yBAAyB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,IAA9B,IAAI,CAAC,yBAAyB,GAAK,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAA;SACxE;QACD,MAAM,YAAY,CAAC,iBAAyC,EAAA;AAC1D,YAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;AAGtC,YAAA,IAAI,CAAC,KAAK;AACR,gBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;AACtC,qBAAC,MAAM,IAAI,CAAC,SAAS,CAAC;AACtB,oBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC;AACzC,qBAAC,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAEnC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAElD,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;AAED;;AAEG;QACH,iBAAiB,GAAA;AACf,YAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;gBAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;aAC/B;iBAAM;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACtC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;AACD;;;AAGG;AAEH;;;;AAIG;AACH,QAAA,kBAAkB,CAAC,CAAQ,EAAA;YACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;SAChD;AACD;;;;AAIG;AACH,QAAA,uBAAuB,CAAC,CAAQ,EAAA;YAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SAC/C;AACD;;;;;;;AAOG;AACH,QAAA,mBAAmB,CAAC,KAAyD,EAAA;AAC3E,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;AAC/C,YAAA,IAAI,CAAC,yBAAyB,CAAC,kBAAkB,EAAE,CAAC;AACpD,YAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,IAAI,IAAI,CAAC;YACnD,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrD;AAED,QAAA,cAAc,CAAC,KAAyD,EAAA;YACtE,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrD;QACD,kBAAkB,GAAA;AAChB,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAiC,CAAC;AACrD,YAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SACrC;QACD,mBAAmB,GAAA;YACjB,IAAI,IAAI,CAAC,8BAA8B,EAAE;AAAE,gBAAA,OAAO,IAAI,CAAC;AACvD,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;SACvD;QACD,oBAAoB,GAAA;YAClB,IAAI,IAAI,CAAC,8BAA8B,EAAE;AAAE,gBAAA,OAAO,IAAI,CAAC;AACvD,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,cAAc,EAAE,CAAC;SACxD;QACD,iBAAiB,GAAA;AACf,YAAA,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;SACjC;QACD,0BAA0B,GAAA;AACxB,YAAA,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;SAC1C;AACD,QAAA,iBAAiB,CAAC,KAA0B,EAAE,OAAgB,EAAE,MAAoB,EAAA;YAClF,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;SAC3E;;QAED,8BAA8B,GAAA;YAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAElC,YAAA,OAAO,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAE,UAAU,KAAI,IAAI,CAAC,UAAU,CAAC;SAC5C;;IA1HM,oBAAc,CAAA,cAAA,GAAG,IAAH,CAAQ;AAKH,IAAA,UAAA,CAAA;QAAzB,UAAU,CAAC,YAAY,CAAC;AAA+B,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACnB,IAAA,UAAA,CAAA;QAApC,UAAU,CAAC,uBAAuB,CAAC;AAAyC,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAkI/E,IAAA,OAAO,oBAAsE,CAAC;AAChF;;;;"}

package/styles/form-label.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = css`.form-label{color:var(--sgds-form-color-default);font-weight:var(--sgds-font-weight-semibold);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-label.js.map

package/styles/form-text-control.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map