@nysds/nys-select 1.12.0 → 1.13.0

package/dist/nys-select.js

@@ -1,4 +1,4 @@
-import { LitElement as v, html as f, unsafeCSS as _ } from "lit";
+import { LitElement as f, html as v, unsafeCSS as _ } from "lit";
 import { property as o } from "lit/decorators.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
 var m = Object.defineProperty, u = (y, e, t, d) => {
@@ -6,7 +6,7 @@ var m = Object.defineProperty, u = (y, e, t, d) => {
     (r = y[s]) && (l = r(e, t, l) || l);
   return l && m(e, t, l), l;
 };
-class c extends v {
+class c extends f {
   constructor() {
     super(...arguments), this.disabled = !1, this.selected = !1, this.value = "", this.label = "", this.hidden = !1;
   }
@@ -18,7 +18,7 @@ class c extends v {
     });
   }
   render() {
-    return f`
+    return v`
       <option
         ?disabled=${this.disabled}
         ?selected=${this.selected}
@@ -47,14 +47,14 @@ u([
   o({ type: Boolean, reflect: !0 })
 ], c.prototype, "hidden");
 customElements.define("nys-option", c);
-const g = ':host{--_nys-select-width: 100%;--_nys-select-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-select-font-size: var(--nys-font-size-ui-md, 16px);--_nys-select-font-weight: var(--nys-font-weight-regular, 400);--_nys-select-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-select-gap: var(--nys-space-50, 4px);--_nys-select-border-radius: var(--nys-radius-md, 4px);--_nys-select-padding: var(--nys-space-100, 8px) var(--nys-space-400, 32px) var(--nys-space-100, 8px) var(--nys-space-100, 8px);--_nys-select-color: var(--nys-color-text, #1b1b1b);--_nys-select-color--error: var( --nys-color-danger, var(--nys-color-red-600, #b52c2c) );--_nys-select-background-color: var(--nys-color-ink-reverse, #fff);--_nys-select-background-color--disabled: var( --nys-color-neutral-50, #ededed );--_nys-select-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-select-border-width: var(--nys-border-width-sm, 1px);--_nys-select-border-color: var(--nys-color-neutral-400, #909395);--_nys-select-border-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-select-border-color--focus: var(--nys-color-focus, #004dd1);--_nys-select-border-color--disabled: var(--nys-color-neutral-200, #bec0c1);--_nys-select-border-default: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-400, #909395);--_nys-select-border-focus: var(--nys-border-width-sm, 1px) solid var(--nys-color-focus, var(--nys-color-blue-600, #004dd1));--_nys-select-border-disabled: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-200, #bec0c1);--_nys-select-border-hover: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-900, #1b1b1b)}.nys-select{display:flex;flex-direction:column;gap:var(--_nys-select-gap);font-family:var(--_nys-select-font-family)}.nys-select__select{color:var(--_nys-select-color);font-weight:var(--_nys-select-font-weight);font-family:var(--_nys-select-font-family);border-radius:var(--_nys-select-border-radius);border:solid var(--_nys-select-border-width) var(--_nys-select-border-color);font-size:var(--_nys-select-font-size);padding:var(--_nys-select-padding);width:var(--_nys-select-width);max-width:100%;text-indent:1px;text-overflow:"";background:var(--_nys-select-background-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis}.nys-select__selectwrapper{position:relative;display:inline-block;width:var(--_nys-select-width);max-width:100%}.nys-select__icon{color:var(--_nys-select-color);position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}:host([width=sm]){--_nys-select-width: var(--nys-select-form-width-sm, 88px)}:host([width=md]){--_nys-select-width: var(--nys-select-form-width-md, 200px)}:host([width=lg]){--_nys-select-width: var(--nys-select-form-width-lg, 384px)}:host([width=full]){--_nys-select-width: 100%;flex:1}.nys-select__select:hover:not(:disabled){cursor:pointer;border-color:var(--_nys-select-border-color--hover);outline:solid var(--_nys-select-border-width) var(--_nys-select-border-color--hover)}.nys-select__select:focus{border-color:var(--_nys-select-border-color--focus);outline:solid var(--_nys-select-border-width) var(--_nys-select-border-color--focus)}.nys-select__select:disabled{background-color:var(--_nys-select-background-color--disabled);border-color:var(--_nys-select-border-color--disabled);cursor:not-allowed;color:var(--_nys-select-color--disabled)}.nys-select__select:disabled~.nys-select__icon{color:var(--_nys-select-color--disabled)}:host([showError]){--_nys-select-border-default: var(--nys-border-width-sm, 1px) solid var(--_nys-select-color--error)}';
+const g = ':host{--_nys-select-width: 100%;--_nys-select-height: var(--nys-size-500, 40px);--_nys-select-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-select-font-size: var(--nys-font-size-ui-md, 16px);--_nys-select-font-weight: var(--nys-font-weight-regular, 400);--_nys-select-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-select-gap: var(--nys-space-50, 4px);--_nys-select-border-radius: var(--nys-radius-md, 4px);--_nys-select-padding: var(--nys-space-100, 8px) var(--nys-space-400, 32px) var(--nys-space-100, 8px) var(--nys-space-100, 8px);--_nys-select-color: var(--nys-color-text, #1b1b1b);--_nys-select-color--error: var( --nys-color-danger, var(--nys-color-red-600, #b52c2c) );--_nys-select-background-color: var(--nys-color-ink-reverse, #fff);--_nys-select-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-select-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-select-border-width: var(--nys-border-width-sm, 1px);--_nys-select-border-color: var(--nys-color-neutral-400, #909395);--_nys-select-border-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-select-border-color--focus: var(--nys-color-focus, #004dd1);--_nys-select-border-color--disabled: var(--nys-color-neutral-200, #bec0c1);--_nys-select-border-default: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-400, #909395);--_nys-select-border-focus: var(--nys-border-width-sm, 1px) solid var(--nys-color-focus, var(--nys-color-blue-600, #004dd1));--_nys-select-border-disabled: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-200, #bec0c1);--_nys-select-border-hover: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-900, #1b1b1b)}.nys-select{display:flex;flex-direction:column;gap:var(--_nys-select-gap);font-family:var(--_nys-select-font-family)}.nys-select__select{color:var(--_nys-select-color);font-weight:var(--_nys-select-font-weight);font-family:var(--_nys-select-font-family);border-radius:var(--_nys-select-border-radius);border:solid var(--_nys-select-border-width) var(--_nys-select-border-color);font-size:var(--_nys-select-font-size);padding:var(--_nys-select-padding);width:var(--_nys-select-width);height:var(--_nys-select-height);max-width:100%;text-indent:1px;background:var(--_nys-select-background-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis}.nys-select__selectwrapper{position:relative;display:inline-block;width:var(--_nys-select-width);max-width:100%}.nys-select__icon{color:var(--_nys-select-color);position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}:host([width=sm]){--_nys-select-width: var(--nys-select-form-width-sm, 88px)}:host([width=md]){--_nys-select-width: var(--nys-select-form-width-md, 200px)}:host([width=lg]){--_nys-select-width: var(--nys-select-form-width-lg, 384px)}:host([width=full]){--_nys-select-width: 100%;flex:1}.nys-select__select:hover:not(:disabled){cursor:pointer;border-color:var(--_nys-select-border-color--hover);outline:solid var(--_nys-select-border-width) var(--_nys-select-border-color--hover)}.nys-select__select:focus{border-color:var(--_nys-select-border-color--focus);outline:solid var(--_nys-select-border-width) var(--_nys-select-border-color--focus)}.nys-select__select:disabled{background-color:var(--_nys-select-background-color--disabled);border-color:var(--_nys-select-border-color--disabled);cursor:not-allowed;color:var(--_nys-select-color--disabled)}.nys-select__select:disabled~.nys-select__icon{color:var(--_nys-select-color--disabled)}:host([showError]){--_nys-select-border-default: var(--nys-border-width-sm, 1px) solid var(--_nys-select-color--error)}';
 var w = Object.defineProperty, n = (y, e, t, d) => {
   for (var l = void 0, s = y.length - 1, r; s >= 0; s--)
     (r = y[s]) && (l = r(e, t, l) || l);
   return l && w(e, t, l), l;
 };
 let x = 0;
-const p = class p extends v {
+const p = class p extends f {
   // allows use of elementInternals' API
   constructor() {
     super(), this.id = "", this.name = "", this.label = "", this.description = "", this.value = "", this.disabled = !1, this.required = !1, this.optional = !1, this.tooltip = "", this.form = null, this.inverted = !1, this.showError = !1, this.errorMessage = "", this.width = "full", this._originalErrorMessage = "", this._hasUserInteracted = !1, this._internals = this.attachInternals();
@@ -71,10 +71,6 @@ const p = class p extends v {
       'slot:not([name="description"])'
     ) && this._handleSlotChange(), this._setValue();
   }
-  // This callback is automatically called when the parent form is reset.
-  formResetCallback() {
-    this.value = "";
-  }
   _handleSlotChange() {
     const e = this.shadowRoot?.querySelector(
       'slot:not([name="description"])'
@@ -110,7 +106,10 @@ const p = class p extends v {
     const l = Array.from(t.options).find((s) => s.selected);
     l && (this.value = l.value, this._internals.setFormValue(this.value));
   }
-  // Form Integration
+  /**
+   * Form Integration
+   * --------------------------------------------------------------------------
+   */
   _setValue() {
     this._internals.setFormValue(this.value), this._manageRequire();
   }
@@ -133,7 +132,14 @@ const p = class p extends v {
     let t = e.validationMessage;
     this._manageRequire(), this._setValidityMessage(t);
   }
-  // Functions
+  // This callback is automatically called when the parent form is reset.
+  formResetCallback() {
+    this.value = "";
+  }
+  /**
+   * Functions
+   * --------------------------------------------------------------------------
+   */
   // This helper function is called to perform the element's native validation.
   checkValidity() {
     const e = this.shadowRoot?.querySelector("select");
@@ -149,7 +155,10 @@ const p = class p extends v {
       ) === this && t.focus() : t.focus();
     }
   }
-  // Event Handlers
+  /**
+   * Event Handlers
+   * --------------------------------------------------------------------------
+   */
   // Handle change event to bubble up selected value
   _handleChange(e) {
     const t = e.target;
@@ -177,7 +186,7 @@ const p = class p extends v {
     }
   }
   render() {
-    return f`
+    return v`
       <div class="nys-select">
         <nys-label
           for=${this.id + "--native"}

package/dist/nys-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-select.js","sources":["../src/nys-option.ts","../src/nys-select.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\nexport class NysOption extends LitElement {\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) selected = false;\n  @property({ type: String }) value = \"\";\n  @property({ type: String }) label = \"\";\n  @property({ type: Boolean, reflect: true }) hidden = false;\n\n  firstUpdated() {\n    const slot = this.shadowRoot?.querySelector(\"slot\");\n    if (slot) {\n      slot.addEventListener(\"slotchange\", () => {\n        const assignedNodes = slot.assignedNodes({ flatten: true });\n        if (assignedNodes.length > 0) {\n          this.label = assignedNodes[0].textContent?.trim() || \"\";\n        }\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <option\n        ?disabled=${this.disabled}\n        ?selected=${this.selected}\n        value=${this.value}\n        label=${this.label}\n        ?hidden=${this.hidden}\n      >\n        <slot>${this.label}</slot>\n      </option>\n    `;\n  }\n}\n\ncustomElements.define(\"nys-option\", NysOption);\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { NysOption } from \"./nys-option\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-select.scss?inline\";\n\nlet selectIdCounter = 0; // Counter for generating unique IDs\n\nexport class NysSelect extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  @property({ type: String, reflect: true }) id = \"\";\n  @property({ type: String, reflect: true }) name = \"\";\n  @property({ type: String }) label = \"\";\n  @property({ type: String }) description = \"\";\n  @property({ type: String }) value = \"\";\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) required = false;\n  @property({ type: Boolean, reflect: true }) optional = false;\n  @property({ type: String }) tooltip = \"\";\n  @property({ type: String, reflect: true }) form: string | null = null;\n  @property({ type: Boolean, reflect: true }) inverted = false;\n  @property({ type: Boolean, reflect: true }) showError = false;\n  @property({ type: String }) errorMessage = \"\";\n  @property({ type: String, reflect: true }) width:\n    | \"sm\"\n    | \"md\"\n    | \"lg\"\n    | \"full\" = \"full\";\n\n  private _originalErrorMessage = \"\";\n\n  private _hasUserInteracted = false; // need this flag for \"eager mode\"\n  private _internals: ElementInternals;\n\n  // Lifecycle updates\n  static formAssociated = true; // allows use of elementInternals' API\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // Generate a unique ID if one is not provided\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.id) {\n      this.id = `nys-select-${Date.now()}-${selectIdCounter++}`;\n    }\n\n    this._originalErrorMessage = this.errorMessage ?? \"\";\n    this.addEventListener(\"invalid\", this._handleInvalid);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"invalid\", this._handleInvalid);\n  }\n\n  firstUpdated() {\n    //read in slotted options\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name=\"description\"])',\n    ) as HTMLSlotElement | null;\n\n    if (slot) {\n      this._handleSlotChange();\n    }\n\n    // This ensures our element always participates in the form\n    this._setValue();\n  }\n\n  // This callback is automatically called when the parent form is reset.\n  formResetCallback() {\n    this.value = \"\";\n  }\n\n  private _handleSlotChange() {\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name=\"description\"])',\n    ) as HTMLSlotElement | null;\n    const select = this.shadowRoot?.querySelector(\"select\");\n\n    if (!slot || !select) return;\n\n    // Clean up any previously cloned <option> or <optgroup> elements so we don't get duplicates\n    Array.from(select.children).forEach((child) => {\n      if (!(child as HTMLElement).hasAttribute(\"data-native\")) {\n        child.remove();\n      }\n    });\n\n    const assignedElements = slot.assignedElements({ flatten: true });\n\n    assignedElements.forEach((node) => {\n      // ---- Handle <nys-option> ----\n      if (node instanceof NysOption) {\n        const optionElement = document.createElement(\"option\");\n        optionElement.value = node.value;\n        optionElement.textContent =\n          node.label || node.textContent?.trim() || \"\";\n        optionElement.disabled = node.disabled;\n        optionElement.selected = node.selected;\n        select.appendChild(optionElement);\n        return;\n      }\n\n      // ---- Handle native <option> ----\n      if (node.tagName === \"OPTION\") {\n        const original = node as HTMLOptionElement;\n        const optionClone = original.cloneNode(true) as HTMLOptionElement;\n\n        optionClone.setAttribute(\"data-native\", \"true\");\n        optionClone.disabled = original.disabled;\n        optionClone.selected = original.selected;\n\n        select.appendChild(optionClone);\n        return;\n      }\n\n      // ---- Handle <optgroup> ----\n      if (node.tagName === \"OPTGROUP\") {\n        const groupClone = document.createElement(\"optgroup\");\n        groupClone.label = (node as HTMLOptGroupElement).label;\n        if ((node as HTMLOptGroupElement).disabled) {\n          groupClone.disabled = true;\n        }\n\n        // iterate children inside optgroup (could be nys-option or native option)\n        Array.from(node.children).forEach((child) => {\n          if (child instanceof NysOption) {\n            const option = document.createElement(\"option\");\n            option.value = child.value;\n            option.textContent = child.label || child.textContent?.trim() || \"\";\n            option.disabled = child.disabled;\n            option.selected = child.selected;\n            groupClone.appendChild(option);\n          } else if (child.tagName === \"OPTION\") {\n            const optionClone = child.cloneNode(true) as HTMLOptionElement;\n            groupClone.appendChild(optionClone);\n          }\n        });\n\n        select.appendChild(groupClone);\n        return;\n      }\n    });\n\n    // Sync initial selected state into component value\n    const selectedOption = Array.from(select.options).find((o) => o.selected);\n\n    if (selectedOption) {\n      this.value = selectedOption.value;\n      this._internals.setFormValue(this.value);\n    }\n  }\n\n  // Form Integration\n  private _setValue() {\n    // // set value to the option that is selected by default\n    // const select = this.shadowRoot?.querySelector(\"select\");\n    // if (!select) return;\n\n    // // for each option, see if it's selected\n    // Array.from(select.options).forEach((option) => {\n    //   if (option.selected) {\n    //     this.value = option.value;\n    //   }\n    // });\n\n    this._internals.setFormValue(this.value);\n    this._manageRequire(); // Check validation when value is set\n  }\n\n  private _manageRequire() {\n    const select = this.shadowRoot?.querySelector(\"select\");\n    if (!select) return;\n\n    const message = this.errorMessage || \"This field is required.\";\n    const isInvalid = this.required && !this.value;\n\n    if (isInvalid) {\n      this._internals.ariaRequired = \"true\"; // Screen readers should announce error\n      this._internals.setValidity({ valueMissing: true }, message, select);\n    } else {\n      this._internals.ariaRequired = \"false\"; // Reset when valid\n      this._internals.setValidity({});\n      this._hasUserInteracted = false; // Reset the interaction flag, make lazy again\n    }\n  }\n\n  private _setValidityMessage(message: string = \"\") {\n    const select = this.shadowRoot?.querySelector(\"select\");\n    if (!select) return;\n\n    // Toggle the HTML <div> tag error message\n    this.showError = !!message;\n\n    // If user sets errorMessage, this will always override the native validation message\n    if (this._originalErrorMessage?.trim() && message !== \"\") {\n      this.errorMessage = this._originalErrorMessage;\n    } else {\n      this.errorMessage = message;\n    }\n\n    const validityState = message ? { customError: true } : {};\n    this._internals.setValidity(validityState, this.errorMessage, select);\n  }\n\n  private _validate() {\n    const select = this.shadowRoot?.querySelector(\"select\");\n    if (!select) return;\n\n    // Get the native validation state\n    let message = select.validationMessage;\n    this._manageRequire(); // Makes sure the required state is checked\n\n    this._setValidityMessage(message);\n  }\n\n  // Functions\n  // This helper function is called to perform the element's native validation.\n  checkValidity(): boolean {\n    const select = this.shadowRoot?.querySelector(\"select\");\n    return select ? select.checkValidity() : true;\n  }\n\n  private _handleInvalid(event: Event) {\n    event.preventDefault();\n    this._hasUserInteracted = true; // Start aggressive mode due to form submission\n    this._validate();\n    this.showError = true;\n\n    const select = this.shadowRoot?.querySelector(\"select\");\n    if (select) {\n      // Focus only if this is the first invalid element (top-down approach)\n      const form = this._internals.form;\n      if (form) {\n        const elements = Array.from(form.elements) as Array<\n          HTMLElement & { checkValidity?: () => boolean }\n        >;\n        // Find the first element in the form that is invalid\n        const firstInvalidElement = elements.find(\n          (element) =>\n            typeof element.checkValidity === \"function\" &&\n            !element.checkValidity(),\n        );\n        if (firstInvalidElement === this) {\n          select.focus();\n        }\n      } else {\n        // If not part of a form, simply focus.\n        select.focus();\n      }\n    }\n  }\n\n  // Event Handlers\n  // Handle change event to bubble up selected value\n  private _handleChange(e: Event) {\n    const select = e.target as HTMLSelectElement;\n    this.value = select.value;\n    this._internals.setFormValue(this.value);\n\n    // Clear error immediately if value is now valid\n    if (this.required && this.value) {\n      this.showError = false;\n      this.errorMessage = \"\";\n      this._internals.setValidity({});\n    }\n\n    // Validate aggressively if the user has already interacted\n    if (this._hasUserInteracted) {\n      this._validate();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"nys-change\", {\n        detail: { id: this.id, value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  // Handle focus event\n  private _handleFocus() {\n    this.dispatchEvent(new Event(\"nys-focus\"));\n  }\n\n  // Handle blur event\n  private _handleBlur() {\n    if (!this._hasUserInteracted) {\n      this._hasUserInteracted = true;\n    }\n    this._validate();\n    this.dispatchEvent(new Event(\"nys-blur\"));\n  }\n\n  // Check if the current value matches any option, and if so, set it as selected\n  updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    // This ensures the value is set correctly after the component renders\n    if (changedProperties.has(\"value\")) {\n      const selectElement = this.shadowRoot?.querySelector(\"select\");\n      if (selectElement) {\n        selectElement.value = this.value;\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-select\">\n        <nys-label\n          for=${this.id + \"--native\"}\n          label=${this.label}\n          description=${this.description}\n          flag=${this.required ? \"required\" : this.optional ? \"optional\" : \"\"}\n          tooltip=${this.tooltip}\n          ?inverted=${this.inverted}\n        >\n          <slot name=\"description\" slot=\"description\">${this.description}</slot>\n        </nys-label>\n        <div class=\"nys-select__selectwrapper\">\n          <select\n            class=\"nys-select__select\"\n            name=${this.name}\n            id=${this.id + \"--native\"}\n            form=${ifDefined(this.form || undefined)}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-disabled=\"${this.disabled}\"\n            aria-label=\"${[this.label, this.description]\n              .filter(Boolean)\n              .join(\" \")}\"\n            .value=${this.value}\n            @focus=\"${this._handleFocus}\"\n            @blur=\"${this._handleBlur}\"\n            @change=\"${this._handleChange}\"\n          >\n            <option data-native hidden disabled value=\"\"></option>\n          </select>\n          <slot style=\"display: none;\"></slot>\n          <nys-icon\n            name=\"expand_all\"\n            size=\"2xl\"\n            class=\"nys-select__icon\"\n          ></nys-icon>\n        </div>\n        <nys-errormessage\n          ?showError=${this.showError}\n          errorMessage=${this.errorMessage}\n        ></nys-errormessage>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-select\")) {\n  customElements.define(\"nys-select\", NysSelect);\n}\n"],"names":["NysOption","LitElement","slot","assignedNodes","html","__decorateClass","property","selectIdCounter","_NysSelect","select","child","node","optionElement","original","optionClone","groupClone","option","selectedOption","o","message","validityState","event","form","element","changedProperties","selectElement","ifDefined","unsafeCSS","styles","NysSelect"],"mappings":"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"}
+{"version":3,"file":"nys-select.js","sources":["../src/nys-option.ts","../src/nys-select.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\nexport class NysOption extends LitElement {\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) selected = false;\n  @property({ type: String }) value = \"\";\n  @property({ type: String }) label = \"\";\n  @property({ type: Boolean, reflect: true }) hidden = false;\n\n  firstUpdated() {\n    const slot = this.shadowRoot?.querySelector(\"slot\");\n    if (slot) {\n      slot.addEventListener(\"slotchange\", () => {\n        const assignedNodes = slot.assignedNodes({ flatten: true });\n        if (assignedNodes.length > 0) {\n          this.label = assignedNodes[0].textContent?.trim() || \"\";\n        }\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <option\n        ?disabled=${this.disabled}\n        ?selected=${this.selected}\n        value=${this.value}\n        label=${this.label}\n        ?hidden=${this.hidden}\n      >\n        <slot>${this.label}</slot>\n      </option>\n    `;\n  }\n}\n\ncustomElements.define(\"nys-option\", NysOption);\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { NysOption } from \"./nys-option\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-select.scss?inline\";\n\nlet selectIdCounter = 0;\n\n/**\n * `<nys-select>` is a custom select/dropdown component.\n *\n * Features:\n * - Supports slotted `<nys-option>` elements, native `<option>` and `<optgroup>`\n * - Integrates with forms via ElementInternals\n * - Handles validation, error messages, and required/optional states\n * - Inverted style and width variants supported\n *\n * @slot description - Optional description text announced to screen readers\n * @slot default - Options (<nys-option>, <option>, <optgroup>) to populate the dropdown\n *\n * @fires nys-change - Fired when the selected value changes\n *   detail: { id: string, value: string }\n * @fires nys-focus - Fired when the select gains focus\n * @fires nys-blur - Fired when the select loses focus\n */\n\nexport class NysSelect extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  @property({ type: String, reflect: true }) id = \"\";\n  @property({ type: String, reflect: true }) name = \"\";\n  @property({ type: String }) label = \"\";\n  @property({ type: String }) description = \"\";\n  @property({ type: String }) value = \"\";\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) required = false;\n  @property({ type: Boolean, reflect: true }) optional = false;\n  @property({ type: String }) tooltip = \"\";\n  @property({ type: String, reflect: true }) form: string | null = null;\n  @property({ type: Boolean, reflect: true }) inverted = false;\n  @property({ type: Boolean, reflect: true }) showError = false;\n  @property({ type: String }) errorMessage = \"\";\n  @property({ type: String, reflect: true }) width:\n    | \"sm\"\n    | \"md\"\n    | \"lg\"\n    | \"full\" = \"full\";\n\n  private _originalErrorMessage = \"\";\n\n  private _hasUserInteracted = false; // need this flag for \"eager mode\"\n  private _internals: ElementInternals;\n\n  /**\n   * Lifecycle methods\n   * --------------------------------------------------------------------------\n   */\n\n  static formAssociated = true; // allows use of elementInternals' API\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // Generate a unique ID if one is not provided\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.id) {\n      this.id = `nys-select-${Date.now()}-${selectIdCounter++}`;\n    }\n\n    this._originalErrorMessage = this.errorMessage ?? \"\";\n    this.addEventListener(\"invalid\", this._handleInvalid);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"invalid\", this._handleInvalid);\n  }\n\n  firstUpdated() {\n    //read in slotted options\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name=\"description\"])',\n    ) as HTMLSlotElement | null;\n\n    if (slot) {\n      this._handleSlotChange();\n    }\n\n    // This ensures our element always participates in the form\n    this._setValue();\n  }\n\n  private _handleSlotChange() {\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name=\"description\"])',\n    ) as HTMLSlotElement | null;\n    const select = this.shadowRoot?.querySelector(\"select\");\n\n    if (!slot || !select) return;\n\n    // Clean up any previously cloned <option> or <optgroup> elements so we don't get duplicates\n    Array.from(select.children).forEach((child) => {\n      if (!(child as HTMLElement).hasAttribute(\"data-native\")) {\n        child.remove();\n      }\n    });\n\n    const assignedElements = slot.assignedElements({ flatten: true });\n\n    assignedElements.forEach((node) => {\n      // ---- Handle <nys-option> ----\n      if (node instanceof NysOption) {\n        const optionElement = document.createElement(\"option\");\n        optionElement.value = node.value;\n        optionElement.textContent =\n          node.label || node.textContent?.trim() || \"\";\n        optionElement.disabled = node.disabled;\n        optionElement.selected = node.selected;\n        select.appendChild(optionElement);\n        return;\n      }\n\n      // ---- Handle native <option> ----\n      if (node.tagName === \"OPTION\") {\n        const original = node as HTMLOptionElement;\n        const optionClone = original.cloneNode(true) as HTMLOptionElement;\n\n        optionClone.setAttribute(\"data-native\", \"true\");\n        optionClone.disabled = original.disabled;\n        optionClone.selected = original.selected;\n\n        select.appendChild(optionClone);\n        return;\n      }\n\n      // ---- Handle <optgroup> ----\n      if (node.tagName === \"OPTGROUP\") {\n        const groupClone = document.createElement(\"optgroup\");\n        groupClone.label = (node as HTMLOptGroupElement).label;\n        if ((node as HTMLOptGroupElement).disabled) {\n          groupClone.disabled = true;\n        }\n\n        // iterate children inside optgroup (could be nys-option or native option)\n        Array.from(node.children).forEach((child) => {\n          if (child instanceof NysOption) {\n            const option = document.createElement(\"option\");\n            option.value = child.value;\n            option.textContent = child.label || child.textContent?.trim() || \"\";\n            option.disabled = child.disabled;\n            option.selected = child.selected;\n            groupClone.appendChild(option);\n          } else if (child.tagName === \"OPTION\") {\n            const optionClone = child.cloneNode(true) as HTMLOptionElement;\n            groupClone.appendChild(optionClone);\n          }\n        });\n\n        select.appendChild(groupClone);\n        return;\n      }\n    });\n\n    // Sync initial selected state into component value\n    const selectedOption = Array.from(select.options).find((o) => o.selected);\n\n    if (selectedOption) {\n      this.value = selectedOption.value;\n      this._internals.setFormValue(this.value);\n    }\n  }\n\n  /**\n   * Form Integration\n   * --------------------------------------------------------------------------\n   */\n\n  private _setValue() {\n    // // set value to the option that is selected by default\n    // const select = this.shadowRoot?.querySelector(\"select\");\n    // if (!select) return;\n\n    // // for each option, see if it's selected\n    // Array.from(select.options).forEach((option) => {\n    //   if (option.selected) {\n    //     this.value = option.value;\n    //   }\n    // });\n\n    this._internals.setFormValue(this.value);\n    this._manageRequire(); // Check validation when value is set\n  }\n\n  private _manageRequire() {\n    const select = this.shadowRoot?.querySelector(\"select\");\n    if (!select) return;\n\n    const message = this.errorMessage || \"This field is required.\";\n    const isInvalid = this.required && !this.value;\n\n    if (isInvalid) {\n      this._internals.ariaRequired = \"true\"; // Screen readers should announce error\n      this._internals.setValidity({ valueMissing: true }, message, select);\n    } else {\n      this._internals.ariaRequired = \"false\"; // Reset when valid\n      this._internals.setValidity({});\n      this._hasUserInteracted = false; // Reset the interaction flag, make lazy again\n    }\n  }\n\n  private _setValidityMessage(message: string = \"\") {\n    const select = this.shadowRoot?.querySelector(\"select\");\n    if (!select) return;\n\n    // Toggle the HTML <div> tag error message\n    this.showError = !!message;\n\n    // If user sets errorMessage, this will always override the native validation message\n    if (this._originalErrorMessage?.trim() && message !== \"\") {\n      this.errorMessage = this._originalErrorMessage;\n    } else {\n      this.errorMessage = message;\n    }\n\n    const validityState = message ? { customError: true } : {};\n    this._internals.setValidity(validityState, this.errorMessage, select);\n  }\n\n  private _validate() {\n    const select = this.shadowRoot?.querySelector(\"select\");\n    if (!select) return;\n\n    // Get the native validation state\n    let message = select.validationMessage;\n    this._manageRequire(); // Makes sure the required state is checked\n\n    this._setValidityMessage(message);\n  }\n\n  // This callback is automatically called when the parent form is reset.\n  formResetCallback() {\n    this.value = \"\";\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n  // This helper function is called to perform the element's native validation.\n  checkValidity(): boolean {\n    const select = this.shadowRoot?.querySelector(\"select\");\n    return select ? select.checkValidity() : true;\n  }\n\n  private _handleInvalid(event: Event) {\n    event.preventDefault();\n    this._hasUserInteracted = true; // Start aggressive mode due to form submission\n    this._validate();\n    this.showError = true;\n\n    const select = this.shadowRoot?.querySelector(\"select\");\n    if (select) {\n      // Focus only if this is the first invalid element (top-down approach)\n      const form = this._internals.form;\n      if (form) {\n        const elements = Array.from(form.elements) as Array<\n          HTMLElement & { checkValidity?: () => boolean }\n        >;\n        // Find the first element in the form that is invalid\n        const firstInvalidElement = elements.find(\n          (element) =>\n            typeof element.checkValidity === \"function\" &&\n            !element.checkValidity(),\n        );\n        if (firstInvalidElement === this) {\n          select.focus();\n        }\n      } else {\n        // If not part of a form, simply focus.\n        select.focus();\n      }\n    }\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n\n  // Handle change event to bubble up selected value\n  private _handleChange(e: Event) {\n    const select = e.target as HTMLSelectElement;\n    this.value = select.value;\n    this._internals.setFormValue(this.value);\n\n    // Clear error immediately if value is now valid\n    if (this.required && this.value) {\n      this.showError = false;\n      this.errorMessage = \"\";\n      this._internals.setValidity({});\n    }\n\n    // Validate aggressively if the user has already interacted\n    if (this._hasUserInteracted) {\n      this._validate();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"nys-change\", {\n        detail: { id: this.id, value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  // Handle focus event\n  private _handleFocus() {\n    this.dispatchEvent(new Event(\"nys-focus\"));\n  }\n\n  // Handle blur event\n  private _handleBlur() {\n    if (!this._hasUserInteracted) {\n      this._hasUserInteracted = true;\n    }\n    this._validate();\n    this.dispatchEvent(new Event(\"nys-blur\"));\n  }\n\n  // Check if the current value matches any option, and if so, set it as selected\n  updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    // This ensures the value is set correctly after the component renders\n    if (changedProperties.has(\"value\")) {\n      const selectElement = this.shadowRoot?.querySelector(\"select\");\n      if (selectElement) {\n        selectElement.value = this.value;\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-select\">\n        <nys-label\n          for=${this.id + \"--native\"}\n          label=${this.label}\n          description=${this.description}\n          flag=${this.required ? \"required\" : this.optional ? \"optional\" : \"\"}\n          tooltip=${this.tooltip}\n          ?inverted=${this.inverted}\n        >\n          <slot name=\"description\" slot=\"description\">${this.description}</slot>\n        </nys-label>\n        <div class=\"nys-select__selectwrapper\">\n          <select\n            class=\"nys-select__select\"\n            name=${this.name}\n            id=${this.id + \"--native\"}\n            form=${ifDefined(this.form || undefined)}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-disabled=\"${this.disabled}\"\n            aria-label=\"${[this.label, this.description]\n              .filter(Boolean)\n              .join(\" \")}\"\n            .value=${this.value}\n            @focus=\"${this._handleFocus}\"\n            @blur=\"${this._handleBlur}\"\n            @change=\"${this._handleChange}\"\n          >\n            <option data-native hidden disabled value=\"\"></option>\n          </select>\n          <slot style=\"display: none;\"></slot>\n          <nys-icon\n            name=\"expand_all\"\n            size=\"2xl\"\n            class=\"nys-select__icon\"\n          ></nys-icon>\n        </div>\n        <nys-errormessage\n          ?showError=${this.showError}\n          errorMessage=${this.errorMessage}\n        ></nys-errormessage>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-select\")) {\n  customElements.define(\"nys-select\", NysSelect);\n}\n"],"names":["NysOption","LitElement","slot","assignedNodes","html","__decorateClass","property","selectIdCounter","_NysSelect","select","child","node","optionElement","original","optionClone","groupClone","option","selectedOption","o","message","validityState","event","form","element","changedProperties","selectElement","ifDefined","unsafeCSS","styles","NysSelect"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-select",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "The Select component from the NYS Design System.",
   "module": "dist/nys-select.js",
   "exports": {
@@ -22,9 +22,9 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-icon": "^1.12.0",
-    "@nysds/nys-label": "^1.12.0",
-    "@nysds/nys-errormessage": "^1.12.0"
+    "@nysds/nys-icon": "^1.13.0",
+    "@nysds/nys-label": "^1.13.0",
+    "@nysds/nys-errormessage": "^1.13.0"
   },
   "devDependencies": {
     "lit": "^3.3.1",