@nysds/nys-combobox 1.21.1 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/nys-combobox.d.ts +51 -6
  2. package/dist/nys-combobox.js +170 -152
  3. package/dist/nys-combobox.js.map +1 -1
  4. package/package.json +8 -8
package/dist/nys-combobox.d.ts CHANGED
@@ -3,6 +3,25 @@ import "@nysds/nys-label";
3
3
  import "@nysds/nys-errormessage";
4
4
  import "@nysds/nys-icon";
5
5
  import "@nysds/nys-button";
6
+ /** Detail payload for the `nys-input` event. */
7
+ export interface NysComboboxInputDetail {
8
+ id: string;
9
+ name: string;
10
+ /** The committed value (the selected option's value), not the filter text. */
11
+ value: string;
12
+ /** The raw filter text the user has typed. */
13
+ query: string;
14
+ }
15
+ /** The `nys-input` event, fired on each keystroke while filtering. */
16
+ export type NysComboboxInputEvent = CustomEvent<NysComboboxInputDetail>;
17
+ /** Detail payload for the `nys-change` event. */
18
+ export interface NysComboboxChangeDetail {
19
+ id: string;
20
+ name: string;
21
+ value: string;
22
+ }
23
+ /** The `nys-change` event, fired when a selection is committed. */
24
+ export type NysComboboxChangeEvent = CustomEvent<NysComboboxChangeDetail>;
6
25
  /**
7
26
  * `<nys-combobox>` is a form-enabled combo box combining text input with a filterable dropdown.
8
27
  *
@@ -19,11 +38,21 @@ import "@nysds/nys-button";
19
38
  * @slot description - Optional custom description content below the label.
20
39
  * @slot default - Options (<option>, <optgroup>) to populate the dropdown
21
40
  *
22
- * @fires nys-change - Fired when selection changes. Detail: `{ id, value }`.
23
- * @fires nys-input - Fired on input change. Detail: `{ id, value }`.
24
- * @fires nys-focus - Fired when combobox receives focus.
25
- * @fires nys-blur - Fired when combobox loses focus.
41
+ * @formControl value nys-change nys-input
42
+ *
43
+ * @fires {NysComboboxChangeEvent} nys-change - Fired when a selection is committed (option chosen or cleared). Detail: `{id, name, value}`.
44
+ * @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.
45
+ * @fires {Event} nys-focus - Fired when the combobox gains focus.
46
+ * @fires {Event} nys-blur - Fired when the combobox loses focus. Triggers validation.
47
+ *
48
+ * @usagedos
49
+ * - Use when there are more than 15 options to choose from.
50
+ * - Use when screen real estate is limited.
51
+ * - Use when users can predict or recognize the value they're looking for.
26
52
  *
53
+ * @usagedonts
54
+ * - Use when the number of options is small. Use `<nys-select>` or `<nys-radiobutton>` instead.
55
+ * - Use when options are unfamiliar to users and browsing the full list is necessary.
27
56
  *
28
57
  * @example Basic
29
58
  * ```html
@@ -153,7 +182,7 @@ import "@nysds/nys-button";
153
182
  * <option value="orange">Orange</option>
154
183
  * <option value="strawberry">Strawberry</option>
155
184
  * </nys-combobox>
156
- * ```d
185
+ * ```
157
186
  *
158
187
  * @example Description Slot
159
188
  * ```html
@@ -198,19 +227,36 @@ export declare class NysCombobox extends NysFormControlElement {
198
227
  serializable?: boolean;
199
228
  slotAssignment?: SlotAssignmentMode;
200
229
  };
230
+ /** Unique identifier. Auto-generated if not provided. */
201
231
  id: string;
232
+ /** Name for form submission. */
202
233
  name: string;
234
+ /** Visible label text. Required for accessibility. */
203
235
  label: string;
236
+ /** Helper text below label. Use slot for custom HTML. */
204
237
  description: string;
238
+ /** Current committed value: the selected option's value, not the typed filter text. */
205
239
  value: string;
240
+ /** Prevents interaction. */
206
241
  disabled: boolean;
242
+ /** Marks as required. Shows "Required" flag and validates on blur. */
207
243
  required: boolean;
244
+ /** Shows "Optional" flag. Use when most fields are required. */
208
245
  optional: boolean;
246
+ /** Tooltip text shown on hover/focus of info icon. */
209
247
  tooltip: string;
248
+ /** Form `id` to associate with when the combobox is outside the form element. */
210
249
  form: string | null;
250
+ /**
251
+ * Input width: `md` (200px), `lg` (384px), `full` (100%, default).
252
+ * @default "full"
253
+ */
211
254
  width: "md" | "lg" | "full";
255
+ /** Adjusts colors for dark backgrounds. */
212
256
  inverted: boolean;
257
+ /** Shows error message when true. Set by validation or manually. */
213
258
  showError: boolean;
259
+ /** Error message text. Shown only when `showError` is true. Never overwritten by internal validation. */
214
260
  errorMessage: string;
215
261
  private _isOpen;
216
262
  private _filterText;
@@ -221,7 +267,6 @@ export declare class NysCombobox extends NysFormControlElement {
221
267
  private _announcement;
222
268
  private _input;
223
269
  private _listbox?;
224
- private _originalErrorMessage;
225
270
  private _hasUserInteracted;
226
271
  private _selectedLabel;
227
272
  private _defaultValue;
package/dist/nys-combobox.js CHANGED
@@ -1,5 +1,5 @@
1
- import { LitElement as v, unsafeCSS as g, html as u } from "lit";
2
- import { property as a, state as p, query as m } from "lit/decorators.js";
1
+ import { LitElement as x, unsafeCSS as k, html as p } from "lit";
2
+ import { property as d, state as u, query as g } from "lit/decorators.js";
3
3
  import { ifDefined as y } from "lit/directives/if-defined.js";
4
4
  import "@nysds/nys-label";
5
5
  import "@nysds/nys-errormessage";
@@ -10,36 +10,46 @@ import "@nysds/nys-button";
10
10
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
11
11
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
12
12
  *
13
- * Combobox Component v1.21.1
13
+ * Combobox Component v1.22.0
14
14
  * Part of the New York State Design System
15
15
  * Repository: https://github.com/its-hcd/nysds
16
16
  * License: MIT
17
17
  */
18
18
  /*!
19
- * New York State Design System v1.21.1
19
+ * New York State Design System v1.22.0
20
20
  * Description: A design system for New York State's digital products.
21
21
  * Repository: https://github.com/its-hcd/nysds
22
22
  * License: MIT
23
23
  */
24
- let w = 0;
25
- function k(d) {
26
- return `${d}-${Date.now()}-${w++}`;
24
+ let $ = 0;
25
+ function O(l) {
26
+ return `${l}-${Date.now()}-${$++}`;
27
27
  }
28
- const $ = (d) => {
29
- class o extends d {
28
+ function v(l, o, s) {
29
+ l.dispatchEvent(
30
+ new CustomEvent(o, { detail: s, bubbles: !0, composed: !0 })
31
+ );
32
+ }
33
+ function m(l, o) {
34
+ l.dispatchEvent(
35
+ new Event(`nys-${o}`, { bubbles: !0, composed: !0 })
36
+ );
37
+ }
38
+ const V = (l) => {
39
+ class o extends l {
30
40
  get idPrefix() {
31
41
  return this.localName || "nys-element";
32
42
  }
33
43
  ensureId() {
34
- this.id || (this.id = k(this.idPrefix));
44
+ this.id || (this.id = O(this.idPrefix));
35
45
  }
36
46
  connectedCallback() {
37
47
  super.connectedCallback(), this.ensureId();
38
48
  }
39
49
  }
40
50
  return o;
41
- }, O = (d) => {
42
- class o extends $(d) {
51
+ }, I = (l) => {
52
+ class o extends V(l) {
43
53
  constructor() {
44
54
  super(...arguments), this.__internals = null;
45
55
  }
@@ -62,8 +72,8 @@ const $ = (d) => {
62
72
  i[e] = t;
63
73
  return;
64
74
  }
65
- const r = I(e);
66
- t === null ? this.removeAttribute(r) : this.setAttribute(r, t);
75
+ const n = C(e);
76
+ t === null ? this.removeAttribute(n) : this.setAttribute(n, t);
67
77
  }
68
78
  reflectDefaultSemantics() {
69
79
  const e = this.defaultRole;
@@ -75,21 +85,33 @@ const $ = (d) => {
75
85
  }
76
86
  return o;
77
87
  };
78
- function I(d) {
79
- if (d === "role") return "role";
80
- const o = d.replace(/^aria/, "");
88
+ function C(l) {
89
+ if (l === "role") return "role";
90
+ const o = l.replace(/^aria/, "");
81
91
  return "aria-" + o.charAt(0).toLowerCase() + o.slice(1);
82
92
  }
83
- const V = (d) => {
84
- const o = class extends O(d) {
93
+ const E = (l) => {
94
+ const o = class extends I(l) {
95
+ constructor() {
96
+ super(...arguments), this.__internalValidationMessage = "";
97
+ }
98
+ get internalValidationMessage() {
99
+ return this.__internalValidationMessage;
100
+ }
101
+ set internalValidationMessage(t) {
102
+ t !== this.__internalValidationMessage && (this.__internalValidationMessage = t, this.requestUpdate("internalValidationMessage"));
103
+ }
104
+ resolvedErrorMessage() {
105
+ return this.errorMessage || this.internalValidationMessage;
106
+ }
85
107
  setFormValue(t) {
86
108
  this.internals?.setFormValue(t ?? null);
87
109
  }
88
- setValidityFromState(t, i, r) {
110
+ setValidityFromState(t, i, n) {
89
111
  const c = this.internals;
90
112
  if (!c) return;
91
113
  const h = Object.values(t).some(Boolean);
92
- h ? c.setValidity(t, i ?? "Invalid value", r) : c.setValidity({}), this.setHostAria("ariaInvalid", h ? "true" : "false");
114
+ h ? c.setValidity(t, i ?? "Invalid value", n) : c.setValidity({}), this.setHostAria("ariaInvalid", h ? "true" : "false");
93
115
  }
94
116
  clearValidity() {
95
117
  this.internals?.setValidity({}), this.setHostAria("ariaInvalid", "false");
@@ -101,19 +123,19 @@ const V = (d) => {
101
123
  return this.internals?.reportValidity() ?? !0;
102
124
  }
103
125
  formResetCallback() {
104
- this.clearValidity();
126
+ this.internalValidationMessage = "", this.clearValidity();
105
127
  }
106
128
  };
107
129
  return o.formAssociated = !0, o;
108
- }, E = /* @__PURE__ */ V(v), 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)}';
109
- var D = Object.defineProperty, l = (d, o, s, e) => {
110
- for (var t = void 0, i = d.length - 1, r; i >= 0; i--)
111
- (r = d[i]) && (t = r(o, s, t) || t);
112
- return t && D(o, s, t), t;
130
+ }, 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)}';
131
+ var T = Object.defineProperty, a = (l, o, s, e) => {
132
+ for (var t = void 0, i = l.length - 1, n; i >= 0; i--)
133
+ (n = l[i]) && (t = n(o, s, t) || t);
134
+ return t && T(o, s, t), t;
113
135
  };
114
- const f = class f extends E {
136
+ const f = class f extends D {
115
137
  constructor() {
116
- 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) => {
138
+ 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) => {
117
139
  o.target === this || this.shadowRoot?.contains(o.target) || this._closeDropdown();
118
140
  };
119
141
  }
@@ -124,7 +146,7 @@ const f = class f extends E {
124
146
  * NysFormControlElement (@nysds/internals).
125
147
  */
126
148
  connectedCallback() {
127
- super.connectedCallback(), this._originalErrorMessage = this.errorMessage ?? "", this.addEventListener("invalid", this._handleInvalid), document.addEventListener("click", this._handleDocumentClick);
149
+ super.connectedCallback(), this.addEventListener("invalid", this._handleInvalid), document.addEventListener("click", this._handleDocumentClick);
128
150
  }
129
151
  disconnectedCallback() {
130
152
  super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid), document.removeEventListener("click", this._handleDocumentClick);
@@ -141,7 +163,7 @@ const f = class f extends E {
141
163
  }
142
164
  }
143
165
  updated(o) {
144
- o.has("value") && this._setValue(), o.has("_isOpen") && this._isOpen && this.updateComplete.then(() => {
166
+ o.has("value") && this._setValue(), o.has("required") && !o.has("value") && this._manageRequire(), o.has("_isOpen") && this._isOpen && this.updateComplete.then(() => {
145
167
  this._positionDropdown(), this._scrollToHighlighted();
146
168
  });
147
169
  }
@@ -158,28 +180,28 @@ const f = class f extends E {
158
180
  let t = "";
159
181
  if (s.forEach((i) => {
160
182
  if (i.tagName === "OPTION") {
161
- const r = i;
183
+ const n = i;
162
184
  e.push({
163
- value: r.value,
164
- label: r.textContent?.trim() || r.value,
165
- disabled: r.disabled
166
- }), r.selected && !t && (t = r.value);
185
+ value: n.value,
186
+ label: n.textContent?.trim() || n.value,
187
+ disabled: n.disabled
188
+ }), n.selected && !t && (t = n.value);
167
189
  } else if (i.tagName === "OPTGROUP") {
168
- const r = i, c = r.label;
169
- Array.from(r.children).forEach((h) => {
190
+ const n = i, c = n.label;
191
+ Array.from(n.children).forEach((h) => {
170
192
  if (h.tagName === "OPTION") {
171
193
  const b = h;
172
194
  e.push({
173
195
  value: b.value,
174
196
  label: b.textContent?.trim() || b.value,
175
- disabled: b.disabled || r.disabled,
197
+ disabled: b.disabled || n.disabled,
176
198
  group: c
177
199
  }), b.selected && !t && (t = b.value);
178
200
  }
179
201
  });
180
202
  }
181
203
  }), this._options = e, this._filteredOptions = e, this._hasResolvedSlottedValue || (this._hasResolvedSlottedValue = !0, !this.value && t && (this.value = t), this._defaultValue = this.value), this.value) {
182
- const i = this._options.find((r) => r.value === this.value);
204
+ const i = this._options.find((n) => n.value === this.value);
183
205
  i && (this._selectedLabel = i.label, this._filterText = i.label);
184
206
  }
185
207
  }
@@ -191,13 +213,16 @@ const f = class f extends E {
191
213
  this.setFormValue(this.value), this._manageRequire();
192
214
  }
193
215
  _manageRequire() {
194
- const o = this.errorMessage || "This field is required";
195
- this.required && (!this.value || this.value?.trim() === "") ? this.setValidityFromState({ valueMissing: !0 }, o, this._input) : (this.clearValidity(), this._hasUserInteracted = !1);
216
+ this.required && (!this.value || this.value?.trim() === "") ? (this.internalValidationMessage = "This field is required", this.setValidityFromState(
217
+ { valueMissing: !0 },
218
+ this.resolvedErrorMessage(),
219
+ this._input
220
+ )) : (this.internalValidationMessage = "", this.clearValidity(), this._hasUserInteracted = !1);
196
221
  }
197
222
  _setValidityMessage(o = "") {
198
- this.showError = !!o, this._originalErrorMessage?.trim() && o !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = o, o ? this.setValidityFromState(
223
+ this.showError = !!o, this.internalValidationMessage = o, o ? this.setValidityFromState(
199
224
  { customError: !0 },
200
- this.errorMessage,
225
+ this.resolvedErrorMessage(),
201
226
  this._input
202
227
  ) : this.clearValidity();
203
228
  }
@@ -209,7 +234,7 @@ const f = class f extends E {
209
234
  o.valueMissing || e ? s = "This field is required" : s = this._input.validationMessage, this._setValidityMessage(s);
210
235
  }
211
236
  formResetCallback() {
212
- 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();
237
+ 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();
213
238
  }
214
239
  checkValidity() {
215
240
  return this._input ? this._input.checkValidity() : !0;
@@ -281,10 +306,10 @@ const f = class f extends E {
281
306
  for (e < 0 ? e = this._filteredOptions.length - 1 : e >= this._filteredOptions.length && (e = 0); this._filteredOptions[e]?.disabled; )
282
307
  e += o, e < 0 && (e = this._filteredOptions.length - 1), e >= this._filteredOptions.length && (e = 0);
283
308
  this._highlightedIndex = e, this._scrollToHighlighted();
284
- const t = this._filteredOptions[e], i = this._filteredOptions[e - o], r = this._filteredOptions.filter(
309
+ const t = this._filteredOptions[e], i = this._filteredOptions[e - o], n = this._filteredOptions.filter(
285
310
  (_) => !_.disabled
286
- ), c = r.findIndex((_) => _.value === t.value) + 1, h = t.value === this.value ? "selected" : "unselected", x = t.group && t.group !== i?.group ? `${t.group}, ` : "";
287
- this._announcement = `${x} ${t.label} ${c} of ${r.length}, ${h}`;
311
+ ), c = n.findIndex((_) => _.value === t.value) + 1, h = t.value === this.value ? "selected" : "unselected", w = t.group && t.group !== i?.group ? `${t.group}, ` : "";
312
+ this._announcement = `${w} ${t.label} ${c} of ${n.length}, ${h}`;
288
313
  }
289
314
  /**
290
315
  * Event Handlers
@@ -294,24 +319,19 @@ const f = class f extends E {
294
319
  const s = o.target;
295
320
  this._filterText = s.value, this._filterOptions(this._filterText), this._isOpen || this._openDropdown(), this._highlightedIndex = 0;
296
321
  const e = this._filteredOptions.filter((t) => !t.disabled).length;
297
- this._announcement = e > 0 ? `${e} options available` : "No results found", this._hasUserInteracted && this._validate(), this.dispatchEvent(
298
- new CustomEvent("nys-input", {
299
- detail: { id: this.id, value: this._filterText },
300
- bubbles: !0,
301
- composed: !0
302
- })
303
- );
322
+ this._announcement = e > 0 ? `${e} options available` : "No results found", this._hasUserInteracted && this._validate(), v(this, "nys-input", {
323
+ id: this.id,
324
+ name: this.name,
325
+ value: this.value,
326
+ query: this._filterText
327
+ });
304
328
  }
305
329
  _handleFocus() {
306
- this.dispatchEvent(
307
- new Event("nys-focus", { bubbles: !0, composed: !0 })
308
- );
330
+ m(this, "focus");
309
331
  }
310
332
  _handleBlur(o) {
311
333
  const s = o.relatedTarget;
312
- 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(
313
- new Event("nys-blur", { bubbles: !0, composed: !0 })
314
- ));
334
+ 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"));
315
335
  }
316
336
  _handleIconClick() {
317
337
  this.disabled || (this._isOpen ? this._closeDropdown() : (this._input.focus(), this._openDropdown()));
@@ -329,13 +349,11 @@ const f = class f extends E {
329
349
  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();
330
350
  }
331
351
  _handleChange() {
332
- this.dispatchEvent(
333
- new CustomEvent("nys-change", {
334
- detail: { id: this.id, value: this.value },
335
- bubbles: !0,
336
- composed: !0
337
- })
338
- );
352
+ v(this, "nys-change", {
353
+ id: this.id,
354
+ name: this.name,
355
+ value: this.value
356
+ });
339
357
  }
340
358
  _openDropdown() {
341
359
  this._isOpen = !0, this._highlightedIndex = this._filteredOptions.findIndex(
@@ -353,19 +371,19 @@ const f = class f extends E {
353
371
  let o = "";
354
372
  const s = [];
355
373
  return this._filteredOptions.forEach((e, t) => {
356
- e.group && e.group !== o && (o = e.group, s.push(u`
374
+ e.group && e.group !== o && (o = e.group, s.push(p`
357
375
  <div class="nys-combobox__optgroup" role="presentation">
358
376
  ${e.group}
359
377
  </div>
360
378
  `));
361
- const i = t === this._highlightedIndex, r = e.value === this.value;
362
- s.push(u`
379
+ const i = t === this._highlightedIndex, n = e.value === this.value;
380
+ s.push(p`
363
381
  <div
364
- class="nys-combobox__option ${i ? "nys-combobox__option--focused" : ""} ${r ? "nys-combobox__option--selected" : ""}"
382
+ class="nys-combobox__option ${i ? "nys-combobox__option--focused" : ""} ${n ? "nys-combobox__option--selected" : ""}"
365
383
  role="option"
366
384
  id="${this.id}--option-${t}"
367
385
  data-index="${t}"
368
- aria-selected="${r}"
386
+ aria-selected="${n}"
369
387
  aria-disabled="${e.disabled || !1}"
370
388
  ?disabled=${e.disabled}
371
389
  @click=${() => this._handleOptionClick(e)}
@@ -374,14 +392,14 @@ const f = class f extends E {
374
392
  ${e.label}
375
393
  </div>
376
394
  `);
377
- }), s.length === 0 ? u`
395
+ }), s.length === 0 ? p`
378
396
  <div class="nys-combobox__no-results" role="option">
379
397
  No results found
380
398
  </div>
381
399
  ` : s;
382
400
  }
383
401
  render() {
384
- return u`
402
+ return p`
385
403
  <div class="nys-combobox">
386
404
  <nys-label
387
405
  id="${this.id}--label"
@@ -430,7 +448,7 @@ const f = class f extends E {
430
448
  @keydown="${this._handleKeyDown}"
431
449
  />
432
450
  <div class="nys-combobox__buttons">
433
- ${this.value ? u`
451
+ ${this.value ? p`
434
452
  <nys-button
435
453
  class="nys-combobox__clear"
436
454
  label="Clear selection"
@@ -464,7 +482,7 @@ const f = class f extends E {
464
482
  </nys-button>
465
483
  </div>
466
484
  </div>
467
- ${this._isOpen ? u`
485
+ ${this._isOpen ? p`
468
486
  <div
469
487
  class="nys-combobox__listbox ${this._dropdownAbove ? "nys-combobox__listbox--above" : ""}"
470
488
  id="${this.id}--listbox"
@@ -482,7 +500,7 @@ const f = class f extends E {
482
500
  <nys-errormessage
483
501
  id=${this.id + "--error"}
484
502
  ?showError=${this.showError}
485
- errorMessage=${this.errorMessage}
503
+ errorMessage=${this.resolvedErrorMessage()}
486
504
  ></nys-errormessage>
487
505
  <div
488
506
  aria-live="polite"
@@ -495,82 +513,82 @@ const f = class f extends E {
495
513
  `;
496
514
  }
497
515
  };
498
- f.styles = g(C), f.shadowRootOptions = {
499
- ...v.shadowRootOptions,
516
+ f.styles = k(M), f.shadowRootOptions = {
517
+ ...x.shadowRootOptions,
500
518
  delegatesFocus: !0
501
519
  };
502
- let n = f;
503
- l([
504
- a({ type: String, reflect: !0 })
505
- ], n.prototype, "id");
506
- l([
507
- a({ type: String, reflect: !0 })
508
- ], n.prototype, "name");
509
- l([
510
- a({ type: String })
511
- ], n.prototype, "label");
512
- l([
513
- a({ type: String })
514
- ], n.prototype, "description");
515
- l([
516
- a({ type: String })
517
- ], n.prototype, "value");
518
- l([
519
- a({ type: Boolean, reflect: !0 })
520
- ], n.prototype, "disabled");
521
- l([
522
- a({ type: Boolean, reflect: !0 })
523
- ], n.prototype, "required");
524
- l([
525
- a({ type: Boolean, reflect: !0 })
526
- ], n.prototype, "optional");
527
- l([
528
- a({ type: String })
529
- ], n.prototype, "tooltip");
530
- l([
531
- a({ type: String, reflect: !0 })
532
- ], n.prototype, "form");
533
- l([
534
- a({ type: String, reflect: !0 })
535
- ], n.prototype, "width");
536
- l([
537
- a({ type: Boolean, reflect: !0 })
538
- ], n.prototype, "inverted");
539
- l([
540
- a({ type: Boolean, reflect: !0 })
541
- ], n.prototype, "showError");
542
- l([
543
- a({ type: String })
544
- ], n.prototype, "errorMessage");
545
- l([
546
- p()
547
- ], n.prototype, "_isOpen");
548
- l([
549
- p()
550
- ], n.prototype, "_filterText");
551
- l([
552
- p()
553
- ], n.prototype, "_highlightedIndex");
554
- l([
555
- p()
556
- ], n.prototype, "_options");
557
- l([
558
- p()
559
- ], n.prototype, "_filteredOptions");
560
- l([
561
- p()
562
- ], n.prototype, "_dropdownAbove");
563
- l([
564
- p()
565
- ], n.prototype, "_announcement");
566
- l([
567
- m("input")
568
- ], n.prototype, "_input");
569
- l([
570
- m(".nys-combobox__listbox")
571
- ], n.prototype, "_listbox");
572
- customElements.get("nys-combobox") || customElements.define("nys-combobox", n);
520
+ let r = f;
521
+ a([
522
+ d({ type: String, reflect: !0 })
523
+ ], r.prototype, "id");
524
+ a([
525
+ d({ type: String, reflect: !0 })
526
+ ], r.prototype, "name");
527
+ a([
528
+ d({ type: String })
529
+ ], r.prototype, "label");
530
+ a([
531
+ d({ type: String })
532
+ ], r.prototype, "description");
533
+ a([
534
+ d({ type: String })
535
+ ], r.prototype, "value");
536
+ a([
537
+ d({ type: Boolean, reflect: !0 })
538
+ ], r.prototype, "disabled");
539
+ a([
540
+ d({ type: Boolean, reflect: !0 })
541
+ ], r.prototype, "required");
542
+ a([
543
+ d({ type: Boolean, reflect: !0 })
544
+ ], r.prototype, "optional");
545
+ a([
546
+ d({ type: String })
547
+ ], r.prototype, "tooltip");
548
+ a([
549
+ d({ type: String, reflect: !0 })
550
+ ], r.prototype, "form");
551
+ a([
552
+ d({ type: String, reflect: !0 })
553
+ ], r.prototype, "width");
554
+ a([
555
+ d({ type: Boolean, reflect: !0 })
556
+ ], r.prototype, "inverted");
557
+ a([
558
+ d({ type: Boolean, reflect: !0 })
559
+ ], r.prototype, "showError");
560
+ a([
561
+ d({ type: String })
562
+ ], r.prototype, "errorMessage");
563
+ a([
564
+ u()
565
+ ], r.prototype, "_isOpen");
566
+ a([
567
+ u()
568
+ ], r.prototype, "_filterText");
569
+ a([
570
+ u()
571
+ ], r.prototype, "_highlightedIndex");
572
+ a([
573
+ u()
574
+ ], r.prototype, "_options");
575
+ a([
576
+ u()
577
+ ], r.prototype, "_filteredOptions");
578
+ a([
579
+ u()
580
+ ], r.prototype, "_dropdownAbove");
581
+ a([
582
+ u()
583
+ ], r.prototype, "_announcement");
584
+ a([
585
+ g("input")
586
+ ], r.prototype, "_input");
587
+ a([
588
+ g(".nys-combobox__listbox")
589
+ ], r.prototype, "_listbox");
590
+ customElements.get("nys-combobox") || customElements.define("nys-combobox", r);
573
591
  export {
574
- n as NysCombobox
592
+ r as NysCombobox
575
593
  };
576
594
  //# sourceMappingURL=nys-combobox.js.map
package/dist/nys-combobox.js.map CHANGED
@@ -1 +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.1\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}\nconst p = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, A = {\n labelledby: \"ariaLabel\",\n describedby: \"ariaDescription\"\n};\nfunction R(e) {\n return \"ariaDescribedByElements\" in e;\n}\nfunction _(e) {\n return e === \"errormessage\" ? \"aria-errormessage\" : `aria-${e}`;\n}\nfunction d(e) {\n return e.filter((t) => !!t);\n}\nfunction E(e) {\n return e.map((t) => (t.id || (t.id = f(\"nys-ref\")), t.id));\n}\nfunction V(e, t, n) {\n const i = d(n), r = _(t);\n i.length ? e.setAttribute(r, E(i).join(\" \")) : e.removeAttribute(r);\n}\nfunction x(e, t, n, i, r) {\n const s = d(i), a = p[n], l = t;\n if (a && R(t)) {\n l[a] = s.length ? s : null;\n return;\n }\n const o = A[n];\n if (!o) return;\n const c = r ?? (s.length ? s.map((m) => m.textContent?.trim() ?? \"\").filter(Boolean).join(\" \") : \"\");\n o in l ? l[o] = c || null : c ? e.setAttribute(\n n === \"labelledby\" ? \"aria-label\" : \"aria-description\",\n c\n ) : e.removeAttribute(\n n === \"labelledby\" ? \"aria-label\" : \"aria-description\"\n );\n}\nconst g = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, C = {\n labelledby: \"aria-label\",\n describedby: \"aria-description\"\n};\nfunction L(e, t, n) {\n const i = d(n), r = g[t], s = C[t], a = e;\n if (r && r in e && (a[r] = i.length ? i : null), !s) return;\n const l = i.map((o) => o.textContent?.trim() ?? \"\").filter(Boolean).join(\" \");\n l ? e.setAttribute(s, l) : e.removeAttribute(s);\n}\nconst b = (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__ */ b(u), h = (e) => {\n class t extends b(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(i, r) {\n const s = this.internals;\n if (s && i in s) {\n s[i] = r;\n return;\n }\n const a = v(i);\n r === null ? this.removeAttribute(a) : this.setAttribute(a, r);\n }\n reflectDefaultSemantics() {\n const i = this.defaultRole;\n i && this.setHostAria(\"role\", i);\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__ */ h(u), I = (e) => {\n const n = class n extends h(e) {\n setFormValue(r) {\n this.internals?.setFormValue(r ?? null);\n }\n setValidityFromState(r, s, a) {\n const l = this.internals;\n if (!l) return;\n const o = Object.values(r).some(Boolean);\n o ? l.setValidity(r, s ?? \"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.clearValidity();\n }\n };\n n.formAssociated = !0;\n let t = n;\n return t;\n}, w = /* @__PURE__ */ I(u);\nfunction O(e) {\n const t = e.tagName.toLowerCase(), n = /* @__PURE__ */ new Set(), i = (r) => {\n r.querySelectorAll(\"*\").forEach((s) => {\n const a = s.tagName.toLowerCase();\n a.startsWith(\"nys-\") && a !== t && !customElements.get(a) && n.add(a), s.shadowRoot && i(s.shadowRoot);\n });\n };\n return e.shadowRoot && i(e.shadowRoot), i(e), [...n].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 R 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 { 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 &&\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\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","t","h","i","r","s","a","v","I","n","l","o","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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"}
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.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 CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@nysds/nys-combobox",
3
- "version": "1.21.1",
3
+ "version": "1.22.0",
4
4
  "description": "The Combobox component from the NYS Design System.",
5
5
  "module": "dist/nys-combobox.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
8
8
  ".": {
9
- "import": "./dist/nys-combobox.js",
10
- "types": "./dist/index.d.ts"
9
+ "types": "./dist/index.d.ts",
10
+ "import": "./dist/nys-combobox.js"
11
11
  }
12
12
  },
13
13
  "type": "module",
@@ -23,13 +23,13 @@
23
23
  "lit-analyze": "lit-analyzer 'src/**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-label": "^1.21.1",
27
- "@nysds/nys-errormessage": "^1.21.1",
28
- "@nysds/nys-icon": "^1.21.1",
29
- "@nysds/nys-button": "^1.21.1"
26
+ "@nysds/nys-label": "^1.22.0",
27
+ "@nysds/nys-errormessage": "^1.22.0",
28
+ "@nysds/nys-icon": "^1.22.0",
29
+ "@nysds/nys-button": "^1.22.0"
30
30
  },
31
31
  "devDependencies": {
32
- "@nysds/internals": "^1.21.1",
32
+ "@nysds/internals": "^1.22.0",
33
33
  "lit": "^3.3.1",
34
34
  "typescript": "^5.9.3",
35
35
  "vite": "^7.3.1"