@nysds/components 1.13.0 → 1.14.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 (63) hide show
  1. package/custom-elements.json +10932 -0
  2. package/dist/.vscode/vscode.css-custom-data.json +62 -1
  3. package/dist/.vscode/vscode.html-custom-data.json +1346 -295
  4. package/dist/custom-elements.json +1251 -198
  5. package/dist/nys-stepper/newsletter.html +4 -0
  6. package/dist/nys-stepper/personal.html +6 -0
  7. package/dist/nys-stepper/survey.html +5 -0
  8. package/dist/nys-stepper/team.html +6 -0
  9. package/dist/nysds.es.js +2024 -1650
  10. package/dist/nysds.es.js.map +1 -1
  11. package/dist/nysds.js +189 -126
  12. package/dist/nysds.js.map +1 -1
  13. package/dist/packages/mcp-server/src/index.d.ts +8 -0
  14. package/dist/packages/mcp-server/src/lib/cem-parser.d.ts +95 -0
  15. package/dist/packages/mcp-server/src/lib/search.d.ts +19 -0
  16. package/dist/packages/mcp-server/src/lib/token-parser.d.ts +139 -0
  17. package/dist/packages/mcp-server/src/prompts/nysds-mode.d.ts +7 -0
  18. package/dist/packages/mcp-server/src/resources/components.d.ts +11 -0
  19. package/dist/packages/mcp-server/src/resources/guides.d.ts +10 -0
  20. package/dist/packages/mcp-server/src/resources/index.d.ts +7 -0
  21. package/dist/packages/mcp-server/src/resources/tokens.d.ts +16 -0
  22. package/dist/packages/mcp-server/src/server.d.ts +10 -0
  23. package/dist/packages/mcp-server/src/tools/component-tools.d.ts +13 -0
  24. package/dist/packages/mcp-server/src/tools/index.d.ts +7 -0
  25. package/dist/packages/mcp-server/src/tools/token-tools.d.ts +16 -0
  26. package/dist/packages/mcp-server/src/tools/validation-tools.d.ts +11 -0
  27. package/dist/packages/nys-accordion/src/nys-accordion.d.ts +29 -8
  28. package/dist/packages/nys-accordion/src/nys-accordionitem.d.ts +19 -7
  29. package/dist/packages/nys-alert/src/nys-alert.d.ts +32 -9
  30. package/dist/packages/nys-avatar/src/nys-avatar.d.ts +26 -7
  31. package/dist/packages/nys-backtotop/src/nys-backtotop.d.ts +17 -7
  32. package/dist/packages/nys-badge/src/nys-badge.d.ts +30 -4
  33. package/dist/packages/nys-button/src/nys-button.d.ts +126 -9
  34. package/dist/packages/nys-checkbox/src/nys-checkbox.d.ts +53 -11
  35. package/dist/packages/nys-checkbox/src/nys-checkboxgroup.d.ts +40 -12
  36. package/dist/packages/nys-datepicker/src/nys-datepicker.d.ts +65 -7
  37. package/dist/packages/nys-divider/src/nys-divider.d.ts +20 -2
  38. package/dist/packages/nys-errormessage/src/nys-errormessage.d.ts +10 -3
  39. package/dist/packages/nys-fileinput/src/nys-fileinput.d.ts +37 -11
  40. package/dist/packages/nys-fileinput/src/nys-fileitem.d.ts +16 -2
  41. package/dist/packages/nys-globalfooter/src/nys-globalfooter.d.ts +16 -7
  42. package/dist/packages/nys-globalheader/src/nys-globalheader.d.ts +16 -10
  43. package/dist/packages/nys-icon/src/nys-icon.d.ts +25 -3
  44. package/dist/packages/nys-label/src/nys-label.d.ts +20 -3
  45. package/dist/packages/nys-modal/src/nys-modal.d.ts +30 -7
  46. package/dist/packages/nys-pagination/src/nys-pagination.d.ts +17 -5
  47. package/dist/packages/nys-radiobutton/src/nys-radiobutton.d.ts +45 -13
  48. package/dist/packages/nys-radiobutton/src/nys-radiogroup.d.ts +34 -8
  49. package/dist/packages/nys-select/src/nys-option.d.ts +24 -0
  50. package/dist/packages/nys-select/src/nys-select.d.ts +48 -12
  51. package/dist/packages/nys-skipnav/src/nys-skipnav.d.ts +19 -6
  52. package/dist/packages/nys-stepper/src/index.d.ts +2 -0
  53. package/dist/packages/nys-stepper/src/nys-step.d.ts +37 -0
  54. package/dist/packages/nys-stepper/src/nys-stepper.d.ts +48 -0
  55. package/dist/packages/nys-stepper/src/nys-stepper.figma.d.ts +1 -0
  56. package/dist/packages/nys-table/src/nys-table.d.ts +2 -1
  57. package/dist/packages/nys-textarea/src/nys-textarea.d.ts +51 -8
  58. package/dist/packages/nys-textinput/src/nys-textinput.d.ts +67 -9
  59. package/dist/packages/nys-toggle/src/nys-toggle.d.ts +35 -6
  60. package/dist/packages/nys-tooltip/src/nys-tooltip.d.ts +24 -11
  61. package/dist/packages/nys-unavfooter/src/nys-unavfooter.d.ts +12 -5
  62. package/dist/packages/nys-unavheader/src/nys-unavheader.d.ts +25 -7
  63. package/package.json +31 -25
@@ -4,41 +4,110 @@
4
4
  "tags": [
5
5
  {
6
6
  "name": "nys-accordion",
7
- "description": "`<nys-accordion>` groups one or more `<nys-accordionitem>` elements.\n\nFeatures:\n- Optionally enforces single-expanded-item behavior via `singleSelect`.\n- Propagates shared visual `bordered` property to child items.\n- Generates a stable unique identifier if none is provided.\n---\n\n\n### **Events:**\n - **nys-accordionitem-toggle** - Fired when a child `<nys-accordionitem>` is toggled. Event detail includes `{ id: string, heading: string, expanded: boolean }`.\n\n### **Slots:**\n - **default** - Place one or more `<nys-accordionitem>` components here.",
7
+ "description": "Container for accordion items with optional single-select and bordered styling.\n---\n\n\n### **Slots:**\n - _default_ - Default slot for `nys-accordionitem` elements.\n\n### **CSS Properties:**\n - **--nys-accordion-background-color--header** - Background color of the accordion header. _(default: undefined)_\n- **--nys-accordion-background-color--header--hover** - Background hover color of the accordion header. _(default: undefined)_\n- **--nys-accordion-content-max-width** - Maximum readable width of accordion content. Defaults to a character-based width (80ch) for readability. _(default: undefined)_",
8
8
  "attributes": [
9
- { "name": "id", "values": [] },
10
- { "name": "singleSelect", "values": [] },
11
- { "name": "bordered", "values": [] }
9
+ {
10
+ "name": "id",
11
+ "description": "Unique identifier. Auto-generated if not provided.",
12
+ "values": []
13
+ },
14
+ {
15
+ "name": "singleSelect",
16
+ "description": "Only one item can be expanded at a time. Expanding one collapses others.",
17
+ "values": []
18
+ },
19
+ {
20
+ "name": "bordered",
21
+ "description": "Adds borders around each accordion item. Propagates to all children.",
22
+ "values": []
23
+ }
12
24
  ],
13
25
  "references": []
14
26
  },
15
27
  {
16
28
  "name": "nys-accordionitem",
17
- "description": "`<nys-accordionitem>` represents a single collapsible item inside a `<nys-accordion>`.\n---\n\n\n### **Events:**\n - **nys-accordionitem-toggle** - Fired when the item is expanded or collapsed.\n\n### **Slots:**\n - _default_ - Default slot for the content inside the accordion panel.",
29
+ "description": "Collapsible panel for use within nys-accordion with keyboard support.\n---\n\n\n### **Events:**\n - **nys-accordionitem-toggle** - Fired when expanded state changes. Detail: `{id, heading, expanded}`.\n\n### **Slots:**\n - _default_ - Default slot for panel content shown when expanded.",
18
30
  "attributes": [
19
- { "name": "id", "values": [] },
20
- { "name": "heading", "values": [] },
21
- { "name": "expanded", "values": [] },
22
- { "name": "bordered", "values": [] }
31
+ {
32
+ "name": "id",
33
+ "description": "Unique identifier. Auto-generated if not provided.",
34
+ "values": []
35
+ },
36
+ {
37
+ "name": "heading",
38
+ "description": "Heading text displayed in the clickable toggle button.",
39
+ "values": []
40
+ },
41
+ {
42
+ "name": "expanded",
43
+ "description": "Whether the content panel is visible. Toggle via click or keyboard.",
44
+ "values": []
45
+ },
46
+ {
47
+ "name": "bordered",
48
+ "description": "Adds border styling. Set by parent `nys-accordion`, not directly.",
49
+ "values": []
50
+ }
23
51
  ],
24
52
  "references": []
25
53
  },
26
54
  {
27
55
  "name": "nys-alert",
28
- "description": "`<nys-alert>` renders an informational, success, warning, or error alert.\n---\n\n\n### **Events:**\n - **nys-close** - Fired when alert is dismissed (manual or timeout).\n\n### **Slots:**\n - _default_ - Default slot for additional alert content.",
56
+ "description": "Alert for contextual feedback with semantic types and live region support.\n---\n\n\n### **Events:**\n - **nys-close** - Fired when alert is dismissed. Detail: `{id, type, label}`.\n\n### **Slots:**\n - _default_ - Default slot for custom body content. Overrides `text` prop when provided.",
29
57
  "attributes": [
30
- { "name": "id", "values": [] },
31
- { "name": "heading", "values": [] },
32
- { "name": "icon", "values": [] },
33
- { "name": "dismissible", "values": [] },
34
- { "name": "duration", "values": [] },
35
- { "name": "text", "values": [] },
36
- { "name": "primaryAction", "values": [] },
37
- { "name": "secondaryAction", "values": [] },
38
- { "name": "primaryLabel", "values": [] },
39
- { "name": "secondaryLabel", "values": [] },
58
+ {
59
+ "name": "id",
60
+ "description": "Unique identifier. Auto-generated if not provided.",
61
+ "values": []
62
+ },
63
+ {
64
+ "name": "heading",
65
+ "description": "Bold heading text displayed at the top of the alert.",
66
+ "values": []
67
+ },
68
+ {
69
+ "name": "icon",
70
+ "description": "Custom icon name. Defaults to type-appropriate icon if not set.",
71
+ "values": []
72
+ },
73
+ {
74
+ "name": "dismissible",
75
+ "description": "Shows close button allowing users to dismiss the alert.",
76
+ "values": []
77
+ },
78
+ {
79
+ "name": "duration",
80
+ "description": "Auto-dismiss after specified milliseconds. Set to 0 to disable.",
81
+ "values": []
82
+ },
83
+ {
84
+ "name": "text",
85
+ "description": "Body text content. Ignored if slot content is provided.",
86
+ "values": []
87
+ },
88
+ {
89
+ "name": "primaryAction",
90
+ "description": "URL for the primary action link.",
91
+ "values": []
92
+ },
93
+ {
94
+ "name": "secondaryAction",
95
+ "description": "URL for the secondary action link.",
96
+ "values": []
97
+ },
98
+ {
99
+ "name": "primaryLabel",
100
+ "description": "Label text for primary action link.",
101
+ "values": []
102
+ },
103
+ {
104
+ "name": "secondaryLabel",
105
+ "description": "Label text for secondary action link.",
106
+ "values": []
107
+ },
40
108
  {
41
109
  "name": "type",
110
+ "description": "Semantic alert type affecting color and ARIA role. `danger`/`emergency` use assertive live region.",
42
111
  "values": [
43
112
  { "name": "" },
44
113
  { "name": "base" },
@@ -54,38 +123,91 @@
54
123
  },
55
124
  {
56
125
  "name": "nys-avatar",
57
- "description": "`<nys-avatar>` displays a user avatar as an image, initials, or icon.\n---\n\n\n### **Slots:**\n - _default_ - Default slot for custom icon content. Fallback icon is used if slot is empty. Features: - Computes foreground color for sufficient contrast based on background. - Supports interactive avatars with button role. - Fallback to icon when image or initials are missing. - Lazy loading for performance optimization.",
126
+ "description": "User avatar with image, initials, or icon fallback and contrast-aware colors.\n---\n\n\n### **Slots:**\n - _default_ - Custom icon content. Overrides default icon when no image or initials.",
58
127
  "attributes": [
59
- { "name": "id", "values": [] },
60
- { "name": "ariaLabel", "values": [] },
61
- { "name": "image", "values": [] },
62
- { "name": "initials", "values": [] },
63
- { "name": "icon", "values": [] },
64
- { "name": "color", "values": [] },
65
- { "name": "interactive", "values": [] },
66
- { "name": "disabled", "values": [] },
67
- { "name": "lazy", "values": [] }
128
+ {
129
+ "name": "id",
130
+ "description": "Unique identifier. Auto-generated if not provided.",
131
+ "values": []
132
+ },
133
+ {
134
+ "name": "ariaLabel",
135
+ "description": "Accessible label for screen readers. Required when no image `alt` is available.",
136
+ "values": []
137
+ },
138
+ {
139
+ "name": "image",
140
+ "description": "Image URL. Takes priority over initials and icon.",
141
+ "values": []
142
+ },
143
+ {
144
+ "name": "initials",
145
+ "description": "1-2 character initials. Used when no image is provided.",
146
+ "values": []
147
+ },
148
+ {
149
+ "name": "icon",
150
+ "description": "Custom icon name. Falls back to `account_circle` if not set.",
151
+ "values": []
152
+ },
153
+ {
154
+ "name": "color",
155
+ "description": "Background color. Foreground auto-adjusts for contrast. Accepts CSS values or variables.",
156
+ "values": []
157
+ },
158
+ {
159
+ "name": "interactive",
160
+ "description": "Makes avatar clickable with button role and focus ring.",
161
+ "values": []
162
+ },
163
+ {
164
+ "name": "disabled",
165
+ "description": "Prevents interaction when `interactive` is true.",
166
+ "values": []
167
+ },
168
+ {
169
+ "name": "lazy",
170
+ "description": "Enables lazy loading for the image.",
171
+ "values": []
172
+ }
68
173
  ],
69
174
  "references": []
70
175
  },
71
176
  {
72
177
  "name": "nys-backtotop",
73
- "description": "`<nys-backtotop>` renders a button that scrolls the page to the top.\n\nFeatures:\n- Automatically appears after scrolling past 1.5 viewport heights\n if the page is at least 4 screens tall.\n- Adapts to mobile screens (renders as a circle button when narrow).\n- Can be explicitly shown with the `visible` attribute.\n---\n\n\n### **Events:**\n - **nys-click** - Fired when the button is clicked (scrolls page to top).",
178
+ "description": "Floating back-to-top button with auto-show behavior and smooth scroll.\n---\n",
74
179
  "attributes": [
75
- { "name": "position", "values": [] },
76
- { "name": "visible", "values": [] }
180
+ {
181
+ "name": "position",
182
+ "description": "Horizontal position: `left` or `right`.",
183
+ "values": []
184
+ },
185
+ {
186
+ "name": "visible",
187
+ "description": "Force button visibility. Overrides auto-show scroll behavior.",
188
+ "values": []
189
+ }
77
190
  ],
78
191
  "references": []
79
192
  },
80
193
  {
81
194
  "name": "nys-badge",
82
- "description": "`<nys-badge>` displays a badge with optional prefix/suffix icons and labels.\n\nFeatures:\n- Conveys an intent (`neutral`, `error`, `success`, `warning`) which affects default icons and styling.\n- Supports custom prefix and suffix icons.\n---\n",
195
+ "description": "Compact label for status, counts, or categorization with semantic styling.\n---\n",
83
196
  "attributes": [
84
- { "name": "id", "values": [] },
85
- { "name": "name", "values": [] },
86
- { "name": "size", "values": [{ "name": "sm" }, { "name": "md" }] },
197
+ { "name": "id", "description": "Unique identifier.", "values": [] },
198
+ {
199
+ "name": "name",
200
+ "description": "Name attribute for form association.",
201
+ "values": []
202
+ },
203
+ {
204
+ "name": "size",
205
+ "description": "Badge size: `sm` (smaller text) or `md` (default).",
206
+ "values": [{ "name": "sm" }, { "name": "md" }]
207
+ },
87
208
  {
88
209
  "name": "intent",
210
+ "description": "Semantic intent affecting color: `neutral`, `error`, `success`, or `warning`.",
89
211
  "values": [
90
212
  { "name": "" },
91
213
  { "name": "neutral" },
@@ -94,8 +216,20 @@
94
216
  { "name": "warning" }
95
217
  ]
96
218
  },
97
- { "name": "prefixLabel", "values": [] },
98
- { "name": "label", "values": [] },
219
+ {
220
+ "name": "prefixLabel",
221
+ "description": "Secondary label displayed before the main label.",
222
+ "values": []
223
+ },
224
+ {
225
+ "name": "label",
226
+ "description": "Primary label text displayed in the badge.",
227
+ "values": []
228
+ },
229
+ {
230
+ "name": "variant",
231
+ "values": [{ "name": "strong" }, { "name": "\"\"" }]
232
+ },
99
233
  { "name": "prefixicon", "values": [] },
100
234
  { "name": "suffixicon", "values": [] }
101
235
  ],
@@ -103,17 +237,31 @@
103
237
  },
104
238
  {
105
239
  "name": "nys-button",
106
- "description": "`<nys-button>` is a versatile button component supporting:\n- Multiple variants (`filled`, `outline`, `ghost`, `text`)\n- Sizes (`sm`, `md`, `lg`) and full-width layout\n- Icons (prefix, suffix, or circle) and optional labels\n- Native `<button>` or link `<a>` behavior with form association\n- Keyboard and accessibility support (`aria-label`, `aria-controls`, `aria-description`)\n---\n\n\n### **Events:**\n - **nys-focus** - Fired when button receives focus\n- **nys-blur** - Fired when button loses focus\n- **nys-click** - Fired on button click",
240
+ "description": "Button for actions and CTAs with variants, sizes, and icon support.\n---\n\n\n### **Events:**\n - **nys-focus** - Fired when the button receives focus.\n- **nys-blur** - Fired when the button loses focus.\n- **nys-click** - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.\n\n### **Slots:**\n - **prefix-icon** - Icon before label. Not shown for `text` variant.\n- **suffix-icon** - Icon after label. Not shown for `text` variant.\n- **circle-icon** - Icon for circle mode. Overrides `icon` prop.\n\n### **CSS Properties:**\n - **--nys-button-color** - Text color of the button label. _(default: undefined)_\n- **--nys-button-color--hover** - Text color when hovered. _(default: undefined)_\n- **--nys-button-color--active** - Text color when active/pressed. _(default: undefined)_\n- **--nys-button-background-color** - Background color of the button. _(default: undefined)_\n- **--nys-button-background-color--hover** - Background color when hovered. _(default: undefined)_\n- **--nys-button-background-color--active** - Background color when active/pressed. _(default: undefined)_\n- **--nys-button-border-color** - Border color of the button. _(default: undefined)_\n- **--nys-button-border-color--hover** - Border color when hovered. _(default: undefined)_\n- **--nys-button-border-color--active** - Border color when active/pressed. _(default: undefined)_",
107
241
  "attributes": [
108
- { "name": "id", "values": [] },
109
- { "name": "name", "values": [] },
242
+ {
243
+ "name": "id",
244
+ "description": "Unique identifier. Auto-generated if not provided.",
245
+ "values": []
246
+ },
247
+ {
248
+ "name": "name",
249
+ "description": "Name for form submission.",
250
+ "values": []
251
+ },
110
252
  {
111
253
  "name": "size",
254
+ "description": "Button height: `sm` (40px) for dense UIs, `md` (48px, default) for standard use, `lg` (56px) for prominent CTAs.",
112
255
  "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
113
256
  },
114
- { "name": "fullWidth", "values": [] },
257
+ {
258
+ "name": "fullWidth",
259
+ "description": "Expands button to fill container width. Use for mobile layouts or stacked button groups.",
260
+ "values": []
261
+ },
115
262
  {
116
263
  "name": "variant",
264
+ "description": "Visual style: `filled` for primary (one per section), `outline` for secondary, `ghost` for tertiary, `text` for inline actions. Avoid `text` for navigation.",
117
265
  "values": [
118
266
  { "name": "" },
119
267
  { "name": "filled" },
@@ -122,20 +270,69 @@
122
270
  { "name": "text" }
123
271
  ]
124
272
  },
125
- { "name": "inverted", "values": [] },
126
- { "name": "label", "values": [] },
127
- { "name": "ariaLabel", "values": [] },
128
- { "name": "ariaControls", "values": [] },
129
- { "name": "prefixIcon", "values": [] },
130
- { "name": "suffixIcon", "values": [] },
131
- { "name": "circle", "values": [] },
132
- { "name": "icon", "values": [] },
133
- { "name": "disabled", "values": [] },
134
- { "name": "form", "values": [] },
135
- { "name": "value", "values": [] },
136
- { "name": "ariaDescription", "values": [] },
273
+ {
274
+ "name": "inverted",
275
+ "description": "Adjusts colors for dark backgrounds.",
276
+ "values": []
277
+ },
278
+ {
279
+ "name": "label",
280
+ "description": "Visible button text. Use sentence case, action-oriented text (e.g., \"Save Draft\"). Becomes aria-label in `circle` mode.",
281
+ "values": []
282
+ },
283
+ {
284
+ "name": "ariaLabel",
285
+ "description": "Screen reader label. Required for icon-only buttons if `label` is not set.",
286
+ "values": []
287
+ },
288
+ {
289
+ "name": "ariaControls",
290
+ "description": "ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`.",
291
+ "values": []
292
+ },
293
+ {
294
+ "name": "prefixIcon",
295
+ "description": "Material Symbol icon before label. Not shown for `text` variant or `circle` mode.",
296
+ "values": []
297
+ },
298
+ {
299
+ "name": "suffixIcon",
300
+ "description": "Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `text` variant or `circle` mode.",
301
+ "values": []
302
+ },
303
+ {
304
+ "name": "circle",
305
+ "description": "Renders circular icon-only button. Requires `icon` prop. `label` becomes aria-label.",
306
+ "values": []
307
+ },
308
+ {
309
+ "name": "icon",
310
+ "description": "Icon for circle mode. Required when `circle` is true. Scales with size (sm=24px, md=32px, lg=40px).",
311
+ "values": []
312
+ },
313
+ {
314
+ "name": "disabled",
315
+ "description": "Prevents interaction. Avoid disabling without explanation—show validation errors instead.",
316
+ "values": []
317
+ },
318
+ {
319
+ "name": "form",
320
+ "description": "Form `id` to associate with. Use when button is outside the form element.",
321
+ "values": []
322
+ },
323
+ {
324
+ "name": "value",
325
+ "description": "Value submitted with form data. Only used when `type=\"submit\"`.",
326
+ "values": []
327
+ },
328
+ {
329
+ "name": "ariaDescription",
330
+ "description": "Additional screen reader description. Sets `aria-description`.",
331
+ "values": []
332
+ },
137
333
  {
138
334
  "name": "type",
335
+ "description": "Form behavior: `button` (default, no form action), `submit` (submits form), `reset` (resets form). Always set explicitly to avoid unintended submissions.",
139
336
  "values": [
140
337
  { "name": "" },
141
338
  { "name": "submit" },
@@ -143,9 +340,14 @@
143
340
  { "name": "button" }
144
341
  ]
145
342
  },
146
- { "name": "href", "values": [] },
343
+ {
344
+ "name": "href",
345
+ "description": "URL to navigate to. Renders as `<a>` tag. Omit for action buttons.",
346
+ "values": []
347
+ },
147
348
  {
148
349
  "name": "target",
350
+ "description": "Link target: `_self` (same tab), `_blank` (new tab—add `suffixIcon=\"open_in_new\"`), `_parent`, `_top`, or frame name.",
149
351
  "values": [
150
352
  { "name": "" },
151
353
  { "name": "_self" },
@@ -160,121 +362,391 @@
160
362
  },
161
363
  {
162
364
  "name": "nys-checkbox",
163
- "description": "`<nys-checkbox>` is an accessible, form-associated checkbox component.\nCan be used standalone or within a `<nys-checkboxgroup>`.\n\nFeatures:\n- Supports labels, descriptions, and tooltips\n- Displays error messages with `showError` and `errorMessage`\n- Keyboard interaction with spacebar toggle\n- Form integration via ElementInternals (`checked` value submitted)\n---\n\n\n### **Events:**\n - **nys-change** - Fired when checkbox value changes\n- **nys-focus** - Fired on focus\n- **nys-blur** - Fired on blur\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Slot to provide a custom description element",
365
+ "description": "Checkbox for binary choices or multi-select options.\n---\n\n\n### **Events:**\n - **nys-change** - Fired when checked state changes. Detail: `{id, checked, name, value}`.\n- **nys-focus** - Fired when checkbox gains focus.\n- **nys-blur** - Fired when checkbox loses focus.\n- **nys-error**\n- **nys-error-clear**\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Custom HTML description content.",
164
366
  "attributes": [
165
- { "name": "checked", "values": [] },
166
- { "name": "disabled", "values": [] },
167
- { "name": "required", "values": [] },
168
- { "name": "label", "values": [] },
169
- { "name": "description", "values": [] },
170
- { "name": "id", "values": [] },
171
- { "name": "name", "values": [] },
172
- { "name": "value", "values": [] },
173
- { "name": "form", "values": [] },
174
- { "name": "showError", "values": [] },
175
- { "name": "errorMessage", "values": [] },
176
- { "name": "groupExist", "values": [] },
177
- { "name": "tile", "values": [] },
178
- { "name": "inverted", "values": [] },
179
- { "name": "tooltip", "values": [] },
180
- { "name": "size", "values": [{ "name": "sm" }, { "name": "md" }] }
367
+ {
368
+ "name": "checked",
369
+ "description": "Whether checkbox is checked.",
370
+ "values": []
371
+ },
372
+ {
373
+ "name": "disabled",
374
+ "description": "Prevents interaction.",
375
+ "values": []
376
+ },
377
+ {
378
+ "name": "required",
379
+ "description": "Marks as required. Validates that checkbox is checked.",
380
+ "values": []
381
+ },
382
+ {
383
+ "name": "label",
384
+ "description": "Visible label text. Required for accessibility.",
385
+ "values": []
386
+ },
387
+ {
388
+ "name": "description",
389
+ "description": "Helper text below label. Use slot for custom HTML.",
390
+ "values": []
391
+ },
392
+ {
393
+ "name": "id",
394
+ "description": "Unique identifier. Auto-generated if not provided.",
395
+ "values": []
396
+ },
397
+ {
398
+ "name": "name",
399
+ "description": "Name for form submission. Use same name for grouped checkboxes.",
400
+ "values": []
401
+ },
402
+ {
403
+ "name": "value",
404
+ "description": "Value submitted when checked.",
405
+ "values": []
406
+ },
407
+ {
408
+ "name": "form",
409
+ "description": "Form `id` to associate with when checkbox is outside form element.",
410
+ "values": []
411
+ },
412
+ {
413
+ "name": "showError",
414
+ "description": "Shows error message when true.",
415
+ "values": []
416
+ },
417
+ {
418
+ "name": "errorMessage",
419
+ "description": "Error message text. Shown only when `showError` is true.",
420
+ "values": []
421
+ },
422
+ {
423
+ "name": "groupExist",
424
+ "description": "Internal: Set by parent checkboxgroup. Do not set manually.",
425
+ "values": []
426
+ },
427
+ {
428
+ "name": "tile",
429
+ "description": "Renders as tile with larger clickable area. Apply to group for consistency.",
430
+ "values": []
431
+ },
432
+ {
433
+ "name": "inverted",
434
+ "description": "Adjusts colors for dark backgrounds.",
435
+ "values": []
436
+ },
437
+ {
438
+ "name": "tooltip",
439
+ "description": "Tooltip text shown on hover/focus of info icon.",
440
+ "values": []
441
+ },
442
+ {
443
+ "name": "size",
444
+ "description": "Checkbox size: `sm` (24px) or `md` (32px, default).",
445
+ "values": [{ "name": "sm" }, { "name": "md" }]
446
+ },
447
+ { "name": "other", "values": [] },
448
+ { "name": "showOtherError", "values": [] }
181
449
  ],
182
450
  "references": []
183
451
  },
184
452
  {
185
453
  "name": "nys-checkboxgroup",
186
- "description": "`<nys-checkboxgroup>` is a form-associated container for multiple `<nys-checkbox>` components.\nHandles grouping, validation, required constraints, form submission, and accessibility.\n\nFeatures:\n- Manages multiple checkboxes as a single form field\n- Supports required/optional flags and error messages\n- Propagates size, tile, and inverted styling to child checkboxes\n- Keyboard and screen reader accessible via fieldset/legend\n---\n\n\n### **Events:**\n - **nys-change** - Fired when any child checkbox changes\n- **nys-focus** - Fired when any child checkbox gains focus\n- **nys-blur** - Fired when any child checkbox loses focus\n\n### **Slots:**\n - **default** - Slot for child `<nys-checkbox>` elements\n- **description** - Slot for custom description content",
454
+ "description": "Container for grouping checkboxes as a single form control.\n---\n\n\n### **Slots:**\n - _default_ - Default slot for `nys-checkbox` elements.\n- **description** - Custom HTML description content.",
187
455
  "attributes": [
188
- { "name": "id", "values": [] },
189
- { "name": "name", "values": [] },
190
- { "name": "required", "values": [] },
191
- { "name": "optional", "values": [] },
192
- { "name": "showError", "values": [] },
193
- { "name": "errorMessage", "values": [] },
194
- { "name": "label", "values": [] },
195
- { "name": "description", "values": [] },
196
- { "name": "tile", "values": [] },
197
- { "name": "tooltip", "values": [] },
198
- { "name": "inverted", "values": [] },
199
- { "name": "form", "values": [] },
200
- { "name": "size", "values": [{ "name": "sm" }, { "name": "md" }] }
456
+ {
457
+ "name": "id",
458
+ "description": "Unique identifier. Auto-generated if not provided.",
459
+ "values": []
460
+ },
461
+ {
462
+ "name": "name",
463
+ "description": "Name for form submission. Set on group, not individual checkboxes.",
464
+ "values": []
465
+ },
466
+ {
467
+ "name": "required",
468
+ "description": "Requires at least one checkbox to be checked.",
469
+ "values": []
470
+ },
471
+ {
472
+ "name": "optional",
473
+ "description": "Shows \"Optional\" flag.",
474
+ "values": []
475
+ },
476
+ {
477
+ "name": "showError",
478
+ "description": "Shows error message when true.",
479
+ "values": []
480
+ },
481
+ {
482
+ "name": "errorMessage",
483
+ "description": "Error message text. Shown only when `showError` is true.",
484
+ "values": []
485
+ },
486
+ {
487
+ "name": "label",
488
+ "description": "Visible label text for the group.",
489
+ "values": []
490
+ },
491
+ {
492
+ "name": "description",
493
+ "description": "Helper text below label. Use slot for custom HTML.",
494
+ "values": []
495
+ },
496
+ {
497
+ "name": "tile",
498
+ "description": "Renders all checkboxes as tiles with larger clickable area.",
499
+ "values": []
500
+ },
501
+ {
502
+ "name": "tooltip",
503
+ "description": "Tooltip text shown on hover/focus of info icon.",
504
+ "values": []
505
+ },
506
+ {
507
+ "name": "inverted",
508
+ "description": "Adjusts colors for dark backgrounds. Applied to all children.",
509
+ "values": []
510
+ },
511
+ {
512
+ "name": "form",
513
+ "description": "Form `id` to associate with. Applied to all children.",
514
+ "values": []
515
+ },
516
+ {
517
+ "name": "size",
518
+ "description": "Checkbox size for all children: `sm` (24px) or `md` (32px, default).",
519
+ "values": [{ "name": "sm" }, { "name": "md" }]
520
+ }
201
521
  ],
202
522
  "references": []
203
523
  },
204
524
  {
205
525
  "name": "nys-datepicker",
206
- "description": "`<nys-datepicker>` is a form-associated, accessible date picker component.\nOptionally wraps a `<wc-datepicker>` for custom calendar UI.\n\nEvents:\n---\n\n\n### **Events:**\n - **nys-blur** - Dispatched when input or calendar loses focus\n- **nys-input** - Dispatched when user selects or types a valid date Notes: - Uses native date input on Safari or mobile devices (custom calendar removed for these scenarios)\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Passive check of validity:\n- Returns true/false\n- Does NOT update UI or show errors\n- Used in form submission checks",
526
+ "description": "Date picker with calendar popup and native fallback.\n---\n\n\n### **Events:**\n - **nys-blur** - Fired when input or calendar loses focus. Triggers validation.\n- **nys-input** - Fired on date selection. Detail: `{id, value}`.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Passive check of validity:\n- Returns true/false\n- Does NOT update UI or show errors\n- Used in form submission checks",
207
527
  "attributes": [
208
- { "name": "id", "values": [] },
209
- { "name": "name", "values": [] },
528
+ {
529
+ "name": "id",
530
+ "description": "Unique identifier. Auto-generated if not provided.",
531
+ "values": []
532
+ },
533
+ {
534
+ "name": "name",
535
+ "description": "Name for form submission.",
536
+ "values": []
537
+ },
210
538
  {
211
539
  "name": "width",
540
+ "description": "Input width: `md` (200px), `lg` (384px), `full` (100%).",
212
541
  "values": [{ "name": "md" }, { "name": "lg" }, { "name": "full" }]
213
542
  },
214
- { "name": "hideTodayButton", "values": [] },
215
- { "name": "hideClearButton", "values": [] },
216
- { "name": "disabled", "values": [] },
217
- { "name": "required", "values": [] },
218
- { "name": "optional", "values": [] },
219
- { "name": "showError", "values": [] },
220
- { "name": "errorMessage", "values": [] },
221
- { "name": "form", "values": [] },
222
- { "name": "tooltip", "values": [] },
223
- { "name": "type", "values": [] },
224
- { "name": "label", "values": [] },
225
- { "name": "description", "values": [] },
226
- { "name": "startDate", "values": [] },
227
- { "name": "inverted", "values": [] },
228
- { "name": "value", "values": [{ "name": "Date" }] }
543
+ {
544
+ "name": "hideTodayButton",
545
+ "description": "Hide the \"Today\" button in calendar popup.",
546
+ "values": []
547
+ },
548
+ {
549
+ "name": "hideClearButton",
550
+ "description": "Hide the \"Clear\" button in calendar popup.",
551
+ "values": []
552
+ },
553
+ {
554
+ "name": "disabled",
555
+ "description": "Disable interaction.",
556
+ "values": []
557
+ },
558
+ {
559
+ "name": "required",
560
+ "description": "Mark as required. Shows \"Required\" flag and validates on blur.",
561
+ "values": []
562
+ },
563
+ {
564
+ "name": "optional",
565
+ "description": "Show \"Optional\" flag. Use when most fields are required.",
566
+ "values": []
567
+ },
568
+ {
569
+ "name": "showError",
570
+ "description": "Show error state.",
571
+ "values": []
572
+ },
573
+ {
574
+ "name": "errorMessage",
575
+ "description": "Error message text.",
576
+ "values": []
577
+ },
578
+ {
579
+ "name": "form",
580
+ "description": "Form `id` to associate with when input is outside form.",
581
+ "values": []
582
+ },
583
+ {
584
+ "name": "tooltip",
585
+ "description": "Tooltip text on info icon hover.",
586
+ "values": []
587
+ },
588
+ {
589
+ "name": "type",
590
+ "description": "Input type. Currently only supports `date`.",
591
+ "values": []
592
+ },
593
+ {
594
+ "name": "label",
595
+ "description": "Label text. Required for accessibility.",
596
+ "values": []
597
+ },
598
+ {
599
+ "name": "description",
600
+ "description": "Helper text below label.",
601
+ "values": []
602
+ },
603
+ {
604
+ "name": "startDate",
605
+ "description": "Initial date when calendar opens (YYYY-MM-DD).",
606
+ "values": []
607
+ },
608
+ {
609
+ "name": "inverted",
610
+ "description": "Dark background mode.",
611
+ "values": []
612
+ },
613
+ {
614
+ "name": "value",
615
+ "description": "Selected date. Accepts Date object or ISO string (YYYY-MM-DD).",
616
+ "values": [{ "name": "Date" }]
617
+ }
229
618
  ],
230
619
  "references": []
231
620
  },
232
621
  {
233
622
  "name": "nys-divider",
234
- "description": "`<nys-divider>` renders a horizontal rule `<hr>` element with optional styling.\nCan be inverted for dark backgrounds.\n---\n",
235
- "attributes": [{ "name": "inverted", "values": [] }],
623
+ "description": "Horizontal divider for visual separation of content sections.\n---\n",
624
+ "attributes": [
625
+ {
626
+ "name": "inverted",
627
+ "description": "Adjusts colors for dark backgrounds.",
628
+ "values": []
629
+ }
630
+ ],
236
631
  "references": []
237
632
  },
238
633
  {
239
634
  "name": "nys-errormessage",
240
- "description": "THIS IS A PRIVATE COMPONENT!\n`<nys-errormessage>` displays an error message for form elements.\nCan optionally show a divider and supports native form validation messages.\n---\n",
635
+ "description": "Internal error message display with icon and ARIA alert support.\n---\n",
241
636
  "attributes": [
242
- { "name": "showError", "values": [] },
243
- { "name": "errorMessage", "values": [] },
244
- { "name": "showDivider", "values": [] }
637
+ {
638
+ "name": "showError",
639
+ "description": "Whether to display the error message.",
640
+ "values": []
641
+ },
642
+ {
643
+ "name": "errorMessage",
644
+ "description": "Error text to display. Falls back to native validation message if available.",
645
+ "values": []
646
+ },
647
+ {
648
+ "name": "showDivider",
649
+ "description": "Shows a divider line above the error message.",
650
+ "values": []
651
+ }
245
652
  ],
246
653
  "references": []
247
654
  },
248
655
  {
249
656
  "name": "nys-fileinput",
250
- "description": "`<nys-fileinput>` provides accessible file selection with optional\ndrag-and-drop support, progress tracking, validation, and form submission.\n\nFeatures:\n- Supports single or multiple file uploads\n- Optional drag-and-drop dropzone\n- File type validation and upload progress\n- Form-associated with native validation behavior\n- Keyboard and screen reader accessible\n---\n\n\n### **Events:**\n - **nys-change** - Fired when files are added or removed\n\n### **Slots:**\n - **description** - Custom description content under the label",
657
+ "description": "File input with drag-and-drop, validation, and progress tracking.\n---\n\n\n### **Events:**\n - **nys-change** - Fired when files are added or removed. Detail: `{id, files}`.\n\n### **Slots:**\n - **description** - Custom HTML description content.",
251
658
  "attributes": [
252
- { "name": "id", "values": [] },
253
- { "name": "name", "values": [] },
254
- { "name": "label", "values": [] },
255
- { "name": "description", "values": [] },
256
- { "name": "multiple", "values": [] },
257
- { "name": "form", "values": [] },
258
- { "name": "tooltip", "values": [] },
259
- { "name": "accept", "values": [] },
260
- { "name": "disabled", "values": [] },
261
- { "name": "required", "values": [] },
262
- { "name": "optional", "values": [] },
263
- { "name": "showError", "values": [] },
264
- { "name": "errorMessage", "values": [] },
265
- { "name": "dropzone", "values": [] },
266
- { "name": "width", "values": [{ "name": "lg" }, { "name": "full" }] },
267
- { "name": "inverted", "values": [] }
659
+ {
660
+ "name": "id",
661
+ "description": "Unique identifier. Auto-generated if not provided.",
662
+ "values": []
663
+ },
664
+ {
665
+ "name": "name",
666
+ "description": "Name for form submission.",
667
+ "values": []
668
+ },
669
+ { "name": "label", "description": "Visible label text.", "values": [] },
670
+ {
671
+ "name": "description",
672
+ "description": "Helper text below label. Use slot for custom HTML.",
673
+ "values": []
674
+ },
675
+ {
676
+ "name": "multiple",
677
+ "description": "Allows selecting multiple files.",
678
+ "values": []
679
+ },
680
+ {
681
+ "name": "form",
682
+ "description": "Form `id` to associate with.",
683
+ "values": []
684
+ },
685
+ {
686
+ "name": "tooltip",
687
+ "description": "Tooltip text shown on hover/focus of info icon.",
688
+ "values": []
689
+ },
690
+ {
691
+ "name": "accept",
692
+ "description": "Accepted file types. Use MIME types (`image/*`) or extensions (`.pdf`). Validated via magic bytes.",
693
+ "values": []
694
+ },
695
+ {
696
+ "name": "disabled",
697
+ "description": "Prevents interaction.",
698
+ "values": []
699
+ },
700
+ {
701
+ "name": "required",
702
+ "description": "Requires at least one file to be uploaded.",
703
+ "values": []
704
+ },
705
+ {
706
+ "name": "optional",
707
+ "description": "Shows \"Optional\" flag.",
708
+ "values": []
709
+ },
710
+ {
711
+ "name": "showError",
712
+ "description": "Shows error message when true.",
713
+ "values": []
714
+ },
715
+ {
716
+ "name": "errorMessage",
717
+ "description": "Error message text. Shown only when `showError` is true.",
718
+ "values": []
719
+ },
720
+ {
721
+ "name": "dropzone",
722
+ "description": "Enables drag-and-drop zone UI.",
723
+ "values": []
724
+ },
725
+ {
726
+ "name": "width",
727
+ "description": "Component width: `lg` (384px) or `full` (100%, default).",
728
+ "values": [{ "name": "lg" }, { "name": "full" }]
729
+ },
730
+ {
731
+ "name": "inverted",
732
+ "description": "Adjusts colors for dark backgrounds.",
733
+ "values": []
734
+ }
268
735
  ],
269
736
  "references": []
270
737
  },
271
738
  {
272
739
  "name": "nys-fileitem",
273
- "description": "`<nys-fileitem>` displays an individual file in a file input component.\nIt shows the file name, upload status, progress bar, and error messages.\n---\n\n\n### **Events:**\n - **nys-fileRemove**",
740
+ "description": "Internal file item display with status, progress bar, and remove action.\n---\n\n\n### **Events:**\n - **nys-fileRemove** - Fired when remove button is clicked. Detail: `{filename}`.",
274
741
  "attributes": [
275
- { "name": "filename", "values": [] },
742
+ {
743
+ "name": "filename",
744
+ "description": "Name of the file being displayed.",
745
+ "values": []
746
+ },
276
747
  {
277
748
  "name": "status",
749
+ "description": "Upload status: `pending` (queued), `processing` (uploading), `done` (complete), `error` (failed).",
278
750
  "values": [
279
751
  { "name": "" },
280
752
  { "name": "pending" },
@@ -283,41 +755,90 @@
283
755
  { "name": "error" }
284
756
  ]
285
757
  },
286
- { "name": "progress", "values": [] },
287
- { "name": "errorMessage", "values": [] }
288
- ],
289
- "references": []
758
+ {
759
+ "name": "progress",
760
+ "description": "Upload progress percentage (0-100). Only shown when status is `processing`.",
761
+ "values": []
762
+ },
763
+ {
764
+ "name": "errorMessage",
765
+ "description": "Error message displayed when status is `error`.",
766
+ "values": []
767
+ }
768
+ ],
769
+ "references": []
290
770
  },
291
771
  {
292
772
  "name": "nys-globalfooter",
293
- "description": "`<nys-globalfooter>` renders a New York State–style global footer.\n\nDisplays an agency name with an optional homepage link and supports\nstructured footer content via slots.\n---\n\n\n### **Slots:**\n - **default** - Footer content such as headings, links, or groups Layout behavior: - Multiple `<h4>` elements trigger a multi-column layout - Single group content renders in a compact layout",
773
+ "description": "Agency footer with auto-layout for contact info and link sections.\n---\n\n\n### **Slots:**\n - _default_ - Footer content (links, contact info). Use `<h4>` for column headings.",
294
774
  "attributes": [
295
- { "name": "agencyName", "values": [] },
296
- { "name": "homepageLink", "values": [] }
775
+ {
776
+ "name": "agencyName",
777
+ "description": "Agency name displayed as the footer heading.",
778
+ "values": []
779
+ },
780
+ {
781
+ "name": "homepageLink",
782
+ "description": "URL for the agency name link. If empty, name is not clickable.",
783
+ "values": []
784
+ }
297
785
  ],
298
786
  "references": []
299
787
  },
300
788
  {
301
789
  "name": "nys-globalheader",
302
- "description": "`<nys-globalheader>` renders a New York State–style global header.\n\nDisplays an optional application name, agency name, and homepage link.\nSupports slotted navigation content with automatic active-link detection\nand a responsive mobile menu.\n---\n\n\n### **Slots:**\n - **default** - Primary navigation list, typically a `<ul>` with links\n- **user-actions** - Optional user action elements such as login or profile Behavior: - Automatically highlights the best matching link based on the current URL - Duplicates navigation content for desktop and mobile layouts - Provides a toggleable mobile menu when navigation content exists",
790
+ "description": "Agency header with navigation, mobile menu, and active link highlighting.\n---\n\n\n### **Slots:**\n - _default_ - Navigation content (typically `<ul>` with `<li><a>` links). Auto-sanitized.",
303
791
  "attributes": [
304
- { "name": "appName", "values": [] },
305
- { "name": "agencyName", "values": [] },
306
- { "name": "homepageLink", "values": [] }
792
+ {
793
+ "name": "appName",
794
+ "description": "Application name displayed prominently.",
795
+ "values": []
796
+ },
797
+ {
798
+ "name": "agencyName",
799
+ "description": "Agency name displayed below app name (or as main title if no appName).",
800
+ "values": []
801
+ },
802
+ {
803
+ "name": "homepageLink",
804
+ "description": "URL for the header title link. If empty, title is not clickable.",
805
+ "values": []
806
+ }
307
807
  ],
308
808
  "references": []
309
809
  },
310
810
  {
311
811
  "name": "nys-icon",
312
- "description": "`<nys-icon>` renders an SVG icon from the internal icon library.\n\nIcons are inline SVGs and support sizing, rotation, flipping, color,\nand accessibility labeling.\n---\n",
812
+ "description": "SVG icon from Material Symbols library with size, rotation, and color options.\n---\n",
313
813
  "attributes": [
314
- { "name": "name", "values": [] },
315
- { "name": "ariaLabel", "values": [] },
316
- { "name": "rotate", "values": [] },
317
- { "name": "flip", "values": [] },
318
- { "name": "color", "values": [] },
814
+ {
815
+ "name": "name",
816
+ "description": "Icon name from Material Symbols library. Required.",
817
+ "values": []
818
+ },
819
+ {
820
+ "name": "ariaLabel",
821
+ "description": "Accessible label. When set, removes `aria-hidden` and adds `aria-label` to the SVG.",
822
+ "values": []
823
+ },
824
+ {
825
+ "name": "rotate",
826
+ "description": "Rotation in degrees. Applied via CSS `rotate`.",
827
+ "values": []
828
+ },
829
+ {
830
+ "name": "flip",
831
+ "description": "Flip direction: `horizontal`, `vertical`, or empty for none.",
832
+ "values": []
833
+ },
834
+ {
835
+ "name": "color",
836
+ "description": "Icon color. Accepts any CSS color value. Defaults to `currentcolor`.",
837
+ "values": []
838
+ },
319
839
  {
320
840
  "name": "size",
841
+ "description": "Icon size. Semantic sizes: `xs`-`5xl`. Pixel sizes: `12`-`50`.",
321
842
  "values": [
322
843
  { "name": "" },
323
844
  { "name": "xs" },
@@ -345,28 +866,73 @@
345
866
  },
346
867
  {
347
868
  "name": "nys-label",
348
- "description": "THIS IS A PRIVATE COMPONENT!\n`NysLabel` is a component for rendering form labels with optional\ndescriptions, flags (required/optional), and tooltips.\n---\n",
869
+ "description": "Internal label component for form fields with flag and tooltip support.\n---\n\n\n### **Slots:**\n - **description** - Custom HTML description content below the label.",
349
870
  "attributes": [
350
- { "name": "for", "values": [] },
351
- { "name": "label", "values": [] },
352
- { "name": "description", "values": [] },
353
- { "name": "flag", "values": [] },
354
- { "name": "inverted", "values": [] },
355
- { "name": "tooltip", "values": [] }
871
+ {
872
+ "name": "for",
873
+ "description": "ID of the form element this label is associated with.",
874
+ "values": []
875
+ },
876
+ {
877
+ "name": "label",
878
+ "description": "Label text displayed above the form field.",
879
+ "values": []
880
+ },
881
+ {
882
+ "name": "description",
883
+ "description": "Helper text displayed below the label.",
884
+ "values": []
885
+ },
886
+ {
887
+ "name": "flag",
888
+ "description": "Flag type: `required` shows asterisk, `optional` shows \"(Optional)\".",
889
+ "values": []
890
+ },
891
+ {
892
+ "name": "inverted",
893
+ "description": "Adjusts colors for dark backgrounds.",
894
+ "values": []
895
+ },
896
+ {
897
+ "name": "tooltip",
898
+ "description": "Tooltip text shown on hover/focus of info icon next to label.",
899
+ "values": []
900
+ }
356
901
  ],
357
902
  "references": []
358
903
  },
359
904
  {
360
905
  "name": "nys-modal",
361
- "description": "`<nys-modal>` renders an accessible modal dialog.\n\nSupports headings, optional subheading, body content, and action buttons.\nManages focus trapping, escape key handling, and body scroll locking.\n---\n\n\n### **Events:**\n - **nys-open** - Emitted when the modal opens\n- **nys-close** - Emitted when the modal closes\n\n### **Slots:**\n - _default_ - Modal body content\n- **actions** - Action buttons shown in the footer",
906
+ "description": "Accessible modal dialog with focus trap, keyboard support, and action slots.\n---\n\n\n### **Events:**\n - **nys-open** - Fired when modal opens. Detail: `{id}`.\n- **nys-close** - Fired when modal closes. Detail: `{id}`.\n\n### **Slots:**\n - _default_ - Default slot for body content.\n- **actions** - Action buttons displayed in footer. Buttons auto-resize on mobile.",
362
907
  "attributes": [
363
- { "name": "id", "values": [] },
364
- { "name": "heading", "values": [] },
365
- { "name": "subheading", "values": [] },
366
- { "name": "open", "values": [] },
367
- { "name": "mandatory", "values": [] },
908
+ {
909
+ "name": "id",
910
+ "description": "Unique identifier. Auto-generated if not provided.",
911
+ "values": []
912
+ },
913
+ {
914
+ "name": "heading",
915
+ "description": "Modal heading text. Required for accessibility.",
916
+ "values": []
917
+ },
918
+ {
919
+ "name": "subheading",
920
+ "description": "Secondary heading below the main heading.",
921
+ "values": []
922
+ },
923
+ {
924
+ "name": "open",
925
+ "description": "Controls modal visibility. Set to `true` to show.",
926
+ "values": []
927
+ },
928
+ {
929
+ "name": "mandatory",
930
+ "description": "Prevents dismissal via close button or Escape key. User must take an action.",
931
+ "values": []
932
+ },
368
933
  {
369
934
  "name": "width",
935
+ "description": "Modal width: `sm` (400px), `md` (600px), or `lg` (800px).",
370
936
  "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
371
937
  }
372
938
  ],
@@ -374,86 +940,281 @@
374
940
  },
375
941
  {
376
942
  "name": "nys-pagination",
377
- "description": "`<nys-pagination>` renders page navigation controls.\n\nDisplays previous and next buttons, page numbers, and ellipses\nwhen pages are skipped. Handles page bounds automatically.\n---\n\n\n### **Events:**\n - **nys-change** - Fired when the page changes detail: { page: number }",
943
+ "description": "Page navigation with numbered links, prev/next buttons, and responsive layout.\n---\n\n\n### **Events:**\n - **nys-change** - Fired when page changes. Detail: `{page}`.",
378
944
  "attributes": [
379
- { "name": "id", "values": [] },
380
- { "name": "name", "values": [] },
381
- { "name": "currentPage", "values": [] },
382
- { "name": "totalPages", "values": [] },
383
- { "name": "_twoBeforeLast", "values": [] }
945
+ {
946
+ "name": "id",
947
+ "description": "Unique identifier. Auto-generated if not provided.",
948
+ "values": []
949
+ },
950
+ {
951
+ "name": "name",
952
+ "description": "Name attribute for form association.",
953
+ "values": []
954
+ },
955
+ {
956
+ "name": "currentPage",
957
+ "description": "Currently active page (1-indexed). Clamped to valid range.",
958
+ "values": []
959
+ },
960
+ {
961
+ "name": "totalPages",
962
+ "description": "Total number of pages. Must be at least 1.",
963
+ "values": []
964
+ },
965
+ {
966
+ "name": "_twoBeforeLast",
967
+ "description": "Internal state for layout adjustments near the end.",
968
+ "values": []
969
+ }
384
970
  ],
385
971
  "references": []
386
972
  },
387
973
  {
388
974
  "name": "nys-radiobutton",
389
- "description": "`<nys-radiobutton>` represents a single radio button for use in a `<nys-radiogroup>`.\n\nFeatures:\n- Single selection per group\n- Supports labels, descriptions, tile layout, inverted style, and size variants\n- Integrates with forms and dispatches `nys-change` events on selection\n---\n\n\n### **Events:**\n - **nys-change** - Fired when the radio is selected or deselected detail: { id: string, checked: boolean, name: string, value: string }\n- **nys-focus** - Fired when the radio gains focus\n- **nys-blur** - Fired when the radio loses focus\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Optional description text announced to screen readers",
975
+ "description": "Radio button for single selection from mutually exclusive options.\n---\n\n\n### **Events:**\n - **nys-error-clear**\n- **nys-change** - Fired when selection changes. Detail: `{id, checked, name, value}`.\n- **nys-focus** - Fired when radio gains focus.\n- **nys-blur** - Fired when radio loses focus.\n- **nys-error**\n\n### **Methods:**\n - **getInputElement(): _Promise<HTMLInputElement | null>_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Custom HTML description content.",
390
976
  "attributes": [
391
- { "name": "checked", "values": [] },
392
- { "name": "disabled", "values": [] },
393
- { "name": "required", "values": [] },
394
- { "name": "label", "values": [] },
395
- { "name": "description", "values": [] },
396
- { "name": "id", "values": [] },
397
- { "name": "name", "values": [] },
398
- { "name": "value", "values": [] },
399
- { "name": "inverted", "values": [] },
400
- { "name": "form", "values": [] },
401
- { "name": "size", "values": [{ "name": "sm" }, { "name": "md" }] },
402
- { "name": "tile", "values": [] }
977
+ {
978
+ "name": "checked",
979
+ "description": "Whether this radio is selected. Only one per group can be checked.",
980
+ "values": []
981
+ },
982
+ {
983
+ "name": "disabled",
984
+ "description": "Prevents interaction.",
985
+ "values": []
986
+ },
987
+ {
988
+ "name": "required",
989
+ "description": "Marks group as required. Set on radiogroup, not individual radios.",
990
+ "values": []
991
+ },
992
+ {
993
+ "name": "label",
994
+ "description": "Visible label text. Required for accessibility.",
995
+ "values": []
996
+ },
997
+ {
998
+ "name": "description",
999
+ "description": "Helper text below label. Use slot for custom HTML.",
1000
+ "values": []
1001
+ },
1002
+ {
1003
+ "name": "id",
1004
+ "description": "Unique identifier. Auto-generated if not provided.",
1005
+ "values": []
1006
+ },
1007
+ {
1008
+ "name": "name",
1009
+ "description": "Group name. Radios with same name are mutually exclusive.",
1010
+ "values": []
1011
+ },
1012
+ {
1013
+ "name": "value",
1014
+ "description": "Value submitted when this radio is selected.",
1015
+ "values": []
1016
+ },
1017
+ {
1018
+ "name": "inverted",
1019
+ "description": "Adjusts colors for dark backgrounds.",
1020
+ "values": []
1021
+ },
1022
+ {
1023
+ "name": "form",
1024
+ "description": "Form `id` to associate with.",
1025
+ "values": []
1026
+ },
1027
+ {
1028
+ "name": "size",
1029
+ "description": "Radio size: `sm` (24px) or `md` (32px, default).",
1030
+ "values": [{ "name": "sm" }, { "name": "md" }]
1031
+ },
1032
+ {
1033
+ "name": "tile",
1034
+ "description": "Renders as tile with larger clickable area.",
1035
+ "values": []
1036
+ },
1037
+ { "name": "other", "values": [] },
1038
+ { "name": "showOtherError", "values": [] }
403
1039
  ],
404
1040
  "references": []
405
1041
  },
406
1042
  {
407
1043
  "name": "nys-radiogroup",
408
- "description": "`<nys-radiogroup>` groups `<nys-radiobutton>` elements into a single\nselectable control.\n\nSupports keyboard navigation, validation, and native form submission\nthrough ElementInternals.\n---\n\n\n### **Events:**\n - **nys-change** - Fired when selection changes detail: { name: string; value: string }\n\n### **Slots:**\n - **default** - One or more `<nys-radiobutton>` elements\n- **description** - Optional descriptive text announced to screen readers",
1044
+ "description": "Container for grouping radio buttons as a single form control.\n---\n\n\n### **Slots:**\n - _default_ - Default slot for `nys-radiobutton` elements.\n- **description** - Custom HTML description content.",
409
1045
  "attributes": [
410
- { "name": "id", "values": [] },
411
- { "name": "name", "values": [] },
412
- { "name": "required", "values": [] },
413
- { "name": "optional", "values": [] },
414
- { "name": "showError", "values": [] },
415
- { "name": "errorMessage", "values": [] },
416
- { "name": "label", "values": [] },
417
- { "name": "description", "values": [] },
418
- { "name": "tile", "values": [] },
419
- { "name": "tooltip", "values": [] },
420
- { "name": "inverted", "values": [] },
421
- { "name": "form", "values": [] },
422
- { "name": "size", "values": [{ "name": "sm" }, { "name": "md" }] }
1046
+ {
1047
+ "name": "id",
1048
+ "description": "Unique identifier. Auto-generated if not provided.",
1049
+ "values": []
1050
+ },
1051
+ {
1052
+ "name": "name",
1053
+ "description": "Name for form submission. Auto-populated from child radiobuttons.",
1054
+ "values": []
1055
+ },
1056
+ {
1057
+ "name": "required",
1058
+ "description": "Requires a selection before form submission.",
1059
+ "values": []
1060
+ },
1061
+ {
1062
+ "name": "optional",
1063
+ "description": "Shows \"Optional\" flag.",
1064
+ "values": []
1065
+ },
1066
+ {
1067
+ "name": "showError",
1068
+ "description": "Shows error message when true.",
1069
+ "values": []
1070
+ },
1071
+ {
1072
+ "name": "errorMessage",
1073
+ "description": "Error message text. Shown only when `showError` is true.",
1074
+ "values": []
1075
+ },
1076
+ {
1077
+ "name": "label",
1078
+ "description": "Visible label text for the group.",
1079
+ "values": []
1080
+ },
1081
+ {
1082
+ "name": "description",
1083
+ "description": "Helper text below label. Use slot for custom HTML.",
1084
+ "values": []
1085
+ },
1086
+ {
1087
+ "name": "tile",
1088
+ "description": "Renders all radiobuttons as tiles with larger clickable area.",
1089
+ "values": []
1090
+ },
1091
+ {
1092
+ "name": "tooltip",
1093
+ "description": "Tooltip text shown on hover/focus of info icon.",
1094
+ "values": []
1095
+ },
1096
+ {
1097
+ "name": "inverted",
1098
+ "description": "Adjusts colors for dark backgrounds. Applied to all children.",
1099
+ "values": []
1100
+ },
1101
+ {
1102
+ "name": "form",
1103
+ "description": "Form `id` to associate with. Applied to all children.",
1104
+ "values": []
1105
+ },
1106
+ {
1107
+ "name": "size",
1108
+ "description": "Radio size for all children: `sm` (24px) or `md` (32px, default).",
1109
+ "values": [{ "name": "sm" }, { "name": "md" }]
1110
+ }
423
1111
  ],
424
1112
  "references": []
425
1113
  },
426
1114
  {
427
1115
  "name": "nys-option",
428
- "description": "\n---\n",
1116
+ "description": "Option item for nys-select dropdown.\n---\n\n\n### **Slots:**\n - _default_ - Option label text. Auto-populates the `label` prop if provided.",
429
1117
  "attributes": [
430
- { "name": "disabled", "values": [] },
431
- { "name": "selected", "values": [] },
432
- { "name": "value", "values": [] },
433
- { "name": "label", "values": [] },
434
- { "name": "hidden", "values": [] }
1118
+ {
1119
+ "name": "disabled",
1120
+ "description": "Prevents selection of this option.",
1121
+ "values": []
1122
+ },
1123
+ {
1124
+ "name": "selected",
1125
+ "description": "Pre-selects this option.",
1126
+ "values": []
1127
+ },
1128
+ {
1129
+ "name": "value",
1130
+ "description": "Value submitted when this option is selected.",
1131
+ "values": []
1132
+ },
1133
+ {
1134
+ "name": "label",
1135
+ "description": "Display text for the option. Auto-populated from slot content if not set.",
1136
+ "values": []
1137
+ },
1138
+ {
1139
+ "name": "hidden",
1140
+ "description": "Hides the option from the dropdown list.",
1141
+ "values": []
1142
+ }
435
1143
  ],
436
1144
  "references": []
437
1145
  },
438
1146
  {
439
1147
  "name": "nys-select",
440
- "description": "`<nys-select>` is a custom select/dropdown component.\n\nFeatures:\n- Supports slotted `<nys-option>` elements, native `<option>` and `<optgroup>`\n- Integrates with forms via ElementInternals\n- Handles validation, error messages, and required/optional states\n- Inverted style and width variants supported\n---\n\n\n### **Events:**\n - **nys-change** - Fired when the selected value changes detail: { id: string, value: string }\n- **nys-focus** - Fired when the select gains focus\n- **nys-blur** - Fired when the select loses focus\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Optional description text announced to screen readers\n- **default** - Options (<nys-option>, <option>, <optgroup>) to populate the dropdown",
1148
+ "description": "Dropdown select for choosing one option from a list.\n---\n\n\n### **Events:**\n - **nys-change** - Fired when selection changes. Detail: `{id, value}`.\n- **nys-focus** - Fired when select gains focus.\n- **nys-blur** - Fired when select loses focus. Triggers validation.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - _default_ - Default slot for `<option>` and `<optgroup>` elements.\n- **description** - Custom HTML description content below the label.",
441
1149
  "attributes": [
442
- { "name": "id", "values": [] },
443
- { "name": "name", "values": [] },
444
- { "name": "label", "values": [] },
445
- { "name": "description", "values": [] },
446
- { "name": "value", "values": [] },
447
- { "name": "disabled", "values": [] },
448
- { "name": "required", "values": [] },
449
- { "name": "optional", "values": [] },
450
- { "name": "tooltip", "values": [] },
451
- { "name": "form", "values": [] },
452
- { "name": "inverted", "values": [] },
453
- { "name": "showError", "values": [] },
454
- { "name": "errorMessage", "values": [] },
1150
+ {
1151
+ "name": "id",
1152
+ "description": "Unique identifier. Auto-generated if not provided.",
1153
+ "values": []
1154
+ },
1155
+ {
1156
+ "name": "name",
1157
+ "description": "Name for form submission.",
1158
+ "values": []
1159
+ },
1160
+ {
1161
+ "name": "label",
1162
+ "description": "Visible label text. Required for accessibility.",
1163
+ "values": []
1164
+ },
1165
+ {
1166
+ "name": "description",
1167
+ "description": "Helper text below label. Use slot for custom HTML.",
1168
+ "values": []
1169
+ },
1170
+ {
1171
+ "name": "value",
1172
+ "description": "Currently selected option value.",
1173
+ "values": []
1174
+ },
1175
+ {
1176
+ "name": "disabled",
1177
+ "description": "Prevents interaction.",
1178
+ "values": []
1179
+ },
1180
+ {
1181
+ "name": "required",
1182
+ "description": "Marks as required. Shows \"Required\" flag and validates on blur.",
1183
+ "values": []
1184
+ },
1185
+ {
1186
+ "name": "optional",
1187
+ "description": "Shows \"Optional\" flag. Use when most fields are required.",
1188
+ "values": []
1189
+ },
1190
+ {
1191
+ "name": "tooltip",
1192
+ "description": "Tooltip text shown on hover/focus of info icon.",
1193
+ "values": []
1194
+ },
1195
+ {
1196
+ "name": "form",
1197
+ "description": "Form `id` to associate with when select is outside form element.",
1198
+ "values": []
1199
+ },
1200
+ {
1201
+ "name": "inverted",
1202
+ "description": "Adjusts colors for dark backgrounds.",
1203
+ "values": []
1204
+ },
1205
+ {
1206
+ "name": "showError",
1207
+ "description": "Shows error message when true. Set by validation or manually.",
1208
+ "values": []
1209
+ },
1210
+ {
1211
+ "name": "errorMessage",
1212
+ "description": "Error message text. Shown only when `showError` is true.",
1213
+ "values": []
1214
+ },
455
1215
  {
456
1216
  "name": "width",
1217
+ "description": "Select width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default).",
457
1218
  "values": [
458
1219
  { "name": "" },
459
1220
  { "name": "sm" },
@@ -467,35 +1228,83 @@
467
1228
  },
468
1229
  {
469
1230
  "name": "nys-skipnav",
470
- "description": "`<nys-skipnav>` provides an accessible skip navigation link for keyboard\nand screen reader users to jump directly to the main content of a page.\n\nFeatures:\n- Default target is `#main-content` if `href` is not provided\n- Link becomes visible on focus and hides on blur\n- Ensures the target element is focusable for accessibility\n---\n",
1231
+ "description": "Skip navigation link for keyboard accessibility. Hidden until focused.\n---\n",
471
1232
  "attributes": [
472
- { "name": "id", "values": [] },
473
- { "name": "href", "values": [] }
1233
+ {
1234
+ "name": "id",
1235
+ "description": "Unique identifier. Auto-generated if not provided.",
1236
+ "values": []
1237
+ },
1238
+ {
1239
+ "name": "href",
1240
+ "description": "Target element ID (with `#`). Defaults to `#main-content`.",
1241
+ "values": []
1242
+ }
474
1243
  ],
475
1244
  "references": []
476
1245
  },
477
1246
  {
478
1247
  "name": "nys-step",
479
- "description": "\n---\n",
1248
+ "description": "Individual step for use within nys-stepper with navigation support.\n---\n\n\n### **Events:**\n - **nys-step-click** - Fired when a navigable step is clicked. Detail: `{href, label}`. Cancelable.",
480
1249
  "attributes": [
481
- { "name": "selected", "values": [] },
482
- { "name": "current", "values": [] },
483
- { "name": "label", "values": [] },
484
- { "name": "href", "values": [] },
485
- { "name": "isCompactExpanded", "values": [] },
486
- { "name": "stepNumber", "values": [] }
1250
+ {
1251
+ "name": "selected",
1252
+ "description": "Whether this step is currently being viewed. Set by parent stepper.",
1253
+ "values": []
1254
+ },
1255
+ {
1256
+ "name": "current",
1257
+ "description": "Marks the furthest reached step. Steps before this are navigable.",
1258
+ "values": []
1259
+ },
1260
+ {
1261
+ "name": "label",
1262
+ "description": "Step label text displayed alongside the step number.",
1263
+ "values": []
1264
+ },
1265
+ {
1266
+ "name": "href",
1267
+ "description": "URL for page navigation when step is clicked. Optional for SPA routing.",
1268
+ "values": []
1269
+ },
1270
+ {
1271
+ "name": "isCompactExpanded",
1272
+ "description": "Internal: Whether parent stepper's compact view is expanded.",
1273
+ "values": []
1274
+ },
1275
+ {
1276
+ "name": "stepNumber",
1277
+ "description": "Step number (1-indexed). Auto-assigned by parent stepper.",
1278
+ "values": []
1279
+ }
487
1280
  ],
488
1281
  "references": []
489
1282
  },
490
1283
  {
491
1284
  "name": "nys-stepper",
492
- "description": "`<nys-stepper>` manages a sequence of `<nys-step>` elements, providing\nmulti-step navigation for forms or workflows.\n\nFeatures:\n- Tracks selected and current steps\n- Displays a step counter (e.g., \"Step 2 of 5\")\n- Supports compact/expanded view toggle\n- Validates that only `<nys-step>` or `<div slot=\"actions\">` children are used\n---\n\n\n### **Events:**\n - **nys-step-click** - Fired when a step is clicked; bubbles with the event path",
1285
+ "description": "Multi-step progress indicator with navigation and mobile-friendly compact view.\n---\n\n\n### **Slots:**\n - _default_ - Default slot for `nys-step` elements.\n- **actions** - Navigation buttons (e.g., Back, Continue). Must be wrapped in a `<div>`.",
493
1286
  "attributes": [
494
- { "name": "id", "values": [] },
495
- { "name": "name", "values": [] },
496
- { "name": "label", "values": [] },
497
- { "name": "counterText", "values": [] },
498
- { "name": "isCompactExpanded", "values": [] }
1287
+ { "name": "id", "description": "Unique identifier.", "values": [] },
1288
+ {
1289
+ "name": "name",
1290
+ "description": "Name attribute for form association.",
1291
+ "values": []
1292
+ },
1293
+ {
1294
+ "name": "label",
1295
+ "description": "Title displayed above the step counter.",
1296
+ "values": []
1297
+ },
1298
+ {
1299
+ "name": "counterText",
1300
+ "description": "Progress text (e.g., \"Step 2 of 5\"). Auto-updated based on selection.",
1301
+ "values": []
1302
+ },
1303
+ {
1304
+ "name": "isCompactExpanded",
1305
+ "description": "Whether compact mobile view is expanded to show all steps.",
1306
+ "values": []
1307
+ }
499
1308
  ],
500
1309
  "references": []
501
1310
  },
@@ -514,24 +1323,81 @@
514
1323
  },
515
1324
  {
516
1325
  "name": "nys-textarea",
517
- "description": "`<nys-textarea>` is a form-enabled textarea with validation, accessibility support,\nand live error messages. Integrates with forms via ElementInternals.\n---\n\n\n### **Events:**\n - **nys-input** - Fired on input, detail: `{ id, value }`\n- **nys-focus** - Fired on focus.\n- **nys-blur** - Fired on blur.\n- **nys-select** - Fired on text selection, detail: `{ id, value }`\n- **nys-selectionchange** - Fired on selection change, detail: `{ id, value }`\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Optional slot for custom description content below the label.",
1326
+ "description": "Multi-line text input for comments, descriptions, and feedback.\n---\n\n\n### **Events:**\n - **nys-input** - Fired on input change. Detail: `{id, value}`.\n- **nys-focus** - Fired when textarea gains focus.\n- **nys-blur** - Fired when textarea loses focus. Triggers validation.\n- **nys-select** - Fired when user selects text. Detail: `{id, value}`.\n- **nys-selectionchange**\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Custom HTML description content below the label.",
518
1327
  "attributes": [
519
- { "name": "id", "values": [] },
520
- { "name": "name", "values": [] },
521
- { "name": "label", "values": [] },
522
- { "name": "description", "values": [] },
523
- { "name": "placeholder", "values": [] },
524
- { "name": "value", "values": [] },
525
- { "name": "disabled", "values": [] },
526
- { "name": "readonly", "values": [] },
527
- { "name": "required", "values": [] },
528
- { "name": "optional", "values": [] },
529
- { "name": "tooltip", "values": [] },
530
- { "name": "inverted", "values": [] },
531
- { "name": "form", "values": [] },
532
- { "name": "maxlength", "values": [] },
1328
+ {
1329
+ "name": "id",
1330
+ "description": "Unique identifier. Auto-generated if not provided.",
1331
+ "values": []
1332
+ },
1333
+ {
1334
+ "name": "name",
1335
+ "description": "Name for form submission.",
1336
+ "values": []
1337
+ },
1338
+ {
1339
+ "name": "label",
1340
+ "description": "Visible label text. Required for accessibility.",
1341
+ "values": []
1342
+ },
1343
+ {
1344
+ "name": "description",
1345
+ "description": "Helper text below label. Use slot for custom HTML.",
1346
+ "values": []
1347
+ },
1348
+ {
1349
+ "name": "placeholder",
1350
+ "description": "Placeholder text. Don't use as label replacement.",
1351
+ "values": []
1352
+ },
1353
+ {
1354
+ "name": "value",
1355
+ "description": "Current textarea value.",
1356
+ "values": []
1357
+ },
1358
+ {
1359
+ "name": "disabled",
1360
+ "description": "Prevents interaction.",
1361
+ "values": []
1362
+ },
1363
+ {
1364
+ "name": "readonly",
1365
+ "description": "Makes textarea read-only but focusable.",
1366
+ "values": []
1367
+ },
1368
+ {
1369
+ "name": "required",
1370
+ "description": "Marks as required. Shows \"Required\" flag and validates on blur.",
1371
+ "values": []
1372
+ },
1373
+ {
1374
+ "name": "optional",
1375
+ "description": "Shows \"Optional\" flag. Use when most fields are required.",
1376
+ "values": []
1377
+ },
1378
+ {
1379
+ "name": "tooltip",
1380
+ "description": "Tooltip text shown on hover/focus of info icon.",
1381
+ "values": []
1382
+ },
1383
+ {
1384
+ "name": "inverted",
1385
+ "description": "Adjusts colors for dark backgrounds.",
1386
+ "values": []
1387
+ },
1388
+ {
1389
+ "name": "form",
1390
+ "description": "Form `id` to associate with when textarea is outside form element.",
1391
+ "values": []
1392
+ },
1393
+ {
1394
+ "name": "maxlength",
1395
+ "description": "Maximum character length.",
1396
+ "values": []
1397
+ },
533
1398
  {
534
1399
  "name": "width",
1400
+ "description": "Textarea width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default).",
535
1401
  "values": [
536
1402
  { "name": "" },
537
1403
  { "name": "sm" },
@@ -540,24 +1406,46 @@
540
1406
  { "name": "full" }
541
1407
  ]
542
1408
  },
543
- { "name": "rows", "values": [] },
1409
+ {
1410
+ "name": "rows",
1411
+ "description": "Visible height in lines.",
1412
+ "values": []
1413
+ },
544
1414
  {
545
1415
  "name": "resize",
1416
+ "description": "Resize behavior: `vertical` (default, user can resize height), `none` (fixed size).",
546
1417
  "values": [{ "name": "vertical" }, { "name": "none" }]
547
1418
  },
548
- { "name": "showError", "values": [] },
549
- { "name": "errorMessage", "values": [] }
1419
+ {
1420
+ "name": "showError",
1421
+ "description": "Shows error message when true. Set by validation or manually.",
1422
+ "values": []
1423
+ },
1424
+ {
1425
+ "name": "errorMessage",
1426
+ "description": "Error message text. Shown only when `showError` is true.",
1427
+ "values": []
1428
+ }
550
1429
  ],
551
1430
  "references": []
552
1431
  },
553
1432
  {
554
1433
  "name": "nys-textinput",
555
- "description": "`<nys-textinput>` is a form-enabled text input with validation, optional\nmasking, password toggle, accessibility support, and live error messages.\nWorks with forms via ElementInternals.\n---\n\n\n### **Events:**\n - **nys-input** - Fired on input change. Detail: `{ id, value }`.\n- **nys-focus** - Fired when input receives focus.\n- **nys-blur** - Fired when input loses focus.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Optional custom description content below the label.\n- **startButton** - Slot for a single <nys-button> at the start of the input.\n- **endButton** - Slot for a single <nys-button> at the end of the input.",
1434
+ "description": "Text input for short single-line data with validation and masking support.\n---\n\n\n### **Events:**\n - **nys-input** - Fired on input change. Detail: `{id, value}`.\n- **nys-focus** - Fired when input gains focus.\n- **nys-blur** - Fired when input loses focus. Triggers validation.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Functions\n--------------------------------------------------------------------------\n\n### **Slots:**\n - **description** - Custom HTML description content below the label.\n- **startButton** - Button at input start. Use single `nys-button` only.\n- **endButton** - Button at input end. Use single `nys-button` only.",
556
1435
  "attributes": [
557
- { "name": "id", "values": [] },
558
- { "name": "name", "values": [] },
1436
+ {
1437
+ "name": "id",
1438
+ "description": "Unique identifier. Auto-generated if not provided.",
1439
+ "values": []
1440
+ },
1441
+ {
1442
+ "name": "name",
1443
+ "description": "Name for form submission.",
1444
+ "values": []
1445
+ },
559
1446
  {
560
1447
  "name": "type",
1448
+ "description": "Input type: `text` (default), `email`, `number`, `password`, `search`, `tel` (auto-masked), `url`.",
561
1449
  "values": [
562
1450
  { "name": "" },
563
1451
  { "name": "email" },
@@ -569,20 +1457,74 @@
569
1457
  { "name": "url" }
570
1458
  ]
571
1459
  },
572
- { "name": "label", "values": [] },
573
- { "name": "description", "values": [] },
574
- { "name": "placeholder", "values": [] },
575
- { "name": "value", "values": [] },
576
- { "name": "disabled", "values": [] },
577
- { "name": "readonly", "values": [] },
578
- { "name": "required", "values": [] },
579
- { "name": "optional", "values": [] },
580
- { "name": "tooltip", "values": [] },
581
- { "name": "form", "values": [] },
582
- { "name": "pattern", "values": [] },
583
- { "name": "maxlength", "values": [] },
1460
+ {
1461
+ "name": "label",
1462
+ "description": "Visible label text. Required for accessibility.",
1463
+ "values": []
1464
+ },
1465
+ {
1466
+ "name": "description",
1467
+ "description": "Helper text below label. Use slot for custom HTML.",
1468
+ "values": []
1469
+ },
1470
+ {
1471
+ "name": "placeholder",
1472
+ "description": "Placeholder text. Don't use as label replacement.",
1473
+ "values": []
1474
+ },
1475
+ {
1476
+ "name": "value",
1477
+ "description": "Current input value.",
1478
+ "values": []
1479
+ },
1480
+ {
1481
+ "name": "disabled",
1482
+ "description": "Prevents interaction.",
1483
+ "values": []
1484
+ },
1485
+ {
1486
+ "name": "readonly",
1487
+ "description": "Makes input read-only but focusable.",
1488
+ "values": []
1489
+ },
1490
+ {
1491
+ "name": "required",
1492
+ "description": "Marks as required. Shows \"Required\" flag and validates on blur.",
1493
+ "values": []
1494
+ },
1495
+ {
1496
+ "name": "optional",
1497
+ "description": "Shows \"Optional\" flag. Use when most fields are required.",
1498
+ "values": []
1499
+ },
1500
+ {
1501
+ "name": "tooltip",
1502
+ "description": "Tooltip text shown on hover/focus of info icon.",
1503
+ "values": []
1504
+ },
1505
+ {
1506
+ "name": "form",
1507
+ "description": "Form `id` to associate with when input is outside form element.",
1508
+ "values": []
1509
+ },
1510
+ {
1511
+ "name": "pattern",
1512
+ "description": "Regex pattern for validation. Shows error on mismatch.",
1513
+ "values": []
1514
+ },
1515
+ {
1516
+ "name": "maxlength",
1517
+ "description": "Maximum character length.",
1518
+ "values": []
1519
+ },
1520
+ {
1521
+ "name": "ariaLabel",
1522
+ "description": "Accessible label. When set, assuming \"label\" isn't provided for private special cases (i.e., <checkbox other>).",
1523
+ "values": []
1524
+ },
584
1525
  {
585
1526
  "name": "width",
1527
+ "description": "Input width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default).",
586
1528
  "values": [
587
1529
  { "name": "" },
588
1530
  { "name": "sm" },
@@ -591,61 +1533,170 @@
591
1533
  { "name": "full" }
592
1534
  ]
593
1535
  },
594
- { "name": "step", "values": [] },
595
- { "name": "min", "values": [] },
596
- { "name": "max", "values": [] },
597
- { "name": "inverted", "values": [] },
598
- { "name": "showError", "values": [] },
599
- { "name": "errorMessage", "values": [] }
1536
+ {
1537
+ "name": "step",
1538
+ "description": "Step increment for `type=\"number\"`.",
1539
+ "values": []
1540
+ },
1541
+ {
1542
+ "name": "min",
1543
+ "description": "Minimum value for `type=\"number\"`.",
1544
+ "values": []
1545
+ },
1546
+ {
1547
+ "name": "max",
1548
+ "description": "Maximum value for `type=\"number\"`.",
1549
+ "values": []
1550
+ },
1551
+ {
1552
+ "name": "inverted",
1553
+ "description": "Adjusts colors for dark backgrounds.",
1554
+ "values": []
1555
+ },
1556
+ {
1557
+ "name": "showError",
1558
+ "description": "Shows error message when true. Set by validation or manually.",
1559
+ "values": []
1560
+ },
1561
+ {
1562
+ "name": "errorMessage",
1563
+ "description": "Error message text. Shown only when `showError` is true.",
1564
+ "values": []
1565
+ }
600
1566
  ],
601
1567
  "references": []
602
1568
  },
603
1569
  {
604
1570
  "name": "nys-toggle",
605
- "description": "`<nys-toggle>` is a form-associated toggle switch with label, description,\nsize variants, inverted styles, and optional icons. Supports keyboard\ninteraction and integrates with forms via ElementInternals.\n---\n\n\n### **Events:**\n - **nys-change** - Fired when toggle changes state. Detail: `{ id, checked }`.\n- **nys-focus** - Fired when toggle receives focus.\n- **nys-blur** - Fired when toggle loses focus.\n\n### **Slots:**\n - **description** - Optional slot to provide additional description below the label.",
1571
+ "description": "Toggle switch for binary settings with immediate effect.\n---\n\n\n### **Events:**\n - **nys-change** - Fired when toggle state changes. Detail: `{id, checked}`.\n- **nys-focus** - Fired when toggle gains focus.\n- **nys-blur** - Fired when toggle loses focus.\n\n### **Slots:**\n - **description** - Custom HTML description content.",
606
1572
  "attributes": [
607
- { "name": "id", "values": [] },
608
- { "name": "name", "values": [] },
609
- { "name": "value", "values": [] },
610
- { "name": "label", "values": [] },
611
- { "name": "description", "values": [] },
612
- { "name": "form", "values": [] },
613
- { "name": "checked", "values": [] },
614
- { "name": "disabled", "values": [] },
615
- { "name": "noIcon", "values": [] },
616
- { "name": "inverted", "values": [] },
617
- { "name": "size", "values": [{ "name": "sm" }, { "name": "md" }] }
1573
+ {
1574
+ "name": "id",
1575
+ "description": "Unique identifier. Auto-generated if not provided.",
1576
+ "values": []
1577
+ },
1578
+ {
1579
+ "name": "name",
1580
+ "description": "Name for form submission.",
1581
+ "values": []
1582
+ },
1583
+ {
1584
+ "name": "value",
1585
+ "description": "Value submitted when toggle is on.",
1586
+ "values": []
1587
+ },
1588
+ { "name": "label", "description": "Visible label text.", "values": [] },
1589
+ {
1590
+ "name": "description",
1591
+ "description": "Helper text below label. Use slot for custom HTML.",
1592
+ "values": []
1593
+ },
1594
+ {
1595
+ "name": "form",
1596
+ "description": "Form `id` to associate with.",
1597
+ "values": []
1598
+ },
1599
+ {
1600
+ "name": "checked",
1601
+ "description": "Whether toggle is on.",
1602
+ "values": []
1603
+ },
1604
+ {
1605
+ "name": "disabled",
1606
+ "description": "Prevents interaction.",
1607
+ "values": []
1608
+ },
1609
+ {
1610
+ "name": "noIcon",
1611
+ "description": "Hides check/close icon inside toggle knob.",
1612
+ "values": []
1613
+ },
1614
+ {
1615
+ "name": "inverted",
1616
+ "description": "Adjusts colors for dark backgrounds.",
1617
+ "values": []
1618
+ },
1619
+ {
1620
+ "name": "size",
1621
+ "description": "Toggle size: `sm` or `md` (default).",
1622
+ "values": [{ "name": "sm" }, { "name": "md" }]
1623
+ }
618
1624
  ],
619
1625
  "references": []
620
1626
  },
621
1627
  {
622
1628
  "name": "nys-tooltip",
623
- "description": "`<nys-tooltip>` is a custom tooltip component for NYS design system elements.\nIt supports dynamic positioning, screen-reader accessibility, keyboard interaction,\nand viewport overflow handling.\n\nThe tooltip automatically positions itself relative to a target element specified\nvia the `for` attribute, but can also respect a user-defined position.\n---\n\n\n### **Events:**\n - **nys-focus** - Dispatched when the reference element receives focus (via keyboard or programmatically).\n- **nys-blur** - Dispatched when the reference element loses focus or mouse leaves the tooltip. Notes: - Tooltip visibility is automatically managed on hover/focus of the reference element. - The component adjusts position dynamically to prevent overflow off-screen. - Supports keyboard dismissal with the Escape key.",
1629
+ "description": "Contextual tooltip with auto-positioning, keyboard support, and screen reader integration.\n---\n",
624
1630
  "attributes": [
625
- { "name": "id", "values": [] },
626
- { "name": "text", "values": [] },
627
- { "name": "inverted", "values": [] },
628
- { "name": "for", "values": [] },
629
- { "name": "position", "values": [] }
1631
+ {
1632
+ "name": "id",
1633
+ "description": "Unique identifier. Auto-generated if not provided.",
1634
+ "values": []
1635
+ },
1636
+ {
1637
+ "name": "text",
1638
+ "description": "Tooltip content text. Required.",
1639
+ "values": []
1640
+ },
1641
+ {
1642
+ "name": "inverted",
1643
+ "description": "Adjusts colors for dark backgrounds.",
1644
+ "values": []
1645
+ },
1646
+ {
1647
+ "name": "for",
1648
+ "description": "ID of the trigger element to attach this tooltip to. Required.",
1649
+ "values": []
1650
+ },
1651
+ {
1652
+ "name": "position",
1653
+ "description": "Preferred position relative to trigger. Auto-adjusts if space is insufficient.",
1654
+ "values": []
1655
+ }
630
1656
  ],
631
1657
  "references": []
632
1658
  },
633
1659
  {
634
1660
  "name": "nys-unavfooter",
635
- "description": "`<nys-unavfooter>` is a footer component for New York State websites.\nIt displays the official NYS logo linking to ny.gov and a set of primary navigation links.\n\nFeatures:\n- Renders the NYS logo as an inline SVG linking to https://www.ny.gov\n- Provides key navigation links\n---\n",
1661
+ "description": "Universal NYS footer with logo and statewide links. Required site-wide.\n---\n",
636
1662
  "attributes": [],
637
1663
  "references": []
638
1664
  },
639
1665
  {
640
1666
  "name": "nys-unavheader",
641
- "description": "`<nys-unavheader>` is a universal header for New York State websites.\n\nFeatures:\n- Trust bar indicating official NYS site status, with expandable details\n- NYS logo linking to the homepage\n- Search bar with dropdown behavior for mobile and desktop\n- Language translation dropdown supporting multiple languages\n- Accessible interactions with ARIA attributes and keyboard handling\n---\n",
642
- "attributes": [
643
- { "name": "trustbarVisible", "values": [] },
644
- { "name": "searchDropdownVisible", "values": [] },
645
- { "name": "languageVisible", "values": [] },
646
- { "name": "isSearchFocused", "values": [] },
647
- { "name": "hideTranslate", "values": [] },
648
- { "name": "hideSearch", "values": [] },
1667
+ "description": "Universal NYS header with trust bar, search, and translation. Required site-wide.\n---\n",
1668
+ "attributes": [
1669
+ {
1670
+ "name": "trustbarVisible",
1671
+ "description": "Internal: Whether trust bar panel is expanded.",
1672
+ "values": []
1673
+ },
1674
+ {
1675
+ "name": "searchDropdownVisible",
1676
+ "description": "Internal: Whether search dropdown is visible (mobile).",
1677
+ "values": []
1678
+ },
1679
+ {
1680
+ "name": "languageVisible",
1681
+ "description": "Internal: Whether language dropdown is visible.",
1682
+ "values": []
1683
+ },
1684
+ {
1685
+ "name": "isSearchFocused",
1686
+ "description": "Internal: Whether search input is focused.",
1687
+ "values": []
1688
+ },
1689
+ {
1690
+ "name": "hideTranslate",
1691
+ "description": "Hides the translation dropdown.",
1692
+ "values": []
1693
+ },
1694
+ {
1695
+ "name": "hideSearch",
1696
+ "description": "Hides the search functionality.",
1697
+ "values": []
1698
+ },
1699
+ { "name": "searchUrl", "values": [] },
649
1700
  {
650
1701
  "name": "languages",
651
1702
  "values": [{ "name": "[string" }, { "name": "string][]" }]