@nysds/components 1.19.3 → 1.20.0-alpha-3

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 (62) hide show
  1. package/custom-elements.json +180 -1055
  2. package/dist/.vscode/vscode.html-custom-data.json +7 -7
  3. package/dist/custom-elements.json +180 -1055
  4. package/dist/nysds.es.js +724 -731
  5. package/dist/nysds.es.js.map +1 -1
  6. package/dist/nysds.js +136 -730
  7. package/dist/nysds.js.map +1 -1
  8. package/dist/packages/nys-accordion/src/nys-accordion.d.ts +6 -35
  9. package/dist/packages/nys-accordion/src/nys-accordionitem.d.ts +3 -8
  10. package/dist/packages/nys-alert/src/nys-alert.d.ts +4 -81
  11. package/dist/packages/nys-avatar/src/nys-avatar.d.ts +4 -44
  12. package/dist/packages/nys-backtotop/src/nys-backtotop.d.ts +3 -70
  13. package/dist/packages/nys-badge/src/nys-badge.d.ts +4 -54
  14. package/dist/packages/nys-breadcrumbs/src/nys-breadcrumbs.d.ts +7 -75
  15. package/dist/packages/nys-button/src/nys-button.d.ts +7 -60
  16. package/dist/packages/nys-checkbox/src/nys-checkbox.d.ts +7 -4
  17. package/dist/packages/nys-checkbox/src/nys-checkboxgroup.d.ts +1 -75
  18. package/dist/packages/nys-combobox/src/nys-combobox.d.ts +0 -164
  19. package/dist/packages/nys-datepicker/src/nys-datepicker.d.ts +8 -64
  20. package/dist/packages/nys-divider/src/nys-divider.d.ts +1 -24
  21. package/dist/packages/nys-dropdownmenu/src/nys-dropdownmenu.d.ts +12 -19
  22. package/dist/packages/nys-dropdownmenu/src/nys-dropdownmenuitem.d.ts +10 -0
  23. package/dist/packages/nys-errormessage/src/nys-errormessage.d.ts +0 -10
  24. package/dist/packages/nys-fileinput/src/nys-fileinput.d.ts +4 -66
  25. package/dist/packages/nys-globalfooter/src/nys-globalfooter.d.ts +7 -50
  26. package/dist/packages/nys-globalheader/src/nys-globalheader.d.ts +3 -57
  27. package/dist/packages/nys-icon/src/icon-cache.d.ts +4 -11
  28. package/dist/packages/nys-icon/src/icon-library-registry.d.ts +16 -33
  29. package/dist/packages/nys-icon/src/index.d.ts +2 -2
  30. package/dist/packages/nys-icon/src/nys-icon.d.ts +6 -83
  31. package/dist/packages/nys-label/src/nys-label.d.ts +2 -32
  32. package/dist/packages/nys-modal/src/nys-modal.d.ts +5 -130
  33. package/dist/packages/nys-pagination/src/nys-pagination.d.ts +1 -11
  34. package/dist/packages/nys-radiobutton/src/nys-radiobutton.d.ts +3 -4
  35. package/dist/packages/nys-radiobutton/src/nys-radiogroup.d.ts +1 -74
  36. package/dist/packages/nys-select/src/nys-option.d.ts +8 -0
  37. package/dist/packages/nys-select/src/nys-select.d.ts +10 -141
  38. package/dist/packages/nys-skipnav/src/nys-skipnav.d.ts +2 -2
  39. package/dist/packages/nys-stepper/src/nys-step.d.ts +13 -0
  40. package/dist/packages/nys-stepper/src/nys-stepper.d.ts +69 -119
  41. package/dist/packages/nys-tab/src/nys-tab.d.ts +8 -17
  42. package/dist/packages/nys-tab/src/nys-tabgroup.d.ts +15 -77
  43. package/dist/packages/nys-tab/src/nys-tabpanel.d.ts +17 -0
  44. package/dist/packages/nys-table/src/nys-table.d.ts +0 -71
  45. package/dist/packages/nys-textarea/src/nys-textarea.d.ts +5 -52
  46. package/dist/packages/nys-textinput/src/nys-textinput.d.ts +9 -63
  47. package/dist/packages/nys-toggle/src/nys-toggle.d.ts +4 -40
  48. package/dist/packages/nys-tooltip/src/nys-tooltip.d.ts +6 -38
  49. package/dist/packages/nys-unavfooter/src/nys-unavfooter.d.ts +2 -10
  50. package/dist/packages/nys-unavheader/src/nys-unavheader.d.ts +9 -51
  51. package/dist/packages/nys-video/src/nys-video.d.ts +3 -65
  52. package/package.json +4 -7
  53. package/packages/react/NysBreadcrumbs.d.ts +1 -1
  54. package/packages/react/NysButton.d.ts +1 -2
  55. package/packages/react/NysDropdownMenu.d.ts +1 -1
  56. package/packages/react/NysLabel.d.ts +1 -4
  57. package/packages/react/NysTextarea.d.ts +1 -1
  58. package/packages/react/NysUnavHeader.d.ts +1 -11
  59. package/packages/react/NysUnavHeader.js +1 -15
  60. package/packages/react/nysds-jsx.d.ts +7 -20
  61. package/dist/nys-icon.library-ChLRj3i-.js +0 -696
  62. package/dist/nys-icon.library-ChLRj3i-.js.map +0 -1
@@ -10,77 +10,6 @@ import { LitElement } from "lit";
10
10
  * Detail: { columnIndex: number, columnLabel: string, sortDirection: "asc" | "desc" | "none" }
11
11
  *
12
12
  * @method downloadFile - Triggers download of the CSV file if `download` is set.
13
- *
14
- * @example Basic
15
- * ```html
16
- * <nys-table id="table1" name="table1">
17
- * <table>
18
- * <caption>New York State High Peaks and Popular Hikes</caption>
19
- * <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
20
- * <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
21
- * <tr><td>Algonquin</td><td>5,114</td><td>Northeast Trail</td></tr>
22
- * <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
23
- * <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
24
- * <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
25
- * </table>
26
- * </nys-table>
27
- * ```
28
- *
29
- * @example Striped
30
- * ```html
31
- * <nys-table id="table2" name="table2" striped>
32
- * <table>
33
- * <caption>New York State High Peaks and Popular Hikes</caption>
34
- * <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
35
- * <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
36
- * <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
37
- * <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
38
- * <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
39
- * </table>
40
- * </nys-table>
41
- * ```
42
- *
43
- * @example Bordered
44
- * ```html
45
- * <nys-table id="table3" name="table3" bordered>
46
- * <table>
47
- * <caption>New York State High Peaks and Popular Hikes</caption>
48
- * <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
49
- * <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
50
- * <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
51
- * <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
52
- * <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
53
- * </table>
54
- * </nys-table>
55
- * ```
56
- *
57
- * @example Sortable
58
- * ```html
59
- * <nys-table id="table4" name="table4" sortable>
60
- * <table>
61
- * <caption>New York State High Peaks and Popular Hikes</caption>
62
- * <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
63
- * <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
64
- * <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
65
- * <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
66
- * <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
67
- * </table>
68
- * </nys-table>
69
- * ```
70
- *
71
- * @example Downloadable
72
- * ```html
73
- * <nys-table id="table5" name="table5" download="path/to/downloadable/version/of/table.filetype">
74
- * <table>
75
- * <caption>New York State High Peaks and Popular Hikes</caption>
76
- * <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
77
- * <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
78
- * <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
79
- * <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
80
- * <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
81
- * </table>
82
- * </nys-table>
83
- * ```
84
13
  */
85
14
  export declare class NysTable extends LitElement {
86
15
  static styles: import("lit").CSSResult;
@@ -16,61 +16,14 @@ import { LitElement } from "lit";
16
16
  * @fires nys-blur - Fired when textarea loses focus. Triggers validation.
17
17
  * @fires nys-select - Fired when user selects text. Detail: `{id, value}`.
18
18
  *
19
- * @example Basic
19
+ * @example Basic textarea
20
20
  * ```html
21
- * <nys-textarea label="Comments"></nys-textarea>
21
+ * <nys-textarea label="Comments" rows="4"></nys-textarea>
22
22
  * ```
23
23
  *
24
- * @example Disabled
24
+ * @example Required with description
25
25
  * ```html
26
- * <nys-textarea label="Comments" disabled></nys-textarea>
27
- * ```
28
- *
29
- * @example Readonly
30
- * ```html
31
- * <nys-textarea label="Comments" readonly value="You can see me but not edit me"></nys-textarea>
32
- * ```
33
- *
34
- * @example Required
35
- * ```html
36
- * <nys-textarea label="Describe the incident" required></nys-textarea>
37
- * ```
38
- *
39
- * @example Optional
40
- * ```html
41
- * <nys-textarea label="Comments" optional></nys-textarea>
42
- * ```
43
- *
44
- * @example Max length
45
- * ```html
46
- * <nys-textarea label="Comments" maxlength="100"></nys-textarea>
47
- * ```
48
- *
49
- * @example Width Small
50
- * ```html
51
- * <nys-textarea label="Comments" width="sm"></nys-textarea>
52
- * ```
53
- *
54
- * @example Width Medium
55
- * ```html
56
- * <nys-textarea label="Comments" width="md"></nys-textarea>
57
- * ```
58
- *
59
- * @example Width Large
60
- * ```html
61
- * <nys-textarea label="Comments" width="lg"></nys-textarea>
62
- * ```
63
- *
64
- * @example Description
65
- * ```html
66
- * <nys-textarea label="Describe the incident" description="Please provide details"></nys-textarea>
67
- * ```
68
- *
69
- * @example Description Slot
70
- * ```html
71
- * <nys-textarea label="Describe the incident">
72
- * <div slot="description">Please provide details</div>
73
- * </nys-textarea>
26
+ * <nys-textarea label="Describe the incident" description="Please provide details" required></nys-textarea>
74
27
  * ```
75
28
  */
76
29
  export declare class NysTextarea extends LitElement {
@@ -97,7 +50,7 @@ export declare class NysTextarea extends LitElement {
97
50
  value: string;
98
51
  /** Prevents interaction. */
99
52
  disabled: boolean;
100
- /** Makes textarea readonly but focusable. */
53
+ /** Makes textarea read-only but focusable. */
101
54
  readonly: boolean;
102
55
  /** Marks as required. Shows "Required" flag and validates on blur. */
103
56
  required: boolean;
@@ -17,79 +17,25 @@ import { LitElement } from "lit";
17
17
  * @fires nys-focus - Fired when input gains focus.
18
18
  * @fires nys-blur - Fired when input loses focus. Triggers validation.
19
19
  *
20
- * @example Basic
20
+ * @example Basic text input
21
21
  * ```html
22
- * <nys-textinput label="Full Name"></nys-textinput>
22
+ * <nys-textinput label="Full Name" required></nys-textinput>
23
23
  * ```
24
24
  *
25
- * @example Disabled
25
+ * @example Required Email
26
26
  * ```html
27
- * <nys-textinput label="Email Address" disabled></nys-textinput>
27
+ * <nys-textinput type="email" label="Email Address" required></nys-textinput>
28
28
  * ```
29
29
  *
30
- * @example Readonly
30
+ * @example Phone with masking
31
31
  * ```html
32
- * <nys-textinput label="Email Address" readonly value="You can see me but not edit me"></nys-textinput>
32
+ * <nys-textinput type="tel" label="Phone Number"></nys-textinput>
33
33
  * ```
34
34
  *
35
- * @example Required
35
+ * @example Search with button
36
36
  * ```html
37
- * <nys-textinput label="Email Address" required></nys-textinput>
38
- * ```
39
- *
40
- * @example Optional
41
- * ```html
42
- * <nys-textinput label="Email Address" optional></nys-textinput>
43
- * ```
44
- *
45
- * @example Width Small
46
- * ```html
47
- * <nys-textinput label="Zip Code" width="sm"></nys-textinput>
48
- * ```
49
- *
50
- * @example Width Medium
51
- * ```html
52
- * <nys-textinput label="City" width="md"></nys-textinput>
53
- * ```
54
- *
55
- * @example Width Large
56
- * ```html
57
- * <nys-textinput label="Email Address" width="lg"></nys-textinput>
58
- * ```
59
- *
60
- * @example Description
61
- * ```html
62
- * <nys-textinput label="Email Address" description="Only valid ny.gov emails are accepted."></nys-textinput>
63
- * ```
64
- *
65
- * @example Description Slot
66
- * ```html
67
- * <nys-textinput label="Email Address">
68
- * <div slot="description">Only valid <strong>ny.gov</strong> emails are accepted.</div>
69
- * </nys-textinput>
70
- * ```
71
- *
72
- * @example Masking
73
- * ```html
74
- * <nys-textinput type="tel" label="Phone Number">
75
- * <div slot="description">Some types, such as <code>tel</code> have automatic masking available.</div>
76
- * </nys-textinput>
77
- * ```
78
- *
79
- * @example Max Min Values
80
- * ```html
81
- * <nys-textinput type="number" label="Age" min="18" max="99" width="sm"></nys-textinput>
82
- * ```
83
- *
84
- * @example Suffix Button
85
- * ```html
86
- * <nys-textinput id="search-demo" type="search" placeholder="Search">
87
- * <nys-button
88
- * slot="endButton"
89
- * ariaLabel="Search"
90
- * prefixIcon="search"
91
- * onclick="alert('searching for: ' + document.getElementById('search-demo').value)"
92
- * ></nys-button>
37
+ * <nys-textinput type="search" placeholder="Search">
38
+ * <nys-button slot="endButton" label="Search" prefixIcon="search"></nys-button>
93
39
  * </nys-textinput>
94
40
  * ```
95
41
  */
@@ -14,50 +14,14 @@ import { LitElement } from "lit";
14
14
  * @fires nys-focus - Fired when toggle gains focus.
15
15
  * @fires nys-blur - Fired when toggle loses focus.
16
16
  *
17
- * @example Basic
17
+ * @example Basic toggle
18
18
  * ```html
19
- * <nys-toggle label="Enable notifications" name="notifications" value="enabled-notifications"></nys-toggle>
19
+ * <nys-toggle label="Enable notifications" name="notifications"></nys-toggle>
20
20
  * ```
21
21
  *
22
- * @example Checked
22
+ * @example Dark mode toggle
23
23
  * ```html
24
- * <nys-toggle label="Dark Mode" name="theme" value="dark" checked></nys-toggle>
25
- * ```
26
- *
27
- * @example Disabled
28
- * ```html
29
- * <nys-toggle label="Opt Out of emails" name="toggle-switch" value="emails" disabled></nys-toggle>
30
- * ```
31
- *
32
- * @example Hide Icon
33
- * ```html
34
- * <nys-toggle label="No icon on the toggle knob" name="icon" value="no-icon" noIcon></nys-toggle>
35
- * ```
36
- *
37
- * @example Size small
38
- * ```html
39
- * <nys-toggle label="Tiny but mighty" name="sm-size" value="sm-size" size="sm"></nys-toggle>
40
- * ```
41
- *
42
- * @example Description
43
- * ```html
44
- * <nys-toggle
45
- * label="Opt Out of emails"
46
- * description="An email address is recommended to be on file for contact information."
47
- * name="toggle-switch"
48
- * value="emails"
49
- * ></nys-toggle>
50
- * ```
51
- *
52
- * @example Description Slot
53
- * ```html
54
- * <nys-toggle
55
- * label="Opt Out of emails"
56
- * name="toggle-switch"
57
- * value="emails"
58
- * >
59
- * <p slot="description">We <strong>REALLY</strong> encourage you to keep emails enabled for contact purposes.</p>
60
- * </nys-toggle>
24
+ * <nys-toggle label="Dark mode" description="Adjust display for low light" checked></nys-toggle>
61
25
  * ```
62
26
  */
63
27
  export declare class NysToggle extends LitElement {
@@ -5,51 +5,19 @@ import { LitElement } from "lit";
5
5
  * Link to a trigger element via `for` attribute matching the trigger's `id`. Tooltip appears on hover or focus
6
6
  * and dismisses on blur, mouse leave, or Escape key. Use for supplementary info only—not critical content.
7
7
  *
8
- * @accessibility
9
- * - Linked to trigger element via `for` attribute (must match trigger's `id`).
10
- * - `role="tooltip"` with dynamic `aria-hidden` based on visibility.
11
- * - Keyboard accessible: Tab to trigger, Enter/Space shows tooltip, Escape dismisses.
12
- * - Screen readers announce tooltip text when visible.
13
- * - Visual focus indicators on trigger elements meet WCAG 2.2 AA standards.
14
- * - Auto-positioning respects viewport bounds to prevent content loss.
15
- *
16
8
  * @summary Contextual tooltip with auto-positioning, keyboard support, and screen reader integration.
17
9
  * @element nys-tooltip
18
10
  *
19
- * @example Basic
20
- * ```html
21
- * <div style="display: flex; justify-content: center; gap: 5px; padding: 40px;">
22
- * <nys-tooltip for="my-button" text="I am a tooltip."></nys-tooltip>
23
- * <nys-button id="my-button" label="Hover Me"></nys-button>
24
- * </div>
25
- * ```
26
- *
27
- * @example Position
11
+ * @example Tooltip for button
28
12
  * ```html
29
- * <div style="display: flex; justify-content: center; gap: 5px; padding: 40px;">
30
- * <p>Hover over the icon</p>
31
- * <nys-tooltip
32
- * for="my-icon2"
33
- * text="I am a tooltip."
34
- * position="right"
35
- * >
36
- * </nys-tooltip>
37
- * <nys-icon id="my-icon2" name="info" size="3xl"></nys-icon>
38
- * </div>
13
+ * <nys-button id="help-btn" label="Help" circle icon="help"></nys-button>
14
+ * <nys-tooltip for="help-btn" text="Click for assistance"></nys-tooltip>
39
15
  * ```
40
16
  *
41
- * @example Inverted
17
+ * @example Positioned tooltip
42
18
  * ```html
43
- * <div style="background-color: #1b1b1b; color: #ffffff; padding: 40px; display: flex; gap: 5px">
44
- * <p>Hover over the icon</p>
45
- * <nys-tooltip
46
- * for="my-tooltip3"
47
- * text="I am a tooltip."
48
- * inverted
49
- * >
50
- * </nys-tooltip>
51
- * <nys-icon id="my-tooltip3" name="info" size="3xl"></nys-icon>
52
- * </div>
19
+ * <nys-icon id="info-icon" name="info"></nys-icon>
20
+ * <nys-tooltip for="info-icon" text="Additional details" position="right"></nys-tooltip>
53
21
  * ```
54
22
  */
55
23
  export declare class NysTooltip extends LitElement {
@@ -5,20 +5,12 @@ import { LitElement } from "lit";
5
5
  * Place as the last element before `</body>`. Displays NY.gov logo and links to Agencies,
6
6
  * App Directory, Counties, Events, Programs, and Services. No configuration needed.
7
7
  *
8
- * @accessibility
9
- * - Uses semantic `<footer>` element for assistive technology recognition.
10
- * - All links are keyboard-navigable via Tab.
11
- * - Proper link text for screen reader users.
12
- * - Links open in same window (no target="_blank") unless external policy requires otherwise.
13
- * - Visual design meets WCAG 2.2 AA contrast and focus indicator standards.
14
- * - Footer is not hidden from screen readers and is announced as navigation.
15
- *
16
- *
17
8
  * @summary Universal NYS footer with logo and statewide links. Required site-wide.
18
9
  * @element nys-unavfooter
19
10
  *
20
- * @example Basic
11
+ * @example Standard usage
21
12
  * ```html
13
+ * <nys-globalfooter>...</nys-globalfooter>
22
14
  * <nys-unavfooter></nys-unavfooter>
23
15
  * ```
24
16
  */
@@ -1,9 +1,4 @@
1
1
  import { LitElement } from "lit";
2
- interface Language {
3
- code: string;
4
- label: string;
5
- url?: string;
6
- }
7
2
  /**
8
3
  * Universal NYS header with trust bar, logo, search, and language translation. Required on all NYS sites.
9
4
  *
@@ -11,66 +6,29 @@ interface Language {
11
6
  * site search (searches ny.gov), and 14-language translation dropdown. Use `hideSearch` or `hideTranslate`
12
7
  * to remove features if not applicable.
13
8
  *
14
- * @accessibility
15
- * - Semantic `<header>` element ensures assistive technology recognition.
16
- * - Trust bar button: `role="button"`, `aria-expanded`, descriptive `aria-label`.
17
- * - All links and buttons are keyboard-navigable via Tab.
18
- * - Language dropdown announces current language and list on focus.
19
- * - Search input announces field purpose and keyboard shortcuts (Enter to submit, Escape to dismiss).
20
- * - Visual focus indicators meet WCAG 2.2 AA standards.
21
- * - All text has sufficient color contrast (4.5:1 minimum).
22
- * - Icons have text labels or `aria-label` attributes.
23
- *
24
9
  * @summary Universal NYS header with trust bar, search, and translation. Required site-wide.
25
10
  * @element nys-unavheader
26
11
  *
27
12
  * @fires nys-language-select - Fired when a language is selected. Detail: `{language: {code, label, url?}}`. Cancelable; `preventDefault()` overrides the default Smartling redirect.
28
13
  * @fires nys-search-submit - Fired when a search is submitted. Detail: `{query}`. Cancelable; `preventDefault()` overrides the default search redirect.
14
+
29
15
  *
30
- * @example Basic
16
+ * @example Standard usage
31
17
  * ```html
32
18
  * <nys-unavheader></nys-unavheader>
19
+ * <nys-globalheader>...</nys-globalheader>
33
20
  * ```
34
21
  *
35
- * @example Hide search
22
+ * @example Without search
36
23
  * ```html
37
24
  * <nys-unavheader hideSearch></nys-unavheader>
38
25
  * ```
39
- *
40
- * @example Hide translate
41
- * ```html
42
- * <nys-unavheader hideTranslate></nys-unavheader>
43
- * ```
44
- *
45
- * @example Custom Search URL
46
- * ```html
47
- * <nys-unavheader searchUrl="https://designsystem.ny.gov/search/?q="></nys-unavheader>
48
- * ```
49
- *
50
- * @example Custom Language List
51
- * ```html
52
- * <nys-unavheader id="my-header"></nys-unavheader>
53
- * <script>
54
- * const header = document.querySelector('#my-header');
55
- * header.languages = [
56
- * { code: 'en', label: 'English' },
57
- * { code: 'es', label: 'Español' , url: '"https://ny.gov/?lang=es"'},
58
- * { code: 'fr', label: 'Français', url: '"https://ny.gov/?lang=fr"'},
59
- * ];
60
- * </script>
61
- * ```
62
- *
63
- * @example Custom Language List JS
64
- * ```html
65
- * <nys-unavheader id="my-header2"></nys-unavheader>
66
- * <script>
67
- * document.querySelector('#my-header2').addEventListener('nys-language-select', (event) => {
68
- * event.preventDefault();
69
- * const selectedLanguage = event.detail.language.label;
70
- * });
71
- * </script>
72
- * ```
73
26
  */
27
+ interface Language {
28
+ code: string;
29
+ label: string;
30
+ url?: string;
31
+ }
74
32
  export declare class NysUnavHeader extends LitElement {
75
33
  static styles: import("lit").CSSResult;
76
34
  /** Internal: Whether trust bar panel is expanded. */
@@ -13,78 +13,16 @@ declare global {
13
13
  *
14
14
  * For use with YouTube URLs only. Component renders nothing if the URL is invalid.
15
15
  *
16
- * @accessibility
17
- * - Title text is announced to screen readers when the video is not yet loaded.
18
- * - When the video loads, the iframe title and aria-label are set to the `titleText`.
19
- * - Live region announces playback state ("Video is playing", "Advertisement is playing").
20
- * - Play button is properly labeled and keyboard accessible.
21
- * - Disabled state prevents play button interaction.
22
- * - Focus is transferred to the iframe once the video is loaded (for keyboard users).
23
- *
24
16
  * @summary YouTube video player with thumbnail preview and accessibility announcements.
25
17
  * @element nys-video
26
18
  *
27
19
  * @fires nys-video-play - Fired when the user clicks the thumbnail to load the player.
28
20
  *
29
- * @example Basic
30
- * ```html
31
- * <nys-video
32
- * videourl="https://www.youtube.com/watch?v=TBfFzt0150Q"
33
- * titleText="IT'S a Tech Podcast, Episode 3: Human-Centered Design"
34
- * ></nys-video>
35
- * ```
36
- *
37
- * @example Thumbnail
38
- * ```html
39
- * <nys-video
40
- * videourl="https://www.youtube.com/watch?v=TBfFzt0150Q"
41
- * titleText="IT'S a Tech Podcast, Episode 3: Human-Centered Design"
42
- * thumbnail="https://designsystem.ny.gov/assets/img/homepage-grid-3.svg"
43
- * ></nys-video>
44
- * ```
45
- *
46
- * @example Autoplay
47
- * ```html
48
- * <nys-video
49
- * videourl="https://www.youtube.com/watch?v=TBfFzt0150Q"
50
- * titleText="IT'S a Tech Podcast, Episode 3: Human-Centered Design"
51
- * autoplay
52
- * ></nys-video>
53
- * ```
54
- *
55
- * @example Start Time
56
- * ```html
57
- * <nys-video
58
- * videourl="https://www.youtube.com/watch?v=TBfFzt0150Q"
59
- * titleText="IT'S a Tech Podcast, Episode 3: Human-Centered Design"
60
- * starttime="43"
61
- * ></nys-video>
62
- * ```
63
- *
64
- * @example Disabled
65
- * ```html
66
- * <nys-video
67
- * videourl="https://www.youtube.com/watch?v=TBfFzt0150Q"
68
- * titleText="IT'S a Tech Podcast, Episode 3: Human-Centered Design"
69
- * disabled
70
- * ></nys-video>
71
- * ```
72
- *
73
- * @example Size full
74
- * ```html
75
- * <nys-video
76
- * size="full"
77
- * videourl="https://www.youtube.com/watch?v=TBfFzt0150Q"
78
- * titleText="Small (width: 320-439px)"
79
- * ></nys-video>
80
- * ```
81
- *
82
- * @example Size small
21
+ * @example Basic usage
83
22
  * ```html
84
23
  * <nys-video
85
- * size="sm"
86
- * videourl="https://www.youtube.com/watch?v=TBfFzt0150Q"
87
- * titleText="Small (width: 320-439px)"
24
+ * videourl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
25
+ * titleText="Video Title"
88
26
  * ></nys-video>
89
27
  * ```
90
28
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/components",
3
- "version": "1.19.3",
3
+ "version": "1.20.0-alpha-3",
4
4
  "description": "New York State's design system and code component library.",
5
5
  "type": "module",
6
6
  "workspaces": [
@@ -29,14 +29,12 @@
29
29
  "scripts": {
30
30
  "dev": "vite",
31
31
  "gen": "plop",
32
- "gen-stories": "npm run cem && node src/scripts/generate-stories.mjs",
33
- "gen-stories:component": "npm run cem && sh -c 'node src/scripts/generate-stories.mjs \"$@\" && npm run lint:fix' --",
34
32
  "build": "tsc --emitDeclarationOnly && vite build",
35
33
  "build:umd": "cross-env BUILD_FORMAT=umd vite build",
36
34
  "tsc:packages": "tsc -b tsconfig.build.json",
37
35
  "build:packages": "npm run tsc:packages && turbo run build --filter='./packages/*' --log-order=grouped",
38
36
  "build:root": "cross-env NODE_ENV=production npm run build && cross-env NODE_ENV=production npm run build:umd",
39
- "build:all": "npm run clean:dist && npm run lit-analyze || true && cross-env NODE_ENV=production npm run build:packages && npm run build:root && npm run cem && npm run gen-stories && npm run build:mcp && npm run lint:fix",
37
+ "build:all": "npm run clean:dist && npm run lint && npm run lit-analyze || true && cross-env NODE_ENV=production npm run build:packages && npm run build:root && npm run cem && npm run build:mcp",
40
38
  "build:mcp": "npm run build -w @nysds/mcp-server",
41
39
  "build:link": "npm run build:all && npm link && cd packages/styles && npm link",
42
40
  "lint": "eslint --cache --cache-strategy=content --cache-location node_modules/.cache/eslint && (stylelint \"**/*.scss\" || true)",
@@ -49,8 +47,7 @@
49
47
  "release:zip": "npm run build:all && node src/scripts/create-release-zip.js",
50
48
  "pretest": "playwright install",
51
49
  "test": "wtr --node-resolve",
52
- "test:ssr": "node src/scripts/test-ssr.mjs && npm run audit:dist",
53
- "audit:dist": "node src/scripts/audit-dist.mjs",
50
+ "test:ssr": "node scripts/test-ssr.mjs",
54
51
  "test:build": "npm run build:all && npm run test",
55
52
  "test:compact": "export NYSDS_TEST_OUTPUT=compact && wtr --node-resolve",
56
53
  "test:ai": "export NYSDS_TEST_OUTPUT=ai && wtr --node-resolve",
@@ -65,7 +62,7 @@
65
62
  "clean:cache": "rm -rf node_modules/.cache",
66
63
  "clean:all": "npm run clean:dist && npm run clean:node && npm run clean:cache && find packages -name '*.tsbuildinfo' -delete 2>/dev/null || true && npm run clean:turbo",
67
64
  "code-connect": "dotenv -- npx figma connect publish",
68
- "cem": "npx cem analyze --config src/scripts/custom-elements-manifest.config.mjs && cp ./custom-elements.json dist/ && node src/scripts/patch-react-utils.js"
65
+ "cem": "npx cem analyze --config ./custom-elements-manifest.config.mjs && cp ./custom-elements.json dist/ && node src/scripts/patch-react-utils.js"
69
66
  },
70
67
  "repository": {
71
68
  "type": "git",
@@ -84,6 +84,6 @@ Override when multiple crumbs exist on the same page. */
84
84
  * - **nys-breadcrumbs-expand** - Fired when the user clicks the ellipsis to expand the trail.
85
85
  *
86
86
  * ### **Slots:**
87
- * - _default_ - One or more `li` elements defining the trail.
87
+ * - _default_ - One or more `nys-breadcrumbitem` elements defining the trail.
88
88
  */
89
89
  export const NysBreadcrumbs: React.ForwardRefExoticComponent<NysBreadcrumbsProps>;
@@ -123,8 +123,7 @@ export interface NysButtonProps extends Pick<
123
123
  * - **nys-click** - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.
124
124
  *
125
125
  * ### **Slots:**
126
- * - _default_ - Button label text. Use as fallback when `label` prop is not provided.
127
- * - **prefix-icon** - Icon before label. Not shown for `text` variant.
126
+ * - **prefix-icon** - Icon before label. Not shown for `text` variant.
128
127
  * - **suffix-icon** - Icon after label. Not shown for `text` variant.
129
128
  * - **circle-icon** - Icon for circle mode. Overrides `icon` prop.
130
129
  *
@@ -50,7 +50,7 @@ export interface NysDropdownMenuProps extends Pick<
50
50
  }
51
51
 
52
52
  /**
53
- * Action menu with auto-positioning, keyboard support, and screen reader integration.
53
+ *
54
54
  * ---
55
55
  *
56
56
  */
@@ -65,10 +65,7 @@ export interface NysLabelProps extends Pick<
65
65
  }
66
66
 
67
67
  /**
68
- * **Internal component.** Renders form labels with description, required/optional flag, and tooltip.
69
- *
70
- * Used internally by form components (textinput, select, checkbox, etc.). Not intended for direct use.
71
- * Handles label association via `for`, displays asterisk for required fields, and integrates tooltips.
68
+ * Internal label component for form fields with flag and tooltip support.
72
69
  * ---
73
70
  *
74
71
  *
@@ -25,7 +25,7 @@ export interface NysTextareaProps extends Pick<
25
25
  /** Prevents interaction. */
26
26
  disabled?: boolean;
27
27
 
28
- /** Makes textarea readonly but focusable. */
28
+ /** Makes textarea read-only but focusable. */
29
29
  readonly?: boolean;
30
30
 
31
31
  /** Marks as required. Shows "Required" flag and validates on blur. */