@nysds/mcp-server 1.19.1 → 1.19.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/data/cem/custom-elements.json +1230 -200
- package/data/tokens/tokens.css +1 -1
- package/package.json +5 -4
|
@@ -158,13 +158,18 @@
|
|
|
158
158
|
"summary": "Container for accordion items with optional single-select and bordered styling.",
|
|
159
159
|
"examples": [
|
|
160
160
|
{
|
|
161
|
-
"title": "Basic
|
|
162
|
-
"code": "<nys-accordion>\n<nys-accordionitem heading=\"
|
|
161
|
+
"title": "Basic",
|
|
162
|
+
"code": "<nys-accordion>\n<nys-accordionitem id=\"accordionId1\" heading=\"How do I renew my passport or apply for a new one?\">\n<p>\nYou can apply for or renew a U.S. passport through the U.S. Department\nof State. Some renewals can be done by mail.\n</p>\n<div style=\"display: flex; gap: 0.5rem; font-size: 1rem;\">\n<a href=\"https://www.ny.gov\" target=\"_blank\">Check your registration</a>\n<a href=\"https://www.ny.gov\" target=\"_blank\">Fill out application</a>\n</div>\n</nys-accordionitem>\n<nys-accordionitem id=\"accordionId2\" heading=\"How can I find out if I’m registered to vote?\">\n<p>You can check your registration status, update your information, or find out how to register through the National Association of Secretaries of State.</p>\n</nys-accordionitem>\n</nys-accordion>",
|
|
163
163
|
"lang": "html"
|
|
164
164
|
},
|
|
165
165
|
{
|
|
166
|
-
"title": "Single
|
|
167
|
-
"code": "<nys-accordion singleSelect
|
|
166
|
+
"title": "Single Select",
|
|
167
|
+
"code": "<nys-accordion singleSelect>\n<nys-accordionitem heading=\"FAQ 1\">Answer 1</nys-accordionitem>\n<nys-accordionitem heading=\"FAQ 2\">Answer 2</nys-accordionitem>\n</nys-accordion>",
|
|
168
|
+
"lang": "html"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"title": "Bordered",
|
|
172
|
+
"code": "<nys-accordion bordered>\n<nys-accordionitem heading=\"We are a group of accordions\">\n<p>Stronger together! Learn more at\n<a href=\"https://www.ny.gov\" target=\"_blank\">ny.gov</a>\n</p>\n</nys-accordionitem>\n<nys-accordionitem heading=\"Liberty Ipsum: Bridges & Boroughs\">\n<p>Empire ipsum dolor sit amet, across the Brooklyn Bridge to Central Park, consectetur adipiscing elit.</p>\n</nys-accordionitem>\n<nys-accordionitem heading=\"Hudson Ipsum: Riverfront Stories\">\n<p>From the banks of the Hudson to the peaks of the Adirondacks, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n</nys-accordionitem>\n</nys-accordion>",
|
|
168
173
|
"lang": "html"
|
|
169
174
|
}
|
|
170
175
|
]
|
|
@@ -351,7 +356,7 @@
|
|
|
351
356
|
"examples": [
|
|
352
357
|
{
|
|
353
358
|
"title": "Expanded item",
|
|
354
|
-
"code": "<nys-accordionitem heading=\"How do I apply?\" expanded>\n<p>Visit ny.gov and complete the online application.</p>\n</nys-accordionitem>",
|
|
359
|
+
"code": "<nys-accordion>\n<nys-accordionitem heading=\"How do I apply?\" expanded>\n<p>Visit ny.gov and complete the online application.</p>\n</nys-accordionitem>\n<nys-accordionitem heading=\"What documents do I need?\">\n<p>You will need a valid ID and proof of residency.</p>\n</nys-accordionitem>\n</nys-accordion>",
|
|
355
360
|
"lang": "html"
|
|
356
361
|
}
|
|
357
362
|
]
|
|
@@ -724,13 +729,64 @@
|
|
|
724
729
|
"summary": "Alert for contextual feedback with semantic types and live region support.",
|
|
725
730
|
"examples": [
|
|
726
731
|
{
|
|
727
|
-
"title": "
|
|
728
|
-
"code": "<nys-alert
|
|
732
|
+
"title": "Basic",
|
|
733
|
+
"code": "<nys-alert heading=\"This is a heading\"></nys-alert>",
|
|
734
|
+
"lang": "html"
|
|
735
|
+
},
|
|
736
|
+
{
|
|
737
|
+
"title": "Text",
|
|
738
|
+
"code": "<nys-alert\nheading=\"This is a heading\"\ntext=\"This is additional information passed in through the text property\"\n></nys-alert>",
|
|
739
|
+
"lang": "html"
|
|
740
|
+
},
|
|
741
|
+
{
|
|
742
|
+
"title": "Rich Text",
|
|
743
|
+
"code": "<nys-alert heading=\"Rich Text\">\n<p>This is a custom alert with <strong>HTML content</strong> passed in through the slot.</p>\n<a href=\"https://www.ny.gov/\" target=\"_blank\">Learn more about our accessibility services</a>\n</nys-alert>",
|
|
744
|
+
"lang": "html"
|
|
745
|
+
},
|
|
746
|
+
{
|
|
747
|
+
"title": "Info Type",
|
|
748
|
+
"code": "<nys-alert type=\"info\" heading=\"Info alert type\"></nys-alert>",
|
|
749
|
+
"lang": "html"
|
|
750
|
+
},
|
|
751
|
+
{
|
|
752
|
+
"title": "Success Type",
|
|
753
|
+
"code": "<nys-alert type=\"success\" heading=\"Success alert type\"></nys-alert>",
|
|
754
|
+
"lang": "html"
|
|
755
|
+
},
|
|
756
|
+
{
|
|
757
|
+
"title": "Warning Type",
|
|
758
|
+
"code": "<nys-alert type=\"warning\" heading=\"Warning alert type\"></nys-alert>",
|
|
759
|
+
"lang": "html"
|
|
760
|
+
},
|
|
761
|
+
{
|
|
762
|
+
"title": "Danger Type",
|
|
763
|
+
"code": "<nys-alert type=\"danger\" heading=\"Danger alert type\"></nys-alert>",
|
|
764
|
+
"lang": "html"
|
|
765
|
+
},
|
|
766
|
+
{
|
|
767
|
+
"title": "Emergency Type",
|
|
768
|
+
"code": "<nys-alert type=\"emergency\" heading=\"Emergency alert type\"></nys-alert>",
|
|
769
|
+
"lang": "html"
|
|
770
|
+
},
|
|
771
|
+
{
|
|
772
|
+
"title": "Dismissible",
|
|
773
|
+
"code": "<nys-alert heading=\"This alert is dismisable\" text=\"Close it by clicking on the X in the corner.\" dismissible>\n</nys-alert>",
|
|
774
|
+
"lang": "html"
|
|
775
|
+
},
|
|
776
|
+
{
|
|
777
|
+
"title": "Duration",
|
|
778
|
+
"code": "<nys-alert heading=\"Disappearing alert\" text=\"This alert will disappear after 3 seconds.\" duration=\"3000\"></nys-alert>",
|
|
779
|
+
"lang": "html",
|
|
780
|
+
"render": "<nys-button\nclass=\"nys-margin-b-100\"\nlabel=\"Show alert\"\nonclick=\"document.body.appendChild(Object.assign(document.createElement('nys-alert'), {heading: 'Disappearing alert', text: 'This alert will disappear after 3 seconds.', duration: 3000}))\"\n></nys-button>"
|
|
781
|
+
},
|
|
782
|
+
{
|
|
783
|
+
"title": "Custom Icon",
|
|
784
|
+
"code": "<nys-alert\ntype=\"emergency\"\nheading=\"Winter storm warning: Dec 10th, 2024.\"\ntext=\"A major snowfall is expected across the state of New York for the weekend of Dec 7th. Stay home if possible and use extreme caution when driving.\"\nicon=\"ac_unit\">\n</nys-alert>",
|
|
729
785
|
"lang": "html"
|
|
730
786
|
},
|
|
731
787
|
{
|
|
732
|
-
"title": "
|
|
733
|
-
"code": "<nys-alert
|
|
788
|
+
"title": "Action Links",
|
|
789
|
+
"code": "<nys-alert\nheading=\"Alert with links\"\nprimaryLabel=\"{primaryAction}\"\nsecondaryLabel=\"{secondaryAction}\"\nprimaryAction=\"https://www.ny.gov/\"\nsecondaryAction=\"https://www.ny.gov/\"\n></nys-alert>",
|
|
734
790
|
"lang": "html"
|
|
735
791
|
}
|
|
736
792
|
]
|
|
@@ -1026,13 +1082,44 @@
|
|
|
1026
1082
|
"summary": "User avatar with image, initials, or icon fallback and contrast-aware colors.",
|
|
1027
1083
|
"examples": [
|
|
1028
1084
|
{
|
|
1029
|
-
"title": "
|
|
1030
|
-
"code": "<nys-avatar
|
|
1085
|
+
"title": "Basic",
|
|
1086
|
+
"code": "<nys-avatar ariaLabel=\"User avatar\"></nys-avatar>",
|
|
1031
1087
|
"lang": "html"
|
|
1032
1088
|
},
|
|
1033
1089
|
{
|
|
1034
|
-
"title": "
|
|
1035
|
-
"code": "<nys-avatar
|
|
1090
|
+
"title": "Image",
|
|
1091
|
+
"code": "<nys-avatar\nimage=\"path/to/img.png\"\nariaLabel=\"Jane Smith\"\n></nys-avatar>",
|
|
1092
|
+
"lang": "html",
|
|
1093
|
+
"render": "<nys-avatar\nimage=\"https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\nariaLabel=\"Jane Smith\"\n></nys-avatar>"
|
|
1094
|
+
},
|
|
1095
|
+
{
|
|
1096
|
+
"title": "Initials",
|
|
1097
|
+
"code": "<nys-avatar initials=\"JS\" ariaLabel=\"Jane Smith\"></nys-avatar>",
|
|
1098
|
+
"lang": "html"
|
|
1099
|
+
},
|
|
1100
|
+
{
|
|
1101
|
+
"title": "Icon",
|
|
1102
|
+
"code": "<nys-avatar icon=\"account_circle\"></nys-avatar>",
|
|
1103
|
+
"lang": "html"
|
|
1104
|
+
},
|
|
1105
|
+
{
|
|
1106
|
+
"title": "Interactive",
|
|
1107
|
+
"code": "<nys-avatar interactive></nys-avatar>",
|
|
1108
|
+
"lang": "html"
|
|
1109
|
+
},
|
|
1110
|
+
{
|
|
1111
|
+
"title": "Disabled",
|
|
1112
|
+
"code": "<nys-avatar disabled></nys-avatar>",
|
|
1113
|
+
"lang": "html"
|
|
1114
|
+
},
|
|
1115
|
+
{
|
|
1116
|
+
"title": "Custom Background Color",
|
|
1117
|
+
"code": "<nys-avatar color=\"var(--nys-color-red-500)\" interactive></nys-avatar>",
|
|
1118
|
+
"lang": "html"
|
|
1119
|
+
},
|
|
1120
|
+
{
|
|
1121
|
+
"title": "Lazy Loading",
|
|
1122
|
+
"code": "<nys-avatar lazy></nys-avatar>",
|
|
1036
1123
|
"lang": "html"
|
|
1037
1124
|
}
|
|
1038
1125
|
]
|
|
@@ -1124,9 +1211,10 @@
|
|
|
1124
1211
|
"kind": "field",
|
|
1125
1212
|
"name": "mediaQuery",
|
|
1126
1213
|
"type": {
|
|
1127
|
-
"text": "MediaQueryList"
|
|
1214
|
+
"text": "MediaQueryList | null"
|
|
1128
1215
|
},
|
|
1129
|
-
"privacy": "private"
|
|
1216
|
+
"privacy": "private",
|
|
1217
|
+
"default": "null"
|
|
1130
1218
|
},
|
|
1131
1219
|
{
|
|
1132
1220
|
"kind": "method",
|
|
@@ -1181,14 +1269,16 @@
|
|
|
1181
1269
|
"summary": "Floating back-to-top button with auto-show behavior, smooth scroll, and focus management.",
|
|
1182
1270
|
"examples": [
|
|
1183
1271
|
{
|
|
1184
|
-
"title": "
|
|
1272
|
+
"title": "Basic",
|
|
1185
1273
|
"code": "<footer>\n<nys-backtotop></nys-backtotop>\n<!-- Other footer content -->\n</footer>",
|
|
1186
|
-
"lang": "html"
|
|
1274
|
+
"lang": "html",
|
|
1275
|
+
"render": "<style>\ncode {\nwhite-space: nowrap;\npadding: var(--nys-space-1px) var(--nys-space-2px);\nborder-radius: var(--nys-radius-md);\ncolor: var(--nys-color-red-600);\nbackground: var(--nys-color-neutral-10);\nfont-size: var(--nys-font-size-sm);\n}\n</style>\n<nys-unavheader hideTranslate hideSearch></nys-unavheader>\n<nys-globalheader appName=\"Back to Top Example\"></nys-globalheader>\n<main style=\"padding: 0 2rem\">\n<h1>Sample Content on page</h1>\n<p>\nThis is a sample content area used to demonstrate the functionality of\nthe Back to Top button. In an actual application,\n<code>nys-backtotop</code> would not be visible until the user scrolls\ndown the page.\n</p>\n</main>\n<footer>\n<nys-backtotop visible></nys-backtotop>\n<nys-unavfooter></nys-unavfooter>\n</footer>"
|
|
1187
1276
|
},
|
|
1188
1277
|
{
|
|
1189
|
-
"title": "
|
|
1190
|
-
"code": "<nys-backtotop
|
|
1191
|
-
"lang": "html"
|
|
1278
|
+
"title": "Left",
|
|
1279
|
+
"code": "<footer>\n<nys-backtotop position=\"left\"></nys-backtotop>\n<!-- Other footer content -->\n</footer>",
|
|
1280
|
+
"lang": "html",
|
|
1281
|
+
"render": "<style>\ncode {\nwhite-space: nowrap;\npadding: var(--nys-space-1px) var(--nys-space-2px);\nborder-radius: var(--nys-radius-md);\ncolor: var(--nys-color-red-600);\nbackground: var(--nys-color-neutral-10);\nfont-size: var(--nys-font-size-sm);\n}\nnys-button {\nposition: fixed;\nbottom: 1rem;\nright: 1rem;\n--_nys-button-border-radius: var(--nys-radius-round);\n}\n</style>\n<nys-unavheader hideTranslate hideSearch></nys-unavheader>\n<nys-globalheader appName=\"Back to Top Example\"></nys-globalheader>\n<main style=\"padding: 0 2rem\">\n<h1>Sample Content on page</h1>\n<p>\nThis is a sample content area used to demonstrate the functionality of\nthe Back to Top button. In an actual application,\n<code>nys-backtotop</code> would not be visible until the user scrolls\ndown the page.\n</p>\n</main>\n<footer>\n<nys-backtotop visible position=\"left\"></nys-backtotop>\n<nys-button prefixIcon=\"sms\" variant=\"outline\" label=\"Chat with us\" size=\"sm\"></nys-button>\n<nys-unavfooter></nys-unavfooter>\n</footer>"
|
|
1192
1282
|
}
|
|
1193
1283
|
]
|
|
1194
1284
|
}
|
|
@@ -1493,13 +1583,63 @@
|
|
|
1493
1583
|
"summary": "Compact label for status, counts, or categorization with semantic styling.",
|
|
1494
1584
|
"examples": [
|
|
1495
1585
|
{
|
|
1496
|
-
"title": "
|
|
1497
|
-
"code": "<nys-badge
|
|
1586
|
+
"title": "Basic",
|
|
1587
|
+
"code": "<nys-badge label=\"Basic badge\"></nys-badge>",
|
|
1498
1588
|
"lang": "html"
|
|
1499
1589
|
},
|
|
1500
1590
|
{
|
|
1501
|
-
"title": "
|
|
1502
|
-
"code": "<nys-badge
|
|
1591
|
+
"title": "Error Intent",
|
|
1592
|
+
"code": "<nys-badge label=\"Error\" intent=\"error\" prefixIcon></nys-badge>",
|
|
1593
|
+
"lang": "html"
|
|
1594
|
+
},
|
|
1595
|
+
{
|
|
1596
|
+
"title": "Warning Intent",
|
|
1597
|
+
"code": "<nys-badge label=\"Warning\" intent=\"warning\" prefixIcon></nys-badge>",
|
|
1598
|
+
"lang": "html"
|
|
1599
|
+
},
|
|
1600
|
+
{
|
|
1601
|
+
"title": "Success Intent",
|
|
1602
|
+
"code": "<nys-badge label=\"Success\" intent=\"success\" prefixIcon></nys-badge>",
|
|
1603
|
+
"lang": "html"
|
|
1604
|
+
},
|
|
1605
|
+
{
|
|
1606
|
+
"title": "Strong Neutral",
|
|
1607
|
+
"code": "<nys-badge variant=\"strong\" label=\"Neutral\" prefixIcon></nys-badge>",
|
|
1608
|
+
"lang": "html"
|
|
1609
|
+
},
|
|
1610
|
+
{
|
|
1611
|
+
"title": "Strong Error",
|
|
1612
|
+
"code": "<nys-badge variant=\"strong\" label=\"Error\" intent=\"error\" prefixIcon></nys-badge>",
|
|
1613
|
+
"lang": "html"
|
|
1614
|
+
},
|
|
1615
|
+
{
|
|
1616
|
+
"title": "Strong Warning",
|
|
1617
|
+
"code": "<nys-badge variant=\"strong\" label=\"Warning\" intent=\"warning\" prefixIcon></nys-badge>",
|
|
1618
|
+
"lang": "html"
|
|
1619
|
+
},
|
|
1620
|
+
{
|
|
1621
|
+
"title": "Strong Success",
|
|
1622
|
+
"code": "<nys-badge variant=\"strong\" label=\"Success\" intent=\"success\" prefixIcon></nys-badge>",
|
|
1623
|
+
"lang": "html"
|
|
1624
|
+
},
|
|
1625
|
+
{
|
|
1626
|
+
"title": "Custom Prefix Icon",
|
|
1627
|
+
"code": "<nys-badge label=\"Custom prefixIcon\" prefixIcon=\"check\"></nys-badge>",
|
|
1628
|
+
"lang": "html"
|
|
1629
|
+
},
|
|
1630
|
+
{
|
|
1631
|
+
"title": "Custom Suffix Icon",
|
|
1632
|
+
"code": "<nys-badge label=\"Custom suffixIcon\" suffixIcon=\"check\"></nys-badge>",
|
|
1633
|
+
"lang": "html"
|
|
1634
|
+
},
|
|
1635
|
+
{
|
|
1636
|
+
"title": "Size Small",
|
|
1637
|
+
"code": "<nys-badge label=\"Small\" size=\"sm\"></nys-badge>",
|
|
1638
|
+
"lang": "html"
|
|
1639
|
+
},
|
|
1640
|
+
{
|
|
1641
|
+
"title": "Screen reader text",
|
|
1642
|
+
"code": "<nys-badge intent=\"warning\" label=\"Caution\" prefixIcon srText=\"concern\"></nys-badge>",
|
|
1503
1643
|
"lang": "html"
|
|
1504
1644
|
}
|
|
1505
1645
|
]
|
|
@@ -1545,11 +1685,11 @@
|
|
|
1545
1685
|
"declarations": [
|
|
1546
1686
|
{
|
|
1547
1687
|
"kind": "class",
|
|
1548
|
-
"description": "A breadcrumb navigation trail composed of `
|
|
1688
|
+
"description": "A breadcrumb navigation trail composed of `li` elements.\nCollapses when the trail exceeds 5 items on desktop or 3 items on mobile,\nshowing the first, last, and item before the current page, with an ellipsis to expand.\nA single item renders as a back-to-parent link instead of a trail.",
|
|
1549
1689
|
"name": "NysBreadcrumbs",
|
|
1550
1690
|
"slots": [
|
|
1551
1691
|
{
|
|
1552
|
-
"description": "One or more `
|
|
1692
|
+
"description": "One or more `li` elements defining the trail.",
|
|
1553
1693
|
"name": ""
|
|
1554
1694
|
}
|
|
1555
1695
|
],
|
|
@@ -1579,7 +1719,7 @@
|
|
|
1579
1719
|
"kind": "field",
|
|
1580
1720
|
"name": "size",
|
|
1581
1721
|
"type": {
|
|
1582
|
-
"text": "\"sm\" | \"md\"
|
|
1722
|
+
"text": "\"sm\" | \"md\""
|
|
1583
1723
|
},
|
|
1584
1724
|
"default": "\"md\"",
|
|
1585
1725
|
"description": "Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.",
|
|
@@ -1802,7 +1942,7 @@
|
|
|
1802
1942
|
{
|
|
1803
1943
|
"name": "size",
|
|
1804
1944
|
"type": {
|
|
1805
|
-
"text": "\"sm\" | \"md\"
|
|
1945
|
+
"text": "\"sm\" | \"md\""
|
|
1806
1946
|
},
|
|
1807
1947
|
"default": "\"md\"",
|
|
1808
1948
|
"description": "Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.",
|
|
@@ -1859,19 +1999,44 @@
|
|
|
1859
1999
|
"summary": "Breadcrumb navigation trail with responsive collapse support.",
|
|
1860
2000
|
"examples": [
|
|
1861
2001
|
{
|
|
1862
|
-
"title": "
|
|
1863
|
-
"code": "<nys-breadcrumbs>\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/services\">Services</a></li>\n
|
|
2002
|
+
"title": "Basic",
|
|
2003
|
+
"code": "<nys-breadcrumbs>\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/services\">Services</a></li>\n</ol>\n</nys-breadcrumbs>",
|
|
1864
2004
|
"lang": "html"
|
|
1865
2005
|
},
|
|
1866
2006
|
{
|
|
1867
|
-
"title": "
|
|
1868
|
-
"code": "<nys-breadcrumbs>\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/services\">Services</a></li>\n</ol>\n</nys-breadcrumbs>",
|
|
2007
|
+
"title": "Current page",
|
|
2008
|
+
"code": "<nys-breadcrumbs>\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/services\">Services</a></li>\n<li>Current Page</li>\n</ol>\n</nys-breadcrumbs>",
|
|
1869
2009
|
"lang": "html"
|
|
1870
2010
|
},
|
|
1871
2011
|
{
|
|
1872
|
-
"title": "Single item
|
|
2012
|
+
"title": "Single item list",
|
|
1873
2013
|
"code": "<nys-breadcrumbs>\n<ol>\n<li><a href=\"/services\">Services</a></li>\n</ol>\n</nys-breadcrumbs>",
|
|
1874
2014
|
"lang": "html"
|
|
2015
|
+
},
|
|
2016
|
+
{
|
|
2017
|
+
"title": "Long list",
|
|
2018
|
+
"code": "<nys-breadcrumbs>\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/government\">Government</a></li>\n<li><a href=\"/government/agencies\">Agencies</a></li>\n<li><a href=\"/government/agencies/parks\">Parks & Recreation</a></li>\n<li><a href=\"/parks/state-parks\">State Parks</a></li>\n<li><a href=\"/parks/state-parks/delaware\">Delaware Region</a></li>\n<li><a href=\"/parks/state-parks/delaware/water-gap\">Delaware Water Gap</a></li>\n<li>Trail Conditions</li>\n</ol>\n</nys-breadcrumbs>",
|
|
2019
|
+
"lang": "html"
|
|
2020
|
+
},
|
|
2021
|
+
{
|
|
2022
|
+
"title": "Size small",
|
|
2023
|
+
"code": "<nys-breadcrumbs size=\"sm\">\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/government\">Government</a></li>\n<li><a href=\"/government/agencies\">Agencies</a></li>\n<li>Parks & Recreation</li>\n</ol>\n</nys-breadcrumbs>",
|
|
2024
|
+
"lang": "html"
|
|
2025
|
+
},
|
|
2026
|
+
{
|
|
2027
|
+
"title": "Back to parent (mobile)",
|
|
2028
|
+
"code": "<nys-breadcrumbs backToParent>\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/government\">Government</a></li>\n<li><a href=\"/government/agencies\">Agencies</a></li>\n<li><a href=\"/government/agencies/parks\">Parks & Recreation</a></li>\n<li><a href=\"/parks/state-parks\">State Parks</a></li>\n<li><a href=\"/parks/state-parks/delaware\">Delaware Region</a></li>\n<li><a href=\"/parks/state-parks/delaware/water-gap\">Delaware Water Gap</a></li>\n<li>Trail Conditions</li>\n</ol>\n</nys-breadcrumbs>",
|
|
2029
|
+
"lang": "html"
|
|
2030
|
+
},
|
|
2031
|
+
{
|
|
2032
|
+
"title": "Background bar",
|
|
2033
|
+
"code": "<nys-breadcrumbs backgroundBar>\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/services\">Services</a></li>\n<li><a href=\"/tickets\">Ticket System</a></li>\n<li>Del Water Gap</li>\n</ol>\n</nys-breadcrumbs>",
|
|
2034
|
+
"lang": "html"
|
|
2035
|
+
},
|
|
2036
|
+
{
|
|
2037
|
+
"title": "Disabled",
|
|
2038
|
+
"code": "<nys-breadcrumbs disabled>\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/services\">Services</a></li>\n<li><a href=\"/tickets\">Ticket System</a></li>\n<li>Del Water Gap</li>\n</ol>\n</nys-breadcrumbs>",
|
|
2039
|
+
"lang": "html"
|
|
1875
2040
|
}
|
|
1876
2041
|
]
|
|
1877
2042
|
}
|
|
@@ -1957,6 +2122,10 @@
|
|
|
1957
2122
|
}
|
|
1958
2123
|
],
|
|
1959
2124
|
"slots": [
|
|
2125
|
+
{
|
|
2126
|
+
"description": "Button label text. Use as fallback when `label` prop is not provided.",
|
|
2127
|
+
"name": ""
|
|
2128
|
+
},
|
|
1960
2129
|
{
|
|
1961
2130
|
"description": "Icon before label. Not shown for `text` variant.",
|
|
1962
2131
|
"name": "prefix-icon"
|
|
@@ -2226,6 +2395,15 @@
|
|
|
2226
2395
|
"privacy": "private",
|
|
2227
2396
|
"default": "false"
|
|
2228
2397
|
},
|
|
2398
|
+
{
|
|
2399
|
+
"kind": "field",
|
|
2400
|
+
"name": "_hasCircleSlot",
|
|
2401
|
+
"type": {
|
|
2402
|
+
"text": "boolean"
|
|
2403
|
+
},
|
|
2404
|
+
"privacy": "private",
|
|
2405
|
+
"default": "false"
|
|
2406
|
+
},
|
|
2229
2407
|
{
|
|
2230
2408
|
"kind": "field",
|
|
2231
2409
|
"name": "formAssociated",
|
|
@@ -2268,6 +2446,19 @@
|
|
|
2268
2446
|
}
|
|
2269
2447
|
]
|
|
2270
2448
|
},
|
|
2449
|
+
{
|
|
2450
|
+
"kind": "method",
|
|
2451
|
+
"name": "_onCircleSlotChange",
|
|
2452
|
+
"privacy": "private",
|
|
2453
|
+
"parameters": [
|
|
2454
|
+
{
|
|
2455
|
+
"name": "e",
|
|
2456
|
+
"type": {
|
|
2457
|
+
"text": "Event"
|
|
2458
|
+
}
|
|
2459
|
+
}
|
|
2460
|
+
]
|
|
2461
|
+
},
|
|
2271
2462
|
{
|
|
2272
2463
|
"kind": "method",
|
|
2273
2464
|
"name": "_manageFormAction",
|
|
@@ -2327,7 +2518,7 @@
|
|
|
2327
2518
|
"kind": "method",
|
|
2328
2519
|
"name": "_handleAnyAttributeFunction",
|
|
2329
2520
|
"privacy": "private",
|
|
2330
|
-
"description": "
|
|
2521
|
+
"description": "Handles inline onclick attributes for keyboard activation.\n\nNative clicks execute inline onclick attributes automatically, but\nkeyboard activation of the custom element does not trigger that native\nbehavior. Dispatching a synthetic click lets the browser's own inline\nevent handler mechanism execute any onclick attribute safely without\neval() or new Function()."
|
|
2331
2522
|
},
|
|
2332
2523
|
{
|
|
2333
2524
|
"kind": "method",
|
|
@@ -2578,18 +2769,38 @@
|
|
|
2578
2769
|
"summary": "Button for actions and CTAs with variants, sizes, and icon support.",
|
|
2579
2770
|
"examples": [
|
|
2580
2771
|
{
|
|
2581
|
-
"title": "Basic
|
|
2582
|
-
"code": "<nys-button label=\"
|
|
2772
|
+
"title": "Basic",
|
|
2773
|
+
"code": "<nys-button label=\"Button\" variant=\"filled\"></nys-button>",
|
|
2774
|
+
"lang": "html"
|
|
2775
|
+
},
|
|
2776
|
+
{
|
|
2777
|
+
"title": "Variant Outline",
|
|
2778
|
+
"code": "<nys-button label=\"Button\" variant=\"outline\"></nys-button>",
|
|
2779
|
+
"lang": "html"
|
|
2780
|
+
},
|
|
2781
|
+
{
|
|
2782
|
+
"title": "Variant Ghost",
|
|
2783
|
+
"code": "<nys-button label=\"Button\" variant=\"ghost\"></nys-button>",
|
|
2784
|
+
"lang": "html"
|
|
2785
|
+
},
|
|
2786
|
+
{
|
|
2787
|
+
"title": "Variant Text",
|
|
2788
|
+
"code": "<nys-button label=\"Button\" variant=\"text\"></nys-button>",
|
|
2583
2789
|
"lang": "html"
|
|
2584
2790
|
},
|
|
2585
2791
|
{
|
|
2586
|
-
"title": "
|
|
2587
|
-
"code": "<nys-button label=\"
|
|
2792
|
+
"title": "Prefix Icon",
|
|
2793
|
+
"code": "<nys-button label=\"Previous\" prefixIcon=\"chevron_left\"></nys-button>",
|
|
2588
2794
|
"lang": "html"
|
|
2589
2795
|
},
|
|
2590
2796
|
{
|
|
2591
|
-
"title": "
|
|
2592
|
-
"code": "<nys-button label=\"
|
|
2797
|
+
"title": "Suffix Icon",
|
|
2798
|
+
"code": "<nys-button label=\"Next\" suffixIcon=\"chevron_right\"></nys-button>",
|
|
2799
|
+
"lang": "html"
|
|
2800
|
+
},
|
|
2801
|
+
{
|
|
2802
|
+
"title": "Slotted Icons",
|
|
2803
|
+
"code": "<nys-button label=\"Slotted icons\">\n<nys-icon color=\"#db117d\" slot=\"prefix-icon\" name=\"chevron_left\"></nys-icon>\n<nys-icon color=\"#db117d\" slot=\"suffix-icon\" name=\"chevron_right\"></nys-icon>\n</nys-button>",
|
|
2593
2804
|
"lang": "html"
|
|
2594
2805
|
},
|
|
2595
2806
|
{
|
|
@@ -2598,12 +2809,38 @@
|
|
|
2598
2809
|
"lang": "html"
|
|
2599
2810
|
},
|
|
2600
2811
|
{
|
|
2601
|
-
"title": "
|
|
2812
|
+
"title": "Size Small",
|
|
2813
|
+
"code": "<nys-button label=\"Small\" size=\"sm\"></nys-button>",
|
|
2814
|
+
"lang": "html"
|
|
2815
|
+
},
|
|
2816
|
+
{
|
|
2817
|
+
"title": "Size Large",
|
|
2818
|
+
"code": "<nys-button label=\"Large\" size=\"lg\"></nys-button>",
|
|
2819
|
+
"lang": "html"
|
|
2820
|
+
},
|
|
2821
|
+
{
|
|
2822
|
+
"title": "Full width",
|
|
2823
|
+
"code": "<nys-button label=\"Full width\" fullWidth></nys-button>",
|
|
2824
|
+
"lang": "html"
|
|
2825
|
+
},
|
|
2826
|
+
{
|
|
2827
|
+
"title": "Inverted",
|
|
2828
|
+
"code": "<nys-button label=\"Inverted\" inverted></nys-button>",
|
|
2829
|
+
"lang": "html",
|
|
2830
|
+
"render": "<div style=\"background: #1b1b1b; padding: 1rem;\">\n<nys-button label=\"Inverted\" inverted></nys-button>\n</div>"
|
|
2831
|
+
},
|
|
2832
|
+
{
|
|
2833
|
+
"title": "Disabled",
|
|
2834
|
+
"code": "<nys-button label=\"Disabled\" disabled></nys-button>",
|
|
2835
|
+
"lang": "html"
|
|
2836
|
+
},
|
|
2837
|
+
{
|
|
2838
|
+
"title": "Href",
|
|
2602
2839
|
"code": "<nys-button label=\"Visit NY.gov\" href=\"https://www.ny.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></nys-button>",
|
|
2603
2840
|
"lang": "html"
|
|
2604
2841
|
},
|
|
2605
2842
|
{
|
|
2606
|
-
"title": "
|
|
2843
|
+
"title": "Type",
|
|
2607
2844
|
"code": "<nys-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></nys-button>",
|
|
2608
2845
|
"lang": "html"
|
|
2609
2846
|
}
|
|
@@ -2969,6 +3206,11 @@
|
|
|
2969
3206
|
"name": "_hasDescription",
|
|
2970
3207
|
"readonly": true
|
|
2971
3208
|
},
|
|
3209
|
+
{
|
|
3210
|
+
"kind": "field",
|
|
3211
|
+
"name": "_isStandalone",
|
|
3212
|
+
"readonly": true
|
|
3213
|
+
},
|
|
2972
3214
|
{
|
|
2973
3215
|
"kind": "field",
|
|
2974
3216
|
"name": "_handleMobileQuery",
|
|
@@ -3271,13 +3513,13 @@
|
|
|
3271
3513
|
"summary": "Checkbox for binary choices or multi-select options.",
|
|
3272
3514
|
"examples": [
|
|
3273
3515
|
{
|
|
3274
|
-
"title": "Single
|
|
3275
|
-
"code": "<nys-checkbox label=\"I agree to the terms\" name=\"terms\"
|
|
3516
|
+
"title": "Single",
|
|
3517
|
+
"code": "<nys-checkbox label=\"I agree to the terms\" name=\"terms\"></nys-checkbox>",
|
|
3276
3518
|
"lang": "html"
|
|
3277
3519
|
},
|
|
3278
3520
|
{
|
|
3279
|
-
"title": "
|
|
3280
|
-
"code": "<nys-
|
|
3521
|
+
"title": "Preselected",
|
|
3522
|
+
"code": "<nys-checkbox label=\"I agree to the terms\" name=\"terms\" checked></nys-checkbox>",
|
|
3281
3523
|
"lang": "html"
|
|
3282
3524
|
}
|
|
3283
3525
|
]
|
|
@@ -3485,6 +3727,15 @@
|
|
|
3485
3727
|
"privacy": "private",
|
|
3486
3728
|
"default": "null"
|
|
3487
3729
|
},
|
|
3730
|
+
{
|
|
3731
|
+
"kind": "field",
|
|
3732
|
+
"name": "_hasSharedNames",
|
|
3733
|
+
"type": {
|
|
3734
|
+
"text": "boolean"
|
|
3735
|
+
},
|
|
3736
|
+
"privacy": "private",
|
|
3737
|
+
"default": "false"
|
|
3738
|
+
},
|
|
3488
3739
|
{
|
|
3489
3740
|
"kind": "field",
|
|
3490
3741
|
"name": "_internals",
|
|
@@ -3629,6 +3880,25 @@
|
|
|
3629
3880
|
}
|
|
3630
3881
|
}
|
|
3631
3882
|
]
|
|
3883
|
+
},
|
|
3884
|
+
{
|
|
3885
|
+
"kind": "method",
|
|
3886
|
+
"name": "_checkSharedNames",
|
|
3887
|
+
"privacy": "private",
|
|
3888
|
+
"return": {
|
|
3889
|
+
"type": {
|
|
3890
|
+
"text": "boolean"
|
|
3891
|
+
}
|
|
3892
|
+
},
|
|
3893
|
+
"parameters": [
|
|
3894
|
+
{
|
|
3895
|
+
"name": "checkboxes",
|
|
3896
|
+
"type": {
|
|
3897
|
+
"text": "NysCheckbox[]"
|
|
3898
|
+
}
|
|
3899
|
+
}
|
|
3900
|
+
],
|
|
3901
|
+
"description": "Drupal-like naming support *"
|
|
3632
3902
|
}
|
|
3633
3903
|
],
|
|
3634
3904
|
"attributes": [
|
|
@@ -3762,9 +4032,54 @@
|
|
|
3762
4032
|
"summary": "Container for grouping checkboxes as a single form control.",
|
|
3763
4033
|
"examples": [
|
|
3764
4034
|
{
|
|
3765
|
-
"title": "Basic
|
|
4035
|
+
"title": "Basic",
|
|
3766
4036
|
"code": "<nys-checkboxgroup label=\"Select landmarks\" required>\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n</nys-checkboxgroup>",
|
|
3767
4037
|
"lang": "html"
|
|
4038
|
+
},
|
|
4039
|
+
{
|
|
4040
|
+
"title": "Tile",
|
|
4041
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\" tile>\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4042
|
+
"lang": "html"
|
|
4043
|
+
},
|
|
4044
|
+
{
|
|
4045
|
+
"title": "Required",
|
|
4046
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\" required>\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4047
|
+
"lang": "html"
|
|
4048
|
+
},
|
|
4049
|
+
{
|
|
4050
|
+
"title": "Optional",
|
|
4051
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\" optional>\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4052
|
+
"lang": "html"
|
|
4053
|
+
},
|
|
4054
|
+
{
|
|
4055
|
+
"title": "Disabled",
|
|
4056
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\">\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\" disabled></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\" disabled></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4057
|
+
"lang": "html"
|
|
4058
|
+
},
|
|
4059
|
+
{
|
|
4060
|
+
"title": "Size Small",
|
|
4061
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\" size=\"sm\">\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4062
|
+
"lang": "html"
|
|
4063
|
+
},
|
|
4064
|
+
{
|
|
4065
|
+
"title": "Other Option",
|
|
4066
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\">\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"\" label=\"Other\" other></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4067
|
+
"lang": "html"
|
|
4068
|
+
},
|
|
4069
|
+
{
|
|
4070
|
+
"title": "Error Message",
|
|
4071
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\" showError errorMessage=\"Please select at least one landmark\">\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4072
|
+
"lang": "html"
|
|
4073
|
+
},
|
|
4074
|
+
{
|
|
4075
|
+
"title": "Description",
|
|
4076
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\" description=\"Choose wisely, you can only pick one.\">\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4077
|
+
"lang": "html"
|
|
4078
|
+
},
|
|
4079
|
+
{
|
|
4080
|
+
"title": "Description Slot",
|
|
4081
|
+
"code": "<nys-checkboxgroup label=\"Select landmarks\">\n<div slot=\"description\">Your <strong>ABSOLUTE</strong> favorite one.</div>\n<nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n<nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n</nys-checkboxgroup>",
|
|
4082
|
+
"lang": "html"
|
|
3768
4083
|
}
|
|
3769
4084
|
]
|
|
3770
4085
|
}
|
|
@@ -4491,6 +4806,67 @@
|
|
|
4491
4806
|
"name": "LitElement",
|
|
4492
4807
|
"package": "lit"
|
|
4493
4808
|
},
|
|
4809
|
+
"examples": [
|
|
4810
|
+
{
|
|
4811
|
+
"title": "Basic",
|
|
4812
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\">\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"cherry\">Cherry</option>\n<option value=\"date\">Date</option>\n<option value=\"elderberry\">Elderberry</option>\n<option value=\"fig\">Fig</option>\n<option value=\"grape\">Grape</option>\n<option value=\"honeydew\">Honeydew</option>\n<option value=\"kiwi\">Kiwi</option>\n<option value=\"lemon\">Lemon</option>\n<option value=\"mango\">Mango</option>\n<option value=\"nectarine\">Nectarine</option>\n<option value=\"orange\">Orange</option>\n<option value=\"papaya\">Papaya</option>\n<option value=\"quince\">Quince</option>\n<option value=\"raspberry\">Raspberry</option>\n<option value=\"strawberry\">Strawberry</option>\n<option value=\"tangerine\">Tangerine</option>\n<option value=\"watermelon\">Watermelon</option>\n</nys-combobox>",
|
|
4813
|
+
"lang": "html"
|
|
4814
|
+
},
|
|
4815
|
+
{
|
|
4816
|
+
"title": "Default Value",
|
|
4817
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\" value=\"mango\">\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"mango\" selected>Mango</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>",
|
|
4818
|
+
"lang": "html"
|
|
4819
|
+
},
|
|
4820
|
+
{
|
|
4821
|
+
"title": "Option Group",
|
|
4822
|
+
"code": "<nys-combobox label=\"Select a fruit\" description=\"Fruits organized by category\">\n<optgroup label=\"Citrus\">\n<option value=\"lemon\">Lemon</option>\n<option value=\"lime\">Lime</option>\n<option value=\"orange\">Orange</option>\n<option value=\"grapefruit\">Grapefruit</option>\n<option value=\"tangerine\">Tangerine</option>\n</optgroup>\n<optgroup label=\"Berries\">\n<option value=\"strawberry\">Strawberry</option>\n<option value=\"blueberry\">Blueberry</option>\n<option value=\"raspberry\">Raspberry</option>\n<option value=\"blackberry\">Blackberry</option>\n<option value=\"cranberry\">Cranberry</option>\n</optgroup>\n<optgroup label=\"Tropical\">\n<option value=\"mango\">Mango</option>\n<option value=\"pineapple\">Pineapple</option>\n<option value=\"papaya\">Papaya</option>\n<option value=\"coconut\">Coconut</option>\n<option value=\"passionfruit\">Passionfruit</option>\n</optgroup>\n<optgroup label=\"Stone Fruits\">\n<option value=\"peach\">Peach</option>\n<option value=\"plum\">Plum</option>\n<option value=\"cherry\">Cherry</option>\n<option value=\"apricot\">Apricot</option>\n<option value=\"nectarine\">Nectarine</option>\n</optgroup>\n</nys-combobox>",
|
|
4823
|
+
"lang": "html"
|
|
4824
|
+
},
|
|
4825
|
+
{
|
|
4826
|
+
"title": "Disabled",
|
|
4827
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\" disabled>\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>",
|
|
4828
|
+
"lang": "html"
|
|
4829
|
+
},
|
|
4830
|
+
{
|
|
4831
|
+
"title": "Required",
|
|
4832
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\" required>\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>",
|
|
4833
|
+
"lang": "html"
|
|
4834
|
+
},
|
|
4835
|
+
{
|
|
4836
|
+
"title": "Optional",
|
|
4837
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\" optional>\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>",
|
|
4838
|
+
"lang": "html"
|
|
4839
|
+
},
|
|
4840
|
+
{
|
|
4841
|
+
"title": "Width Medium",
|
|
4842
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\" width=\"md\">\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>",
|
|
4843
|
+
"lang": "html"
|
|
4844
|
+
},
|
|
4845
|
+
{
|
|
4846
|
+
"title": "Width Large",
|
|
4847
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\" width=\"lg\">\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>",
|
|
4848
|
+
"lang": "html"
|
|
4849
|
+
},
|
|
4850
|
+
{
|
|
4851
|
+
"title": "Description",
|
|
4852
|
+
"code": "```html\n<nys-combobox label=\"Select your favorite fruit\" description=\"Choose from the list of available fruits.\">\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>\n```d"
|
|
4853
|
+
},
|
|
4854
|
+
{
|
|
4855
|
+
"title": "Description Slot",
|
|
4856
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\">\n<label slot=\"description\">This is a description slot</label>\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>",
|
|
4857
|
+
"lang": "html"
|
|
4858
|
+
},
|
|
4859
|
+
{
|
|
4860
|
+
"title": "Error Message",
|
|
4861
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\" showError errorMessage=\"Please select a fruit\">\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"orange\">Orange</option>\n<option value=\"strawberry\">Strawberry</option>\n</nys-combobox>",
|
|
4862
|
+
"lang": "html"
|
|
4863
|
+
},
|
|
4864
|
+
{
|
|
4865
|
+
"title": "Disabled Options",
|
|
4866
|
+
"code": "<nys-combobox label=\"Select your favorite fruit\" description=\"Some fruits are out of season\">\n<option value=\"apple\">Apple</option>\n<option value=\"banana\">Banana</option>\n<option value=\"cherry\" disabled>Cherry (Out of season)</option>\n<option value=\"mango\">Mango</option>\n<option value=\"strawberry\" disabled>Strawberry (Out of season)</option>\n<option value=\"orange\">Orange</option>\n</nys-combobox>",
|
|
4867
|
+
"lang": "html"
|
|
4868
|
+
}
|
|
4869
|
+
],
|
|
4494
4870
|
"tagName": "nys-combobox",
|
|
4495
4871
|
"customElement": true
|
|
4496
4872
|
}
|
|
@@ -4575,7 +4951,7 @@
|
|
|
4575
4951
|
"type": {
|
|
4576
4952
|
"text": "\"md\" | \"lg\" | \"full\""
|
|
4577
4953
|
},
|
|
4578
|
-
"default": "\"
|
|
4954
|
+
"default": "\"full\"",
|
|
4579
4955
|
"description": "Input width: `md` (200px), `lg` (384px), `full` (100%).",
|
|
4580
4956
|
"attribute": "width",
|
|
4581
4957
|
"reflects": true
|
|
@@ -5112,7 +5488,7 @@
|
|
|
5112
5488
|
"type": {
|
|
5113
5489
|
"text": "\"md\" | \"lg\" | \"full\""
|
|
5114
5490
|
},
|
|
5115
|
-
"default": "\"
|
|
5491
|
+
"default": "\"full\"",
|
|
5116
5492
|
"description": "Input width: `md` (200px), `lg` (384px), `full` (100%).",
|
|
5117
5493
|
"fieldName": "width",
|
|
5118
5494
|
"propName": "width"
|
|
@@ -5297,23 +5673,53 @@
|
|
|
5297
5673
|
"summary": "Date picker with calendar popup and native fallback.",
|
|
5298
5674
|
"examples": [
|
|
5299
5675
|
{
|
|
5300
|
-
"title": "Basic
|
|
5301
|
-
"code": "<nys-datepicker
|
|
5676
|
+
"title": "Basic",
|
|
5677
|
+
"code": "<nys-datepicker\nid=\"my-datepicker\"\nname=\"my-datepicker\"\nlabel=\"Schedule an appointment\"\ndescription=\"Enter in MM/DD/YYYY format\"\n></nys-datepicker>",
|
|
5302
5678
|
"lang": "html"
|
|
5303
5679
|
},
|
|
5304
5680
|
{
|
|
5305
|
-
"title": "
|
|
5681
|
+
"title": "Width Large",
|
|
5306
5682
|
"code": "<nys-datepicker\nlabel=\"Event Date\"\ndescription=\"Select the date of your event\"\nwidth=\"lg\">\n</nys-datepicker>",
|
|
5307
5683
|
"lang": "html"
|
|
5308
5684
|
},
|
|
5309
5685
|
{
|
|
5310
|
-
"title": "
|
|
5311
|
-
"code": "<nys-datepicker\nlabel=\"
|
|
5686
|
+
"title": "Width Full",
|
|
5687
|
+
"code": "<nys-datepicker\nlabel=\"Event Date\"\ndescription=\"Select the date of your event\"\nwidth=\"full\">\n</nys-datepicker>",
|
|
5312
5688
|
"lang": "html"
|
|
5313
5689
|
},
|
|
5314
5690
|
{
|
|
5315
|
-
"title": "
|
|
5316
|
-
"code": "<nys-datepicker\nlabel=\"
|
|
5691
|
+
"title": "Custom Start Date",
|
|
5692
|
+
"code": "<nys-datepicker\nlabel=\"Appointment\"\nstartDate=\"2024-01-01\">\n</nys-datepicker>",
|
|
5693
|
+
"lang": "html"
|
|
5694
|
+
},
|
|
5695
|
+
{
|
|
5696
|
+
"title": "Without Buttons",
|
|
5697
|
+
"code": "<nys-datepicker\nlabel=\"Appointment\"\nhideTodayButton\nhideClearButton>\n</nys-datepicker>",
|
|
5698
|
+
"lang": "html"
|
|
5699
|
+
},
|
|
5700
|
+
{
|
|
5701
|
+
"title": "Error Message",
|
|
5702
|
+
"code": "<nys-datepicker\nlabel=\"Start Date\"\nshowError\nerrorMessage=\"Please select a valid start date\">\n</nys-datepicker>",
|
|
5703
|
+
"lang": "html"
|
|
5704
|
+
},
|
|
5705
|
+
{
|
|
5706
|
+
"title": "Date Range",
|
|
5707
|
+
"code": "<nys-datepicker\nlabel=\"Select a date\"\ndescription=\"Only dates within April 4/5/2026 - 7/15/2026 are selectable\"\nminDate=\"2026-04-05\"\nmaxDate=\"2026-07-15\">\n</nys-datepicker>",
|
|
5708
|
+
"lang": "html"
|
|
5709
|
+
},
|
|
5710
|
+
{
|
|
5711
|
+
"title": "Disabled",
|
|
5712
|
+
"code": "<nys-datepicker\nlabel=\"Disabled datepicker\"\ndisabled\nvalue=\"2025-01-15\">\n</nys-datepicker>",
|
|
5713
|
+
"lang": "html"
|
|
5714
|
+
},
|
|
5715
|
+
{
|
|
5716
|
+
"title": "Required",
|
|
5717
|
+
"code": "<nys-datepicker\nlabel=\"Start Date\"\nrequired>\n</nys-datepicker>",
|
|
5718
|
+
"lang": "html"
|
|
5719
|
+
},
|
|
5720
|
+
{
|
|
5721
|
+
"title": "Optional",
|
|
5722
|
+
"code": "<nys-datepicker\nlabel=\"Start Date\"\noptional>\n</nys-datepicker>",
|
|
5317
5723
|
"lang": "html"
|
|
5318
5724
|
}
|
|
5319
5725
|
]
|
|
@@ -5430,9 +5836,20 @@
|
|
|
5430
5836
|
"summary": "Horizontal divider for visual separation of content sections.",
|
|
5431
5837
|
"examples": [
|
|
5432
5838
|
{
|
|
5433
|
-
"title": "Basic
|
|
5839
|
+
"title": "Basic",
|
|
5434
5840
|
"code": "<p>Section one content</p>\n<nys-divider></nys-divider>\n<p>Section two content</p>",
|
|
5435
5841
|
"lang": "html"
|
|
5842
|
+
},
|
|
5843
|
+
{
|
|
5844
|
+
"title": "Inverted",
|
|
5845
|
+
"code": "<p>Section one content</p>\n<nys-divider inverted></nys-divider>\n<p>Section two content</p>",
|
|
5846
|
+
"lang": "html",
|
|
5847
|
+
"render": "<div style=\"display: flex; flex-direction: column; background-color: var(--nys-color-ink, #1b1b1b); color: var(--nys-color-ink-reverse, #fff); padding: var(--nys-space-200, 16px);\">\n<p>Section one content</p>\n<nys-divider inverted></nys-divider>\n<p>Section two content</p>\n</div>"
|
|
5848
|
+
},
|
|
5849
|
+
{
|
|
5850
|
+
"title": "Subtle",
|
|
5851
|
+
"code": "<p>Section one content</p>\n<nys-divider subtle></nys-divider>\n<p>Section two content</p>",
|
|
5852
|
+
"lang": "html"
|
|
5436
5853
|
}
|
|
5437
5854
|
]
|
|
5438
5855
|
}
|
|
@@ -5485,7 +5902,7 @@
|
|
|
5485
5902
|
"declarations": [
|
|
5486
5903
|
{
|
|
5487
5904
|
"kind": "class",
|
|
5488
|
-
"description": "",
|
|
5905
|
+
"description": "Dropdown menus enable users to select an action from a list of options.\nThey’re commonly used to save space by grouping related actions, or to provide actions in a confined space.",
|
|
5489
5906
|
"name": "NysDropdownMenu",
|
|
5490
5907
|
"members": [
|
|
5491
5908
|
{
|
|
@@ -5507,6 +5924,16 @@
|
|
|
5507
5924
|
"default": "false",
|
|
5508
5925
|
"attribute": "showDropdown"
|
|
5509
5926
|
},
|
|
5927
|
+
{
|
|
5928
|
+
"kind": "field",
|
|
5929
|
+
"name": "label",
|
|
5930
|
+
"type": {
|
|
5931
|
+
"text": "string"
|
|
5932
|
+
},
|
|
5933
|
+
"default": "\"\"",
|
|
5934
|
+
"description": "Accessible label for the menu. Used as `aria-label` on the `<ul role=\"menu\">` element.",
|
|
5935
|
+
"attribute": "label"
|
|
5936
|
+
},
|
|
5510
5937
|
{
|
|
5511
5938
|
"kind": "field",
|
|
5512
5939
|
"name": "position",
|
|
@@ -5826,6 +6253,16 @@
|
|
|
5826
6253
|
"fieldName": "showDropdown",
|
|
5827
6254
|
"propName": "showdropdown"
|
|
5828
6255
|
},
|
|
6256
|
+
{
|
|
6257
|
+
"name": "label",
|
|
6258
|
+
"type": {
|
|
6259
|
+
"text": "string"
|
|
6260
|
+
},
|
|
6261
|
+
"default": "\"\"",
|
|
6262
|
+
"description": "Accessible label for the menu. Used as `aria-label` on the `<ul role=\"menu\">` element.",
|
|
6263
|
+
"fieldName": "label",
|
|
6264
|
+
"propName": "label"
|
|
6265
|
+
},
|
|
5829
6266
|
{
|
|
5830
6267
|
"name": "position",
|
|
5831
6268
|
"type": {
|
|
@@ -5842,7 +6279,16 @@
|
|
|
5842
6279
|
"package": "lit"
|
|
5843
6280
|
},
|
|
5844
6281
|
"tagName": "nys-dropdownmenu",
|
|
5845
|
-
"customElement": true
|
|
6282
|
+
"customElement": true,
|
|
6283
|
+
"summary": "Action menu with auto-positioning, keyboard support, and screen reader integration.",
|
|
6284
|
+
"examples": [
|
|
6285
|
+
{
|
|
6286
|
+
"title": "Basic",
|
|
6287
|
+
"code": "<nys-button id=\"my-trigger-id\" label=\"Open Menu\"></nys-button>\n<nys-dropdownmenu id=\"my-dropdownmenu\" for=\"my-trigger-id\">\n<nys-dropdownmenuitem label=\"Profile\" href=\"/profile\"></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Repositories & Github Pages\" href=\"/repos\"></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Organizations\" href=\"/organizations\"></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Sign out\" href=\"/logout\"></nys-dropdownmenuitem>\n</nys-dropdownmenu>\n</div>",
|
|
6288
|
+
"lang": "html",
|
|
6289
|
+
"render": "<div style=\"margin: 200px; display: flex; justify-content: center; align-items: center;\">\n<nys-button id=\"my-trigger-id\" label=\"Open Menu\"></nys-button>\n<nys-dropdownmenu id=\"my-dropdownmenu\" for=\"my-trigger-id\">\n<nys-dropdownmenuitem label=\"Profile\" href=\"/profile\"></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Repositories & Github Pages\" href=\"/repos\"></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Organizations\" href=\"/organizations\"></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Sign out\" href=\"/logout\"></nys-dropdownmenuitem>\n</nys-dropdownmenu>\n</div>"
|
|
6290
|
+
}
|
|
6291
|
+
]
|
|
5846
6292
|
}
|
|
5847
6293
|
],
|
|
5848
6294
|
"exports": [
|
|
@@ -6021,19 +6467,7 @@
|
|
|
6021
6467
|
},
|
|
6022
6468
|
"tagName": "nys-dropdownmenuitem",
|
|
6023
6469
|
"customElement": true,
|
|
6024
|
-
"summary": "Dropdown item to display label and provide href link."
|
|
6025
|
-
"examples": [
|
|
6026
|
-
{
|
|
6027
|
-
"title": "Basic item",
|
|
6028
|
-
"code": "<nys-dropdownmenuitem label=\"Edit\" link=\"/edit\"></nys-dropdownmenuitem>",
|
|
6029
|
-
"lang": "html"
|
|
6030
|
-
},
|
|
6031
|
-
{
|
|
6032
|
-
"title": "Disabled item",
|
|
6033
|
-
"code": "<nys-dropdownmenuitem label=\"Delete\" link=\"/delete\" disabled></nys-dropdownmenuitem>",
|
|
6034
|
-
"lang": "html"
|
|
6035
|
-
}
|
|
6036
|
-
]
|
|
6470
|
+
"summary": "Dropdown item to display label and provide href link."
|
|
6037
6471
|
}
|
|
6038
6472
|
],
|
|
6039
6473
|
"exports": [
|
|
@@ -6170,7 +6604,19 @@
|
|
|
6170
6604
|
},
|
|
6171
6605
|
"tagName": "nys-errormessage",
|
|
6172
6606
|
"customElement": true,
|
|
6173
|
-
"summary": "Internal error message display with icon and ARIA alert support."
|
|
6607
|
+
"summary": "Internal error message display with icon and ARIA alert support.",
|
|
6608
|
+
"examples": [
|
|
6609
|
+
{
|
|
6610
|
+
"title": "Basic",
|
|
6611
|
+
"code": "<nys-errormessage showError errorMessage=\"This is an error message\"></nys-errormessage>",
|
|
6612
|
+
"lang": "html"
|
|
6613
|
+
},
|
|
6614
|
+
{
|
|
6615
|
+
"title": "Divider",
|
|
6616
|
+
"code": "<nys-errormessage showError errorMessage=\"This is an error message\" showDivider></nys-errormessage>",
|
|
6617
|
+
"lang": "html"
|
|
6618
|
+
}
|
|
6619
|
+
]
|
|
6174
6620
|
}
|
|
6175
6621
|
],
|
|
6176
6622
|
"exports": [
|
|
@@ -6213,7 +6659,7 @@
|
|
|
6213
6659
|
"declarations": [
|
|
6214
6660
|
{
|
|
6215
6661
|
"kind": "class",
|
|
6216
|
-
"description": "A file input for uploading files with support for multiple files, drag-and-drop, and progress tracking.\nValidates file types via magic bytes (not just extension). Form-associated via ElementInternals.\n\nUse for document uploads, image uploads, or any file submission. Enable `dropzone` for drag-and-drop UI.",
|
|
6662
|
+
"description": "A file input for uploading files with support for multiple files, drag-and-drop, and progress tracking.\nValidates file types via magic bytes (not just extension). Form-associated via ElementInternals.\n\nUse for document uploads, image uploads, or any file submission. Enable `dropzone` for drag-and-drop UI.\n\nRead or write the current selection via the `files` (`File[]`) and `value` (`File | null`)\nproperties — useful for rehydrating state or binding from a framework form model.\nSetting them is silent (does not emit `nys-change`).",
|
|
6217
6663
|
"name": "NysFileinput",
|
|
6218
6664
|
"slots": [
|
|
6219
6665
|
{
|
|
@@ -6409,6 +6855,41 @@
|
|
|
6409
6855
|
"privacy": "private",
|
|
6410
6856
|
"default": "[]"
|
|
6411
6857
|
},
|
|
6858
|
+
{
|
|
6859
|
+
"kind": "field",
|
|
6860
|
+
"name": "files",
|
|
6861
|
+
"type": {
|
|
6862
|
+
"text": "File[]"
|
|
6863
|
+
},
|
|
6864
|
+
"description": "The currently selected files. Read to get the current selection; set to\nreplace it (e.g. rehydrating state after navigation, or binding from a\nframework form model). Property-only — a `File[]` cannot round-trip through\nan HTML attribute. Setting this is silent (does not emit `nys-change`),\nmatching native input behavior and avoiding feedback loops in two-way bindings."
|
|
6865
|
+
},
|
|
6866
|
+
{
|
|
6867
|
+
"kind": "field",
|
|
6868
|
+
"name": "value",
|
|
6869
|
+
"type": {
|
|
6870
|
+
"text": "File | null"
|
|
6871
|
+
},
|
|
6872
|
+
"description": "Single-file convenience accessor (parity with `nys-textinput`'s `value`).\nReads the first selected file (or `null`); setting replaces the selection."
|
|
6873
|
+
},
|
|
6874
|
+
{
|
|
6875
|
+
"kind": "method",
|
|
6876
|
+
"name": "setFiles",
|
|
6877
|
+
"privacy": "public",
|
|
6878
|
+
"return": {
|
|
6879
|
+
"type": {
|
|
6880
|
+
"text": "Promise<void>"
|
|
6881
|
+
}
|
|
6882
|
+
},
|
|
6883
|
+
"parameters": [
|
|
6884
|
+
{
|
|
6885
|
+
"name": "incoming",
|
|
6886
|
+
"type": {
|
|
6887
|
+
"text": "File[]"
|
|
6888
|
+
}
|
|
6889
|
+
}
|
|
6890
|
+
],
|
|
6891
|
+
"description": "Programmatically set the selection and await async validation/processing.\nSame as assigning `files`, but resolves once every file has finished its\nmagic-byte validation and read — use when you need to read `checkValidity()`\nor the settled selection immediately after."
|
|
6892
|
+
},
|
|
6412
6893
|
{
|
|
6413
6894
|
"kind": "field",
|
|
6414
6895
|
"name": "_dragActive",
|
|
@@ -6556,6 +7037,19 @@
|
|
|
6556
7037
|
}
|
|
6557
7038
|
]
|
|
6558
7039
|
},
|
|
7040
|
+
{
|
|
7041
|
+
"kind": "method",
|
|
7042
|
+
"name": "_handleBlur",
|
|
7043
|
+
"privacy": "private",
|
|
7044
|
+
"parameters": [
|
|
7045
|
+
{
|
|
7046
|
+
"name": "e",
|
|
7047
|
+
"type": {
|
|
7048
|
+
"text": "FocusEvent"
|
|
7049
|
+
}
|
|
7050
|
+
}
|
|
7051
|
+
]
|
|
7052
|
+
},
|
|
6559
7053
|
{
|
|
6560
7054
|
"kind": "method",
|
|
6561
7055
|
"name": "_dispatchChangeEvent",
|
|
@@ -6644,6 +7138,13 @@
|
|
|
6644
7138
|
}
|
|
6645
7139
|
],
|
|
6646
7140
|
"events": [
|
|
7141
|
+
{
|
|
7142
|
+
"name": "nys-blur",
|
|
7143
|
+
"type": {
|
|
7144
|
+
"text": "Event"
|
|
7145
|
+
},
|
|
7146
|
+
"description": "Fired when focus leaves the component. Triggers validation."
|
|
7147
|
+
},
|
|
6647
7148
|
{
|
|
6648
7149
|
"name": "nys-change",
|
|
6649
7150
|
"type": {
|
|
@@ -6823,13 +7324,48 @@
|
|
|
6823
7324
|
"summary": "File input with drag-and-drop, validation, and progress tracking.",
|
|
6824
7325
|
"examples": [
|
|
6825
7326
|
{
|
|
6826
|
-
"title": "
|
|
6827
|
-
"code": "<nys-fileinput
|
|
7327
|
+
"title": "Basic",
|
|
7328
|
+
"code": "<nys-fileinput\nlabel=\"Upload a file\"\n></nys-fileinput>",
|
|
7329
|
+
"lang": "html"
|
|
7330
|
+
},
|
|
7331
|
+
{
|
|
7332
|
+
"title": "Dropzone",
|
|
7333
|
+
"code": "<nys-fileinput\nlabel=\"Upload a file\"\ndropzone\n></nys-fileinput>",
|
|
6828
7334
|
"lang": "html"
|
|
6829
7335
|
},
|
|
6830
7336
|
{
|
|
6831
|
-
"title": "Multiple
|
|
6832
|
-
"code": "<nys-fileinput
|
|
7337
|
+
"title": "Multiple",
|
|
7338
|
+
"code": "<nys-fileinput\nlabel=\"Upload a file\"\nmultiple\n></nys-fileinput>",
|
|
7339
|
+
"lang": "html"
|
|
7340
|
+
},
|
|
7341
|
+
{
|
|
7342
|
+
"title": "Accepted Filetypes",
|
|
7343
|
+
"code": "<nys-fileinput\nlabel=\"Upload a file\"\ndescription=\"Accepted file types: .jpg, .png, .pdf\"\naccept=\"image/png, image/jpeg, .pdf\"\n></nys-fileinput>",
|
|
7344
|
+
"lang": "html"
|
|
7345
|
+
},
|
|
7346
|
+
{
|
|
7347
|
+
"title": "Width Large",
|
|
7348
|
+
"code": "<nys-fileinput\nlabel=\"Upload a file\"\nwidth=\"lg\"\n></nys-fileinput>",
|
|
7349
|
+
"lang": "html"
|
|
7350
|
+
},
|
|
7351
|
+
{
|
|
7352
|
+
"title": "Width Large Dropzone",
|
|
7353
|
+
"code": "<nys-fileinput\nlabel=\"Upload a file\"\nwidth=\"lg\"\ndropzone\n></nys-fileinput>",
|
|
7354
|
+
"lang": "html"
|
|
7355
|
+
},
|
|
7356
|
+
{
|
|
7357
|
+
"title": "Disabled",
|
|
7358
|
+
"code": "<nys-fileinput\nlabel=\"Upload a file\"\ndisabled\n></nys-fileinput>",
|
|
7359
|
+
"lang": "html"
|
|
7360
|
+
},
|
|
7361
|
+
{
|
|
7362
|
+
"title": "Description",
|
|
7363
|
+
"code": "<nys-fileinput\nlabel=\"Upload a file\"\ndescription=\"Make sure the file is not blurry and readable\"\n></nys-fileinput>",
|
|
7364
|
+
"lang": "html"
|
|
7365
|
+
},
|
|
7366
|
+
{
|
|
7367
|
+
"title": "Description Slot",
|
|
7368
|
+
"code": "<nys-fileinput label=\"Upload a file\">\n<div slot=\"description\">Make sure the file is <strong>legible</strong></div>\n</nys-fileinput>",
|
|
6833
7369
|
"lang": "html"
|
|
6834
7370
|
}
|
|
6835
7371
|
]
|
|
@@ -7089,6 +7625,16 @@
|
|
|
7089
7625
|
"description": "Agency name displayed as the footer heading.",
|
|
7090
7626
|
"attribute": "agencyName"
|
|
7091
7627
|
},
|
|
7628
|
+
{
|
|
7629
|
+
"kind": "field",
|
|
7630
|
+
"name": "agencySubheading",
|
|
7631
|
+
"type": {
|
|
7632
|
+
"text": "string"
|
|
7633
|
+
},
|
|
7634
|
+
"default": "\"\"",
|
|
7635
|
+
"description": "Optional subheading displayed below the agency name.",
|
|
7636
|
+
"attribute": "agencySubheading"
|
|
7637
|
+
},
|
|
7092
7638
|
{
|
|
7093
7639
|
"kind": "field",
|
|
7094
7640
|
"name": "homepageLink",
|
|
@@ -7126,6 +7672,16 @@
|
|
|
7126
7672
|
"fieldName": "agencyName",
|
|
7127
7673
|
"propName": "agencyname"
|
|
7128
7674
|
},
|
|
7675
|
+
{
|
|
7676
|
+
"name": "agencySubheading",
|
|
7677
|
+
"type": {
|
|
7678
|
+
"text": "string"
|
|
7679
|
+
},
|
|
7680
|
+
"default": "\"\"",
|
|
7681
|
+
"description": "Optional subheading displayed below the agency name.",
|
|
7682
|
+
"fieldName": "agencySubheading",
|
|
7683
|
+
"propName": "agencysubheading"
|
|
7684
|
+
},
|
|
7129
7685
|
{
|
|
7130
7686
|
"name": "homepageLink",
|
|
7131
7687
|
"type": {
|
|
@@ -7146,8 +7702,28 @@
|
|
|
7146
7702
|
"summary": "Agency footer with auto-layout for contact info and link sections.",
|
|
7147
7703
|
"examples": [
|
|
7148
7704
|
{
|
|
7149
|
-
"title": "
|
|
7150
|
-
"code": "<nys-globalfooter agencyName=\"
|
|
7705
|
+
"title": "Basic",
|
|
7706
|
+
"code": "<nys-globalfooter agencyName=\"Office of Information Technology Services\"></nys-globalfooter>",
|
|
7707
|
+
"lang": "html"
|
|
7708
|
+
},
|
|
7709
|
+
{
|
|
7710
|
+
"title": "Homepage Link",
|
|
7711
|
+
"code": "<nys-globalfooter\nagencyName=\"Office of Information Technology Services\"\nhomepageLink=\"https://its.ny.gov\"\n></nys-globalfooter>",
|
|
7712
|
+
"lang": "html"
|
|
7713
|
+
},
|
|
7714
|
+
{
|
|
7715
|
+
"title": "Menu Links",
|
|
7716
|
+
"code": "<nys-globalfooter agencyName=\"Office of Information Technology Services\">\n<ul>\n<li><a href=\"https://its.ny.gov\">ITS Home</a></li>\n<li><a href=\"https://its.ny.gov/about-us\">About ITS</a></li>\n</ul>\n</nys-globalfooter>",
|
|
7717
|
+
"lang": "html"
|
|
7718
|
+
},
|
|
7719
|
+
{
|
|
7720
|
+
"title": "Column Links",
|
|
7721
|
+
"code": "<nys-globalfooter agencyName=\"Office of Information Technology Services\">\n<ul>\n<li>\n<span>About</span>\n<ul>\n<li><a href=\"https://its.ny.gov/about-us\">About ITS</a></li>\n<li><a href=\"https://its.ny.gov/contact-us\">Contact</a></li>\n<li><a href=\"https://its.ny.gov/policies\">Policies</a></li>\n</ul>\n</li>\n<li>\n<span>Resources</span>\n<ul>\n<li><a href=\"https://its.ny.gov/resources\">Developer Tools</a></li>\n<li><a href=\"https://its.ny.gov/accessibility\">Accessibility</a></li>\n<li><a href=\"https://its.ny.gov/privacy\">Privacy</a></li>\n</ul>\n</li>\n</ul>\n</nys-globalfooter>",
|
|
7722
|
+
"lang": "html"
|
|
7723
|
+
},
|
|
7724
|
+
{
|
|
7725
|
+
"title": "Subheading",
|
|
7726
|
+
"code": "<nys-globalfooter\nagencyName=\"Office of Information Technology Services\"\nagencySubheading=\"Innovating Technology for a Better New York\"\n></nys-globalfooter>",
|
|
7151
7727
|
"lang": "html"
|
|
7152
7728
|
}
|
|
7153
7729
|
]
|
|
@@ -7199,6 +7775,10 @@
|
|
|
7199
7775
|
{
|
|
7200
7776
|
"description": "Navigation content (typically `<ul>` with `<li><a>` links). Auto-sanitized.",
|
|
7201
7777
|
"name": ""
|
|
7778
|
+
},
|
|
7779
|
+
{
|
|
7780
|
+
"description": "User-account controls (e.g. profile link, settings, log-out button) shown in the header.",
|
|
7781
|
+
"name": "user-actions"
|
|
7202
7782
|
}
|
|
7203
7783
|
],
|
|
7204
7784
|
"members": [
|
|
@@ -7239,7 +7819,7 @@
|
|
|
7239
7819
|
"text": "boolean"
|
|
7240
7820
|
},
|
|
7241
7821
|
"default": "false",
|
|
7242
|
-
"description": "
|
|
7822
|
+
"description": "Displays the NYS brand mark in the header. Off by default.\n\nEnable only for internal, state-employee (back-office) applications that omit\n`nys-unavheader`. Any resident-facing app — even one requiring login — should\nkeep `nys-unavheader` for trust and leave this off.",
|
|
7243
7823
|
"attribute": "nysLogo"
|
|
7244
7824
|
},
|
|
7245
7825
|
{
|
|
@@ -7367,7 +7947,7 @@
|
|
|
7367
7947
|
"text": "boolean"
|
|
7368
7948
|
},
|
|
7369
7949
|
"default": "false",
|
|
7370
|
-
"description": "
|
|
7950
|
+
"description": "Displays the NYS brand mark in the header. Off by default.\n\nEnable only for internal, state-employee (back-office) applications that omit\n`nys-unavheader`. Any resident-facing app — even one requiring login — should\nkeep `nys-unavheader` for trust and leave this off.",
|
|
7371
7951
|
"fieldName": "nysLogo",
|
|
7372
7952
|
"propName": "nyslogo"
|
|
7373
7953
|
}
|
|
@@ -7381,8 +7961,38 @@
|
|
|
7381
7961
|
"summary": "Agency header with navigation, mobile menu, and active link highlighting.",
|
|
7382
7962
|
"examples": [
|
|
7383
7963
|
{
|
|
7384
|
-
"title": "Basic
|
|
7385
|
-
"code": "<nys-globalheader appName=\"
|
|
7964
|
+
"title": "Basic",
|
|
7965
|
+
"code": "<nys-globalheader appName=\"User Registration Form\" agencyName=\"Office of Information Technology Services\"></nys-globalheader>",
|
|
7966
|
+
"lang": "html"
|
|
7967
|
+
},
|
|
7968
|
+
{
|
|
7969
|
+
"title": "Homepage Link",
|
|
7970
|
+
"code": "<nys-globalheader\nagencyName=\"Office of Information Technology Services\"\nhomepageLink=\"https://its.ny.gov\"\n></nys-globalheader>",
|
|
7971
|
+
"lang": "html"
|
|
7972
|
+
},
|
|
7973
|
+
{
|
|
7974
|
+
"title": "Only Agency Name",
|
|
7975
|
+
"code": "<nys-globalheader agencyName=\"Office of Information Technology Services\"></nys-globalheader>",
|
|
7976
|
+
"lang": "html"
|
|
7977
|
+
},
|
|
7978
|
+
{
|
|
7979
|
+
"title": "Only App Name",
|
|
7980
|
+
"code": "<nys-globalheader appName=\"User Registration Form\"></nys-globalheader>",
|
|
7981
|
+
"lang": "html"
|
|
7982
|
+
},
|
|
7983
|
+
{
|
|
7984
|
+
"title": "With Links",
|
|
7985
|
+
"code": "<nys-globalheader agencyName=\"Office of Information Technology Services\">\n<ul>\n<li><a href=\"https://its.ny.gov/services\">Services</a></li>\n<li><a href=\"https://its.ny.gov/get-help\">Help Center</a></li>\n<li><a href=\"https://its.ny.gov/cybersecurity\">Cybersecurity</a></li>\n<li><a href=\"https://its.ny.gov/policies\">Policies and Laws</a></li>\n<li><a href=\"https://its.ny.gov/procurement\">Procurement</a></li>\n<li><a href=\"https://its.ny.gov/about-us\">About Us</a></li>\n</ul>\n</nys-globalheader>",
|
|
7986
|
+
"lang": "html"
|
|
7987
|
+
},
|
|
7988
|
+
{
|
|
7989
|
+
"title": "User Actions",
|
|
7990
|
+
"code": "<nys-globalheader agencyName=\"Office of Information Technology Services\">\n<nys-button slot=\"user-actions\" label=\"Log out\">\n<nys-avatar\nslot=\"prefix-icon\"\nariaLabel=\"User avatar\"\ninitials=\"NY\"\n></nys-avatar>\n</nys-button>\n</nys-globalheader>\n<nys-dropdownmenu id=\"dropdownmenu\" for=\"my-action-slot\">\n<nys-dropdownmenuitem label=\"Profile\" href=\"/profile\"></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Repositories & Github Pages\" href=\"/repos\"></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Organizations\" href=\"/organizations\" disabled></nys-dropdownmenuitem>\n<nys-dropdownmenuitem label=\"Sign out\" href=\"/logout\"></nys-dropdownmenuitem>\n</nys-dropdownmenu>",
|
|
7991
|
+
"lang": "html"
|
|
7992
|
+
},
|
|
7993
|
+
{
|
|
7994
|
+
"title": "With NYS Logo",
|
|
7995
|
+
"code": "<nys-globalheader nysLogo appName=\"Admin Dashboard\"></nys-globalheader>",
|
|
7386
7996
|
"lang": "html"
|
|
7387
7997
|
}
|
|
7388
7998
|
]
|
|
@@ -7428,7 +8038,7 @@
|
|
|
7428
8038
|
}
|
|
7429
8039
|
}
|
|
7430
8040
|
],
|
|
7431
|
-
"description": "Clear one or all
|
|
8041
|
+
"description": "Clear one URL entry, or all cached icons (URL and inline) when no URL is given."
|
|
7432
8042
|
},
|
|
7433
8043
|
{
|
|
7434
8044
|
"kind": "function",
|
|
@@ -7447,6 +8057,24 @@
|
|
|
7447
8057
|
}
|
|
7448
8058
|
],
|
|
7449
8059
|
"description": "Fetch and parse an SVG from a URL. Returns a cloned SVGElement (safe for multiple consumers)."
|
|
8060
|
+
},
|
|
8061
|
+
{
|
|
8062
|
+
"kind": "function",
|
|
8063
|
+
"name": "parseIcon",
|
|
8064
|
+
"return": {
|
|
8065
|
+
"type": {
|
|
8066
|
+
"text": "SVGElement"
|
|
8067
|
+
}
|
|
8068
|
+
},
|
|
8069
|
+
"parameters": [
|
|
8070
|
+
{
|
|
8071
|
+
"name": "source",
|
|
8072
|
+
"type": {
|
|
8073
|
+
"text": "string"
|
|
8074
|
+
}
|
|
8075
|
+
}
|
|
8076
|
+
],
|
|
8077
|
+
"description": "Parse an inline SVG source string. Results are cached by source content,\nso repeated renders of the same icon sanitize/parse once. Returns a\ncloned SVGElement (safe for multiple consumers)."
|
|
7450
8078
|
}
|
|
7451
8079
|
],
|
|
7452
8080
|
"exports": [
|
|
@@ -7465,6 +8093,14 @@
|
|
|
7465
8093
|
"name": "fetchIcon",
|
|
7466
8094
|
"module": "packages/nys-icon/src/icon-cache.ts"
|
|
7467
8095
|
}
|
|
8096
|
+
},
|
|
8097
|
+
{
|
|
8098
|
+
"kind": "js",
|
|
8099
|
+
"name": "parseIcon",
|
|
8100
|
+
"declaration": {
|
|
8101
|
+
"name": "parseIcon",
|
|
8102
|
+
"module": "packages/nys-icon/src/icon-cache.ts"
|
|
8103
|
+
}
|
|
7468
8104
|
}
|
|
7469
8105
|
]
|
|
7470
8106
|
},
|
|
@@ -7512,7 +8148,7 @@
|
|
|
7512
8148
|
}
|
|
7513
8149
|
}
|
|
7514
8150
|
],
|
|
7515
|
-
"description": "Register or replace a named icon library. All watching icons using this library will redraw.",
|
|
8151
|
+
"description": "Register or replace a named icon library. All watching icons using this library will redraw.\n\nIntended for custom/external libraries — the standard NYSDS set is\nbuilt in and needs no registration. Registering under `\"default\"`\nreplaces the built-in set (escape hatch).",
|
|
7516
8152
|
"examples": [
|
|
7517
8153
|
{
|
|
7518
8154
|
"title": "Register a Font Awesome library with a custom resolver:",
|
|
@@ -7652,6 +8288,14 @@
|
|
|
7652
8288
|
"module": "./icon-cache"
|
|
7653
8289
|
}
|
|
7654
8290
|
},
|
|
8291
|
+
{
|
|
8292
|
+
"kind": "js",
|
|
8293
|
+
"name": "getIconLibrary",
|
|
8294
|
+
"declaration": {
|
|
8295
|
+
"name": "getIconLibrary",
|
|
8296
|
+
"module": "./icon-library-registry"
|
|
8297
|
+
}
|
|
8298
|
+
},
|
|
7655
8299
|
{
|
|
7656
8300
|
"kind": "js",
|
|
7657
8301
|
"name": "IconLibrary",
|
|
@@ -7660,6 +8304,14 @@
|
|
|
7660
8304
|
"module": "./icon-library-registry"
|
|
7661
8305
|
}
|
|
7662
8306
|
},
|
|
8307
|
+
{
|
|
8308
|
+
"kind": "js",
|
|
8309
|
+
"name": "IconResolution",
|
|
8310
|
+
"declaration": {
|
|
8311
|
+
"name": "IconResolution",
|
|
8312
|
+
"module": "./icon-library-registry"
|
|
8313
|
+
}
|
|
8314
|
+
},
|
|
7663
8315
|
{
|
|
7664
8316
|
"kind": "js",
|
|
7665
8317
|
"name": "registerIconLibrary",
|
|
@@ -7909,19 +8561,51 @@
|
|
|
7909
8561
|
"summary": "SVG icon with swappable library support, size, rotation, and color options.",
|
|
7910
8562
|
"examples": [
|
|
7911
8563
|
{
|
|
7912
|
-
"title": "Basic
|
|
7913
|
-
"code": "<nys-icon name=\"check_circle\"
|
|
8564
|
+
"title": "Basic",
|
|
8565
|
+
"code": "<nys-icon name=\"check_circle\"></nys-icon>",
|
|
8566
|
+
"lang": "html"
|
|
8567
|
+
},
|
|
8568
|
+
{
|
|
8569
|
+
"title": "ARIA Label",
|
|
8570
|
+
"code": "<nys-icon\nname=\"edit_square\"\nariaLabel=\"Edit content\"\n></nys-icon>",
|
|
8571
|
+
"lang": "html"
|
|
8572
|
+
},
|
|
8573
|
+
{
|
|
8574
|
+
"title": "Size relative",
|
|
8575
|
+
"code": "<nys-icon\nname=\"edit_square\"\nsize=\"4xl\"\n></nys-icon>",
|
|
8576
|
+
"lang": "html"
|
|
8577
|
+
},
|
|
8578
|
+
{
|
|
8579
|
+
"title": "Size literal",
|
|
8580
|
+
"code": "<nys-icon\nname=\"edit_square\"\nsize=\"24\"\n></nys-icon>",
|
|
8581
|
+
"lang": "html"
|
|
8582
|
+
},
|
|
8583
|
+
{
|
|
8584
|
+
"title": "Color",
|
|
8585
|
+
"code": "<nys-icon\nname=\"edit_square\"\ncolor=\"#db117d\"\n></nys-icon>",
|
|
7914
8586
|
"lang": "html"
|
|
7915
8587
|
},
|
|
7916
8588
|
{
|
|
7917
|
-
"title": "
|
|
7918
|
-
"code": "<nys-icon
|
|
8589
|
+
"title": "Rotate",
|
|
8590
|
+
"code": "<nys-icon\nname=\"edit_square\"\nrotate=\"20\"\n></nys-icon>",
|
|
7919
8591
|
"lang": "html"
|
|
7920
8592
|
},
|
|
7921
8593
|
{
|
|
7922
|
-
"title": "
|
|
7923
|
-
"code": "<nys-icon
|
|
8594
|
+
"title": "Flip",
|
|
8595
|
+
"code": "<nys-icon\nname=\"edit_square\"\nflip=\"vertical\"\n></nys-icon>",
|
|
7924
8596
|
"lang": "html"
|
|
8597
|
+
},
|
|
8598
|
+
{
|
|
8599
|
+
"title": "External Library - Font Awesome",
|
|
8600
|
+
"code": "<nys-icon name=\"heart\" library=\"fa\"></nys-icon>",
|
|
8601
|
+
"lang": "html",
|
|
8602
|
+
"render": "<nys-icon name=\"heart\" library=\"fa\"></nys-icon>\n<script data-scope=\"module\">\nregisterIconLibrary(\"fa\", {\nresolver: (name) =>\n`https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/${name}.svg`,\nmutator: (svg) => {\nsvg.setAttribute(\"fill\", \"currentColor\");\n},\n});\n</script>"
|
|
8603
|
+
},
|
|
8604
|
+
{
|
|
8605
|
+
"title": "External Library - Material",
|
|
8606
|
+
"code": "<nys-icon name=\"favorite\" library=\"material\"></nys-icon>",
|
|
8607
|
+
"lang": "html",
|
|
8608
|
+
"render": "<nys-icon name=\"favorite\" library=\"material\"></nys-icon>\n<script data-scope=\"module\">\nregisterIconLibrary(\"material\", {\nresolver: (name) =>\n`https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/${name}/default/24px.svg`,\nmutator: (svg) => {\nsvg.setAttribute(\"fill\", \"currentColor\");\n},\n});\n</script>"
|
|
7925
8609
|
}
|
|
7926
8610
|
]
|
|
7927
8611
|
}
|
|
@@ -8104,23 +8788,54 @@
|
|
|
8104
8788
|
"propName": "inverted"
|
|
8105
8789
|
},
|
|
8106
8790
|
{
|
|
8107
|
-
"name": "tooltip",
|
|
8108
|
-
"type": {
|
|
8109
|
-
"text": "string"
|
|
8110
|
-
},
|
|
8111
|
-
"default": "\"\"",
|
|
8112
|
-
"description": "Tooltip text shown on hover/focus of info icon next to label.",
|
|
8113
|
-
"fieldName": "tooltip",
|
|
8114
|
-
"propName": "tooltip"
|
|
8791
|
+
"name": "tooltip",
|
|
8792
|
+
"type": {
|
|
8793
|
+
"text": "string"
|
|
8794
|
+
},
|
|
8795
|
+
"default": "\"\"",
|
|
8796
|
+
"description": "Tooltip text shown on hover/focus of info icon next to label.",
|
|
8797
|
+
"fieldName": "tooltip",
|
|
8798
|
+
"propName": "tooltip"
|
|
8799
|
+
}
|
|
8800
|
+
],
|
|
8801
|
+
"superclass": {
|
|
8802
|
+
"name": "LitElement",
|
|
8803
|
+
"package": "lit"
|
|
8804
|
+
},
|
|
8805
|
+
"examples": [
|
|
8806
|
+
{
|
|
8807
|
+
"title": "Basic",
|
|
8808
|
+
"code": "<nys-label label=\"This is a basic nys-label\"></nys-label>",
|
|
8809
|
+
"lang": "html"
|
|
8810
|
+
},
|
|
8811
|
+
{
|
|
8812
|
+
"title": "Required",
|
|
8813
|
+
"code": "<nys-label label=\"This form is required\" flag=\"required\"></nys-label>",
|
|
8814
|
+
"lang": "html"
|
|
8815
|
+
},
|
|
8816
|
+
{
|
|
8817
|
+
"title": "Optional",
|
|
8818
|
+
"code": "<nys-label label=\"This form is required\" flag=\"optional\"></nys-label>",
|
|
8819
|
+
"lang": "html"
|
|
8820
|
+
},
|
|
8821
|
+
{
|
|
8822
|
+
"title": "Description",
|
|
8823
|
+
"code": "<nys-label label=\"Label Text\" description=\"Description text\"></nys-label>",
|
|
8824
|
+
"lang": "html"
|
|
8825
|
+
},
|
|
8826
|
+
{
|
|
8827
|
+
"title": "Description Slot",
|
|
8828
|
+
"code": "<nys-label label=\"Label Text\">\n<p slot=\"description\">Rich text description passed in <strong>HERE</strong></p>\n</nys-label>",
|
|
8829
|
+
"lang": "html"
|
|
8830
|
+
},
|
|
8831
|
+
{
|
|
8832
|
+
"title": "With Tooltip",
|
|
8833
|
+
"code": "<nys-label id=\"label-id\" label=\"This label has a tooltip\"></nys-label>\n<nys-tooltip for=\"label-id\" text=\"Tooltip text in here\"></nys-tooltip>",
|
|
8834
|
+
"lang": "html"
|
|
8115
8835
|
}
|
|
8116
8836
|
],
|
|
8117
|
-
"superclass": {
|
|
8118
|
-
"name": "LitElement",
|
|
8119
|
-
"package": "lit"
|
|
8120
|
-
},
|
|
8121
8837
|
"tagName": "nys-label",
|
|
8122
|
-
"customElement": true
|
|
8123
|
-
"summary": "Internal label component for form fields with flag and tooltip support."
|
|
8838
|
+
"customElement": true
|
|
8124
8839
|
}
|
|
8125
8840
|
],
|
|
8126
8841
|
"exports": [
|
|
@@ -8459,9 +9174,28 @@
|
|
|
8459
9174
|
"summary": "Accessible modal dialog with focus trap, keyboard support, and action slots.",
|
|
8460
9175
|
"examples": [
|
|
8461
9176
|
{
|
|
8462
|
-
"title": "Basic
|
|
8463
|
-
"code": "<nys-modal
|
|
8464
|
-
"lang": "html"
|
|
9177
|
+
"title": "Basic",
|
|
9178
|
+
"code": "<nys-modal\nid=\"modal1\"\nheading=\"Update Available\"\n>\n<p>\nWould you like to install the latest version? Albany ipsum dolor sit\nEmpire, Hudson consectetur Adirondack elit, sed do MetroCard tempor\nincididunt ut Capitol et Broadway magna Niagara. Ut enim ad Erie\nveniam, quis nostrud Catskill ullamco Bronx nisi ut LongIsland ex ea\nCuomo consequat.\n</p>\n</nys-modal>",
|
|
9179
|
+
"lang": "html",
|
|
9180
|
+
"render": "<div id=\"modal-wrapper1\">\n<nys-button label=\"Open Modal\" onclick=\"document.querySelector('.modal1').open = true; document.getElementById('modal-wrapper1').style.padding = '100px 0'\"></nys-button>\n<nys-modal\nclass=\"modal1\"\nid=\"modal1\"\nheading=\"Update Available\"\n>\n<p>\nWould you like to install the latest version? Albany ipsum dolor sit\nEmpire, Hudson consectetur Adirondack elit, sed do MetroCard tempor\nincididunt ut Capitol et Broadway magna Niagara. Ut enim ad Erie\nveniam, quis nostrud Catskill ullamco Bronx nisi ut LongIsland ex ea\nCuomo consequat.\n</p>\n</nys-modal>\n</div>"
|
|
9181
|
+
},
|
|
9182
|
+
{
|
|
9183
|
+
"title": "Subheading",
|
|
9184
|
+
"code": "<nys-modal\nid=\"modal-subheading\"\nheading=\"Before you continue\"\nsubheading=\"Your progress has been saved automatically.\"\n>\n<p>You can safely leave this page and return later to pick up where you left off.</p>\n</nys-modal>",
|
|
9185
|
+
"lang": "html",
|
|
9186
|
+
"render": "<div id=\"modal-wrapper-subheading\">\n<nys-button label=\"Open Modal\" onclick=\"document.querySelector('.modal-subheading').open = true; document.getElementById('modal-wrapper-subheading').style.padding = '100px 0'\"></nys-button>\n<nys-modal\nclass=\"modal-subheading\"\nid=\"modal-subheading\"\nheading=\"Before you continue\"\nsubheading=\"Your progress has been saved automatically.\"\n>\n<p>You can safely leave this page and return later to pick up where you left off.</p>\n</nys-modal>\n</div>"
|
|
9187
|
+
},
|
|
9188
|
+
{
|
|
9189
|
+
"title": "Actions Slot",
|
|
9190
|
+
"code": "<nys-modal id=\"modal3\" heading=\"Update password?\">\n<p>\nWould you like to install the latest version? Albany ipsum dolor sit\nEmpire, Hudson consectetur Adirondack elit, sed do MetroCard tempor\nincididunt ut Capitol et Broadway magna Niagara. Ut enim ad Erie\nveniam, quis nostrud Catskill ullamco Bronx nisi ut LongIsland ex ea\nCuomo consequat.\n</p>\n<div slot=\"actions\">\n<nys-button label=\"Not now\" variant=\"outline\"></nys-button>\n<nys-button label=\"Update\"></nys-button>\n</div>\n</nys-modal>",
|
|
9191
|
+
"lang": "html",
|
|
9192
|
+
"render": "<div id=\"modal-wrapper3\">\n<nys-button label=\"Open Modal\" onclick=\"document.querySelector('.modal3').open = true; document.getElementById('modal-wrapper3').style.padding = '100px 0'\"></nys-button>\n<nys-modal\nclass=\"modal3\"\nid=\"modal3\"\nheading=\"Update password?\"\n>\n<p>\nWould you like to install the latest version? Albany ipsum dolor sit\nEmpire, Hudson consectetur Adirondack elit, sed do MetroCard tempor\nincididunt ut Capitol et Broadway magna Niagara. Ut enim ad Erie\nveniam, quis nostrud Catskill ullamco Bronx nisi ut LongIsland ex ea\nCuomo consequat.\n</p>\n<div slot=\"actions\">\n<nys-button label=\"Not now\" variant=\"outline\" onclick=\"document.querySelector('.modal3').open = false; document.getElementById('modal-wrapper3').style.padding = '0'\"></nys-button>\n<nys-button label=\"Update\" onclick=\"alert('Mock Alert: Changes saved!'); document.querySelector('.modal3').open = false; document.getElementById('modal-wrapper3').style.padding = '0'\"></nys-button>\n</div>\n</nys-modal>\n</div>"
|
|
9193
|
+
},
|
|
9194
|
+
{
|
|
9195
|
+
"title": "Mandatory Action",
|
|
9196
|
+
"code": "<nys-modal\nid=\"modal4\"\nheading=\"There is no way to X out of here\"\nsubheading=\"Don't use this prop unless you add in the actions slot so the user does not get stuck in here.\"\nmandatory\n>\n<div slot=\"actions\">\n<nys-button label=\"Get me out\"></nys-button>\n</div>\n</nys-modal>",
|
|
9197
|
+
"lang": "html",
|
|
9198
|
+
"render": "<div id=\"modal-wrapper4\">\n<nys-button label=\"Open Modal\" onclick=\"document.querySelector('.modal4').open = true; document.getElementById('modal-wrapper4').style.padding = '100px 0'\"></nys-button>\n<nys-modal\nclass=\"modal4\"\nid=\"modal4\"\nheading=\"There is no way to X out of here\"\nsubheading=\"Don't use this prop unless you add in the actions slot so the user does not get stuck in here.\"\nmandatory\n>\n<div slot=\"actions\">\n<nys-button label=\"Get me out\" onclick=\"alert('Ok, ok. You can go now.'); document.querySelector('.modal4').open = false; document.getElementById('modal-wrapper4').style.padding = '0'\"></nys-button>\n</div>\n</nys-modal>\n</div>"
|
|
8465
9199
|
}
|
|
8466
9200
|
]
|
|
8467
9201
|
}
|
|
@@ -8673,9 +9407,19 @@
|
|
|
8673
9407
|
"summary": "Page navigation with numbered links, prev/next buttons, and responsive layout.",
|
|
8674
9408
|
"examples": [
|
|
8675
9409
|
{
|
|
8676
|
-
"title": "Basic
|
|
9410
|
+
"title": "Basic",
|
|
9411
|
+
"code": "<nys-pagination currentPage=\"5\" totalPages=\"10\"></nys-pagination>",
|
|
9412
|
+
"lang": "html"
|
|
9413
|
+
},
|
|
9414
|
+
{
|
|
9415
|
+
"title": "First Page",
|
|
8677
9416
|
"code": "<nys-pagination currentPage=\"1\" totalPages=\"10\"></nys-pagination>",
|
|
8678
9417
|
"lang": "html"
|
|
9418
|
+
},
|
|
9419
|
+
{
|
|
9420
|
+
"title": "Last Page",
|
|
9421
|
+
"code": "<nys-pagination currentPage=\"10\" totalPages=\"10\"></nys-pagination>",
|
|
9422
|
+
"lang": "html"
|
|
8679
9423
|
}
|
|
8680
9424
|
]
|
|
8681
9425
|
}
|
|
@@ -9032,8 +9776,8 @@
|
|
|
9032
9776
|
"summary": "Radio button for single selection from mutually exclusive options. This is a READONLY data component.",
|
|
9033
9777
|
"examples": [
|
|
9034
9778
|
{
|
|
9035
|
-
"title": "
|
|
9036
|
-
"code": "<nys-radiogroup label=\"Select borough\"
|
|
9779
|
+
"title": "Pre-selected",
|
|
9780
|
+
"code": "<nys-radiogroup label=\"Select borough\">\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\" checked></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
9037
9781
|
"lang": "html"
|
|
9038
9782
|
}
|
|
9039
9783
|
]
|
|
@@ -9665,9 +10409,54 @@
|
|
|
9665
10409
|
"summary": "Container for grouping radio buttons as a single form control.",
|
|
9666
10410
|
"examples": [
|
|
9667
10411
|
{
|
|
9668
|
-
"title": "Basic
|
|
10412
|
+
"title": "Basic",
|
|
9669
10413
|
"code": "<nys-radiogroup label=\"Select borough\" required>\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"manhattan\" label=\"Manhattan\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
9670
10414
|
"lang": "html"
|
|
10415
|
+
},
|
|
10416
|
+
{
|
|
10417
|
+
"title": "Tile",
|
|
10418
|
+
"code": "<nys-radiogroup label=\"Select borough\" tile>\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
10419
|
+
"lang": "html"
|
|
10420
|
+
},
|
|
10421
|
+
{
|
|
10422
|
+
"title": "Required",
|
|
10423
|
+
"code": "<nys-radiogroup label=\"Select borough\" required>\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
10424
|
+
"lang": "html"
|
|
10425
|
+
},
|
|
10426
|
+
{
|
|
10427
|
+
"title": "Optional",
|
|
10428
|
+
"code": "<nys-radiogroup label=\"Select borough\" optional>\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
10429
|
+
"lang": "html"
|
|
10430
|
+
},
|
|
10431
|
+
{
|
|
10432
|
+
"title": "Disabled",
|
|
10433
|
+
"code": "<nys-radiogroup label=\"Select borough\">\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\" disabled></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\" disabled></nys-radiobutton>\n</nys-radiogroup>",
|
|
10434
|
+
"lang": "html"
|
|
10435
|
+
},
|
|
10436
|
+
{
|
|
10437
|
+
"title": "Size Small",
|
|
10438
|
+
"code": "<nys-radiogroup label=\"Select borough\" size=\"sm\">\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
10439
|
+
"lang": "html"
|
|
10440
|
+
},
|
|
10441
|
+
{
|
|
10442
|
+
"title": "Other Option",
|
|
10443
|
+
"code": "<nys-radiogroup label=\"Select borough\">\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"\" label=\"Other\" other></nys-radiobutton>\n</nys-radiogroup>",
|
|
10444
|
+
"lang": "html"
|
|
10445
|
+
},
|
|
10446
|
+
{
|
|
10447
|
+
"title": "Error Message",
|
|
10448
|
+
"code": "<nys-radiogroup label=\"Select borough\" showError errorMessage=\"Please select a borough\">\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
10449
|
+
"lang": "html"
|
|
10450
|
+
},
|
|
10451
|
+
{
|
|
10452
|
+
"title": "Description",
|
|
10453
|
+
"code": "<nys-radiogroup label=\"Select borough\" description=\"Your primary residence in NYC.\">\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
10454
|
+
"lang": "html"
|
|
10455
|
+
},
|
|
10456
|
+
{
|
|
10457
|
+
"title": "Description Slot",
|
|
10458
|
+
"code": "<nys-radiogroup label=\"Select borough\">\n<div slot=\"description\">Your primary <strong>residence</strong> in NYC.</div>\n<nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n<nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n</nys-radiogroup>",
|
|
10459
|
+
"lang": "html"
|
|
9671
10460
|
}
|
|
9672
10461
|
]
|
|
9673
10462
|
}
|
|
@@ -9841,14 +10630,7 @@
|
|
|
9841
10630
|
},
|
|
9842
10631
|
"tagName": "nys-option",
|
|
9843
10632
|
"customElement": true,
|
|
9844
|
-
"summary": "Option item for nys-select dropdown."
|
|
9845
|
-
"examples": [
|
|
9846
|
-
{
|
|
9847
|
-
"title": "Basic options",
|
|
9848
|
-
"code": "<nys-select>\n<nys-option value=\"ny\">New York</nys-option>\n<nys-option value=\"ca\" disabled>California</nys-option>\n</nys-select>",
|
|
9849
|
-
"lang": "html"
|
|
9850
|
-
}
|
|
9851
|
-
]
|
|
10633
|
+
"summary": "Option item for nys-select dropdown."
|
|
9852
10634
|
}
|
|
9853
10635
|
],
|
|
9854
10636
|
"exports": [
|
|
@@ -10345,14 +11127,63 @@
|
|
|
10345
11127
|
"summary": "Dropdown select for choosing one option from a list.",
|
|
10346
11128
|
"examples": [
|
|
10347
11129
|
{
|
|
10348
|
-
"title": "Basic
|
|
10349
|
-
"code": "<nys-select label=\"Select borough\">\n<option value=\"bronx\"
|
|
11130
|
+
"title": "Basic",
|
|
11131
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\">\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
11132
|
+
"lang": "html"
|
|
11133
|
+
},
|
|
11134
|
+
{
|
|
11135
|
+
"title": "Default value",
|
|
11136
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\">\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\" selected></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
11137
|
+
"lang": "html"
|
|
11138
|
+
},
|
|
11139
|
+
{
|
|
11140
|
+
"title": "Option Group",
|
|
11141
|
+
"code": "<nys-select\nlabel=\"Which New York State service are you contacting us about?\"\ndescription=\"This is for demo purposes and the list might not be exhaustive.\"\n>\n<optgroup label=\"Transportation Services\">\n<option value=\"mta\">MTA / Public Transit</option>\n<option value=\"dmv\">Department of Motor Vehicles (DMV)</option>\n<option value=\"highway\">Highway Maintenance</option>\n</optgroup>\n<optgroup label=\"Health & Human Services\">\n<option value=\"medicaid\">Medicaid / Health Insurance</option>\n<option value=\"mental-health\">Mental Health Support</option>\n<option value=\"child-family\">Child and Family Services</option>\n</optgroup>\n<optgroup label=\"Public Safety\">\n<option value=\"state-police\">State Police</option>\n<option value=\"emergency-management\">Emergency Management</option>\n<option value=\"fire-safety\">Fire Safety</option>\n</optgroup>\n<optgroup label=\"Environment & Energy\">\n<option value=\"environmental-conservation\">\nEnvironmental Conservation\n</option>\n<option value=\"clean-energy\">Clean Energy Programs</option>\n<option value=\"waste-management\">Waste Management</option>\n</optgroup>\n</nys-select>",
|
|
11142
|
+
"lang": "html"
|
|
11143
|
+
},
|
|
11144
|
+
{
|
|
11145
|
+
"title": "Disabled",
|
|
11146
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\" disabled>\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
11147
|
+
"lang": "html"
|
|
11148
|
+
},
|
|
11149
|
+
{
|
|
11150
|
+
"title": "Disabled Option",
|
|
11151
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\">\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\" disabled></option>\n<option value=\"queens\" label=\"Queens\" disabled></option>\n</nys-select>",
|
|
11152
|
+
"lang": "html"
|
|
11153
|
+
},
|
|
11154
|
+
{
|
|
11155
|
+
"title": "Required",
|
|
11156
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\" required>\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
11157
|
+
"lang": "html"
|
|
11158
|
+
},
|
|
11159
|
+
{
|
|
11160
|
+
"title": "Optional",
|
|
11161
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\" optional>\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
11162
|
+
"lang": "html"
|
|
11163
|
+
},
|
|
11164
|
+
{
|
|
11165
|
+
"title": "Width small",
|
|
11166
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\" width=\"sm\">\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
11167
|
+
"lang": "html"
|
|
11168
|
+
},
|
|
11169
|
+
{
|
|
11170
|
+
"title": "Width medium",
|
|
11171
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\" width=\"md\">\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
11172
|
+
"lang": "html"
|
|
11173
|
+
},
|
|
11174
|
+
{
|
|
11175
|
+
"title": "Width large",
|
|
11176
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\" width=\"lg\">\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
10350
11177
|
"lang": "html"
|
|
10351
11178
|
},
|
|
10352
11179
|
{
|
|
10353
|
-
"title": "
|
|
10354
|
-
"code": "<nys-select label=\"Select
|
|
11180
|
+
"title": "Slotted Description",
|
|
11181
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\">\n<label slot=\"description\">This is a slotted description</label>\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>",
|
|
10355
11182
|
"lang": "html"
|
|
11183
|
+
},
|
|
11184
|
+
{
|
|
11185
|
+
"title": "Error Message",
|
|
11186
|
+
"code": "<nys-select label=\"Select your favorite borough\" id=\"borough\" errorMessage=\"You did not select a borough\" showError>\n<option value=\"bronx\" label=\"The Bronx\"></option>\n<option value=\"brooklyn\" label=\"Brooklyn\"></option>\n<option value=\"manhattan\" label=\"Manhattan\"></option>\n<option value=\"staten_island\" label=\"Staten Island\"></option>\n<option value=\"queens\" label=\"Queens\"></option>\n</nys-select>"
|
|
10356
11187
|
}
|
|
10357
11188
|
]
|
|
10358
11189
|
}
|
|
@@ -10469,13 +11300,13 @@
|
|
|
10469
11300
|
"summary": "Skip navigation link for keyboard accessibility. Hidden until focused.",
|
|
10470
11301
|
"examples": [
|
|
10471
11302
|
{
|
|
10472
|
-
"title": "
|
|
10473
|
-
"code": "<nys-skipnav></nys-skipnav
|
|
11303
|
+
"title": "Basic",
|
|
11304
|
+
"code": "<nys-skipnav></nys-skipnav>",
|
|
10474
11305
|
"lang": "html"
|
|
10475
11306
|
},
|
|
10476
11307
|
{
|
|
10477
11308
|
"title": "Custom target",
|
|
10478
|
-
"code": "<nys-skipnav href=\"#content-area\"></nys-skipnav>",
|
|
11309
|
+
"code": "<nys-skipnav href=\"#content-area\"></nys-skipnav>\n<p id=\"content-area\">...</p>",
|
|
10479
11310
|
"lang": "html"
|
|
10480
11311
|
}
|
|
10481
11312
|
]
|
|
@@ -10663,19 +11494,7 @@
|
|
|
10663
11494
|
},
|
|
10664
11495
|
"tagName": "nys-step",
|
|
10665
11496
|
"customElement": true,
|
|
10666
|
-
"summary": "Individual step for use within nys-stepper with navigation support."
|
|
10667
|
-
"examples": [
|
|
10668
|
-
{
|
|
10669
|
-
"title": "Step with page navigation",
|
|
10670
|
-
"code": "<nys-step label=\"Personal Info\" href=\"/step-1\"></nys-step>",
|
|
10671
|
-
"lang": "html"
|
|
10672
|
-
},
|
|
10673
|
-
{
|
|
10674
|
-
"title": "Step with SPA navigation (no href)",
|
|
10675
|
-
"code": "step.addEventListener('nys-step-click', (e) => {\ne.preventDefault(); // no href set, but good practice\nshowStepContent(e.detail.label);\n});",
|
|
10676
|
-
"lang": "js"
|
|
10677
|
-
}
|
|
10678
|
-
]
|
|
11497
|
+
"summary": "Individual step for use within nys-stepper with navigation support."
|
|
10679
11498
|
}
|
|
10680
11499
|
],
|
|
10681
11500
|
"exports": [
|
|
@@ -10886,24 +11705,16 @@
|
|
|
10886
11705
|
"summary": "Multi-step progress indicator with navigation and mobile-friendly compact view.",
|
|
10887
11706
|
"examples": [
|
|
10888
11707
|
{
|
|
10889
|
-
"title": "Basic
|
|
10890
|
-
"code": "<nys-stepper label=\"
|
|
10891
|
-
"lang": "html"
|
|
10892
|
-
|
|
10893
|
-
{
|
|
10894
|
-
"title": "Grid layout with sidebar placement",
|
|
10895
|
-
"code": "<div class=\"nys-grid-container\">\n<div class=\"nys-grid-row\">\n<nys-stepper label=\"Application\" class=\"nys-grid-col-12 nys-desktop:nys-grid-col-3\">\n<nys-step label=\"Personal Info\"></nys-step>\n<nys-step label=\"Contact\" current></nys-step>\n<nys-step label=\"Review\"></nys-step>\n</nys-stepper>\n<main class=\"nys-grid-col-12 nys-desktop:nys-grid-col-9\" id=\"main-content\">\n<!-- Form content for current step -->\n<nys-textinput label=\"Email\" required></nys-textinput>\n<nys-textinput label=\"Phone\"></nys-textinput>\n</main>\n</div>\n</div>",
|
|
10896
|
-
"lang": "html"
|
|
10897
|
-
},
|
|
10898
|
-
{
|
|
10899
|
-
"title": "Navigation buttons in actions slot",
|
|
10900
|
-
"code": "<nys-stepper label=\"Application\">\n<nys-step label=\"Step 1\"></nys-step>\n<nys-step label=\"Step 2\" current></nys-step>\n<nys-step label=\"Step 3\"></nys-step>\n<div slot=\"actions\">\n<nys-button label=\"Save and Exit\" variant=\"outline\" size=\"sm\" fullWidth></nys-button>\n</div>\n</nys-stepper>",
|
|
10901
|
-
"lang": "html"
|
|
11708
|
+
"title": "Basic",
|
|
11709
|
+
"code": "<div class=\"nys-grid-row\">\n<nys-stepper\nid=\"stepper\"\nname=\"stepper\"\nlabel=\"Register for Design System Office Hours\"\nclass=\"nys-desktop:nys-grid-col-3\"\n>\n<nys-step label=\"Personal Details\" href=\"/nys-stepper/personal.html\"></nys-step>\n<nys-step label=\"Team Info\" selected href=\"/nys-stepper/team.html\"></nys-step>\n<nys-step label=\"Usage Survey\" current href=\"/nys-stepper/survey.html\"></nys-step>\n<nys-step label=\"Newsletter Opt-In\" href=\"/nys-stepper/newsletter.html\"></nys-step>\n<div slot=\"actions\">\n<nys-button variant=\"outline\" label=\"Save & Exit\" fullWidth></nys-button>\n</div>\n</nys-stepper>\n<div class=\"nys-desktop:nys-grid-col-9\" id=\"nys-stepper-content\">\nLoading...\n</div>\n</div>",
|
|
11710
|
+
"lang": "html",
|
|
11711
|
+
"render": "<div class=\"nys-grid-row\">\n<nys-stepper\nid=\"stepper\"\nname=\"stepper\"\nlabel=\"Register for Design System Office Hours\"\nclass=\"nys-desktop:nys-grid-col-3\"\n>\n<nys-step label=\"Personal Details\" href=\"/nys-stepper/personal.html\"></nys-step>\n<nys-step label=\"Team Info\" selected href=\"/nys-stepper/team.html\"></nys-step>\n<nys-step label=\"Usage Survey\" current href=\"/nys-stepper/survey.html\"></nys-step>\n<nys-step label=\"Newsletter Opt-In\" href=\"/nys-stepper/newsletter.html\"></nys-step>\n</nys-stepper>\n<div class=\"nys-desktop:nys-grid-col-9\" id=\"nys-stepper-content\">\nLoading...\n</div>\n</div>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", async () => {\nconst stepper = document.querySelector(\"nys-stepper\");\nif (stepper?.updateComplete) await stepper.updateComplete;\nconst selectedStep = document.querySelector(\"nys-step[selected]\");\nconst href = selectedStep?.getAttribute(\"href\");\nif (!href) return;\nconst res = await fetch(href);\nif (!res.ok) return;\nconst container = document.querySelector(\"#nys-stepper-content\");\nif (container) container.innerHTML = await res.text();\n});\n\ndocument.addEventListener(\"nys-step-click\", async (e) => {\nconst href = e.detail?.href;\nif (!href) return;\ne.preventDefault();\nconst res = await fetch(href);\nif (!res.ok) return;\nconst container = document.querySelector(\"#nys-stepper-content\");\nif (container) container.innerHTML = await res.text();\n});\n</script>"
|
|
10902
11712
|
},
|
|
10903
11713
|
{
|
|
10904
|
-
"title": "
|
|
10905
|
-
"code": "
|
|
10906
|
-
"lang": "
|
|
11714
|
+
"title": "Actions slot",
|
|
11715
|
+
"code": "<div class=\"nys-grid-row\">\n<nys-stepper\nid=\"stepper\"\nname=\"stepper\"\nlabel=\"Register for Design System Office Hours\"\nclass=\"nys-desktop:nys-grid-col-3\"\n>\n<nys-step label=\"Personal Details\" href=\"/nys-stepper/personal.html\"></nys-step>\n<nys-step label=\"Team Info\" selected href=\"/nys-stepper/team.html\"></nys-step>\n<nys-step label=\"Usage Survey\" current href=\"/nys-stepper/survey.html\"></nys-step>\n<nys-step label=\"Newsletter Opt-In\" href=\"/nys-stepper/newsletter.html\"></nys-step>\n<div slot=\"actions\">\n<nys-button variant=\"outline\" label=\"Save & Exit\" fullWidth></nys-button>\n</div>\n</nys-stepper>\n<div class=\"nys-desktop:nys-grid-col-9\" id=\"nys-stepper-content\">\nLoading...\n</div>\n</div>",
|
|
11716
|
+
"lang": "html",
|
|
11717
|
+
"render": "<div class=\"nys-grid-row\">\n<nys-stepper\nid=\"stepper\"\nname=\"stepper\"\nlabel=\"Register for Design System Office Hours\"\nclass=\"nys-desktop:nys-grid-col-3\"\n>\n<nys-step label=\"Personal Details\" href=\"/nys-stepper/personal.html\"></nys-step>\n<nys-step label=\"Team Info\" selected href=\"/nys-stepper/team.html\"></nys-step>\n<nys-step label=\"Usage Survey\" current href=\"/nys-stepper/survey.html\"></nys-step>\n<nys-step label=\"Newsletter Opt-In\" href=\"/nys-stepper/newsletter.html\"></nys-step>\n<div slot=\"actions\">\n<nys-button variant=\"outline\" label=\"Save & Exit\" fullWidth></nys-button>\n</div>\n</nys-stepper>\n<div class=\"nys-desktop:nys-grid-col-9\" id=\"nys-stepper-content\">\nLoading...\n</div>\n</div>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", async () => {\nconst stepper = document.querySelector(\"nys-stepper\");\nif (stepper?.updateComplete) await stepper.updateComplete;\nconst selectedStep = document.querySelector(\"nys-step[selected]\");\nconst href = selectedStep?.getAttribute(\"href\");\nif (!href) return;\nconst res = await fetch(href);\nif (!res.ok) return;\nconst container = document.querySelector(\"#nys-stepper-content\");\nif (container) container.innerHTML = await res.text();\n});\n\ndocument.addEventListener(\"nys-step-click\", async (e) => {\nconst href = e.detail?.href;\nif (!href) return;\ne.preventDefault();\nconst res = await fetch(href);\nif (!res.ok) return;\nconst container = document.querySelector(\"#nys-stepper-content\");\nif (container) container.innerHTML = await res.text();\n});\n</script>"
|
|
10907
11718
|
}
|
|
10908
11719
|
]
|
|
10909
11720
|
}
|
|
@@ -11143,8 +11954,13 @@
|
|
|
11143
11954
|
"customElement": true,
|
|
11144
11955
|
"examples": [
|
|
11145
11956
|
{
|
|
11146
|
-
"title": "
|
|
11147
|
-
"code": "
|
|
11957
|
+
"title": "Disabled",
|
|
11958
|
+
"code": "<nys-tabgroup name=\"Account Settings\">\n<nys-tab label=\"Profile\"></nys-tab>\n<nys-tab label=\"Security\"></nys-tab>\n<nys-tab label=\"Notifications\" disabled></nys-tab>\n<nys-tabpanel><p>Manage your profile information.</p></nys-tabpanel>\n<nys-tabpanel><p>Update your password and 2FA settings.</p></nys-tabpanel>\n<nys-tabpanel><p>Notification preferences (coming soon).</p></nys-tabpanel>\n</nys-tabgroup>",
|
|
11959
|
+
"lang": "html"
|
|
11960
|
+
},
|
|
11961
|
+
{
|
|
11962
|
+
"title": "Preselected",
|
|
11963
|
+
"code": "<nys-tabgroup name=\"Reports\">\n<nys-tab label=\"Summary\"></nys-tab>\n<nys-tab label=\"Details\" selected></nys-tab>\n<nys-tabpanel><p>Summary view</p></nys-tabpanel>\n<nys-tabpanel><p>Detailed view (shown by default)</p></nys-tabpanel>\n</nys-tabgroup>",
|
|
11148
11964
|
"lang": "html"
|
|
11149
11965
|
}
|
|
11150
11966
|
]
|
|
@@ -11406,13 +12222,14 @@
|
|
|
11406
12222
|
"customElement": true,
|
|
11407
12223
|
"examples": [
|
|
11408
12224
|
{
|
|
11409
|
-
"title": "
|
|
11410
|
-
"code": "<nys-tabgroup
|
|
11411
|
-
"lang": "html"
|
|
12225
|
+
"title": "Basic",
|
|
12226
|
+
"code": "<nys-tabgroup>\n<nys-tab label=\"Marcy\"></nys-tab>\n<nys-tab label=\"Algonquin\"></nys-tab>\n<nys-tab label=\"Haystack\"></nys-tab>\n// rest of tabs\n<nys-tabpanel\n>Mount Marcy is the tallest peak in the Adirondacks. It has an elevation\nof 5344 feet with 3166 feet of elevation gain. The roundtrip hike to the\ntop is 14.8 miles and is an out-and-back route.\n</nys-tabpanel>\n<nys-tabpanel\n>Algonquin Peak is the 2nd tallest peak in the Adirondacks. It has an\nelevation of 5114 feet with 3050 feet of elevation gain. The roundtrip\nhike to the top is 7.8 miles and is an out-and-back route.</nys-tabpanel\n>\n<nys-tabpanel\n>Mount Haystack is the 3rd tallest peak in the Adirondacks. It has an\nelevation of 4960 feet with 4000 feet of elevation gain. The roundtrip\nhike to the top is 16.4 miles and is an out-and-back\nroute.</nys-tabpanel\n>\n// rest of tab panel content\n</nys-tabgroup>",
|
|
12227
|
+
"lang": "html",
|
|
12228
|
+
"render": "<nys-tabgroup>\n<nys-tab label=\"Marcy\"></nys-tab>\n<nys-tab label=\"Algonquin\"></nys-tab>\n<nys-tab label=\"Haystack\"></nys-tab>\n<nys-tab label=\"Skylight\" id=\"tab4\"></nys-tab>\n<nys-tab label=\"Whiteface\" id=\"tab5\"></nys-tab>\n<nys-tabpanel\n>Mount Marcy is the tallest peak in the Adirondacks. It has an elevation\nof 5344 feet with 3166 feet of elevation gain. The roundtrip hike to the\ntop is 14.8 miles and is an out-and-back route.\n</nys-tabpanel>\n<nys-tabpanel\n>Algonquin Peak is the 2nd tallest peak in the Adirondacks. It has an\nelevation of 5114 feet with 3050 feet of elevation gain. The roundtrip\nhike to the top is 7.8 miles and is an out-and-back route.</nys-tabpanel\n>\n<nys-tabpanel\n>Mount Haystack is the 3rd tallest peak in the Adirondacks. It has an\nelevation of 4960 feet with 4000 feet of elevation gain. The roundtrip\nhike to the top is 16.4 miles and is an out-and-back\nroute.</nys-tabpanel\n>\n<nys-tabpanel\n>Mount Skylight is the 4th tallest peak in the Adirondacks. It has an\nelevation of 4926 feet with 5100 feet of elevation gain. The roundtrip\nhike to the top is 16 miles and is an out-and-back route.</nys-tabpanel\n>\n<nys-tabpanel\n>Whiteface is the 5th tallest peak in the Adirondacks. It has an\nelevation of 4867 feet with 3050 feet of elevation gain. The roundtrip\nhike to the top is 7.2 miles and is an out-and-back route.</nys-tabpanel\n>\n<p style=\"padding: 1rem;\">\n<strong>Note:</strong> The content in the tab panels was gathered from\n<a href=\"https://www.lakeplacid.com/do/outdoors/summerfall/hiking\"\n>lakeplacid.com</a\n>\nand may not be completely accurate. This is meant to be a demo of how\nthe component works, not a hiking guide.\n</p>\n</nys-tabgroup>"
|
|
11412
12229
|
},
|
|
11413
12230
|
{
|
|
11414
|
-
"title": "
|
|
11415
|
-
"code": "<nys-tabgroup
|
|
12231
|
+
"title": "Explicit Ordering",
|
|
12232
|
+
"code": "<nys-tabgroup id=\"explicit-ordering\">\n<nys-tab label=\"1st Tab\" id=\"tab1\"></nys-tab>\n<nys-tab label=\"2nd Tab\" id=\"tab2\"></nys-tab>\n<nys-tab label=\"3rd Tab\" id=\"tab3\"></nys-tab>\n<nys-tabpanel aria-labelledby=\"tab2\">Content for tab 2</nys-tabpanel>\n<nys-tabpanel aria-labelledby=\"tab3\">Content for tab 3</nys-tabpanel>\n<nys-tabpanel aria-labelledby=\"tab1\">Content for tab 1</nys-tabpanel>\n</nys-tabgroup>",
|
|
11416
12233
|
"lang": "html"
|
|
11417
12234
|
}
|
|
11418
12235
|
]
|
|
@@ -11482,14 +12299,7 @@
|
|
|
11482
12299
|
"package": "lit"
|
|
11483
12300
|
},
|
|
11484
12301
|
"tagName": "nys-tabpanel",
|
|
11485
|
-
"customElement": true
|
|
11486
|
-
"examples": [
|
|
11487
|
-
{
|
|
11488
|
-
"title": "Panel content is wrapped by `<nys-tabpanel>`.",
|
|
11489
|
-
"code": "<!-- Panels are paired by position with <nys-tab> elements in the same <nys-tabgroup>. -->\n<nys-tabgroup name=\"Steps\">\n<nys-tab label=\"Step 1\"></nys-tab>\n<nys-tab label=\"Step 2\"></nys-tab>\n<nys-tabpanel>\n<h2>Step 1: Enter your information</h2>\n<p>Fill out the form below.</p>\n</nys-tabpanel>\n<nys-tabpanel>\n<h2>Step 2: Review and submit</h2>\n<p>Confirm your details before submitting.</p>\n</nys-tabpanel>\n</nys-tabgroup>",
|
|
11490
|
-
"lang": "html"
|
|
11491
|
-
}
|
|
11492
|
-
]
|
|
12302
|
+
"customElement": true
|
|
11493
12303
|
}
|
|
11494
12304
|
],
|
|
11495
12305
|
"exports": [
|
|
@@ -11854,6 +12664,33 @@
|
|
|
11854
12664
|
"name": "LitElement",
|
|
11855
12665
|
"package": "lit"
|
|
11856
12666
|
},
|
|
12667
|
+
"examples": [
|
|
12668
|
+
{
|
|
12669
|
+
"title": "Basic",
|
|
12670
|
+
"code": "<nys-table id=\"table1\" name=\"table1\">\n<table>\n<caption>New York State High Peaks and Popular Hikes</caption>\n<tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>\n<tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>\n<tr><td>Algonquin</td><td>5,114</td><td>Northeast Trail</td></tr>\n<tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>\n<tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>\n<tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>\n</table>\n</nys-table>",
|
|
12671
|
+
"lang": "html"
|
|
12672
|
+
},
|
|
12673
|
+
{
|
|
12674
|
+
"title": "Striped",
|
|
12675
|
+
"code": "<nys-table id=\"table2\" name=\"table2\" striped>\n<table>\n<caption>New York State High Peaks and Popular Hikes</caption>\n<tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>\n<tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>\n<tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>\n<tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>\n<tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>\n</table>\n</nys-table>",
|
|
12676
|
+
"lang": "html"
|
|
12677
|
+
},
|
|
12678
|
+
{
|
|
12679
|
+
"title": "Bordered",
|
|
12680
|
+
"code": "<nys-table id=\"table3\" name=\"table3\" bordered>\n<table>\n<caption>New York State High Peaks and Popular Hikes</caption>\n<tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>\n<tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>\n<tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>\n<tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>\n<tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>\n</table>\n</nys-table>",
|
|
12681
|
+
"lang": "html"
|
|
12682
|
+
},
|
|
12683
|
+
{
|
|
12684
|
+
"title": "Sortable",
|
|
12685
|
+
"code": "<nys-table id=\"table4\" name=\"table4\" sortable>\n<table>\n<caption>New York State High Peaks and Popular Hikes</caption>\n<tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>\n<tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>\n<tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>\n<tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>\n<tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>\n</table>\n</nys-table>",
|
|
12686
|
+
"lang": "html"
|
|
12687
|
+
},
|
|
12688
|
+
{
|
|
12689
|
+
"title": "Downloadable",
|
|
12690
|
+
"code": "<nys-table id=\"table5\" name=\"table5\" download=\"path/to/downloadable/version/of/table.filetype\">\n<table>\n<caption>New York State High Peaks and Popular Hikes</caption>\n<tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>\n<tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>\n<tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>\n<tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>\n<tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>\n</table>\n</nys-table>",
|
|
12691
|
+
"lang": "html"
|
|
12692
|
+
}
|
|
12693
|
+
],
|
|
11857
12694
|
"tagName": "nys-table",
|
|
11858
12695
|
"customElement": true
|
|
11859
12696
|
}
|
|
@@ -11996,7 +12833,7 @@
|
|
|
11996
12833
|
"text": "boolean"
|
|
11997
12834
|
},
|
|
11998
12835
|
"default": "false",
|
|
11999
|
-
"description": "Makes textarea
|
|
12836
|
+
"description": "Makes textarea readonly but focusable.",
|
|
12000
12837
|
"attribute": "readonly",
|
|
12001
12838
|
"reflects": true
|
|
12002
12839
|
},
|
|
@@ -12366,7 +13203,7 @@
|
|
|
12366
13203
|
"text": "boolean"
|
|
12367
13204
|
},
|
|
12368
13205
|
"default": "false",
|
|
12369
|
-
"description": "Makes textarea
|
|
13206
|
+
"description": "Makes textarea readonly but focusable.",
|
|
12370
13207
|
"fieldName": "readonly",
|
|
12371
13208
|
"propName": "readonly"
|
|
12372
13209
|
},
|
|
@@ -12490,13 +13327,58 @@
|
|
|
12490
13327
|
"summary": "Multi-line text input for comments, descriptions, and feedback.",
|
|
12491
13328
|
"examples": [
|
|
12492
13329
|
{
|
|
12493
|
-
"title": "Basic
|
|
12494
|
-
"code": "<nys-textarea label=\"Comments\"
|
|
13330
|
+
"title": "Basic",
|
|
13331
|
+
"code": "<nys-textarea label=\"Comments\"></nys-textarea>",
|
|
13332
|
+
"lang": "html"
|
|
13333
|
+
},
|
|
13334
|
+
{
|
|
13335
|
+
"title": "Disabled",
|
|
13336
|
+
"code": "<nys-textarea label=\"Comments\" disabled></nys-textarea>",
|
|
13337
|
+
"lang": "html"
|
|
13338
|
+
},
|
|
13339
|
+
{
|
|
13340
|
+
"title": "Readonly",
|
|
13341
|
+
"code": "<nys-textarea label=\"Comments\" readonly value=\"You can see me but not edit me\"></nys-textarea>",
|
|
13342
|
+
"lang": "html"
|
|
13343
|
+
},
|
|
13344
|
+
{
|
|
13345
|
+
"title": "Required",
|
|
13346
|
+
"code": "<nys-textarea label=\"Describe the incident\" required></nys-textarea>",
|
|
13347
|
+
"lang": "html"
|
|
13348
|
+
},
|
|
13349
|
+
{
|
|
13350
|
+
"title": "Optional",
|
|
13351
|
+
"code": "<nys-textarea label=\"Comments\" optional></nys-textarea>",
|
|
13352
|
+
"lang": "html"
|
|
13353
|
+
},
|
|
13354
|
+
{
|
|
13355
|
+
"title": "Max length",
|
|
13356
|
+
"code": "<nys-textarea label=\"Comments\" maxlength=\"100\"></nys-textarea>",
|
|
13357
|
+
"lang": "html"
|
|
13358
|
+
},
|
|
13359
|
+
{
|
|
13360
|
+
"title": "Width Small",
|
|
13361
|
+
"code": "<nys-textarea label=\"Comments\" width=\"sm\"></nys-textarea>",
|
|
13362
|
+
"lang": "html"
|
|
13363
|
+
},
|
|
13364
|
+
{
|
|
13365
|
+
"title": "Width Medium",
|
|
13366
|
+
"code": "<nys-textarea label=\"Comments\" width=\"md\"></nys-textarea>",
|
|
13367
|
+
"lang": "html"
|
|
13368
|
+
},
|
|
13369
|
+
{
|
|
13370
|
+
"title": "Width Large",
|
|
13371
|
+
"code": "<nys-textarea label=\"Comments\" width=\"lg\"></nys-textarea>",
|
|
13372
|
+
"lang": "html"
|
|
13373
|
+
},
|
|
13374
|
+
{
|
|
13375
|
+
"title": "Description",
|
|
13376
|
+
"code": "<nys-textarea label=\"Describe the incident\" description=\"Please provide details\"></nys-textarea>",
|
|
12495
13377
|
"lang": "html"
|
|
12496
13378
|
},
|
|
12497
13379
|
{
|
|
12498
|
-
"title": "
|
|
12499
|
-
"code": "<nys-textarea label=\"Describe the incident\"
|
|
13380
|
+
"title": "Description Slot",
|
|
13381
|
+
"code": "<nys-textarea label=\"Describe the incident\">\n<div slot=\"description\">Please provide details</div>\n</nys-textarea>",
|
|
12500
13382
|
"lang": "html"
|
|
12501
13383
|
}
|
|
12502
13384
|
]
|
|
@@ -13279,23 +14161,68 @@
|
|
|
13279
14161
|
"summary": "Text input for short single-line data with validation and masking support.",
|
|
13280
14162
|
"examples": [
|
|
13281
14163
|
{
|
|
13282
|
-
"title": "Basic
|
|
13283
|
-
"code": "<nys-textinput label=\"Full Name\"
|
|
14164
|
+
"title": "Basic",
|
|
14165
|
+
"code": "<nys-textinput label=\"Full Name\"></nys-textinput>",
|
|
14166
|
+
"lang": "html"
|
|
14167
|
+
},
|
|
14168
|
+
{
|
|
14169
|
+
"title": "Disabled",
|
|
14170
|
+
"code": "<nys-textinput label=\"Email Address\" disabled></nys-textinput>",
|
|
14171
|
+
"lang": "html"
|
|
14172
|
+
},
|
|
14173
|
+
{
|
|
14174
|
+
"title": "Readonly",
|
|
14175
|
+
"code": "<nys-textinput label=\"Email Address\" readonly value=\"You can see me but not edit me\"></nys-textinput>",
|
|
14176
|
+
"lang": "html"
|
|
14177
|
+
},
|
|
14178
|
+
{
|
|
14179
|
+
"title": "Required",
|
|
14180
|
+
"code": "<nys-textinput label=\"Email Address\" required></nys-textinput>",
|
|
14181
|
+
"lang": "html"
|
|
14182
|
+
},
|
|
14183
|
+
{
|
|
14184
|
+
"title": "Optional",
|
|
14185
|
+
"code": "<nys-textinput label=\"Email Address\" optional></nys-textinput>",
|
|
14186
|
+
"lang": "html"
|
|
14187
|
+
},
|
|
14188
|
+
{
|
|
14189
|
+
"title": "Width Small",
|
|
14190
|
+
"code": "<nys-textinput label=\"Zip Code\" width=\"sm\"></nys-textinput>",
|
|
14191
|
+
"lang": "html"
|
|
14192
|
+
},
|
|
14193
|
+
{
|
|
14194
|
+
"title": "Width Medium",
|
|
14195
|
+
"code": "<nys-textinput label=\"City\" width=\"md\"></nys-textinput>",
|
|
14196
|
+
"lang": "html"
|
|
14197
|
+
},
|
|
14198
|
+
{
|
|
14199
|
+
"title": "Width Large",
|
|
14200
|
+
"code": "<nys-textinput label=\"Email Address\" width=\"lg\"></nys-textinput>",
|
|
14201
|
+
"lang": "html"
|
|
14202
|
+
},
|
|
14203
|
+
{
|
|
14204
|
+
"title": "Description",
|
|
14205
|
+
"code": "<nys-textinput label=\"Email Address\" description=\"Only valid ny.gov emails are accepted.\"></nys-textinput>",
|
|
14206
|
+
"lang": "html"
|
|
14207
|
+
},
|
|
14208
|
+
{
|
|
14209
|
+
"title": "Description Slot",
|
|
14210
|
+
"code": "<nys-textinput label=\"Email Address\">\n<div slot=\"description\">Only valid <strong>ny.gov</strong> emails are accepted.</div>\n</nys-textinput>",
|
|
13284
14211
|
"lang": "html"
|
|
13285
14212
|
},
|
|
13286
14213
|
{
|
|
13287
|
-
"title": "
|
|
13288
|
-
"code": "<nys-textinput type=\"
|
|
14214
|
+
"title": "Masking",
|
|
14215
|
+
"code": "<nys-textinput type=\"tel\" label=\"Phone Number\">\n<div slot=\"description\">Some types, such as <code>tel</code> have automatic masking available.</div>\n</nys-textinput>",
|
|
13289
14216
|
"lang": "html"
|
|
13290
14217
|
},
|
|
13291
14218
|
{
|
|
13292
|
-
"title": "
|
|
13293
|
-
"code": "<nys-textinput type=\"
|
|
14219
|
+
"title": "Max Min Values",
|
|
14220
|
+
"code": "<nys-textinput type=\"number\" label=\"Age\" min=\"18\" max=\"99\" width=\"sm\"></nys-textinput>",
|
|
13294
14221
|
"lang": "html"
|
|
13295
14222
|
},
|
|
13296
14223
|
{
|
|
13297
|
-
"title": "
|
|
13298
|
-
"code": "<nys-textinput type=\"search\" placeholder=\"Search\">\n<nys-button
|
|
14224
|
+
"title": "Suffix Button",
|
|
14225
|
+
"code": "<nys-textinput id=\"search-demo\" type=\"search\" placeholder=\"Search\">\n<nys-button\nslot=\"endButton\"\nariaLabel=\"Search\"\nprefixIcon=\"search\"\nonclick=\"alert('searching for: ' + document.getElementById('search-demo').value)\"\n></nys-button>\n</nys-textinput>",
|
|
13299
14226
|
"lang": "html"
|
|
13300
14227
|
}
|
|
13301
14228
|
]
|
|
@@ -13691,13 +14618,38 @@
|
|
|
13691
14618
|
"summary": "Toggle switch for binary settings with immediate effect.",
|
|
13692
14619
|
"examples": [
|
|
13693
14620
|
{
|
|
13694
|
-
"title": "Basic
|
|
13695
|
-
"code": "<nys-toggle label=\"Enable notifications\" name=\"notifications\"></nys-toggle>",
|
|
14621
|
+
"title": "Basic",
|
|
14622
|
+
"code": "<nys-toggle label=\"Enable notifications\" name=\"notifications\" value=\"enabled-notifications\"></nys-toggle>",
|
|
13696
14623
|
"lang": "html"
|
|
13697
14624
|
},
|
|
13698
14625
|
{
|
|
13699
|
-
"title": "
|
|
13700
|
-
"code": "<nys-toggle label=\"Dark
|
|
14626
|
+
"title": "Checked",
|
|
14627
|
+
"code": "<nys-toggle label=\"Dark Mode\" name=\"theme\" value=\"dark\" checked></nys-toggle>",
|
|
14628
|
+
"lang": "html"
|
|
14629
|
+
},
|
|
14630
|
+
{
|
|
14631
|
+
"title": "Disabled",
|
|
14632
|
+
"code": "<nys-toggle label=\"Opt Out of emails\" name=\"toggle-switch\" value=\"emails\" disabled></nys-toggle>",
|
|
14633
|
+
"lang": "html"
|
|
14634
|
+
},
|
|
14635
|
+
{
|
|
14636
|
+
"title": "Hide Icon",
|
|
14637
|
+
"code": "<nys-toggle label=\"No icon on the toggle knob\" name=\"icon\" value=\"no-icon\" noIcon></nys-toggle>",
|
|
14638
|
+
"lang": "html"
|
|
14639
|
+
},
|
|
14640
|
+
{
|
|
14641
|
+
"title": "Size small",
|
|
14642
|
+
"code": "<nys-toggle label=\"Tiny but mighty\" name=\"sm-size\" value=\"sm-size\" size=\"sm\"></nys-toggle>",
|
|
14643
|
+
"lang": "html"
|
|
14644
|
+
},
|
|
14645
|
+
{
|
|
14646
|
+
"title": "Description",
|
|
14647
|
+
"code": "<nys-toggle\nlabel=\"Opt Out of emails\"\ndescription=\"An email address is recommended to be on file for contact information.\"\nname=\"toggle-switch\"\nvalue=\"emails\"\n></nys-toggle>",
|
|
14648
|
+
"lang": "html"
|
|
14649
|
+
},
|
|
14650
|
+
{
|
|
14651
|
+
"title": "Description Slot",
|
|
14652
|
+
"code": "<nys-toggle\nlabel=\"Opt Out of emails\"\nname=\"toggle-switch\"\nvalue=\"emails\"\n>\n<p slot=\"description\">We <strong>REALLY</strong> encourage you to keep emails enabled for contact purposes.</p>\n</nys-toggle>",
|
|
13701
14653
|
"lang": "html"
|
|
13702
14654
|
}
|
|
13703
14655
|
]
|
|
@@ -14111,13 +15063,18 @@
|
|
|
14111
15063
|
"summary": "Contextual tooltip with auto-positioning, keyboard support, and screen reader integration.",
|
|
14112
15064
|
"examples": [
|
|
14113
15065
|
{
|
|
14114
|
-
"title": "
|
|
14115
|
-
"code": "<nys-
|
|
15066
|
+
"title": "Basic",
|
|
15067
|
+
"code": "<div style=\"display: flex; justify-content: center; gap: 5px; padding: 40px;\">\n<nys-tooltip for=\"my-button\" text=\"I am a tooltip.\"></nys-tooltip>\n<nys-button id=\"my-button\" label=\"Hover Me\"></nys-button>\n</div>",
|
|
15068
|
+
"lang": "html"
|
|
15069
|
+
},
|
|
15070
|
+
{
|
|
15071
|
+
"title": "Position",
|
|
15072
|
+
"code": "<div style=\"display: flex; justify-content: center; gap: 5px; padding: 40px;\">\n<p>Hover over the icon</p>\n<nys-tooltip\nfor=\"my-icon2\"\ntext=\"I am a tooltip.\"\nposition=\"right\"\n>\n</nys-tooltip>\n<nys-icon id=\"my-icon2\" name=\"info\" size=\"3xl\"></nys-icon>\n</div>",
|
|
14116
15073
|
"lang": "html"
|
|
14117
15074
|
},
|
|
14118
15075
|
{
|
|
14119
|
-
"title": "
|
|
14120
|
-
"code": "<
|
|
15076
|
+
"title": "Inverted",
|
|
15077
|
+
"code": "<div style=\"background-color: #1b1b1b; color: #ffffff; padding: 40px; display: flex; gap: 5px\">\n<p>Hover over the icon</p>\n<nys-tooltip\nfor=\"my-tooltip3\"\ntext=\"I am a tooltip.\"\ninverted\n>\n</nys-tooltip>\n<nys-icon id=\"my-tooltip3\" name=\"info\" size=\"3xl\"></nys-icon>\n</div>",
|
|
14121
15078
|
"lang": "html"
|
|
14122
15079
|
}
|
|
14123
15080
|
]
|
|
@@ -14182,8 +15139,8 @@
|
|
|
14182
15139
|
"summary": "Universal NYS footer with logo and statewide links. Required site-wide.",
|
|
14183
15140
|
"examples": [
|
|
14184
15141
|
{
|
|
14185
|
-
"title": "
|
|
14186
|
-
"code": "<nys-
|
|
15142
|
+
"title": "Basic",
|
|
15143
|
+
"code": "<nys-unavfooter></nys-unavfooter>",
|
|
14187
15144
|
"lang": "html"
|
|
14188
15145
|
}
|
|
14189
15146
|
]
|
|
@@ -14229,7 +15186,7 @@
|
|
|
14229
15186
|
"declarations": [
|
|
14230
15187
|
{
|
|
14231
15188
|
"kind": "class",
|
|
14232
|
-
"description": "",
|
|
15189
|
+
"description": "Universal NYS header with trust bar, logo, search, and language translation. Required on all NYS sites.\n\nPlace as the first element in `<body>`. Includes \"official site\" trust indicator, NY.gov logo,\nsite search (searches ny.gov), and 14-language translation dropdown. Use `hideSearch` or `hideTranslate`\nto remove features if not applicable.",
|
|
14233
15190
|
"name": "NysUnavHeader",
|
|
14234
15191
|
"members": [
|
|
14235
15192
|
{
|
|
@@ -14405,6 +15362,16 @@
|
|
|
14405
15362
|
]
|
|
14406
15363
|
}
|
|
14407
15364
|
],
|
|
15365
|
+
"events": [
|
|
15366
|
+
{
|
|
15367
|
+
"description": "Fired when a language is selected. Detail: `{language: {code, label, url?}}`. Cancelable; `preventDefault()` overrides the default Smartling redirect.",
|
|
15368
|
+
"name": "nys-language-select"
|
|
15369
|
+
},
|
|
15370
|
+
{
|
|
15371
|
+
"description": "Fired when a search is submitted. Detail: `{query}`. Cancelable; `preventDefault()` overrides the default search redirect.",
|
|
15372
|
+
"name": "nys-search-submit"
|
|
15373
|
+
}
|
|
15374
|
+
],
|
|
14408
15375
|
"attributes": [
|
|
14409
15376
|
{
|
|
14410
15377
|
"name": "trustbarVisible",
|
|
@@ -14492,7 +15459,40 @@
|
|
|
14492
15459
|
"package": "lit"
|
|
14493
15460
|
},
|
|
14494
15461
|
"tagName": "nys-unavheader",
|
|
14495
|
-
"customElement": true
|
|
15462
|
+
"customElement": true,
|
|
15463
|
+
"summary": "Universal NYS header with trust bar, search, and translation. Required site-wide.",
|
|
15464
|
+
"examples": [
|
|
15465
|
+
{
|
|
15466
|
+
"title": "Basic",
|
|
15467
|
+
"code": "<nys-unavheader></nys-unavheader>",
|
|
15468
|
+
"lang": "html"
|
|
15469
|
+
},
|
|
15470
|
+
{
|
|
15471
|
+
"title": "Hide search",
|
|
15472
|
+
"code": "<nys-unavheader hideSearch></nys-unavheader>",
|
|
15473
|
+
"lang": "html"
|
|
15474
|
+
},
|
|
15475
|
+
{
|
|
15476
|
+
"title": "Hide translate",
|
|
15477
|
+
"code": "<nys-unavheader hideTranslate></nys-unavheader>",
|
|
15478
|
+
"lang": "html"
|
|
15479
|
+
},
|
|
15480
|
+
{
|
|
15481
|
+
"title": "Custom Search URL",
|
|
15482
|
+
"code": "<nys-unavheader searchUrl=\"https://designsystem.ny.gov/search/?q=\"></nys-unavheader>",
|
|
15483
|
+
"lang": "html"
|
|
15484
|
+
},
|
|
15485
|
+
{
|
|
15486
|
+
"title": "Custom Language List",
|
|
15487
|
+
"code": "<nys-unavheader id=\"my-header\"></nys-unavheader>\n<script>\nconst header = document.querySelector('#my-header');\nheader.languages = [\n{ code: 'en', label: 'English' },\n{ code: 'es', label: 'Español' , url: '\"https://ny.gov/?lang=es\"'},\n{ code: 'fr', label: 'Français', url: '\"https://ny.gov/?lang=fr\"'},\n];\n</script>",
|
|
15488
|
+
"lang": "html"
|
|
15489
|
+
},
|
|
15490
|
+
{
|
|
15491
|
+
"title": "Custom Language List JS",
|
|
15492
|
+
"code": "<nys-unavheader id=\"my-header2\"></nys-unavheader>\n<script>\ndocument.querySelector('#my-header2').addEventListener('nys-language-select', (event) => {\nevent.preventDefault();\nconst selectedLanguage = event.detail.language.label;\n});\n</script>",
|
|
15493
|
+
"lang": "html"
|
|
15494
|
+
}
|
|
15495
|
+
]
|
|
14496
15496
|
}
|
|
14497
15497
|
],
|
|
14498
15498
|
"exports": [
|
|
@@ -14817,8 +15817,38 @@
|
|
|
14817
15817
|
"summary": "YouTube video player with thumbnail preview and accessibility announcements.",
|
|
14818
15818
|
"examples": [
|
|
14819
15819
|
{
|
|
14820
|
-
"title": "Basic
|
|
14821
|
-
"code": "<nys-video\nvideourl=\"https://www.youtube.com/watch?v=
|
|
15820
|
+
"title": "Basic",
|
|
15821
|
+
"code": "<nys-video\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"IT'S a Tech Podcast, Episode 3: Human-Centered Design\"\n></nys-video>",
|
|
15822
|
+
"lang": "html"
|
|
15823
|
+
},
|
|
15824
|
+
{
|
|
15825
|
+
"title": "Thumbnail",
|
|
15826
|
+
"code": "<nys-video\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"IT'S a Tech Podcast, Episode 3: Human-Centered Design\"\nthumbnail=\"https://designsystem.ny.gov/assets/img/homepage-grid-3.svg\"\n></nys-video>",
|
|
15827
|
+
"lang": "html"
|
|
15828
|
+
},
|
|
15829
|
+
{
|
|
15830
|
+
"title": "Autoplay",
|
|
15831
|
+
"code": "<nys-video\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"IT'S a Tech Podcast, Episode 3: Human-Centered Design\"\nautoplay\n></nys-video>",
|
|
15832
|
+
"lang": "html"
|
|
15833
|
+
},
|
|
15834
|
+
{
|
|
15835
|
+
"title": "Start Time",
|
|
15836
|
+
"code": "<nys-video\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"IT'S a Tech Podcast, Episode 3: Human-Centered Design\"\nstarttime=\"43\"\n></nys-video>",
|
|
15837
|
+
"lang": "html"
|
|
15838
|
+
},
|
|
15839
|
+
{
|
|
15840
|
+
"title": "Disabled",
|
|
15841
|
+
"code": "<nys-video\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"IT'S a Tech Podcast, Episode 3: Human-Centered Design\"\ndisabled\n></nys-video>",
|
|
15842
|
+
"lang": "html"
|
|
15843
|
+
},
|
|
15844
|
+
{
|
|
15845
|
+
"title": "Size full",
|
|
15846
|
+
"code": "<nys-video\nsize=\"full\"\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"Small (width: 320-439px)\"\n></nys-video>",
|
|
15847
|
+
"lang": "html"
|
|
15848
|
+
},
|
|
15849
|
+
{
|
|
15850
|
+
"title": "Size small",
|
|
15851
|
+
"code": "<nys-video\nsize=\"sm\"\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"Small (width: 320-439px)\"\n></nys-video>",
|
|
14822
15852
|
"lang": "html"
|
|
14823
15853
|
}
|
|
14824
15854
|
]
|