@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.
- package/custom-elements.json +180 -1055
- package/dist/.vscode/vscode.html-custom-data.json +7 -7
- package/dist/custom-elements.json +180 -1055
- package/dist/nysds.es.js +724 -731
- package/dist/nysds.es.js.map +1 -1
- package/dist/nysds.js +136 -730
- package/dist/nysds.js.map +1 -1
- package/dist/packages/nys-accordion/src/nys-accordion.d.ts +6 -35
- package/dist/packages/nys-accordion/src/nys-accordionitem.d.ts +3 -8
- package/dist/packages/nys-alert/src/nys-alert.d.ts +4 -81
- package/dist/packages/nys-avatar/src/nys-avatar.d.ts +4 -44
- package/dist/packages/nys-backtotop/src/nys-backtotop.d.ts +3 -70
- package/dist/packages/nys-badge/src/nys-badge.d.ts +4 -54
- package/dist/packages/nys-breadcrumbs/src/nys-breadcrumbs.d.ts +7 -75
- package/dist/packages/nys-button/src/nys-button.d.ts +7 -60
- package/dist/packages/nys-checkbox/src/nys-checkbox.d.ts +7 -4
- package/dist/packages/nys-checkbox/src/nys-checkboxgroup.d.ts +1 -75
- package/dist/packages/nys-combobox/src/nys-combobox.d.ts +0 -164
- package/dist/packages/nys-datepicker/src/nys-datepicker.d.ts +8 -64
- package/dist/packages/nys-divider/src/nys-divider.d.ts +1 -24
- package/dist/packages/nys-dropdownmenu/src/nys-dropdownmenu.d.ts +12 -19
- package/dist/packages/nys-dropdownmenu/src/nys-dropdownmenuitem.d.ts +10 -0
- package/dist/packages/nys-errormessage/src/nys-errormessage.d.ts +0 -10
- package/dist/packages/nys-fileinput/src/nys-fileinput.d.ts +4 -66
- package/dist/packages/nys-globalfooter/src/nys-globalfooter.d.ts +7 -50
- package/dist/packages/nys-globalheader/src/nys-globalheader.d.ts +3 -57
- package/dist/packages/nys-icon/src/icon-cache.d.ts +4 -11
- package/dist/packages/nys-icon/src/icon-library-registry.d.ts +16 -33
- package/dist/packages/nys-icon/src/index.d.ts +2 -2
- package/dist/packages/nys-icon/src/nys-icon.d.ts +6 -83
- package/dist/packages/nys-label/src/nys-label.d.ts +2 -32
- package/dist/packages/nys-modal/src/nys-modal.d.ts +5 -130
- package/dist/packages/nys-pagination/src/nys-pagination.d.ts +1 -11
- package/dist/packages/nys-radiobutton/src/nys-radiobutton.d.ts +3 -4
- package/dist/packages/nys-radiobutton/src/nys-radiogroup.d.ts +1 -74
- package/dist/packages/nys-select/src/nys-option.d.ts +8 -0
- package/dist/packages/nys-select/src/nys-select.d.ts +10 -141
- package/dist/packages/nys-skipnav/src/nys-skipnav.d.ts +2 -2
- package/dist/packages/nys-stepper/src/nys-step.d.ts +13 -0
- package/dist/packages/nys-stepper/src/nys-stepper.d.ts +69 -119
- package/dist/packages/nys-tab/src/nys-tab.d.ts +8 -17
- package/dist/packages/nys-tab/src/nys-tabgroup.d.ts +15 -77
- package/dist/packages/nys-tab/src/nys-tabpanel.d.ts +17 -0
- package/dist/packages/nys-table/src/nys-table.d.ts +0 -71
- package/dist/packages/nys-textarea/src/nys-textarea.d.ts +5 -52
- package/dist/packages/nys-textinput/src/nys-textinput.d.ts +9 -63
- package/dist/packages/nys-toggle/src/nys-toggle.d.ts +4 -40
- package/dist/packages/nys-tooltip/src/nys-tooltip.d.ts +6 -38
- package/dist/packages/nys-unavfooter/src/nys-unavfooter.d.ts +2 -10
- package/dist/packages/nys-unavheader/src/nys-unavheader.d.ts +9 -51
- package/dist/packages/nys-video/src/nys-video.d.ts +3 -65
- package/package.json +4 -7
- package/packages/react/NysBreadcrumbs.d.ts +1 -1
- package/packages/react/NysButton.d.ts +1 -2
- package/packages/react/NysDropdownMenu.d.ts +1 -1
- package/packages/react/NysLabel.d.ts +1 -4
- package/packages/react/NysTextarea.d.ts +1 -1
- package/packages/react/NysUnavHeader.d.ts +1 -11
- package/packages/react/NysUnavHeader.js +1 -15
- package/packages/react/nysds-jsx.d.ts +7 -20
- package/dist/nys-icon.library-ChLRj3i-.js +0 -696
- 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
|
|
24
|
+
* @example Required with description
|
|
25
25
|
* ```html
|
|
26
|
-
* <nys-textarea label="
|
|
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
|
|
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
|
|
25
|
+
* @example Required Email
|
|
26
26
|
* ```html
|
|
27
|
-
* <nys-textinput label="Email Address"
|
|
27
|
+
* <nys-textinput type="email" label="Email Address" required></nys-textinput>
|
|
28
28
|
* ```
|
|
29
29
|
*
|
|
30
|
-
* @example
|
|
30
|
+
* @example Phone with masking
|
|
31
31
|
* ```html
|
|
32
|
-
* <nys-textinput
|
|
32
|
+
* <nys-textinput type="tel" label="Phone Number"></nys-textinput>
|
|
33
33
|
* ```
|
|
34
34
|
*
|
|
35
|
-
* @example
|
|
35
|
+
* @example Search with button
|
|
36
36
|
* ```html
|
|
37
|
-
* <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"
|
|
19
|
+
* <nys-toggle label="Enable notifications" name="notifications"></nys-toggle>
|
|
20
20
|
* ```
|
|
21
21
|
*
|
|
22
|
-
* @example
|
|
22
|
+
* @example Dark mode toggle
|
|
23
23
|
* ```html
|
|
24
|
-
* <nys-toggle label="Dark
|
|
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
|
|
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
|
-
* <
|
|
30
|
-
*
|
|
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
|
|
17
|
+
* @example Positioned tooltip
|
|
42
18
|
* ```html
|
|
43
|
-
* <
|
|
44
|
-
*
|
|
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
|
|
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
|
|
16
|
+
* @example Standard usage
|
|
31
17
|
* ```html
|
|
32
18
|
* <nys-unavheader></nys-unavheader>
|
|
19
|
+
* <nys-globalheader>...</nys-globalheader>
|
|
33
20
|
* ```
|
|
34
21
|
*
|
|
35
|
-
* @example
|
|
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
|
-
*
|
|
86
|
-
*
|
|
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.
|
|
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
|
|
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
|
|
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
|
|
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 `
|
|
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
|
-
* -
|
|
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
|
*
|
|
@@ -65,10 +65,7 @@ export interface NysLabelProps extends Pick<
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
/**
|
|
68
|
-
*
|
|
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
|
|
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. */
|