@nysds/nys-combobox 1.21.0 → 1.22.0

package/dist/nys-combobox.d.ts

@@ -3,6 +3,25 @@ import "@nysds/nys-label";
 import "@nysds/nys-errormessage";
 import "@nysds/nys-icon";
 import "@nysds/nys-button";
+/** Detail payload for the `nys-input` event. */
+export interface NysComboboxInputDetail {
+    id: string;
+    name: string;
+    /** The committed value (the selected option's value), not the filter text. */
+    value: string;
+    /** The raw filter text the user has typed. */
+    query: string;
+}
+/** The `nys-input` event, fired on each keystroke while filtering. */
+export type NysComboboxInputEvent = CustomEvent<NysComboboxInputDetail>;
+/** Detail payload for the `nys-change` event. */
+export interface NysComboboxChangeDetail {
+    id: string;
+    name: string;
+    value: string;
+}
+/** The `nys-change` event, fired when a selection is committed. */
+export type NysComboboxChangeEvent = CustomEvent<NysComboboxChangeDetail>;
 /**
  * `<nys-combobox>` is a form-enabled combo box combining text input with a filterable dropdown.
  *
@@ -19,11 +38,21 @@ import "@nysds/nys-button";
  * @slot description - Optional custom description content below the label.
  * @slot default - Options (<option>, <optgroup>) to populate the dropdown
  *
- * @fires nys-change - Fired when selection changes. Detail: `{ id, value }`.
- * @fires nys-input - Fired on input change. Detail: `{ id, value }`.
- * @fires nys-focus - Fired when combobox receives focus.
- * @fires nys-blur - Fired when combobox loses focus.
+ * @formControl value nys-change nys-input
+ *
+ * @fires {NysComboboxChangeEvent} nys-change - Fired when a selection is committed (option chosen or cleared). Detail: `{id, name, value}`.
+ * @fires {NysComboboxInputEvent} nys-input - Fired on each keystroke while filtering. Detail: `{id, name, value, query}`. `value` is the committed value; `query` is the current filter text.
+ * @fires {Event} nys-focus - Fired when the combobox gains focus.
+ * @fires {Event} nys-blur - Fired when the combobox loses focus. Triggers validation.
+ *
+ * @usagedos
+ * - Use when there are more than 15 options to choose from.
+ * - Use when screen real estate is limited.
+ * - Use when users can predict or recognize the value they're looking for.
  *
+ * @usagedonts
+ * - Use when the number of options is small. Use `<nys-select>` or `<nys-radiobutton>` instead.
+ * - Use when options are unfamiliar to users and browsing the full list is necessary.
  *
  * @example Basic
  * ```html
@@ -153,7 +182,7 @@ import "@nysds/nys-button";
  *   <option value="orange">Orange</option>
  *   <option value="strawberry">Strawberry</option>
  * </nys-combobox>
- * ```d
+ * ```
  *
  * @example Description Slot
  * ```html
@@ -198,19 +227,36 @@ export declare class NysCombobox extends NysFormControlElement {
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
+    /** Unique identifier. Auto-generated if not provided. */
     id: string;
+    /** Name for form submission. */
     name: string;
+    /** Visible label text. Required for accessibility. */
     label: string;
+    /** Helper text below label. Use slot for custom HTML. */
     description: string;
+    /** Current committed value: the selected option's value, not the typed filter text. */
     value: string;
+    /** Prevents interaction. */
     disabled: boolean;
+    /** Marks as required. Shows "Required" flag and validates on blur. */
     required: boolean;
+    /** Shows "Optional" flag. Use when most fields are required. */
     optional: boolean;
+    /** Tooltip text shown on hover/focus of info icon. */
     tooltip: string;
+    /** Form `id` to associate with when the combobox is outside the form element. */
     form: string | null;
+    /**
+     * Input width: `md` (200px), `lg` (384px), `full` (100%, default).
+     * @default "full"
+     */
     width: "md" | "lg" | "full";
+    /** Adjusts colors for dark backgrounds. */
     inverted: boolean;
+    /** Shows error message when true. Set by validation or manually. */
     showError: boolean;
+    /** Error message text. Shown only when `showError` is true. Never overwritten by internal validation. */
     errorMessage: string;
     private _isOpen;
     private _filterText;
@@ -221,7 +267,6 @@ export declare class NysCombobox extends NysFormControlElement {
     private _announcement;
     private _input;
     private _listbox?;
-    private _originalErrorMessage;
     private _hasUserInteracted;
     private _selectedLabel;
     private _defaultValue;

package/dist/nys-combobox.js

@@ -1,5 +1,5 @@
-import { LitElement as v, unsafeCSS as g, html as u } from "lit";
-import { property as a, state as p, query as m } from "lit/decorators.js";
+import { LitElement as x, unsafeCSS as k, html as p } from "lit";
+import { property as d, state as u, query as g } from "lit/decorators.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
 import "@nysds/nys-label";
 import "@nysds/nys-errormessage";
@@ -10,46 +10,57 @@ import "@nysds/nys-button";
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Combobox Component v1.21.0
+   * Combobox Component v1.22.0
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
 */
 /*!
-  * New York State Design System v1.21.0
+  * New York State Design System v1.22.0
   * Description: A design system for New York State's digital products.
   * Repository: https://github.com/its-hcd/nysds
   * License: MIT
 */
-var w = 0;
-function k(d) {
-  return `${d}-${Date.now()}-${w++}`;
+let $ = 0;
+function O(l) {
+  return `${l}-${Date.now()}-${$++}`;
 }
-var $ = (d) => {
-  class o extends d {
+function v(l, o, s) {
+  l.dispatchEvent(
+    new CustomEvent(o, { detail: s, bubbles: !0, composed: !0 })
+  );
+}
+function m(l, o) {
+  l.dispatchEvent(
+    new Event(`nys-${o}`, { bubbles: !0, composed: !0 })
+  );
+}
+const V = (l) => {
+  class o extends l {
     get idPrefix() {
       return this.localName || "nys-element";
     }
     ensureId() {
-      this.id || (this.id = k(this.idPrefix));
+      this.id || (this.id = O(this.idPrefix));
     }
     connectedCallback() {
       super.connectedCallback(), this.ensureId();
     }
   }
   return o;
-}, O = (d) => {
-  class o extends $(d) {
-    constructor(...e) {
-      super(...e), this.__internals = null;
+}, I = (l) => {
+  class o extends V(l) {
+    constructor() {
+      super(...arguments), this.__internals = null;
     }
     get internals() {
       if (this.__internals) return this.__internals;
-      if (typeof this.attachInternals == "function") try {
-        this.__internals = this.attachInternals();
-      } catch {
-        this.__internals = null;
-      }
+      if (typeof this.attachInternals == "function")
+        try {
+          this.__internals = this.attachInternals();
+        } catch {
+          this.__internals = null;
+        }
       return this.__internals;
     }
     get defaultRole() {
@@ -61,8 +72,8 @@ var $ = (d) => {
         i[e] = t;
         return;
       }
-      const r = I(e);
-      t === null ? this.removeAttribute(r) : this.setAttribute(r, t);
+      const n = C(e);
+      t === null ? this.removeAttribute(n) : this.setAttribute(n, t);
     }
     reflectDefaultSemantics() {
       const e = this.defaultRole;
@@ -74,21 +85,33 @@ var $ = (d) => {
   }
   return o;
 };
-function I(d) {
-  if (d === "role") return "role";
-  const o = d.replace(/^aria/, "");
+function C(l) {
+  if (l === "role") return "role";
+  const o = l.replace(/^aria/, "");
   return "aria-" + o.charAt(0).toLowerCase() + o.slice(1);
 }
-var V = (d) => {
-  const s = class s extends O(d) {
+const E = (l) => {
+  const o = class extends I(l) {
+    constructor() {
+      super(...arguments), this.__internalValidationMessage = "";
+    }
+    get internalValidationMessage() {
+      return this.__internalValidationMessage;
+    }
+    set internalValidationMessage(t) {
+      t !== this.__internalValidationMessage && (this.__internalValidationMessage = t, this.requestUpdate("internalValidationMessage"));
+    }
+    resolvedErrorMessage() {
+      return this.errorMessage || this.internalValidationMessage;
+    }
     setFormValue(t) {
       this.internals?.setFormValue(t ?? null);
     }
-    setValidityFromState(t, i, r) {
+    setValidityFromState(t, i, n) {
       const c = this.internals;
       if (!c) return;
       const h = Object.values(t).some(Boolean);
-      h ? c.setValidity(t, i ?? "Invalid value", r) : c.setValidity({}), this.setHostAria("ariaInvalid", h ? "true" : "false");
+      h ? c.setValidity(t, i ?? "Invalid value", n) : c.setValidity({}), this.setHostAria("ariaInvalid", h ? "true" : "false");
     }
     clearValidity() {
       this.internals?.setValidity({}), this.setHostAria("ariaInvalid", "false");
@@ -100,22 +123,19 @@ var V = (d) => {
       return this.internals?.reportValidity() ?? !0;
     }
     formResetCallback() {
-      this.clearValidity();
+      this.internalValidationMessage = "", this.clearValidity();
     }
   };
-  s.formAssociated = !0;
-  let o = s;
-  return o;
-}, E = /* @__PURE__ */ V(v);
-const C = ':host{--_nys-combobox-width: 100%;--_nys-combobox-height: var(--nys-size-500, 40px);--_nys-combobox-border-radius: var(--nys-radius-md, 4px);--_nys-combobox-border-width: var(--nys-border-width-sm, 1px);--_nys-combobox-border-color: var(--nys-color-neutral-400, #909395);--_nys-combobox-color: var( --nys-color-text, var(--nys-color-neutral-900, #1b1b1b) );--_nys-combobox-padding: var(--nys-space-100, 8px) var(--nys-space-150, 12px);--_nys-combobox-gap: var(--nys-space-50, 4px);--_nys-combobox-background-color: var( --nys-color-ink-reverse, var(--nys-color-white, #ffffff) );--_nys-combobox-outline-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-combobox-outline-width: var(--nys-border-width-sm, 1px);--_nys-combobox-outline-color--focus: var(--nys-color-focus, #004dd1);--_nys-combobox-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-combobox-border-color--disabled: var(--nys-color-neutral-200, #bec0c1);--_nys-combobox-color--disabled: var( --nys-color-text-disabled, var(--nys-color-neutral-200, #bec0c1) );--_nys-combobox-background-color--dropdown: var( --nys-color-ink-reverse, var(--nys-color-white, #ffffff) );--_nys-combobox-border-color--dropdown: var(--nys-color-neutral-400, #909395);--_nys-combobox-shadow--dropdown: var( --nys-shadow-lg, 0 4px 8px rgba(0, 0, 0, .1) );--_nys-combobox-max-height--dropdown: var(--nys-size-3000, 300px);--_nys-combobox-padding--option: var(--nys-space-100, 8px) var(--nys-space-150, 12px);--_nys-combobox-background-color--option--hover: var( --nys-color-neutral-10, #f6f6f6 );--_nys-combobox-background-color--option--active: var( --nys-color-neutral-50, #ededed );--_nys-combobox-background-color--option--disabled: var( --nys-color-white, #ffffff );--_nys-combobox-color--option--disabled: var( --nys-color-text-disabled, #bec0c1 );--_nys-combobox-background-color--option--selected: var( --nys-theme-weaker, #eff6fb );--_nys-combobox-border-color--option--selected: var( --nys-color-theme-mid, #457aa5 );--_nys-combobox-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-combobox-font-size: var(--nys-font-size-ui-md, 16px);--_nys-combobox-font-weight: var(--nys-font-weight-regular, 400);--_nys-combobox-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-combobox-letter-spacing: var( --nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px) )}:host([width=sm]){--_nys-combobox-width: var(--nys-form-width-sm, 88px)}:host([width=md]){--_nys-combobox-width: var(--nys-form-width-md, 200px)}:host([width=lg]){--_nys-combobox-width: var(--nys-form-width-lg, 384px)}:host([width=full]){--_nys-combobox-width: 100%;flex:1}:host([showError]){--_nys-combobox-border-color: var(--nys-color-danger, #b52c2c)}:host([inverted]){--_nys-combobox-outline-color--focus: var(--nys-color-focus-reverse, #7aa5e7)}.nys-combobox{font-weight:var(--_nys-combobox-font-weight);font-family:var(--_nys-combobox-font-family);font-size:var(--_nys-combobox-font-size);line-height:var(--_nys-combobox-line-height);letter-spacing:var(--_nys-combobox-letter-spacing);color:var(--_nys-combobox-color);gap:var(--_nys-combobox-gap);display:flex;flex-direction:column;position:relative}.nys-combobox__container{width:var(--_nys-combobox-width);max-width:100%;position:relative}.nys-combobox__input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--_nys-combobox-background-color);border-radius:var(--_nys-combobox-border-radius)}.nys-combobox__input{color:var(--_nys-combobox-color);border-radius:var(--_nys-combobox-border-radius);border:solid var(--_nys-combobox-border-color) var(--_nys-combobox-border-width);outline-color:transparent;outline-width:var(--_nys-combobox-outline-width);outline-style:solid;padding:var(--_nys-combobox-padding);padding-right:calc(var(--nys-size-400, 32px) + var(--nys-space-100, 8px));width:100%;height:var(--_nys-combobox-height);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background-color:transparent;font:inherit;cursor:text}.nys-combobox__input:not(:placeholder-shown){padding-right:calc(var(--nys-size-400, 32px) * 2 + var(--nys-space-100, 8px))}.nys-combobox__input:hover:not(:disabled):not(:focus):not([readonly]){outline-color:var(--_nys-combobox-outline-color--hover);border-color:var(--_nys-combobox-outline-color--hover)}.nys-combobox__input:focus:not([readonly]){outline-color:var(--_nys-combobox-outline-color--focus);border-color:var(--_nys-combobox-outline-color--focus);caret-color:var(--_nys-combobox-outline-color--focus)}.nys-combobox__input:disabled{background-color:var(--_nys-combobox-background-color--disabled);border-color:var(--_nys-combobox-border-color--disabled);color:var(--_nys-combobox-color--disabled);cursor:not-allowed}.nys-combobox__buttons{display:flex;position:absolute;right:var(--nys-space-150, 12px);gap:var(--nys-space-150, 12px)}.nys-combobox__buttons nys-button{--_nys-button-padding--y: var(--nys-space-50, 4px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-height: var(--nys-size-300, 32px);--_nys-button-width: var(--nys-size-400, 32px)}.nys-combobox__buttons .nys-combobox__chevron{border-inline-start:solid var(--nys-color-neutral-200, #bec0c1) var(--nys-border-width-sm, 1px);padding-inline-start:var(--nys-space-150, 12px)}.nys-combobox__listbox{position:absolute;left:0;right:0;top:calc(100% + var(--nys-space-50, 4px));background-color:var(--_nys-combobox-background-color--dropdown);border:solid var(--_nys-combobox-border-color--dropdown) var(--_nys-combobox-border-width);border-radius:var(--_nys-combobox-border-radius);box-shadow:var(--_nys-combobox-shadow--dropdown);max-height:var(--_nys-combobox-max-height--dropdown);overflow-y:auto;z-index:1000;box-sizing:border-box}.nys-combobox__listbox--above{top:auto;bottom:calc(100% + var(--nys-space-50, 4px))}.nys-combobox__option{padding:var(--_nys-combobox-padding--option);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease;border-bottom:var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-50, #ededed);background-color:var(--_nys-combobox-background-color)}.nys-combobox__option:hover:not([disabled]):not(.nys-combobox__option--selected){background-color:var(--_nys-combobox-background-color--option--hover)}.nys-combobox__option:active:not([disabled]):not(.nys-combobox__option--selected){background-color:var(--_nys-combobox-background-color--option--active)}.nys-combobox__option--selected:not([disabled]){background-color:var(--_nys-combobox-background-color--option--selected);border:var(--_nys-combobox-border-color--option--selected) solid 1px}.nys-combobox__option--focused:not([disabled]):not(:hover){outline:var(--_nys-combobox-outline-color--focus) solid 2px;outline-offset:-2px}.nys-combobox__option[disabled]{background-color:var(--_nys-combobox-background-color--option--disabled);color:var(--_nys-combobox-color--option--disabled);cursor:not-allowed}.nys-combobox__optgroup{padding:var(--nys-space-100, 8px) var(--nys-space-150, 12px);border-bottom:var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-50, #ededed);-webkit-user-select:none;user-select:none;color:var(--nys-color-text);font-family:var(--nys-font-family-ui, "Proxima Nova");font-size:var(--nys-font-size-ui-md, 16px);font-style:normal;font-weight:700;line-height:var(--nys-font-lineheight-ui-md, 24px);letter-spacing:var(--nys-font-letterspacing-ui-md, .044px)}.nys-combobox__optgroup~.nys-combobox__option{padding-left:var(--nys-space-300, 24px)}.nys-combobox__no-results{background-color:var(--_nys-combobox-background-color);padding:var(--_nys-combobox-padding--option);color:var(--_nys-combobox-color);cursor:not-allowed}.nys-combobox__listbox::-webkit-scrollbar{width:var(--nys-space-100, 8px)}.nys-combobox__listbox::-webkit-scrollbar-track{background:var(--nys-color-neutral-50, #eeeeee);border-radius:var(--_nys-combobox-border-radius)}.nys-combobox__listbox::-webkit-scrollbar-thumb{background:var(--nys-color-neutral-300, #a7a9ab);border-radius:var(--_nys-combobox-border-radius)}.nys-combobox__listbox::-webkit-scrollbar-thumb:hover{background:var(--nys-color-neutral-400, #909395)}';
-var D = Object.defineProperty, l = (d, o, s, e) => {
-  for (var t = void 0, i = d.length - 1, r; i >= 0; i--)
-    (r = d[i]) && (t = r(o, s, t) || t);
-  return t && D(o, s, t), t;
+  return o.formAssociated = !0, o;
+}, D = /* @__PURE__ */ E(x), M = ':host{--_nys-combobox-width: 100%;--_nys-combobox-height: var(--nys-size-500, 40px);--_nys-combobox-border-radius: var(--nys-radius-md, 4px);--_nys-combobox-border-width: var(--nys-border-width-sm, 1px);--_nys-combobox-border-color: var(--nys-color-neutral-400, #909395);--_nys-combobox-color: var( --nys-color-text, var(--nys-color-neutral-900, #1b1b1b) );--_nys-combobox-padding: var(--nys-space-100, 8px) var(--nys-space-150, 12px);--_nys-combobox-gap: var(--nys-space-50, 4px);--_nys-combobox-background-color: var( --nys-color-ink-reverse, var(--nys-color-white, #ffffff) );--_nys-combobox-outline-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-combobox-outline-width: var(--nys-border-width-sm, 1px);--_nys-combobox-outline-color--focus: var(--nys-color-focus, #004dd1);--_nys-combobox-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-combobox-border-color--disabled: var(--nys-color-neutral-200, #bec0c1);--_nys-combobox-color--disabled: var( --nys-color-text-disabled, var(--nys-color-neutral-200, #bec0c1) );--_nys-combobox-background-color--dropdown: var( --nys-color-ink-reverse, var(--nys-color-white, #ffffff) );--_nys-combobox-border-color--dropdown: var(--nys-color-neutral-400, #909395);--_nys-combobox-shadow--dropdown: var( --nys-shadow-lg, 0 4px 8px rgba(0, 0, 0, .1) );--_nys-combobox-max-height--dropdown: var(--nys-size-3000, 300px);--_nys-combobox-padding--option: var(--nys-space-100, 8px) var(--nys-space-150, 12px);--_nys-combobox-background-color--option--hover: var( --nys-color-neutral-10, #f6f6f6 );--_nys-combobox-background-color--option--active: var( --nys-color-neutral-50, #ededed );--_nys-combobox-background-color--option--disabled: var( --nys-color-white, #ffffff );--_nys-combobox-color--option--disabled: var( --nys-color-text-disabled, #bec0c1 );--_nys-combobox-background-color--option--selected: var( --nys-theme-weaker, #eff6fb );--_nys-combobox-border-color--option--selected: var( --nys-color-theme-mid, #457aa5 );--_nys-combobox-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-combobox-font-size: var(--nys-font-size-ui-md, 16px);--_nys-combobox-font-weight: var(--nys-font-weight-regular, 400);--_nys-combobox-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-combobox-letter-spacing: var( --nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px) )}:host([width=sm]){--_nys-combobox-width: var(--nys-form-width-sm, 88px)}:host([width=md]){--_nys-combobox-width: var(--nys-form-width-md, 200px)}:host([width=lg]){--_nys-combobox-width: var(--nys-form-width-lg, 384px)}:host([width=full]){--_nys-combobox-width: 100%;flex:1}:host([showError]){--_nys-combobox-border-color: var(--nys-color-danger, #b52c2c)}:host([inverted]){--_nys-combobox-outline-color--focus: var(--nys-color-focus-reverse, #7aa5e7)}.nys-combobox{font-weight:var(--_nys-combobox-font-weight);font-family:var(--_nys-combobox-font-family);font-size:var(--_nys-combobox-font-size);line-height:var(--_nys-combobox-line-height);letter-spacing:var(--_nys-combobox-letter-spacing);color:var(--_nys-combobox-color);gap:var(--_nys-combobox-gap);display:flex;flex-direction:column;position:relative}.nys-combobox__container{width:var(--_nys-combobox-width);max-width:100%;position:relative}.nys-combobox__input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--_nys-combobox-background-color);border-radius:var(--_nys-combobox-border-radius)}.nys-combobox__input{color:var(--_nys-combobox-color);border-radius:var(--_nys-combobox-border-radius);border:solid var(--_nys-combobox-border-color) var(--_nys-combobox-border-width);outline-color:transparent;outline-width:var(--_nys-combobox-outline-width);outline-style:solid;padding:var(--_nys-combobox-padding);padding-right:calc(var(--nys-size-400, 32px) + var(--nys-space-100, 8px));width:100%;height:var(--_nys-combobox-height);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background-color:transparent;font:inherit;cursor:text}.nys-combobox__input:not(:placeholder-shown){padding-right:calc(var(--nys-size-400, 32px) * 2 + var(--nys-space-100, 8px))}.nys-combobox__input:hover:not(:disabled):not(:focus):not([readonly]){outline-color:var(--_nys-combobox-outline-color--hover);border-color:var(--_nys-combobox-outline-color--hover)}.nys-combobox__input:focus:not([readonly]){outline-color:var(--_nys-combobox-outline-color--focus);border-color:var(--_nys-combobox-outline-color--focus);caret-color:var(--_nys-combobox-outline-color--focus)}.nys-combobox__input:disabled{background-color:var(--_nys-combobox-background-color--disabled);border-color:var(--_nys-combobox-border-color--disabled);color:var(--_nys-combobox-color--disabled);cursor:not-allowed}.nys-combobox__buttons{display:flex;position:absolute;right:var(--nys-space-150, 12px);gap:var(--nys-space-150, 12px)}.nys-combobox__buttons nys-button{--_nys-button-padding--y: var(--nys-space-50, 4px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-height: var(--nys-size-300, 32px);--_nys-button-width: var(--nys-size-400, 32px)}.nys-combobox__buttons .nys-combobox__chevron{border-inline-start:solid var(--nys-color-neutral-200, #bec0c1) var(--nys-border-width-sm, 1px);padding-inline-start:var(--nys-space-150, 12px)}.nys-combobox__listbox{position:absolute;left:0;right:0;top:calc(100% + var(--nys-space-50, 4px));background-color:var(--_nys-combobox-background-color--dropdown);border:solid var(--_nys-combobox-border-color--dropdown) var(--_nys-combobox-border-width);border-radius:var(--_nys-combobox-border-radius);box-shadow:var(--_nys-combobox-shadow--dropdown);max-height:var(--_nys-combobox-max-height--dropdown);overflow-y:auto;z-index:1000;box-sizing:border-box}.nys-combobox__listbox--above{top:auto;bottom:calc(100% + var(--nys-space-50, 4px))}.nys-combobox__option{padding:var(--_nys-combobox-padding--option);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease;border-bottom:var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-50, #ededed);background-color:var(--_nys-combobox-background-color)}.nys-combobox__option:hover:not([disabled]):not(.nys-combobox__option--selected){background-color:var(--_nys-combobox-background-color--option--hover)}.nys-combobox__option:active:not([disabled]):not(.nys-combobox__option--selected){background-color:var(--_nys-combobox-background-color--option--active)}.nys-combobox__option--selected:not([disabled]){background-color:var(--_nys-combobox-background-color--option--selected);border:var(--_nys-combobox-border-color--option--selected) solid 1px}.nys-combobox__option--focused:not([disabled]):not(:hover){outline:var(--_nys-combobox-outline-color--focus) solid 2px;outline-offset:-2px}.nys-combobox__option[disabled]{background-color:var(--_nys-combobox-background-color--option--disabled);color:var(--_nys-combobox-color--option--disabled);cursor:not-allowed}.nys-combobox__optgroup{padding:var(--nys-space-100, 8px) var(--nys-space-150, 12px);border-bottom:var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-50, #ededed);-webkit-user-select:none;user-select:none;color:var(--nys-color-text);font-family:var(--nys-font-family-ui, "Proxima Nova");font-size:var(--nys-font-size-ui-md, 16px);font-style:normal;font-weight:700;line-height:var(--nys-font-lineheight-ui-md, 24px);letter-spacing:var(--nys-font-letterspacing-ui-md, .044px)}.nys-combobox__optgroup~.nys-combobox__option{padding-left:var(--nys-space-300, 24px)}.nys-combobox__no-results{background-color:var(--_nys-combobox-background-color);padding:var(--_nys-combobox-padding--option);color:var(--_nys-combobox-color);cursor:not-allowed}.nys-combobox__listbox::-webkit-scrollbar{width:var(--nys-space-100, 8px)}.nys-combobox__listbox::-webkit-scrollbar-track{background:var(--nys-color-neutral-50, #eeeeee);border-radius:var(--_nys-combobox-border-radius)}.nys-combobox__listbox::-webkit-scrollbar-thumb{background:var(--nys-color-neutral-300, #a7a9ab);border-radius:var(--_nys-combobox-border-radius)}.nys-combobox__listbox::-webkit-scrollbar-thumb:hover{background:var(--nys-color-neutral-400, #909395)}';
+var T = Object.defineProperty, a = (l, o, s, e) => {
+  for (var t = void 0, i = l.length - 1, n; i >= 0; i--)
+    (n = l[i]) && (t = n(o, s, t) || t);
+  return t && T(o, s, t), t;
 };
-const f = class f extends E {
+const f = class f extends D {
   constructor() {
-    super(...arguments), 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.width = "full", this.inverted = !1, this.showError = !1, this.errorMessage = "", this._isOpen = !1, this._filterText = "", this._highlightedIndex = -1, this._options = [], this._filteredOptions = [], this._dropdownAbove = !1, this._announcement = "", this._originalErrorMessage = "", this._hasUserInteracted = !1, this._selectedLabel = "", this._defaultValue = "", this._hasResolvedSlottedValue = !1, this._handleDocumentClick = (o) => {
+    super(...arguments), 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.width = "full", this.inverted = !1, this.showError = !1, this.errorMessage = "", this._isOpen = !1, this._filterText = "", this._highlightedIndex = -1, this._options = [], this._filteredOptions = [], this._dropdownAbove = !1, this._announcement = "", this._hasUserInteracted = !1, this._selectedLabel = "", this._defaultValue = "", this._hasResolvedSlottedValue = !1, this._handleDocumentClick = (o) => {
       o.target === this || this.shadowRoot?.contains(o.target) || this._closeDropdown();
     };
   }
@@ -126,7 +146,7 @@ const f = class f extends E {
    * NysFormControlElement (@nysds/internals).
    */
   connectedCallback() {
-    super.connectedCallback(), this._originalErrorMessage = this.errorMessage ?? "", this.addEventListener("invalid", this._handleInvalid), document.addEventListener("click", this._handleDocumentClick);
+    super.connectedCallback(), this.addEventListener("invalid", this._handleInvalid), document.addEventListener("click", this._handleDocumentClick);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid), document.removeEventListener("click", this._handleDocumentClick);
@@ -143,7 +163,7 @@ const f = class f extends E {
     }
   }
   updated(o) {
-    o.has("value") && this._setValue(), o.has("_isOpen") && this._isOpen && this.updateComplete.then(() => {
+    o.has("value") && this._setValue(), o.has("required") && !o.has("value") && this._manageRequire(), o.has("_isOpen") && this._isOpen && this.updateComplete.then(() => {
       this._positionDropdown(), this._scrollToHighlighted();
     });
   }
@@ -160,28 +180,28 @@ const f = class f extends E {
     let t = "";
     if (s.forEach((i) => {
       if (i.tagName === "OPTION") {
-        const r = i;
+        const n = i;
         e.push({
-          value: r.value,
-          label: r.textContent?.trim() || r.value,
-          disabled: r.disabled
-        }), r.selected && !t && (t = r.value);
+          value: n.value,
+          label: n.textContent?.trim() || n.value,
+          disabled: n.disabled
+        }), n.selected && !t && (t = n.value);
       } else if (i.tagName === "OPTGROUP") {
-        const r = i, c = r.label;
-        Array.from(r.children).forEach((h) => {
+        const n = i, c = n.label;
+        Array.from(n.children).forEach((h) => {
           if (h.tagName === "OPTION") {
             const b = h;
             e.push({
               value: b.value,
               label: b.textContent?.trim() || b.value,
-              disabled: b.disabled || r.disabled,
+              disabled: b.disabled || n.disabled,
               group: c
             }), b.selected && !t && (t = b.value);
           }
         });
       }
     }), this._options = e, this._filteredOptions = e, this._hasResolvedSlottedValue || (this._hasResolvedSlottedValue = !0, !this.value && t && (this.value = t), this._defaultValue = this.value), this.value) {
-      const i = this._options.find((r) => r.value === this.value);
+      const i = this._options.find((n) => n.value === this.value);
       i && (this._selectedLabel = i.label, this._filterText = i.label);
     }
   }
@@ -193,13 +213,16 @@ const f = class f extends E {
     this.setFormValue(this.value), this._manageRequire();
   }
   _manageRequire() {
-    const o = this.errorMessage || "This field is required";
-    this.required && (!this.value || this.value?.trim() === "") ? this.setValidityFromState({ valueMissing: !0 }, o, this._input) : (this.clearValidity(), this._hasUserInteracted = !1);
+    this.required && (!this.value || this.value?.trim() === "") ? (this.internalValidationMessage = "This field is required", this.setValidityFromState(
+      { valueMissing: !0 },
+      this.resolvedErrorMessage(),
+      this._input
+    )) : (this.internalValidationMessage = "", this.clearValidity(), this._hasUserInteracted = !1);
   }
   _setValidityMessage(o = "") {
-    this.showError = !!o, this._originalErrorMessage?.trim() && o !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = o, o ? this.setValidityFromState(
+    this.showError = !!o, this.internalValidationMessage = o, o ? this.setValidityFromState(
       { customError: !0 },
-      this.errorMessage,
+      this.resolvedErrorMessage(),
       this._input
     ) : this.clearValidity();
   }
@@ -207,11 +230,11 @@ const f = class f extends E {
     if (!this._input) return;
     const o = this._input.validity;
     let s = "";
-    const e = this._input && !this._options.some((t) => t.value === this.value);
+    const e = this._input && this.value && !this._options.some((t) => t.value === this.value);
     o.valueMissing || e ? s = "This field is required" : s = this._input.validationMessage, this._setValidityMessage(s);
   }
   formResetCallback() {
-    this.value = this._defaultValue, this._filterText = this._defaultValue ? this._options.find((o) => o.value === this._defaultValue)?.label ?? "" : "", this._selectedLabel = this._filterText, this._input && (this._input.value = this._filterText), this.setFormValue(this.value), this.showError = !1, this.errorMessage = "", this.clearValidity(), this.requestUpdate();
+    this.value = this._defaultValue, this._filterText = this._defaultValue ? this._options.find((o) => o.value === this._defaultValue)?.label ?? "" : "", this._selectedLabel = this._filterText, this._input && (this._input.value = this._filterText), this.setFormValue(this.value), this.showError = !1, this.internalValidationMessage = "", this.clearValidity(), this.requestUpdate();
   }
   checkValidity() {
     return this._input ? this._input.checkValidity() : !0;
@@ -283,10 +306,10 @@ const f = class f extends E {
     for (e < 0 ? e = this._filteredOptions.length - 1 : e >= this._filteredOptions.length && (e = 0); this._filteredOptions[e]?.disabled; )
       e += o, e < 0 && (e = this._filteredOptions.length - 1), e >= this._filteredOptions.length && (e = 0);
     this._highlightedIndex = e, this._scrollToHighlighted();
-    const t = this._filteredOptions[e], i = this._filteredOptions[e - o], r = this._filteredOptions.filter(
+    const t = this._filteredOptions[e], i = this._filteredOptions[e - o], n = this._filteredOptions.filter(
       (_) => !_.disabled
-    ), c = r.findIndex((_) => _.value === t.value) + 1, h = t.value === this.value ? "selected" : "unselected", x = t.group && t.group !== i?.group ? `${t.group}, ` : "";
-    this._announcement = `${x} ${t.label} ${c} of ${r.length}, ${h}`;
+    ), c = n.findIndex((_) => _.value === t.value) + 1, h = t.value === this.value ? "selected" : "unselected", w = t.group && t.group !== i?.group ? `${t.group}, ` : "";
+    this._announcement = `${w} ${t.label} ${c} of ${n.length}, ${h}`;
   }
   /**
    * Event Handlers
@@ -296,24 +319,19 @@ const f = class f extends E {
     const s = o.target;
     this._filterText = s.value, this._filterOptions(this._filterText), this._isOpen || this._openDropdown(), this._highlightedIndex = 0;
     const e = this._filteredOptions.filter((t) => !t.disabled).length;
-    this._announcement = e > 0 ? `${e} options available` : "No results found", this._hasUserInteracted && this._validate(), this.dispatchEvent(
-      new CustomEvent("nys-input", {
-        detail: { id: this.id, value: this._filterText },
-        bubbles: !0,
-        composed: !0
-      })
-    );
+    this._announcement = e > 0 ? `${e} options available` : "No results found", this._hasUserInteracted && this._validate(), v(this, "nys-input", {
+      id: this.id,
+      name: this.name,
+      value: this.value,
+      query: this._filterText
+    });
   }
   _handleFocus() {
-    this.dispatchEvent(
-      new Event("nys-focus", { bubbles: !0, composed: !0 })
-    );
+    m(this, "focus");
   }
   _handleBlur(o) {
     const s = o.relatedTarget;
-    s && this._listbox?.contains(s) || ((!this.value || this._filterText !== this._selectedLabel) && (this._filterText = this._selectedLabel, this._filterOptions("")), this._closeDropdown(), this._hasUserInteracted || (this._hasUserInteracted = !0), this._validate(), this.dispatchEvent(
-      new Event("nys-blur", { bubbles: !0, composed: !0 })
-    ));
+    s && this._listbox?.contains(s) || ((!this.value || this._filterText !== this._selectedLabel) && (this._filterText = this._selectedLabel, this._filterOptions("")), this._closeDropdown(), this._hasUserInteracted || (this._hasUserInteracted = !0), this._validate(), m(this, "blur"));
   }
   _handleIconClick() {
     this.disabled || (this._isOpen ? this._closeDropdown() : (this._input.focus(), this._openDropdown()));
@@ -331,13 +349,11 @@ const f = class f extends E {
     this.value = o.value, this._selectedLabel = o.label, this._filterText = o.label, this.setFormValue(this.value), this._input.focus(), this._closeDropdown(), this._filterOptions(""), this._setValidityMessage(""), this._hasUserInteracted && this._validate(), this._handleChange();
   }
   _handleChange() {
-    this.dispatchEvent(
-      new CustomEvent("nys-change", {
-        detail: { id: this.id, value: this.value },
-        bubbles: !0,
-        composed: !0
-      })
-    );
+    v(this, "nys-change", {
+      id: this.id,
+      name: this.name,
+      value: this.value
+    });
   }
   _openDropdown() {
     this._isOpen = !0, this._highlightedIndex = this._filteredOptions.findIndex(
@@ -355,19 +371,19 @@ const f = class f extends E {
     let o = "";
     const s = [];
     return this._filteredOptions.forEach((e, t) => {
-      e.group && e.group !== o && (o = e.group, s.push(u`
+      e.group && e.group !== o && (o = e.group, s.push(p`
           <div class="nys-combobox__optgroup" role="presentation">
             ${e.group}
           </div>
         `));
-      const i = t === this._highlightedIndex, r = e.value === this.value;
-      s.push(u`
+      const i = t === this._highlightedIndex, n = e.value === this.value;
+      s.push(p`
         <div
-          class="nys-combobox__option ${i ? "nys-combobox__option--focused" : ""} ${r ? "nys-combobox__option--selected" : ""}"
+          class="nys-combobox__option ${i ? "nys-combobox__option--focused" : ""} ${n ? "nys-combobox__option--selected" : ""}"
           role="option"
           id="${this.id}--option-${t}"
           data-index="${t}"
-          aria-selected="${r}"
+          aria-selected="${n}"
           aria-disabled="${e.disabled || !1}"
           ?disabled=${e.disabled}
           @click=${() => this._handleOptionClick(e)}
@@ -376,14 +392,14 @@ const f = class f extends E {
           ${e.label}
         </div>
       `);
-    }), s.length === 0 ? u`
+    }), s.length === 0 ? p`
         <div class="nys-combobox__no-results" role="option">
           No results found
         </div>
       ` : s;
   }
   render() {
-    return u`
+    return p`
       <div class="nys-combobox">
         <nys-label
           id="${this.id}--label"
@@ -432,7 +448,7 @@ const f = class f extends E {
               @keydown="${this._handleKeyDown}"
             />
             <div class="nys-combobox__buttons">
-              ${this.value ? u`
+              ${this.value ? p`
                     <nys-button
                       class="nys-combobox__clear"
                       label="Clear selection"
@@ -466,7 +482,7 @@ const f = class f extends E {
               </nys-button>
             </div>
           </div>
-          ${this._isOpen ? u`
+          ${this._isOpen ? p`
                 <div
                   class="nys-combobox__listbox ${this._dropdownAbove ? "nys-combobox__listbox--above" : ""}"
                   id="${this.id}--listbox"
@@ -484,7 +500,7 @@ const f = class f extends E {
         <nys-errormessage
           id=${this.id + "--error"}
           ?showError=${this.showError}
-          errorMessage=${this.errorMessage}
+          errorMessage=${this.resolvedErrorMessage()}
         ></nys-errormessage>
         <div
           aria-live="polite"
@@ -497,82 +513,82 @@ const f = class f extends E {
     `;
   }
 };
-f.styles = g(C), f.shadowRootOptions = {
-  ...v.shadowRootOptions,
+f.styles = k(M), f.shadowRootOptions = {
+  ...x.shadowRootOptions,
   delegatesFocus: !0
 };
-let n = f;
-l([
-  a({ type: String, reflect: !0 })
-], n.prototype, "id");
-l([
-  a({ type: String, reflect: !0 })
-], n.prototype, "name");
-l([
-  a({ type: String })
-], n.prototype, "label");
-l([
-  a({ type: String })
-], n.prototype, "description");
-l([
-  a({ type: String })
-], n.prototype, "value");
-l([
-  a({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled");
-l([
-  a({ type: Boolean, reflect: !0 })
-], n.prototype, "required");
-l([
-  a({ type: Boolean, reflect: !0 })
-], n.prototype, "optional");
-l([
-  a({ type: String })
-], n.prototype, "tooltip");
-l([
-  a({ type: String, reflect: !0 })
-], n.prototype, "form");
-l([
-  a({ type: String, reflect: !0 })
-], n.prototype, "width");
-l([
-  a({ type: Boolean, reflect: !0 })
-], n.prototype, "inverted");
-l([
-  a({ type: Boolean, reflect: !0 })
-], n.prototype, "showError");
-l([
-  a({ type: String })
-], n.prototype, "errorMessage");
-l([
-  p()
-], n.prototype, "_isOpen");
-l([
-  p()
-], n.prototype, "_filterText");
-l([
-  p()
-], n.prototype, "_highlightedIndex");
-l([
-  p()
-], n.prototype, "_options");
-l([
-  p()
-], n.prototype, "_filteredOptions");
-l([
-  p()
-], n.prototype, "_dropdownAbove");
-l([
-  p()
-], n.prototype, "_announcement");
-l([
-  m("input")
-], n.prototype, "_input");
-l([
-  m(".nys-combobox__listbox")
-], n.prototype, "_listbox");
-customElements.get("nys-combobox") || customElements.define("nys-combobox", n);
+let r = f;
+a([
+  d({ type: String, reflect: !0 })
+], r.prototype, "id");
+a([
+  d({ type: String, reflect: !0 })
+], r.prototype, "name");
+a([
+  d({ type: String })
+], r.prototype, "label");
+a([
+  d({ type: String })
+], r.prototype, "description");
+a([
+  d({ type: String })
+], r.prototype, "value");
+a([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
+a([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "required");
+a([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "optional");
+a([
+  d({ type: String })
+], r.prototype, "tooltip");
+a([
+  d({ type: String, reflect: !0 })
+], r.prototype, "form");
+a([
+  d({ type: String, reflect: !0 })
+], r.prototype, "width");
+a([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "inverted");
+a([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "showError");
+a([
+  d({ type: String })
+], r.prototype, "errorMessage");
+a([
+  u()
+], r.prototype, "_isOpen");
+a([
+  u()
+], r.prototype, "_filterText");
+a([
+  u()
+], r.prototype, "_highlightedIndex");
+a([
+  u()
+], r.prototype, "_options");
+a([
+  u()
+], r.prototype, "_filteredOptions");
+a([
+  u()
+], r.prototype, "_dropdownAbove");
+a([
+  u()
+], r.prototype, "_announcement");
+a([
+  g("input")
+], r.prototype, "_input");
+a([
+  g(".nys-combobox__listbox")
+], r.prototype, "_listbox");
+customElements.get("nys-combobox") || customElements.define("nys-combobox", r);
 export {
-  n as NysCombobox
+  r as NysCombobox
 };
 //# sourceMappingURL=nys-combobox.js.map

package/dist/nys-combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-combobox.js","sources":["../../internals/dist/index.js","../src/nys-combobox.ts"],"sourcesContent":["import { LitElement as u } from \"lit\";\n/*!\n   * New York State Design System v1.21.0\n   * Description: A design system for New York State's digital products.\n   * Repository: https://github.com/its-hcd/nysds\n   * License: MIT\n */\nvar y = 0;\nfunction f(e) {\n  return `${e}-${Date.now()}-${y++}`;\n}\nvar p = {\n  labelledby: \"ariaLabelledByElements\",\n  describedby: \"ariaDescribedByElements\"\n}, v = {\n  labelledby: \"ariaLabel\",\n  describedby: \"ariaDescription\"\n};\nfunction A(e) {\n  return \"ariaDescribedByElements\" in e;\n}\nfunction R(e) {\n  return e === \"errormessage\" ? \"aria-errormessage\" : `aria-${e}`;\n}\nfunction d(e) {\n  return e.filter((r) => !!r);\n}\nfunction _(e) {\n  return e.map((r) => (r.id || (r.id = f(\"nys-ref\")), r.id));\n}\nfunction V(e, r, a) {\n  const t = d(a), n = R(r);\n  t.length ? e.setAttribute(n, _(t).join(\" \")) : e.removeAttribute(n);\n}\nfunction x(e, r, a, t, n) {\n  const i = d(t), s = p[a], l = r;\n  if (s && A(r)) {\n    l[s] = i.length ? i : null;\n    return;\n  }\n  const o = v[a];\n  if (!o) return;\n  const c = n ?? (i.length ? i.map((m) => m.textContent?.trim() ?? \"\").filter(Boolean).join(\" \") : \"\");\n  o in l ? l[o] = c || null : c ? e.setAttribute(a === \"labelledby\" ? \"aria-label\" : \"aria-description\", c) : e.removeAttribute(a === \"labelledby\" ? \"aria-label\" : \"aria-description\");\n}\nvar E = {\n  labelledby: \"ariaLabelledByElements\",\n  describedby: \"ariaDescribedByElements\"\n}, C = {\n  labelledby: \"aria-label\",\n  describedby: \"aria-description\"\n};\nfunction L(e, r, a) {\n  const t = d(a), n = E[r], i = C[r], s = e;\n  if (n && n in e && (s[n] = t.length ? t : null), !i) return;\n  const l = t.map((o) => o.textContent?.trim() ?? \"\").filter(Boolean).join(\" \");\n  l ? e.setAttribute(i, l) : e.removeAttribute(i);\n}\nvar b = (e) => {\n  class r extends e {\n    get idPrefix() {\n      return this.localName || \"nys-element\";\n    }\n    ensureId() {\n      this.id || (this.id = f(this.idPrefix));\n    }\n    connectedCallback() {\n      super.connectedCallback(), this.ensureId();\n    }\n  }\n  return r;\n}, P = /* @__PURE__ */ b(u), h = (e) => {\n  class r extends b(e) {\n    constructor(...t) {\n      super(...t), this.__internals = null;\n    }\n    get internals() {\n      if (this.__internals) return this.__internals;\n      if (typeof this.attachInternals == \"function\") try {\n        this.__internals = this.attachInternals();\n      } catch {\n        this.__internals = null;\n      }\n      return this.__internals;\n    }\n    get defaultRole() {\n      return null;\n    }\n    setHostAria(t, n) {\n      const i = this.internals;\n      if (i && t in i) {\n        i[t] = n;\n        return;\n      }\n      const s = g(t);\n      n === null ? this.removeAttribute(s) : this.setAttribute(s, n);\n    }\n    reflectDefaultSemantics() {\n      const t = this.defaultRole;\n      t && this.setHostAria(\"role\", t);\n    }\n    connectedCallback() {\n      super.connectedCallback(), this.reflectDefaultSemantics();\n    }\n  }\n  return r;\n};\nfunction g(e) {\n  if (e === \"role\") return \"role\";\n  const r = e.replace(/^aria/, \"\");\n  return \"aria-\" + r.charAt(0).toLowerCase() + r.slice(1);\n}\nvar T = /* @__PURE__ */ h(u), I = (e) => {\n  class r extends h(e) {\n    static {\n      this.formAssociated = !0;\n    }\n    setFormValue(t) {\n      this.internals?.setFormValue(t ?? null);\n    }\n    setValidityFromState(t, n, i) {\n      const s = this.internals;\n      if (!s) return;\n      const l = Object.values(t).some(Boolean);\n      l ? s.setValidity(t, n ?? \"Invalid value\", i) : s.setValidity({}), this.setHostAria(\"ariaInvalid\", l ? \"true\" : \"false\");\n    }\n    clearValidity() {\n      this.internals?.setValidity({}), this.setHostAria(\"ariaInvalid\", \"false\");\n    }\n    checkValidity() {\n      return this.internals?.checkValidity() ?? !0;\n    }\n    reportValidity() {\n      return this.internals?.reportValidity() ?? !0;\n    }\n    formResetCallback() {\n      this.clearValidity();\n    }\n  }\n  return r;\n}, w = /* @__PURE__ */ I(u);\nfunction O(e) {\n  const r = e.tagName.toLowerCase(), a = /* @__PURE__ */ new Set(), t = (n) => {\n    n.querySelectorAll(\"*\").forEach((i) => {\n      const s = i.tagName.toLowerCase();\n      s.startsWith(\"nys-\") && s !== r && !customElements.get(s) && a.add(s), i.shadowRoot && t(i.shadowRoot);\n    });\n  };\n  return e.shadowRoot && t(e.shadowRoot), t(e), [...a].sort();\n}\nexport {\n  I as FormControlMixin,\n  b as IdentifiedMixin,\n  P as NysElement,\n  w as NysFormControlElement,\n  T as NysReflectsAriaElement,\n  h as ReflectsAriaMixin,\n  V as associateControl,\n  L as associateControlRefs,\n  x as associateHost,\n  O as findUnregisteredChildren,\n  f as generateId,\n  A as supportsElementRefs\n};\n\n//# sourceMappingURL=index.js.map","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { NysFormControlElement } from \"@nysds/internals\";\n// These internal elements are rendered inside this component's shadow DOM, so\n// they must be registered whenever nys-combobox is used. Importing them here\n// (intentional side effect) guarantees the visible label and error message —\n// which the accessible name/error association depends on — always render. It\n// also guarantees the clear/toggle nys-buttons upgrade, since their accessible\n// name lands on nys-button's real inner <button>, which only exists once\n// nys-button renders.\nimport \"@nysds/nys-label\";\nimport \"@nysds/nys-errormessage\";\nimport \"@nysds/nys-icon\";\nimport \"@nysds/nys-button\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-combobox.scss?inline\";\n\ninterface ComboboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  group?: string;\n}\n\n/**\n * `<nys-combobox>` is a form-enabled combo box combining text input with a filterable dropdown.\n *\n * Features:\n * - Type to filter options\n * - Keyboard navigation (Arrow keys, Enter, Escape)\n * - Mouse and keyboard interaction\n * - Clears non-selected text on blur\n * - Clear button when value is selected\n * - Integrates with forms via ElementInternals\n * - Supports native <option> and <optgroup> elements\n * - Accessible per W3C ARIA Authoring Practices\n *\n * @slot description - Optional custom description content below the label.\n * @slot default - Options (<option>, <optgroup>) to populate the dropdown\n *\n * @fires nys-change - Fired when selection changes. Detail: `{ id, value }`.\n * @fires nys-input - Fired on input change. Detail: `{ id, value }`.\n * @fires nys-focus - Fired when combobox receives focus.\n * @fires nys-blur - Fired when combobox loses focus.\n *\n *\n * @example Basic\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"cherry\">Cherry</option>\n *   <option value=\"date\">Date</option>\n *   <option value=\"elderberry\">Elderberry</option>\n *   <option value=\"fig\">Fig</option>\n *   <option value=\"grape\">Grape</option>\n *   <option value=\"honeydew\">Honeydew</option>\n *   <option value=\"kiwi\">Kiwi</option>\n *   <option value=\"lemon\">Lemon</option>\n *   <option value=\"mango\">Mango</option>\n *   <option value=\"nectarine\">Nectarine</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"papaya\">Papaya</option>\n *   <option value=\"quince\">Quince</option>\n *   <option value=\"raspberry\">Raspberry</option>\n *   <option value=\"strawberry\">Strawberry</option>\n *   <option value=\"tangerine\">Tangerine</option>\n *   <option value=\"watermelon\">Watermelon</option>\n * </nys-combobox>\n * ```\n *\n * @example Default Value\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" value=\"mango\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"mango\" selected>Mango</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Option Group\n * ```html\n * <nys-combobox label=\"Select a fruit\" description=\"Fruits organized by category\">\n *   <optgroup label=\"Citrus\">\n *     <option value=\"lemon\">Lemon</option>\n *     <option value=\"lime\">Lime</option>\n *     <option value=\"orange\">Orange</option>\n *     <option value=\"grapefruit\">Grapefruit</option>\n *     <option value=\"tangerine\">Tangerine</option>\n *   </optgroup>\n *   <optgroup label=\"Berries\">\n *     <option value=\"strawberry\">Strawberry</option>\n *     <option value=\"blueberry\">Blueberry</option>\n *     <option value=\"raspberry\">Raspberry</option>\n *     <option value=\"blackberry\">Blackberry</option>\n *     <option value=\"cranberry\">Cranberry</option>\n *   </optgroup>\n *   <optgroup label=\"Tropical\">\n *     <option value=\"mango\">Mango</option>\n *     <option value=\"pineapple\">Pineapple</option>\n *     <option value=\"papaya\">Papaya</option>\n *     <option value=\"coconut\">Coconut</option>\n *     <option value=\"passionfruit\">Passionfruit</option>\n *   </optgroup>\n *   <optgroup label=\"Stone Fruits\">\n *     <option value=\"peach\">Peach</option>\n *     <option value=\"plum\">Plum</option>\n *     <option value=\"cherry\">Cherry</option>\n *     <option value=\"apricot\">Apricot</option>\n *     <option value=\"nectarine\">Nectarine</option>\n *   </optgroup>\n * </nys-combobox>\n * ```\n *\n * @example Disabled\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" disabled>\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Required\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" required>\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Optional\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" optional>\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Width Medium\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" width=\"md\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Width Large\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" width=\"lg\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Description\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" description=\"Choose from the list of available fruits.\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```d\n *\n * @example Description Slot\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\">\n *   <label slot=\"description\">This is a description slot</label>\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Error Message\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" showError errorMessage=\"Please select a fruit\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Disabled Options\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" description=\"Some fruits are out of season\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"cherry\" disabled>Cherry (Out of season)</option>\n *   <option value=\"mango\">Mango</option>\n *   <option value=\"strawberry\" disabled>Strawberry (Out of season)</option>\n *   <option value=\"orange\">Orange</option>\n * </nys-combobox>\n * ```\n */\nexport class NysCombobox extends NysFormControlElement {\n  static styles = unsafeCSS(styles);\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\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: String, reflect: true }) width: \"md\" | \"lg\" | \"full\" =\n    \"full\";\n  @property({ type: Boolean, reflect: true }) inverted = false;\n  @property({ type: Boolean, reflect: true }) showError = false;\n  @property({ type: String }) errorMessage = \"\";\n\n  @state() private _isOpen = false;\n  @state() private _filterText = \"\";\n  @state() private _highlightedIndex = -1;\n  @state() private _options: ComboboxOption[] = [];\n  @state() private _filteredOptions: ComboboxOption[] = [];\n  @state() private _dropdownAbove = false;\n  @state() private _announcement = \"\";\n\n  @query(\"input\") private _input!: HTMLInputElement;\n  @query(\".nys-combobox__listbox\") private _listbox?: HTMLElement;\n\n  private _originalErrorMessage = \"\";\n  private _hasUserInteracted = false;\n  private _selectedLabel = \"\";\n  private _defaultValue = \"\";\n  private _hasResolvedSlottedValue = false;\n\n  /**\n   * Lifecycle methods\n   * --------------------------------------------------------------------------\n   * Form association, ElementInternals, and id generation are provided by\n   * NysFormControlElement (@nysds/internals).\n   */\n  connectedCallback() {\n    // super.connectedCallback() (NysFormControlElement) assigns an id when one\n    // is not provided and reflects default semantics.\n    super.connectedCallback();\n    this._originalErrorMessage = this.errorMessage ?? \"\";\n    this.addEventListener(\"invalid\", this._handleInvalid);\n    document.addEventListener(\"click\", this._handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"invalid\", this._handleInvalid);\n    document.removeEventListener(\"click\", this._handleDocumentClick);\n  }\n\n  firstUpdated() {\n    // Slotted options are read in `_handleSlotChange`, which the slot's\n    // `slotchange` event fires once its nodes are assigned. It also resolves an\n    // option marked `selected` into `value` and captures `_defaultValue`.\n    this._setValue();\n    this._defaultValue = this.value;\n  }\n\n  // Derive display state from `value` before rendering, not after, so Lit\n  // doesn't have to schedule a second update (see lit.dev/msg/change-in-update).\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has(\"value\")) {\n      const option = this._options.find((opt) => opt.value === this.value);\n      this._selectedLabel = option ? option.label : \"\";\n      this._filterText = this._selectedLabel;\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has(\"value\")) {\n      this._setValue();\n    }\n\n    if (changedProperties.has(\"_isOpen\") && this._isOpen) {\n      // Positioning measures the rendered listbox, so it has to wait for this\n      // update to settle before it may flip `_dropdownAbove`.\n      this.updateComplete.then(() => {\n        this._positionDropdown();\n        this._scrollToHighlighted();\n      });\n    }\n  }\n\n  /**\n   * Slot handling\n   * --------------------------------------------------------------------------\n   */\n  private _handleSlotChange() {\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name=\"description\"])',\n    ) as HTMLSlotElement | null;\n\n    if (!slot) return;\n\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const options: ComboboxOption[] = [];\n    let markupSelected = \"\";\n\n    assignedElements.forEach((node) => {\n      if (node.tagName === \"OPTION\") {\n        const option = node as HTMLOptionElement;\n        options.push({\n          value: option.value,\n          label: option.textContent?.trim() || option.value,\n          disabled: option.disabled,\n        });\n        if (option.selected && !markupSelected) {\n          markupSelected = option.value;\n        }\n      } else if (node.tagName === \"OPTGROUP\") {\n        const group = node as HTMLOptGroupElement;\n        const groupLabel = group.label;\n\n        Array.from(group.children).forEach((child) => {\n          if (child.tagName === \"OPTION\") {\n            const option = child as HTMLOptionElement;\n            options.push({\n              value: option.value,\n              label: option.textContent?.trim() || option.value,\n              disabled: option.disabled || group.disabled,\n              group: groupLabel,\n            });\n            if (option.selected && !markupSelected) {\n              markupSelected = option.value;\n            }\n          }\n        });\n      }\n    });\n\n    this._options = options;\n    this._filteredOptions = options;\n\n    // The first time options arrive, adopt an option marked `selected` unless\n    // an explicit value was already set, and use the result as the reset baseline.\n    if (!this._hasResolvedSlottedValue) {\n      this._hasResolvedSlottedValue = true;\n\n      if (!this.value && markupSelected) {\n        this.value = markupSelected;\n      }\n      this._defaultValue = this.value;\n    }\n\n    // Set initial display text if value exists\n    if (this.value) {\n      const option = this._options.find((opt) => opt.value === this.value);\n      if (option) {\n        this._selectedLabel = option.label;\n        this._filterText = option.label;\n      }\n    }\n  }\n\n  /**\n   * Form Integration\n   * --------------------------------------------------------------------------\n   */\n  private _setValue() {\n    this.setFormValue(this.value);\n    this._manageRequire();\n  }\n\n  private _manageRequire() {\n    const message = this.errorMessage || \"This field is required\";\n    const isInvalid =\n      this.required && (!this.value || this.value?.trim() === \"\");\n\n    if (isInvalid) {\n      this.setValidityFromState({ valueMissing: true }, message, this._input);\n    } else {\n      this.clearValidity();\n      this._hasUserInteracted = false;\n    }\n  }\n\n  private _setValidityMessage(message: string = \"\") {\n    this.showError = !!message;\n\n    if (this._originalErrorMessage?.trim() && message !== \"\") {\n      this.errorMessage = this._originalErrorMessage;\n    } else {\n      this.errorMessage = message;\n    }\n\n    if (message) {\n      this.setValidityFromState(\n        { customError: true },\n        this.errorMessage,\n        this._input,\n      );\n    } else {\n      this.clearValidity();\n    }\n  }\n\n  private _validate() {\n    if (!this._input) return;\n\n    const validity = this._input.validity;\n    let message = \"\";\n\n    const isInvalid =\n      this._input && !this._options.some((opt) => opt.value === this.value);\n\n    if (validity.valueMissing || isInvalid) {\n      message = \"This field is required\";\n    } else {\n      message = this._input.validationMessage;\n    }\n\n    this._setValidityMessage(message);\n  }\n\n  formResetCallback() {\n    this.value = this._defaultValue;\n    this._filterText = this._defaultValue\n      ? (this._options.find((opt) => opt.value === this._defaultValue)?.label ??\n        \"\")\n      : \"\";\n    this._selectedLabel = this._filterText;\n\n    if (this._input) {\n      this._input.value = this._filterText;\n    }\n\n    this.setFormValue(this.value);\n\n    // Reset validation UI\n    this.showError = false;\n    this.errorMessage = \"\";\n    this.clearValidity();\n\n    this.requestUpdate();\n  }\n  checkValidity(): boolean {\n    return this._input ? this._input.checkValidity() : true;\n  }\n\n  private _handleInvalid(event: Event) {\n    event.preventDefault();\n    this._hasUserInteracted = true;\n    this._validate();\n\n    if (this._input) {\n      const form = this.internals?.form;\n      if (form) {\n        const elements = Array.from(form.elements) as Array<\n          HTMLElement & { checkValidity?: () => boolean }\n        >;\n        const firstInvalidElement = elements.find(\n          (element) =>\n            typeof element.checkValidity === \"function\" &&\n            !element.checkValidity(),\n        );\n        if (firstInvalidElement === this) {\n          this._input.focus();\n        }\n      } else {\n        this._input.focus();\n      }\n    }\n  }\n\n  /**\n   * Dropdown positioning\n   * --------------------------------------------------------------------------\n   */\n  private _positionDropdown() {\n    if (!this._listbox || !this._input) return;\n\n    const inputRect = this._input.getBoundingClientRect();\n    const listboxHeight = this._listbox.offsetHeight;\n    const viewportHeight = window.innerHeight;\n    const spaceBelow = viewportHeight - inputRect.bottom;\n    const spaceAbove = inputRect.top;\n\n    // Show above if not enough space below and more space above\n    this._dropdownAbove = spaceBelow < listboxHeight && spaceAbove > spaceBelow;\n  }\n\n  /**\n   * Filtering\n   * --------------------------------------------------------------------------\n   */\n  private _filterOptions(searchText: string) {\n    if (!searchText) {\n      this._filteredOptions = this._options;\n      return;\n    }\n\n    const search = searchText.toLowerCase();\n    this._filteredOptions = this._options.filter((option) =>\n      option.label.toLowerCase().includes(search),\n    );\n  }\n\n  /**\n   * Keyboard navigation\n   * --------------------------------------------------------------------------\n   */\n  private _scrollToHighlighted() {\n    if (!this._listbox || this._highlightedIndex < 0) return;\n\n    const highlighted = this._listbox.querySelector(\n      `[data-index=\"${this._highlightedIndex}\"]`,\n    ) as HTMLElement;\n\n    if (highlighted) {\n      highlighted.scrollIntoView({ block: \"nearest\" });\n    }\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        if (!this._isOpen) {\n          this._openDropdown();\n        } else {\n          this._moveHighlight(1);\n        }\n        break;\n\n      case \"ArrowUp\":\n        event.preventDefault();\n        if (!this._isOpen) {\n          this._openDropdown();\n        } else {\n          this._moveHighlight(-1);\n        }\n        break;\n\n      case \"Enter\":\n        event.preventDefault();\n        if (this._isOpen && this._highlightedIndex >= 0) {\n          this._selectOption(this._filteredOptions[this._highlightedIndex]);\n        }\n        break;\n\n      case \"Escape\":\n        event.preventDefault();\n        this._closeDropdown();\n        this._filterText = this._selectedLabel;\n        break;\n\n      case \"Tab\":\n        if (this._isOpen) {\n          this._closeDropdown();\n          this._filterText = this._selectedLabel;\n        }\n        break;\n    }\n  }\n\n  private _moveHighlight(direction: number) {\n    const enabledOptions = this._filteredOptions.filter((opt) => !opt.disabled);\n    if (enabledOptions.length === 0) return;\n\n    let newIndex = this._highlightedIndex + direction;\n\n    // Wrap around\n    if (newIndex < 0) {\n      newIndex = this._filteredOptions.length - 1;\n    } else if (newIndex >= this._filteredOptions.length) {\n      newIndex = 0;\n    }\n\n    // Skip disabled options\n    while (this._filteredOptions[newIndex]?.disabled) {\n      newIndex += direction;\n      if (newIndex < 0) newIndex = this._filteredOptions.length - 1;\n      if (newIndex >= this._filteredOptions.length) newIndex = 0;\n    }\n\n    this._highlightedIndex = newIndex;\n    this._scrollToHighlighted();\n\n    const option = this._filteredOptions[newIndex];\n    const prevOption = this._filteredOptions[newIndex - direction];\n    const enabledFiltered = this._filteredOptions.filter(\n      (opt) => !opt.disabled,\n    );\n    const position =\n      enabledFiltered.findIndex((opt) => opt.value === option.value) + 1;\n    const isSelected = option.value === this.value ? \"selected\" : \"unselected\";\n    const groupChanged = option.group && option.group !== prevOption?.group;\n    const groupPrefix = groupChanged ? `${option.group}, ` : \"\";\n    this._announcement = `${groupPrefix} ${option.label} ${position} of ${enabledFiltered.length}, ${isSelected}`;\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n  private _handleInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this._filterText = input.value;\n    this._filterOptions(this._filterText);\n\n    if (!this._isOpen) {\n      this._openDropdown();\n    }\n\n    this._highlightedIndex = 0;\n\n    const count = this._filteredOptions.filter((opt) => !opt.disabled).length;\n    this._announcement =\n      count > 0 ? `${count} options available` : \"No results found\";\n\n    if (this._hasUserInteracted) {\n      this._validate();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"nys-input\", {\n        detail: { id: this.id, value: this._filterText },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleFocus() {\n    this.dispatchEvent(\n      new Event(\"nys-focus\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleBlur(event: FocusEvent) {\n    // Check if focus moved to the listbox\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (relatedTarget && this._listbox?.contains(relatedTarget)) {\n      return;\n    }\n\n    // If no valid selection, clear the input\n    if (!this.value || this._filterText !== this._selectedLabel) {\n      this._filterText = this._selectedLabel;\n      this._filterOptions(\"\");\n    }\n\n    this._closeDropdown();\n\n    if (!this._hasUserInteracted) {\n      this._hasUserInteracted = true;\n    }\n    this._validate();\n\n    this.dispatchEvent(\n      new Event(\"nys-blur\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleDocumentClick = (event: MouseEvent) => {\n    // Don't close if click is on the combobox host element or inside shadow DOM\n    if (\n      event.target === this ||\n      this.shadowRoot?.contains(event.target as Node)\n    ) {\n      return;\n    }\n    this._closeDropdown();\n  };\n\n  private _handleIconClick() {\n    if (this.disabled) return;\n\n    if (this._isOpen) {\n      this._closeDropdown();\n    } else {\n      this._input.focus();\n      this._openDropdown();\n    }\n  }\n\n  private _handleClearClick(event: Event) {\n    event.stopPropagation();\n    this.value = \"\";\n    this._filterText = \"\";\n    this._selectedLabel = \"\";\n    this._filterOptions(\"\");\n    this.setFormValue(\"\");\n    this._closeDropdown();\n    this._input.focus();\n\n    this._handleChange();\n  }\n\n  private _handleOptionClick(option: ComboboxOption) {\n    if (option.disabled) return;\n    this._selectOption(option);\n  }\n\n  private _handleOptionMouseEnter(index: number) {\n    this._highlightedIndex = index;\n  }\n\n  private _selectOption(option: ComboboxOption) {\n    this.value = option.value;\n    this._selectedLabel = option.label;\n    this._filterText = option.label;\n    this.setFormValue(this.value);\n    this._input.focus();\n    this._closeDropdown();\n    this._filterOptions(\"\");\n\n    this._setValidityMessage(\"\");\n\n    if (this._hasUserInteracted) {\n      this._validate();\n    }\n\n    this._handleChange();\n  }\n\n  private _handleChange() {\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  private _openDropdown() {\n    this._isOpen = true;\n    this._highlightedIndex = this._filteredOptions.findIndex(\n      (opt) => opt.value === this.value,\n    );\n    if (this._highlightedIndex < 0) this._highlightedIndex = 0;\n  }\n\n  private _closeDropdown() {\n    this._isOpen = false;\n    this._highlightedIndex = -1;\n  }\n\n  /**\n   * Render helpers\n   * --------------------------------------------------------------------------\n   */\n  private _renderOptions() {\n    let currentGroup = \"\";\n    const elements: any[] = [];\n\n    this._filteredOptions.forEach((option, index) => {\n      if (option.group && option.group !== currentGroup) {\n        currentGroup = option.group;\n        elements.push(html`\n          <div class=\"nys-combobox__optgroup\" role=\"presentation\">\n            ${option.group}\n          </div>\n        `);\n      }\n\n      const isFocused = index === this._highlightedIndex;\n      const isSelected = option.value === this.value;\n\n      elements.push(html`\n        <div\n          class=\"nys-combobox__option ${isFocused\n            ? \"nys-combobox__option--focused\"\n            : \"\"} ${isSelected ? \"nys-combobox__option--selected\" : \"\"}\"\n          role=\"option\"\n          id=\"${this.id}--option-${index}\"\n          data-index=\"${index}\"\n          aria-selected=\"${isSelected}\"\n          aria-disabled=\"${option.disabled || false}\"\n          ?disabled=${option.disabled}\n          @click=${() => this._handleOptionClick(option)}\n          @mouseenter=${() => this._handleOptionMouseEnter(index)}\n        >\n          ${option.label}\n        </div>\n      `);\n    });\n\n    if (elements.length === 0) {\n      return html`\n        <div class=\"nys-combobox__no-results\" role=\"option\">\n          No results found\n        </div>\n      `;\n    }\n\n    return elements;\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-combobox\">\n        <nys-label\n          id=\"${this.id}--label\"\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\n          class=\"nys-combobox__container ${this._isOpen\n            ? \"nys-combobox__container--open\"\n            : \"\"}\"\n        >\n          <div class=\"nys-combobox__input-wrapper\">\n            <input\n              class=\"nys-combobox__input\"\n              type=\"text\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded=\"${this._isOpen}\"\n              aria-controls=\"${this.id}--listbox\"\n              aria-activedescendant=\"${this._highlightedIndex >= 0\n                ? `${this.id}--option-${this._highlightedIndex}`\n                : \"\"}\"\n              name=${this.name}\n              id=${this.id + \"--native\"}\n              ?disabled=${this.disabled}\n              ?required=${this.required}\n              aria-required=${this.required}\n              aria-disabled=\"${this.disabled}\"\n              aria-labelledby=${ifDefined(\n                this.label ? this.id + \"--label\" : undefined,\n              )}\n              aria-label=${ifDefined(\n                !this.label && this.description ? this.description : undefined,\n              )}\n              aria-invalid=${this.showError ? \"true\" : \"false\"}\n              aria-errormessage=${this.id + \"--error\"}\n              aria-describedby=${ifDefined(\n                this.showError ? this.id + \"--error\" : undefined,\n              )}\n              .value=${this._filterText}\n              form=${ifDefined(this.form || undefined)}\n              @input=${this._handleInput}\n              @focus=\"${this._handleFocus}\"\n              @blur=\"${this._handleBlur}\"\n              @keydown=\"${this._handleKeyDown}\"\n            />\n            <div class=\"nys-combobox__buttons\">\n              ${this.value\n                ? html`\n                    <nys-button\n                      class=\"nys-combobox__clear\"\n                      label=\"Clear selection\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      circle\n                      @nys-click=${this._handleClearClick}\n                      ?disabled=${this.disabled}\n                    >\n                      <nys-icon\n                        slot=\"suffix-icon\"\n                        size=\"20\"\n                        name=\"close\"\n                      ></nys-icon>\n                    </nys-button>\n                  `\n                : \"\"}\n              <nys-button\n                class=\"nys-combobox__chevron\"\n                label=\"Toggle dropdown\"\n                variant=\"ghost\"\n                size=\"sm\"\n                circle\n                @nys-click=${this._handleIconClick}\n                ?disabled=${this.disabled}\n              >\n                <nys-icon\n                  slot=\"suffix-icon\"\n                  size=\"20\"\n                  name=\"chevron_down\"\n                ></nys-icon>\n              </nys-button>\n            </div>\n          </div>\n          ${this._isOpen\n            ? html`\n                <div\n                  class=\"nys-combobox__listbox ${this._dropdownAbove\n                    ? \"nys-combobox__listbox--above\"\n                    : \"\"}\"\n                  id=\"${this.id}--listbox\"\n                  role=\"listbox\"\n                  tabindex=\"-1\"\n                >\n                  ${this._renderOptions()}\n                </div>\n              `\n            : \"\"}\n        </div>\n        <slot\n          style=\"display: none;\"\n          @slotchange=${this._handleSlotChange}\n        ></slot>\n        <nys-errormessage\n          id=${this.id + \"--error\"}\n          ?showError=${this.showError}\n          errorMessage=${this.errorMessage}\n        ></nys-errormessage>\n        <div\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          style=\"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;\"\n        >\n          ${this._announcement}\n        </div>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-combobox\")) {\n  customElements.define(\"nys-combobox\", NysCombobox);\n}\n"],"names":["LitElement","unsafeCSS","html","property","state","query","ifDefined","y","f","e","b","r","h","t","n","s","g","I","_r","i","l","w","u","_NysCombobox","NysFormControlElement","event","changedProperties","option","opt","slot","assignedElements","options","markupSelected","node","group","groupLabel","child","message","validity","isInvalid","form","element","inputRect","listboxHeight","spaceBelow","spaceAbove","searchText","search","highlighted","direction","newIndex","prevOption","enabledFiltered","position","isSelected","groupPrefix","input","count","relatedTarget","index","currentGroup","elements","isFocused","styles","NysCombobox","__decorateClass"],"mappings":"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"}
+{"version":3,"file":"nys-combobox.js","sources":["../../internals/dist/index.js","../src/nys-combobox.ts"],"sourcesContent":["import { LitElement as u } from \"lit\";\n/*!\n   * New York State Design System v1.22.0\n   * Description: A design system for New York State's digital products.\n   * Repository: https://github.com/its-hcd/nysds\n   * License: MIT\n */\nlet y = 0;\nfunction f(e) {\n  return `${e}-${Date.now()}-${y++}`;\n}\nfunction N(e, t, s) {\n  e.dispatchEvent(\n    new CustomEvent(t, { detail: s, bubbles: !0, composed: !0 })\n  );\n}\nfunction I(e, t) {\n  e.dispatchEvent(\n    new Event(`nys-${t}`, { bubbles: !0, composed: !0 })\n  );\n}\nconst p = {\n  labelledby: \"ariaLabelledByElements\",\n  describedby: \"ariaDescribedByElements\"\n}, g = {\n  labelledby: \"ariaLabel\",\n  describedby: \"ariaDescription\"\n};\nfunction _(e) {\n  return \"ariaDescribedByElements\" in e;\n}\nfunction E(e) {\n  return e === \"errormessage\" ? \"aria-errormessage\" : `aria-${e}`;\n}\nfunction d(e) {\n  return e.filter((t) => !!t);\n}\nfunction A(e) {\n  return e.map((t) => (t.id || (t.id = f(\"nys-ref\")), t.id));\n}\nfunction w(e, t, s) {\n  const n = d(s), i = E(t);\n  n.length ? e.setAttribute(i, A(n).join(\" \")) : e.removeAttribute(i);\n}\nfunction x(e, t, s, n, i) {\n  const r = d(n), a = p[s], l = t;\n  if (a && _(t)) {\n    l[a] = r.length ? r : null;\n    return;\n  }\n  const o = g[s];\n  if (!o) return;\n  const c = i ?? (r.length ? r.map((m) => m.textContent?.trim() ?? \"\").filter(Boolean).join(\" \") : \"\");\n  o in l ? l[o] = c || null : c ? e.setAttribute(\n    s === \"labelledby\" ? \"aria-label\" : \"aria-description\",\n    c\n  ) : e.removeAttribute(\n    s === \"labelledby\" ? \"aria-label\" : \"aria-description\"\n  );\n}\nconst R = {\n  labelledby: \"ariaLabelledByElements\",\n  describedby: \"ariaDescribedByElements\"\n}, V = {\n  labelledby: \"aria-label\",\n  describedby: \"aria-description\"\n};\nfunction L(e, t, s) {\n  const n = d(s), i = R[t], r = V[t], a = e;\n  if (i && i in e && (a[i] = n.length ? n : null), !r) return;\n  const l = n.map((o) => o.textContent?.trim() ?? \"\").filter(Boolean).join(\" \");\n  l ? e.setAttribute(r, l) : e.removeAttribute(r);\n}\nconst h = (e) => {\n  class t extends e {\n    get idPrefix() {\n      return this.localName || \"nys-element\";\n    }\n    ensureId() {\n      this.id || (this.id = f(this.idPrefix));\n    }\n    connectedCallback() {\n      super.connectedCallback(), this.ensureId();\n    }\n  }\n  return t;\n}, P = /* @__PURE__ */ h(u), b = (e) => {\n  class t extends h(e) {\n    constructor() {\n      super(...arguments), this.__internals = null;\n    }\n    get internals() {\n      if (this.__internals) return this.__internals;\n      if (typeof this.attachInternals == \"function\")\n        try {\n          this.__internals = this.attachInternals();\n        } catch {\n          this.__internals = null;\n        }\n      return this.__internals;\n    }\n    get defaultRole() {\n      return null;\n    }\n    setHostAria(n, i) {\n      const r = this.internals;\n      if (r && n in r) {\n        r[n] = i;\n        return;\n      }\n      const a = v(n);\n      i === null ? this.removeAttribute(a) : this.setAttribute(a, i);\n    }\n    reflectDefaultSemantics() {\n      const n = this.defaultRole;\n      n && this.setHostAria(\"role\", n);\n    }\n    connectedCallback() {\n      super.connectedCallback(), this.reflectDefaultSemantics();\n    }\n  }\n  return t;\n};\nfunction v(e) {\n  if (e === \"role\") return \"role\";\n  const t = e.replace(/^aria/, \"\");\n  return \"aria-\" + t.charAt(0).toLowerCase() + t.slice(1);\n}\nconst T = /* @__PURE__ */ b(u), C = (e) => {\n  const s = class s extends b(e) {\n    constructor() {\n      super(...arguments), this.__internalValidationMessage = \"\";\n    }\n    get internalValidationMessage() {\n      return this.__internalValidationMessage;\n    }\n    set internalValidationMessage(i) {\n      i !== this.__internalValidationMessage && (this.__internalValidationMessage = i, this.requestUpdate(\"internalValidationMessage\"));\n    }\n    resolvedErrorMessage() {\n      return this.errorMessage || this.internalValidationMessage;\n    }\n    setFormValue(i) {\n      this.internals?.setFormValue(i ?? null);\n    }\n    setValidityFromState(i, r, a) {\n      const l = this.internals;\n      if (!l) return;\n      const o = Object.values(i).some(Boolean);\n      o ? l.setValidity(i, r ?? \"Invalid value\", a) : l.setValidity({}), this.setHostAria(\"ariaInvalid\", o ? \"true\" : \"false\");\n    }\n    clearValidity() {\n      this.internals?.setValidity({}), this.setHostAria(\"ariaInvalid\", \"false\");\n    }\n    checkValidity() {\n      return this.internals?.checkValidity() ?? !0;\n    }\n    reportValidity() {\n      return this.internals?.reportValidity() ?? !0;\n    }\n    formResetCallback() {\n      this.internalValidationMessage = \"\", this.clearValidity();\n    }\n  };\n  s.formAssociated = !0;\n  let t = s;\n  return t;\n}, O = /* @__PURE__ */ C(u);\nfunction B(e) {\n  const t = e.tagName.toLowerCase(), s = /* @__PURE__ */ new Set(), n = (i) => {\n    i.querySelectorAll(\"*\").forEach((r) => {\n      const a = r.tagName.toLowerCase();\n      a.startsWith(\"nys-\") && a !== t && !customElements.get(a) && s.add(a), r.shadowRoot && n(r.shadowRoot);\n    });\n  };\n  return e.shadowRoot && n(e.shadowRoot), n(e), [...s].sort();\n}\nexport {\n  C as FormControlMixin,\n  h as IdentifiedMixin,\n  P as NysElement,\n  O as NysFormControlElement,\n  T as NysReflectsAriaElement,\n  b as ReflectsAriaMixin,\n  w as associateControl,\n  L as associateControlRefs,\n  x as associateHost,\n  N as dispatchNysEvent,\n  I as dispatchNysFocusBlur,\n  B as findUnregisteredChildren,\n  f as generateId,\n  _ as supportsElementRefs\n};\n//# sourceMappingURL=index.js.map\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport {\n  NysFormControlElement,\n  dispatchNysEvent,\n  dispatchNysFocusBlur,\n} from \"@nysds/internals\";\n// These internal elements are rendered inside this component's shadow DOM, so\n// they must be registered whenever nys-combobox is used. Importing them here\n// (intentional side effect) guarantees the visible label and error message —\n// which the accessible name/error association depends on — always render. It\n// also guarantees the clear/toggle nys-buttons upgrade, since their accessible\n// name lands on nys-button's real inner <button>, which only exists once\n// nys-button renders.\nimport \"@nysds/nys-label\";\nimport \"@nysds/nys-errormessage\";\nimport \"@nysds/nys-icon\";\nimport \"@nysds/nys-button\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-combobox.scss?inline\";\n\ninterface ComboboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  group?: string;\n}\n\n/** Detail payload for the `nys-input` event. */\nexport interface NysComboboxInputDetail {\n  id: string;\n  name: string;\n  /** The committed value (the selected option's value), not the filter text. */\n  value: string;\n  /** The raw filter text the user has typed. */\n  query: string;\n}\n\n/** The `nys-input` event, fired on each keystroke while filtering. */\nexport type NysComboboxInputEvent = CustomEvent<NysComboboxInputDetail>;\n\n/** Detail payload for the `nys-change` event. */\nexport interface NysComboboxChangeDetail {\n  id: string;\n  name: string;\n  value: string;\n}\n\n/** The `nys-change` event, fired when a selection is committed. */\nexport type NysComboboxChangeEvent = CustomEvent<NysComboboxChangeDetail>;\n\n/**\n * `<nys-combobox>` is a form-enabled combo box combining text input with a filterable dropdown.\n *\n * Features:\n * - Type to filter options\n * - Keyboard navigation (Arrow keys, Enter, Escape)\n * - Mouse and keyboard interaction\n * - Clears non-selected text on blur\n * - Clear button when value is selected\n * - Integrates with forms via ElementInternals\n * - Supports native <option> and <optgroup> elements\n * - Accessible per W3C ARIA Authoring Practices\n *\n * @slot description - Optional custom description content below the label.\n * @slot default - Options (<option>, <optgroup>) to populate the dropdown\n *\n * @formControl value nys-change nys-input\n *\n * @fires {NysComboboxChangeEvent} nys-change - Fired when a selection is committed (option chosen or cleared). Detail: `{id, name, value}`.\n * @fires {NysComboboxInputEvent} nys-input - Fired on each keystroke while filtering. Detail: `{id, name, value, query}`. `value` is the committed value; `query` is the current filter text.\n * @fires {Event} nys-focus - Fired when the combobox gains focus.\n * @fires {Event} nys-blur - Fired when the combobox loses focus. Triggers validation.\n *\n * @usagedos\n * - Use when there are more than 15 options to choose from.\n * - Use when screen real estate is limited.\n * - Use when users can predict or recognize the value they're looking for.\n *\n * @usagedonts\n * - Use when the number of options is small. Use `<nys-select>` or `<nys-radiobutton>` instead.\n * - Use when options are unfamiliar to users and browsing the full list is necessary.\n *\n * @example Basic\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"cherry\">Cherry</option>\n *   <option value=\"date\">Date</option>\n *   <option value=\"elderberry\">Elderberry</option>\n *   <option value=\"fig\">Fig</option>\n *   <option value=\"grape\">Grape</option>\n *   <option value=\"honeydew\">Honeydew</option>\n *   <option value=\"kiwi\">Kiwi</option>\n *   <option value=\"lemon\">Lemon</option>\n *   <option value=\"mango\">Mango</option>\n *   <option value=\"nectarine\">Nectarine</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"papaya\">Papaya</option>\n *   <option value=\"quince\">Quince</option>\n *   <option value=\"raspberry\">Raspberry</option>\n *   <option value=\"strawberry\">Strawberry</option>\n *   <option value=\"tangerine\">Tangerine</option>\n *   <option value=\"watermelon\">Watermelon</option>\n * </nys-combobox>\n * ```\n *\n * @example Default Value\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" value=\"mango\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"mango\" selected>Mango</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Option Group\n * ```html\n * <nys-combobox label=\"Select a fruit\" description=\"Fruits organized by category\">\n *   <optgroup label=\"Citrus\">\n *     <option value=\"lemon\">Lemon</option>\n *     <option value=\"lime\">Lime</option>\n *     <option value=\"orange\">Orange</option>\n *     <option value=\"grapefruit\">Grapefruit</option>\n *     <option value=\"tangerine\">Tangerine</option>\n *   </optgroup>\n *   <optgroup label=\"Berries\">\n *     <option value=\"strawberry\">Strawberry</option>\n *     <option value=\"blueberry\">Blueberry</option>\n *     <option value=\"raspberry\">Raspberry</option>\n *     <option value=\"blackberry\">Blackberry</option>\n *     <option value=\"cranberry\">Cranberry</option>\n *   </optgroup>\n *   <optgroup label=\"Tropical\">\n *     <option value=\"mango\">Mango</option>\n *     <option value=\"pineapple\">Pineapple</option>\n *     <option value=\"papaya\">Papaya</option>\n *     <option value=\"coconut\">Coconut</option>\n *     <option value=\"passionfruit\">Passionfruit</option>\n *   </optgroup>\n *   <optgroup label=\"Stone Fruits\">\n *     <option value=\"peach\">Peach</option>\n *     <option value=\"plum\">Plum</option>\n *     <option value=\"cherry\">Cherry</option>\n *     <option value=\"apricot\">Apricot</option>\n *     <option value=\"nectarine\">Nectarine</option>\n *   </optgroup>\n * </nys-combobox>\n * ```\n *\n * @example Disabled\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" disabled>\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Required\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" required>\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Optional\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" optional>\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Width Medium\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" width=\"md\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Width Large\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" width=\"lg\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Description\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" description=\"Choose from the list of available fruits.\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Description Slot\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\">\n *   <label slot=\"description\">This is a description slot</label>\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Error Message\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" showError errorMessage=\"Please select a fruit\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"orange\">Orange</option>\n *   <option value=\"strawberry\">Strawberry</option>\n * </nys-combobox>\n * ```\n *\n * @example Disabled Options\n * ```html\n * <nys-combobox label=\"Select your favorite fruit\" description=\"Some fruits are out of season\">\n *   <option value=\"apple\">Apple</option>\n *   <option value=\"banana\">Banana</option>\n *   <option value=\"cherry\" disabled>Cherry (Out of season)</option>\n *   <option value=\"mango\">Mango</option>\n *   <option value=\"strawberry\" disabled>Strawberry (Out of season)</option>\n *   <option value=\"orange\">Orange</option>\n * </nys-combobox>\n * ```\n */\nexport class NysCombobox extends NysFormControlElement {\n  static styles = unsafeCSS(styles);\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Unique identifier. Auto-generated if not provided. */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /** Name for form submission. */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /** Visible label text. Required for accessibility. */\n  @property({ type: String }) label = \"\";\n\n  /** Helper text below label. Use slot for custom HTML. */\n  @property({ type: String }) description = \"\";\n\n  /** Current committed value: the selected option's value, not the typed filter text. */\n  @property({ type: String }) value = \"\";\n\n  /** Prevents interaction. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Marks as required. Shows \"Required\" flag and validates on blur. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Shows \"Optional\" flag. Use when most fields are required. */\n  @property({ type: Boolean, reflect: true }) optional = false;\n\n  /** Tooltip text shown on hover/focus of info icon. */\n  @property({ type: String }) tooltip = \"\";\n\n  /** Form `id` to associate with when the combobox is outside the form element. */\n  @property({ type: String, reflect: true }) form: string | null = null;\n\n  /**\n   * Input width: `md` (200px), `lg` (384px), `full` (100%, default).\n   * @default \"full\"\n   */\n  @property({ type: String, reflect: true }) width: \"md\" | \"lg\" | \"full\" =\n    \"full\";\n\n  /** Adjusts colors for dark backgrounds. */\n  @property({ type: Boolean, reflect: true }) inverted = false;\n\n  /** Shows error message when true. Set by validation or manually. */\n  @property({ type: Boolean, reflect: true }) showError = false;\n\n  /** Error message text. Shown only when `showError` is true. Never overwritten by internal validation. */\n  @property({ type: String }) errorMessage = \"\";\n\n  @state() private _isOpen = false;\n  @state() private _filterText = \"\";\n  @state() private _highlightedIndex = -1;\n  @state() private _options: ComboboxOption[] = [];\n  @state() private _filteredOptions: ComboboxOption[] = [];\n  @state() private _dropdownAbove = false;\n  @state() private _announcement = \"\";\n\n  @query(\"input\") private _input!: HTMLInputElement;\n  @query(\".nys-combobox__listbox\") private _listbox?: HTMLElement;\n\n  private _hasUserInteracted = false;\n  private _selectedLabel = \"\";\n  private _defaultValue = \"\";\n  private _hasResolvedSlottedValue = false;\n\n  /**\n   * Lifecycle methods\n   * --------------------------------------------------------------------------\n   * Form association, ElementInternals, and id generation are provided by\n   * NysFormControlElement (@nysds/internals).\n   */\n  connectedCallback() {\n    // super.connectedCallback() (NysFormControlElement) assigns an id when one\n    // is not provided and reflects default semantics.\n    super.connectedCallback();\n    this.addEventListener(\"invalid\", this._handleInvalid);\n    document.addEventListener(\"click\", this._handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"invalid\", this._handleInvalid);\n    document.removeEventListener(\"click\", this._handleDocumentClick);\n  }\n\n  firstUpdated() {\n    // Slotted options are read in `_handleSlotChange`, which the slot's\n    // `slotchange` event fires once its nodes are assigned. It also resolves an\n    // option marked `selected` into `value` and captures `_defaultValue`.\n    this._setValue();\n    this._defaultValue = this.value;\n  }\n\n  // Derive display state from `value` before rendering, not after, so Lit\n  // doesn't have to schedule a second update (see lit.dev/msg/change-in-update).\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has(\"value\")) {\n      const option = this._options.find((opt) => opt.value === this.value);\n      this._selectedLabel = option ? option.label : \"\";\n      this._filterText = this._selectedLabel;\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has(\"value\")) {\n      this._setValue();\n    }\n\n    // Re-sync ElementInternals: `required` can arrive as a late property\n    // write (e.g. a framework wrapper setting it post-hydration) with no\n    // accompanying `value` change, so the branch above alone wouldn't catch\n    // it. The `?required=${...}` template binding already keeps the native\n    // input's attribute in sync declaratively; without this, ElementInternals\n    // would still report valid, the native `invalid` event would never fire\n    // on submit, and showError would never flip even though the field is\n    // genuinely required and empty.\n    if (changedProperties.has(\"required\") && !changedProperties.has(\"value\")) {\n      this._manageRequire();\n    }\n\n    if (changedProperties.has(\"_isOpen\") && this._isOpen) {\n      // Positioning measures the rendered listbox, so it has to wait for this\n      // update to settle before it may flip `_dropdownAbove`.\n      this.updateComplete.then(() => {\n        this._positionDropdown();\n        this._scrollToHighlighted();\n      });\n    }\n  }\n\n  /**\n   * Slot handling\n   * --------------------------------------------------------------------------\n   */\n  private _handleSlotChange() {\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name=\"description\"])',\n    ) as HTMLSlotElement | null;\n\n    if (!slot) return;\n\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const options: ComboboxOption[] = [];\n    let markupSelected = \"\";\n\n    assignedElements.forEach((node) => {\n      if (node.tagName === \"OPTION\") {\n        const option = node as HTMLOptionElement;\n        options.push({\n          value: option.value,\n          label: option.textContent?.trim() || option.value,\n          disabled: option.disabled,\n        });\n        if (option.selected && !markupSelected) {\n          markupSelected = option.value;\n        }\n      } else if (node.tagName === \"OPTGROUP\") {\n        const group = node as HTMLOptGroupElement;\n        const groupLabel = group.label;\n\n        Array.from(group.children).forEach((child) => {\n          if (child.tagName === \"OPTION\") {\n            const option = child as HTMLOptionElement;\n            options.push({\n              value: option.value,\n              label: option.textContent?.trim() || option.value,\n              disabled: option.disabled || group.disabled,\n              group: groupLabel,\n            });\n            if (option.selected && !markupSelected) {\n              markupSelected = option.value;\n            }\n          }\n        });\n      }\n    });\n\n    this._options = options;\n    this._filteredOptions = options;\n\n    // The first time options arrive, adopt an option marked `selected` unless\n    // an explicit value was already set, and use the result as the reset baseline.\n    if (!this._hasResolvedSlottedValue) {\n      this._hasResolvedSlottedValue = true;\n\n      if (!this.value && markupSelected) {\n        this.value = markupSelected;\n      }\n      this._defaultValue = this.value;\n    }\n\n    // Set initial display text if value exists\n    if (this.value) {\n      const option = this._options.find((opt) => opt.value === this.value);\n      if (option) {\n        this._selectedLabel = option.label;\n        this._filterText = option.label;\n      }\n    }\n  }\n\n  /**\n   * Form Integration\n   * --------------------------------------------------------------------------\n   */\n  private _setValue() {\n    this.setFormValue(this.value);\n    this._manageRequire();\n  }\n\n  private _manageRequire() {\n    const isInvalid =\n      this.required && (!this.value || this.value?.trim() === \"\");\n\n    if (isInvalid) {\n      this.internalValidationMessage = \"This field is required\";\n      this.setValidityFromState(\n        { valueMissing: true },\n        this.resolvedErrorMessage(),\n        this._input,\n      );\n    } else {\n      this.internalValidationMessage = \"\";\n      this.clearValidity();\n      this._hasUserInteracted = false;\n    }\n  }\n\n  private _setValidityMessage(message: string = \"\") {\n    this.showError = !!message;\n    // Store the component's own validation text; a consumer-supplied\n    // errorMessage always wins via resolvedErrorMessage().\n    this.internalValidationMessage = message;\n\n    if (message) {\n      this.setValidityFromState(\n        { customError: true },\n        this.resolvedErrorMessage(),\n        this._input,\n      );\n    } else {\n      this.clearValidity();\n    }\n  }\n\n  private _validate() {\n    if (!this._input) return;\n\n    const validity = this._input.validity;\n    let message = \"\";\n\n    const isInvalid =\n      this._input &&\n      this.value &&\n      !this._options.some((opt) => opt.value === this.value);\n\n    if (validity.valueMissing || isInvalid) {\n      message = \"This field is required\";\n    } else {\n      message = this._input.validationMessage;\n    }\n\n    this._setValidityMessage(message);\n  }\n\n  formResetCallback() {\n    this.value = this._defaultValue;\n    this._filterText = this._defaultValue\n      ? (this._options.find((opt) => opt.value === this._defaultValue)?.label ??\n        \"\")\n      : \"\";\n    this._selectedLabel = this._filterText;\n\n    if (this._input) {\n      this._input.value = this._filterText;\n    }\n\n    this.setFormValue(this.value);\n\n    // Reset validation UI. Clears only the component's own validation text;\n    // a consumer-supplied errorMessage is never touched.\n    this.showError = false;\n    this.internalValidationMessage = \"\";\n    this.clearValidity();\n\n    this.requestUpdate();\n  }\n  checkValidity(): boolean {\n    return this._input ? this._input.checkValidity() : true;\n  }\n\n  private _handleInvalid(event: Event) {\n    event.preventDefault();\n    this._hasUserInteracted = true;\n    this._validate();\n\n    if (this._input) {\n      const form = this.internals?.form;\n      if (form) {\n        const elements = Array.from(form.elements) as Array<\n          HTMLElement & { checkValidity?: () => boolean }\n        >;\n        const firstInvalidElement = elements.find(\n          (element) =>\n            typeof element.checkValidity === \"function\" &&\n            !element.checkValidity(),\n        );\n        if (firstInvalidElement === this) {\n          this._input.focus();\n        }\n      } else {\n        this._input.focus();\n      }\n    }\n  }\n\n  /**\n   * Dropdown positioning\n   * --------------------------------------------------------------------------\n   */\n  private _positionDropdown() {\n    if (!this._listbox || !this._input) return;\n\n    const inputRect = this._input.getBoundingClientRect();\n    const listboxHeight = this._listbox.offsetHeight;\n    const viewportHeight = window.innerHeight;\n    const spaceBelow = viewportHeight - inputRect.bottom;\n    const spaceAbove = inputRect.top;\n\n    // Show above if not enough space below and more space above\n    this._dropdownAbove = spaceBelow < listboxHeight && spaceAbove > spaceBelow;\n  }\n\n  /**\n   * Filtering\n   * --------------------------------------------------------------------------\n   */\n  private _filterOptions(searchText: string) {\n    if (!searchText) {\n      this._filteredOptions = this._options;\n      return;\n    }\n\n    const search = searchText.toLowerCase();\n    this._filteredOptions = this._options.filter((option) =>\n      option.label.toLowerCase().includes(search),\n    );\n  }\n\n  /**\n   * Keyboard navigation\n   * --------------------------------------------------------------------------\n   */\n  private _scrollToHighlighted() {\n    if (!this._listbox || this._highlightedIndex < 0) return;\n\n    const highlighted = this._listbox.querySelector(\n      `[data-index=\"${this._highlightedIndex}\"]`,\n    ) as HTMLElement;\n\n    if (highlighted) {\n      highlighted.scrollIntoView({ block: \"nearest\" });\n    }\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        if (!this._isOpen) {\n          this._openDropdown();\n        } else {\n          this._moveHighlight(1);\n        }\n        break;\n\n      case \"ArrowUp\":\n        event.preventDefault();\n        if (!this._isOpen) {\n          this._openDropdown();\n        } else {\n          this._moveHighlight(-1);\n        }\n        break;\n\n      case \"Enter\":\n        event.preventDefault();\n        if (this._isOpen && this._highlightedIndex >= 0) {\n          this._selectOption(this._filteredOptions[this._highlightedIndex]);\n        }\n        break;\n\n      case \"Escape\":\n        event.preventDefault();\n        this._closeDropdown();\n        this._filterText = this._selectedLabel;\n        break;\n\n      case \"Tab\":\n        if (this._isOpen) {\n          this._closeDropdown();\n          this._filterText = this._selectedLabel;\n        }\n        break;\n    }\n  }\n\n  private _moveHighlight(direction: number) {\n    const enabledOptions = this._filteredOptions.filter((opt) => !opt.disabled);\n    if (enabledOptions.length === 0) return;\n\n    let newIndex = this._highlightedIndex + direction;\n\n    // Wrap around\n    if (newIndex < 0) {\n      newIndex = this._filteredOptions.length - 1;\n    } else if (newIndex >= this._filteredOptions.length) {\n      newIndex = 0;\n    }\n\n    // Skip disabled options\n    while (this._filteredOptions[newIndex]?.disabled) {\n      newIndex += direction;\n      if (newIndex < 0) newIndex = this._filteredOptions.length - 1;\n      if (newIndex >= this._filteredOptions.length) newIndex = 0;\n    }\n\n    this._highlightedIndex = newIndex;\n    this._scrollToHighlighted();\n\n    const option = this._filteredOptions[newIndex];\n    const prevOption = this._filteredOptions[newIndex - direction];\n    const enabledFiltered = this._filteredOptions.filter(\n      (opt) => !opt.disabled,\n    );\n    const position =\n      enabledFiltered.findIndex((opt) => opt.value === option.value) + 1;\n    const isSelected = option.value === this.value ? \"selected\" : \"unselected\";\n    const groupChanged = option.group && option.group !== prevOption?.group;\n    const groupPrefix = groupChanged ? `${option.group}, ` : \"\";\n    this._announcement = `${groupPrefix} ${option.label} ${position} of ${enabledFiltered.length}, ${isSelected}`;\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n  private _handleInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this._filterText = input.value;\n    this._filterOptions(this._filterText);\n\n    if (!this._isOpen) {\n      this._openDropdown();\n    }\n\n    this._highlightedIndex = 0;\n\n    const count = this._filteredOptions.filter((opt) => !opt.disabled).length;\n    this._announcement =\n      count > 0 ? `${count} options available` : \"No results found\";\n\n    if (this._hasUserInteracted) {\n      this._validate();\n    }\n\n    // `value` carries the committed value (empty until an option is chosen);\n    // `query` carries the raw filter text the user has typed.\n    dispatchNysEvent<NysComboboxInputDetail>(this, \"nys-input\", {\n      id: this.id,\n      name: this.name,\n      value: this.value,\n      query: this._filterText,\n    });\n  }\n\n  private _handleFocus() {\n    dispatchNysFocusBlur(this, \"focus\");\n  }\n\n  private _handleBlur(event: FocusEvent) {\n    // Check if focus moved to the listbox\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (relatedTarget && this._listbox?.contains(relatedTarget)) {\n      return;\n    }\n\n    // If no valid selection, clear the input\n    if (!this.value || this._filterText !== this._selectedLabel) {\n      this._filterText = this._selectedLabel;\n      this._filterOptions(\"\");\n    }\n\n    this._closeDropdown();\n\n    if (!this._hasUserInteracted) {\n      this._hasUserInteracted = true;\n    }\n    this._validate();\n\n    dispatchNysFocusBlur(this, \"blur\");\n  }\n\n  private _handleDocumentClick = (event: MouseEvent) => {\n    // Don't close if click is on the combobox host element or inside shadow DOM\n    if (\n      event.target === this ||\n      this.shadowRoot?.contains(event.target as Node)\n    ) {\n      return;\n    }\n    this._closeDropdown();\n  };\n\n  private _handleIconClick() {\n    if (this.disabled) return;\n\n    if (this._isOpen) {\n      this._closeDropdown();\n    } else {\n      this._input.focus();\n      this._openDropdown();\n    }\n  }\n\n  private _handleClearClick(event: Event) {\n    event.stopPropagation();\n    this.value = \"\";\n    this._filterText = \"\";\n    this._selectedLabel = \"\";\n    this._filterOptions(\"\");\n    this.setFormValue(\"\");\n    this._closeDropdown();\n    this._input.focus();\n\n    this._handleChange();\n  }\n\n  private _handleOptionClick(option: ComboboxOption) {\n    if (option.disabled) return;\n    this._selectOption(option);\n  }\n\n  private _handleOptionMouseEnter(index: number) {\n    this._highlightedIndex = index;\n  }\n\n  private _selectOption(option: ComboboxOption) {\n    this.value = option.value;\n    this._selectedLabel = option.label;\n    this._filterText = option.label;\n    this.setFormValue(this.value);\n    this._input.focus();\n    this._closeDropdown();\n    this._filterOptions(\"\");\n\n    this._setValidityMessage(\"\");\n\n    if (this._hasUserInteracted) {\n      this._validate();\n    }\n\n    this._handleChange();\n  }\n\n  private _handleChange() {\n    dispatchNysEvent<NysComboboxChangeDetail>(this, \"nys-change\", {\n      id: this.id,\n      name: this.name,\n      value: this.value,\n    });\n  }\n\n  private _openDropdown() {\n    this._isOpen = true;\n    this._highlightedIndex = this._filteredOptions.findIndex(\n      (opt) => opt.value === this.value,\n    );\n    if (this._highlightedIndex < 0) this._highlightedIndex = 0;\n  }\n\n  private _closeDropdown() {\n    this._isOpen = false;\n    this._highlightedIndex = -1;\n  }\n\n  /**\n   * Render helpers\n   * --------------------------------------------------------------------------\n   */\n  private _renderOptions() {\n    let currentGroup = \"\";\n    const elements: any[] = [];\n\n    this._filteredOptions.forEach((option, index) => {\n      if (option.group && option.group !== currentGroup) {\n        currentGroup = option.group;\n        elements.push(html`\n          <div class=\"nys-combobox__optgroup\" role=\"presentation\">\n            ${option.group}\n          </div>\n        `);\n      }\n\n      const isFocused = index === this._highlightedIndex;\n      const isSelected = option.value === this.value;\n\n      elements.push(html`\n        <div\n          class=\"nys-combobox__option ${isFocused\n            ? \"nys-combobox__option--focused\"\n            : \"\"} ${isSelected ? \"nys-combobox__option--selected\" : \"\"}\"\n          role=\"option\"\n          id=\"${this.id}--option-${index}\"\n          data-index=\"${index}\"\n          aria-selected=\"${isSelected}\"\n          aria-disabled=\"${option.disabled || false}\"\n          ?disabled=${option.disabled}\n          @click=${() => this._handleOptionClick(option)}\n          @mouseenter=${() => this._handleOptionMouseEnter(index)}\n        >\n          ${option.label}\n        </div>\n      `);\n    });\n\n    if (elements.length === 0) {\n      return html`\n        <div class=\"nys-combobox__no-results\" role=\"option\">\n          No results found\n        </div>\n      `;\n    }\n\n    return elements;\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-combobox\">\n        <nys-label\n          id=\"${this.id}--label\"\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\n          class=\"nys-combobox__container ${this._isOpen\n            ? \"nys-combobox__container--open\"\n            : \"\"}\"\n        >\n          <div class=\"nys-combobox__input-wrapper\">\n            <input\n              class=\"nys-combobox__input\"\n              type=\"text\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded=\"${this._isOpen}\"\n              aria-controls=\"${this.id}--listbox\"\n              aria-activedescendant=\"${this._highlightedIndex >= 0\n                ? `${this.id}--option-${this._highlightedIndex}`\n                : \"\"}\"\n              name=${this.name}\n              id=${this.id + \"--native\"}\n              ?disabled=${this.disabled}\n              ?required=${this.required}\n              aria-required=${this.required}\n              aria-disabled=\"${this.disabled}\"\n              aria-labelledby=${ifDefined(\n                this.label ? this.id + \"--label\" : undefined,\n              )}\n              aria-label=${ifDefined(\n                !this.label && this.description ? this.description : undefined,\n              )}\n              aria-invalid=${this.showError ? \"true\" : \"false\"}\n              aria-errormessage=${this.id + \"--error\"}\n              aria-describedby=${ifDefined(\n                this.showError ? this.id + \"--error\" : undefined,\n              )}\n              .value=${this._filterText}\n              form=${ifDefined(this.form || undefined)}\n              @input=${this._handleInput}\n              @focus=\"${this._handleFocus}\"\n              @blur=\"${this._handleBlur}\"\n              @keydown=\"${this._handleKeyDown}\"\n            />\n            <div class=\"nys-combobox__buttons\">\n              ${this.value\n                ? html`\n                    <nys-button\n                      class=\"nys-combobox__clear\"\n                      label=\"Clear selection\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      circle\n                      @nys-click=${this._handleClearClick}\n                      ?disabled=${this.disabled}\n                    >\n                      <nys-icon\n                        slot=\"suffix-icon\"\n                        size=\"20\"\n                        name=\"close\"\n                      ></nys-icon>\n                    </nys-button>\n                  `\n                : \"\"}\n              <nys-button\n                class=\"nys-combobox__chevron\"\n                label=\"Toggle dropdown\"\n                variant=\"ghost\"\n                size=\"sm\"\n                circle\n                @nys-click=${this._handleIconClick}\n                ?disabled=${this.disabled}\n              >\n                <nys-icon\n                  slot=\"suffix-icon\"\n                  size=\"20\"\n                  name=\"chevron_down\"\n                ></nys-icon>\n              </nys-button>\n            </div>\n          </div>\n          ${this._isOpen\n            ? html`\n                <div\n                  class=\"nys-combobox__listbox ${this._dropdownAbove\n                    ? \"nys-combobox__listbox--above\"\n                    : \"\"}\"\n                  id=\"${this.id}--listbox\"\n                  role=\"listbox\"\n                  tabindex=\"-1\"\n                >\n                  ${this._renderOptions()}\n                </div>\n              `\n            : \"\"}\n        </div>\n        <slot\n          style=\"display: none;\"\n          @slotchange=${this._handleSlotChange}\n        ></slot>\n        <nys-errormessage\n          id=${this.id + \"--error\"}\n          ?showError=${this.showError}\n          errorMessage=${this.resolvedErrorMessage()}\n        ></nys-errormessage>\n        <div\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          style=\"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;\"\n        >\n          ${this._announcement}\n        </div>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-combobox\")) {\n  customElements.define(\"nys-combobox\", NysCombobox);\n}\n"],"names":["LitElement","unsafeCSS","html","property","state","query","ifDefined","y","f","e","N","t","I","h","b","n","i","r","a","v","C","s","l","o","O","u","_NysCombobox","NysFormControlElement","event","changedProperties","option","opt","slot","assignedElements","options","markupSelected","node","group","groupLabel","child","message","validity","isInvalid","form","element","inputRect","listboxHeight","spaceBelow","spaceAbove","searchText","search","highlighted","direction","newIndex","prevOption","enabledFiltered","position","isSelected","groupPrefix","input","count","dispatchNysEvent","dispatchNysFocusBlur","relatedTarget","index","currentGroup","elements","isFocused","styles","NysCombobox","__decorateClass"],"mappings":"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"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@nysds/nys-combobox",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "The Combobox component from the NYS Design System.",
   "module": "dist/nys-combobox.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/nys-combobox.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/nys-combobox.js"
     }
   },
   "type": "module",
@@ -23,13 +23,13 @@
     "lit-analyze": "lit-analyzer 'src/**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-label": "^1.21.0",
-    "@nysds/nys-errormessage": "^1.21.0",
-    "@nysds/nys-icon": "^1.21.0",
-    "@nysds/nys-button": "^1.21.0"
+    "@nysds/nys-label": "^1.22.0",
+    "@nysds/nys-errormessage": "^1.22.0",
+    "@nysds/nys-icon": "^1.22.0",
+    "@nysds/nys-button": "^1.22.0"
   },
   "devDependencies": {
-    "@nysds/internals": "^1.21.0",
+    "@nysds/internals": "^1.22.0",
     "lit": "^3.3.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"