@nysds/components 1.19.3-alpha-1 → 1.19.3

package/custom-elements.json

@@ -158,13 +158,18 @@
           "summary": "Container for accordion items with optional single-select and bordered styling.",
           "examples": [
             {
-              "title": "Basic accordion",
-              "code": "<nys-accordion>\n<nys-accordionitem heading=\"Section 1\">Content for section 1</nys-accordionitem>\n<nys-accordionitem heading=\"Section 2\">Content for section 2</nys-accordionitem>\n</nys-accordion>",
+              "title": "Basic",
+              "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>",
               "lang": "html"
             },
             {
-              "title": "Single-select accordion",
-              "code": "<nys-accordion singleSelect bordered>\n<nys-accordionitem heading=\"FAQ 1\" expanded>Answer 1</nys-accordionitem>\n<nys-accordionitem heading=\"FAQ 2\">Answer 2</nys-accordionitem>\n</nys-accordion>",
+              "title": "Single Select",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Bordered",
+              "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>",
               "lang": "html"
             }
           ]
@@ -351,7 +356,7 @@
           "examples": [
             {
               "title": "Expanded item",
-              "code": "<nys-accordionitem heading=\"How do I apply?\" expanded>\n<p>Visit ny.gov and complete the online application.</p>\n</nys-accordionitem>",
+              "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>",
               "lang": "html"
             }
           ]
@@ -724,13 +729,64 @@
           "summary": "Alert for contextual feedback with semantic types and live region support.",
           "examples": [
             {
-              "title": "Info alert",
-              "code": "<nys-alert type=\"info\" heading=\"Update available\" text=\"A new version is ready to install.\"></nys-alert>",
+              "title": "Basic",
+              "code": "<nys-alert heading=\"This is a heading\"></nys-alert>",
+              "lang": "html"
+            },
+            {
+              "title": "Text",
+              "code": "<nys-alert\nheading=\"This is a heading\"\ntext=\"This is additional information passed in through the text property\"\n></nys-alert>",
+              "lang": "html"
+            },
+            {
+              "title": "Rich Text",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Info Type",
+              "code": "<nys-alert type=\"info\" heading=\"Info alert type\"></nys-alert>",
+              "lang": "html"
+            },
+            {
+              "title": "Success Type",
+              "code": "<nys-alert type=\"success\" heading=\"Success alert type\"></nys-alert>",
+              "lang": "html"
+            },
+            {
+              "title": "Warning Type",
+              "code": "<nys-alert type=\"warning\" heading=\"Warning alert type\"></nys-alert>",
+              "lang": "html"
+            },
+            {
+              "title": "Danger Type",
+              "code": "<nys-alert type=\"danger\" heading=\"Danger alert type\"></nys-alert>",
+              "lang": "html"
+            },
+            {
+              "title": "Emergency Type",
+              "code": "<nys-alert type=\"emergency\" heading=\"Emergency alert type\"></nys-alert>",
+              "lang": "html"
+            },
+            {
+              "title": "Dismissible",
+              "code": "<nys-alert heading=\"This alert is dismisable\" text=\"Close it by clicking on the X in the corner.\" dismissible>\n</nys-alert>",
+              "lang": "html"
+            },
+            {
+              "title": "Duration",
+              "code": "<nys-alert heading=\"Disappearing alert\" text=\"This alert will disappear after 3 seconds.\" duration=\"3000\"></nys-alert>",
+              "lang": "html",
+              "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>"
+            },
+            {
+              "title": "Custom Icon",
+              "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>",
               "lang": "html"
             },
             {
-              "title": "Dismissible success alert",
-              "code": "<nys-alert type=\"success\" heading=\"Application submitted\" dismissible></nys-alert>",
+              "title": "Action Links",
+              "code": "<nys-alert\nheading=\"Alert with links\"\nprimaryLabel=\"{primaryAction}\"\nsecondaryLabel=\"{secondaryAction}\"\nprimaryAction=\"https://www.ny.gov/\"\nsecondaryAction=\"https://www.ny.gov/\"\n></nys-alert>",
               "lang": "html"
             }
           ]
@@ -1026,13 +1082,44 @@
           "summary": "User avatar with image, initials, or icon fallback and contrast-aware colors.",
           "examples": [
             {
-              "title": "Image avatar",
-              "code": "<nys-avatar image=\"/path/to/photo.jpg\" ariaLabel=\"Jane Smith\"></nys-avatar>",
+              "title": "Basic",
+              "code": "<nys-avatar ariaLabel=\"User avatar\"></nys-avatar>",
+              "lang": "html"
+            },
+            {
+              "title": "Image",
+              "code": "<nys-avatar\nimage=\"path/to/img.png\"\nariaLabel=\"Jane Smith\"\n></nys-avatar>",
+              "lang": "html",
+              "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>"
+            },
+            {
+              "title": "Initials",
+              "code": "<nys-avatar initials=\"JS\" ariaLabel=\"Jane Smith\"></nys-avatar>",
+              "lang": "html"
+            },
+            {
+              "title": "Icon",
+              "code": "<nys-avatar icon=\"account_circle\"></nys-avatar>",
+              "lang": "html"
+            },
+            {
+              "title": "Interactive",
+              "code": "<nys-avatar interactive></nys-avatar>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "code": "<nys-avatar disabled></nys-avatar>",
+              "lang": "html"
+            },
+            {
+              "title": "Custom Background Color",
+              "code": "<nys-avatar color=\"var(--nys-color-red-500)\" interactive></nys-avatar>",
               "lang": "html"
             },
             {
-              "title": "Initials avatar with custom color",
-              "code": "<nys-avatar initials=\"JS\" color=\"var(--nys-color-theme)\" ariaLabel=\"Jane Smith\"></nys-avatar>",
+              "title": "Lazy Loading",
+              "code": "<nys-avatar lazy></nys-avatar>",
               "lang": "html"
             }
           ]
@@ -1182,14 +1269,16 @@
           "summary": "Floating back-to-top button with auto-show behavior, smooth scroll, and focus management.",
           "examples": [
             {
-              "title": "Auto-appearing button in footer",
+              "title": "Basic",
               "code": "<footer>\n<nys-backtotop></nys-backtotop>\n<!-- Other footer content -->\n</footer>",
-              "lang": "html"
+              "lang": "html",
+              "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>"
             },
             {
-              "title": "Always visible, left position",
-              "code": "<nys-backtotop visible position=\"left\"></nys-backtotop>",
-              "lang": "html"
+              "title": "Left",
+              "code": "<footer>\n<nys-backtotop position=\"left\"></nys-backtotop>\n<!-- Other footer content -->\n</footer>",
+              "lang": "html",
+              "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>"
             }
           ]
         }
@@ -1494,13 +1583,63 @@
           "summary": "Compact label for status, counts, or categorization with semantic styling.",
           "examples": [
             {
-              "title": "Status badge",
-              "code": "<nys-badge intent=\"success\" label=\"Approved\" prefixIcon></nys-badge>",
+              "title": "Basic",
+              "code": "<nys-badge label=\"Basic badge\"></nys-badge>",
               "lang": "html"
             },
             {
-              "title": "Count badge",
-              "code": "<nys-badge prefixLabel=\"Messages\" label=\"12\"></nys-badge>",
+              "title": "Error Intent",
+              "code": "<nys-badge label=\"Error\" intent=\"error\" prefixIcon></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Warning Intent",
+              "code": "<nys-badge label=\"Warning\" intent=\"warning\" prefixIcon></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Success Intent",
+              "code": "<nys-badge label=\"Success\" intent=\"success\" prefixIcon></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Strong Neutral",
+              "code": "<nys-badge variant=\"strong\" label=\"Neutral\" prefixIcon></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Strong Error",
+              "code": "<nys-badge variant=\"strong\" label=\"Error\" intent=\"error\" prefixIcon></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Strong Warning",
+              "code": "<nys-badge variant=\"strong\" label=\"Warning\" intent=\"warning\" prefixIcon></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Strong Success",
+              "code": "<nys-badge variant=\"strong\" label=\"Success\" intent=\"success\" prefixIcon></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Custom Prefix Icon",
+              "code": "<nys-badge label=\"Custom prefixIcon\" prefixIcon=\"check\"></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Custom Suffix Icon",
+              "code": "<nys-badge label=\"Custom suffixIcon\" suffixIcon=\"check\"></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Size Small",
+              "code": "<nys-badge label=\"Small\" size=\"sm\"></nys-badge>",
+              "lang": "html"
+            },
+            {
+              "title": "Screen reader text",
+              "code": "<nys-badge intent=\"warning\" label=\"Caution\" prefixIcon srText=\"concern\"></nys-badge>",
               "lang": "html"
             }
           ]
@@ -1546,11 +1685,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A breadcrumb navigation trail composed of `nys-breadcrumbitem` 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.",
+          "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.",
           "name": "NysBreadcrumbs",
           "slots": [
             {
-              "description": "One or more `nys-breadcrumbitem` elements defining the trail.",
+              "description": "One or more `li` elements defining the trail.",
               "name": ""
             }
           ],
@@ -1580,7 +1719,7 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"sm\" | \"md\" | \"\""
+                "text": "\"sm\" | \"md\""
               },
               "default": "\"md\"",
               "description": "Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.",
@@ -1803,7 +1942,7 @@
             {
               "name": "size",
               "type": {
-                "text": "\"sm\" | \"md\" | \"\""
+                "text": "\"sm\" | \"md\""
               },
               "default": "\"md\"",
               "description": "Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.",
@@ -1860,19 +1999,44 @@
           "summary": "Breadcrumb navigation trail with responsive collapse support.",
           "examples": [
             {
-              "title": "Full trail with current page",
-              "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>",
+              "title": "Basic",
+              "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>",
               "lang": "html"
             },
             {
-              "title": "Trail without current page",
-              "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>",
+              "title": "Current page",
+              "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>",
               "lang": "html"
             },
             {
-              "title": "Single item renders as back-to-parent",
+              "title": "Single item list",
               "code": "<nys-breadcrumbs>\n<ol>\n<li><a href=\"/services\">Services</a></li>\n</ol>\n</nys-breadcrumbs>",
               "lang": "html"
+            },
+            {
+              "title": "Long list",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Size small",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Back to parent (mobile)",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Background bar",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "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>",
+              "lang": "html"
             }
           ]
         }
@@ -1958,6 +2122,10 @@
             }
           ],
           "slots": [
+            {
+              "description": "Button label text. Use as fallback when `label` prop is not provided.",
+              "name": ""
+            },
             {
               "description": "Icon before label. Not shown for `text` variant.",
               "name": "prefix-icon"
@@ -2227,6 +2395,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_hasCircleSlot",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -2269,6 +2446,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_onCircleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_manageFormAction",
@@ -2579,18 +2769,38 @@
           "summary": "Button for actions and CTAs with variants, sizes, and icon support.",
           "examples": [
             {
-              "title": "Basic filled button",
-              "code": "<nys-button label=\"Submit\" variant=\"filled\"></nys-button>",
+              "title": "Basic",
+              "code": "<nys-button label=\"Button\" variant=\"filled\"></nys-button>",
               "lang": "html"
             },
             {
-              "title": "Secondary outline button",
-              "code": "<nys-button label=\"Cancel\" variant=\"outline\"></nys-button>",
+              "title": "Variant Outline",
+              "code": "<nys-button label=\"Button\" variant=\"outline\"></nys-button>",
               "lang": "html"
             },
             {
-              "title": "Button with icons",
-              "code": "<nys-button label=\"Previous\" prefixIcon=\"chevron_left\"></nys-button>\n<nys-button label=\"Next\" suffixIcon=\"chevron_right\"></nys-button>",
+              "title": "Variant Ghost",
+              "code": "<nys-button label=\"Button\" variant=\"ghost\"></nys-button>",
+              "lang": "html"
+            },
+            {
+              "title": "Variant Text",
+              "code": "<nys-button label=\"Button\" variant=\"text\"></nys-button>",
+              "lang": "html"
+            },
+            {
+              "title": "Prefix Icon",
+              "code": "<nys-button label=\"Previous\" prefixIcon=\"chevron_left\"></nys-button>",
+              "lang": "html"
+            },
+            {
+              "title": "Suffix Icon",
+              "code": "<nys-button label=\"Next\" suffixIcon=\"chevron_right\"></nys-button>",
+              "lang": "html"
+            },
+            {
+              "title": "Slotted Icons",
+              "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>",
               "lang": "html"
             },
             {
@@ -2599,12 +2809,38 @@
               "lang": "html"
             },
             {
-              "title": "Link-style button for navigation",
+              "title": "Size Small",
+              "code": "<nys-button label=\"Small\" size=\"sm\"></nys-button>",
+              "lang": "html"
+            },
+            {
+              "title": "Size Large",
+              "code": "<nys-button label=\"Large\" size=\"lg\"></nys-button>",
+              "lang": "html"
+            },
+            {
+              "title": "Full width",
+              "code": "<nys-button label=\"Full width\" fullWidth></nys-button>",
+              "lang": "html"
+            },
+            {
+              "title": "Inverted",
+              "code": "<nys-button label=\"Inverted\" inverted></nys-button>",
+              "lang": "html",
+              "render": "<div style=\"background: #1b1b1b; padding: 1rem;\">\n<nys-button label=\"Inverted\" inverted></nys-button>\n</div>"
+            },
+            {
+              "title": "Disabled",
+              "code": "<nys-button label=\"Disabled\" disabled></nys-button>",
+              "lang": "html"
+            },
+            {
+              "title": "Href",
               "code": "<nys-button label=\"Visit NY.gov\" href=\"https://www.ny.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></nys-button>",
               "lang": "html"
             },
             {
-              "title": "Form submit button",
+              "title": "Type",
               "code": "<nys-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></nys-button>",
               "lang": "html"
             }
@@ -2970,6 +3206,11 @@
               "name": "_hasDescription",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_isStandalone",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_handleMobileQuery",
@@ -3272,13 +3513,13 @@
           "summary": "Checkbox for binary choices or multi-select options.",
           "examples": [
             {
-              "title": "Single checkbox",
-              "code": "<nys-checkbox label=\"I agree to the terms\" name=\"terms\" required></nys-checkbox>",
+              "title": "Single",
+              "code": "<nys-checkbox label=\"I agree to the terms\" name=\"terms\"></nys-checkbox>",
               "lang": "html"
             },
             {
-              "title": "Checkbox group",
-              "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-checkboxgroup>",
+              "title": "Preselected",
+              "code": "<nys-checkbox label=\"I agree to the terms\" name=\"terms\" checked></nys-checkbox>",
               "lang": "html"
             }
           ]
@@ -3791,9 +4032,54 @@
           "summary": "Container for grouping checkboxes as a single form control.",
           "examples": [
             {
-              "title": "Basic checkbox group",
+              "title": "Basic",
               "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>",
               "lang": "html"
+            },
+            {
+              "title": "Tile",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Required",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Optional",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Size Small",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Other Option",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Error Message",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Description",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Description Slot",
+              "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>",
+              "lang": "html"
             }
           ]
         }
@@ -4520,6 +4806,67 @@
             "name": "LitElement",
             "package": "lit"
           },
+          "examples": [
+            {
+              "title": "Basic",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Default Value",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Option Group",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Required",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Optional",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Medium",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Large",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Description",
+              "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"
+            },
+            {
+              "title": "Description Slot",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Error Message",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled Options",
+              "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>",
+              "lang": "html"
+            }
+          ],
           "tagName": "nys-combobox",
           "customElement": true
         }
@@ -5326,23 +5673,53 @@
           "summary": "Date picker with calendar popup and native fallback.",
           "examples": [
             {
-              "title": "Basic date picker",
-              "code": "<nys-datepicker label=\"Birth Date\" required></nys-datepicker>",
+              "title": "Basic",
+              "code": "<nys-datepicker\nid=\"my-datepicker\"\nname=\"my-datepicker\"\nlabel=\"Schedule an appointment\"\ndescription=\"Enter in MM/DD/YYYY format\"\n></nys-datepicker>",
               "lang": "html"
             },
             {
-              "title": "With width and description",
+              "title": "Width Large",
               "code": "<nys-datepicker\nlabel=\"Event Date\"\ndescription=\"Select the date of your event\"\nwidth=\"lg\">\n</nys-datepicker>",
               "lang": "html"
             },
             {
-              "title": "Hide buttons, set start date",
-              "code": "<nys-datepicker\nlabel=\"Appointment\"\nhideTodayButton\nhideClearButton\nstartDate=\"2024-01-01\">\n</nys-datepicker>",
+              "title": "Width Full",
+              "code": "<nys-datepicker\nlabel=\"Event Date\"\ndescription=\"Select the date of your event\"\nwidth=\"full\">\n</nys-datepicker>",
+              "lang": "html"
+            },
+            {
+              "title": "Custom Start Date",
+              "code": "<nys-datepicker\nlabel=\"Appointment\"\nstartDate=\"2024-01-01\">\n</nys-datepicker>",
+              "lang": "html"
+            },
+            {
+              "title": "Without Buttons",
+              "code": "<nys-datepicker\nlabel=\"Appointment\"\nhideTodayButton\nhideClearButton>\n</nys-datepicker>",
+              "lang": "html"
+            },
+            {
+              "title": "Error Message",
+              "code": "<nys-datepicker\nlabel=\"Start Date\"\nshowError\nerrorMessage=\"Please select a valid start date\">\n</nys-datepicker>",
+              "lang": "html"
+            },
+            {
+              "title": "Date Range",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "code": "<nys-datepicker\nlabel=\"Disabled datepicker\"\ndisabled\nvalue=\"2025-01-15\">\n</nys-datepicker>",
               "lang": "html"
             },
             {
-              "title": "With validation error message",
-              "code": "<nys-datepicker\nlabel=\"Start Date\"\nrequired\nerrorMessage=\"Please select a valid start date\">\n</nys-datepicker>",
+              "title": "Required",
+              "code": "<nys-datepicker\nlabel=\"Start Date\"\nrequired>\n</nys-datepicker>",
+              "lang": "html"
+            },
+            {
+              "title": "Optional",
+              "code": "<nys-datepicker\nlabel=\"Start Date\"\noptional>\n</nys-datepicker>",
               "lang": "html"
             }
           ]
@@ -5459,9 +5836,20 @@
           "summary": "Horizontal divider for visual separation of content sections.",
           "examples": [
             {
-              "title": "Basic divider",
+              "title": "Basic",
               "code": "<p>Section one content</p>\n<nys-divider></nys-divider>\n<p>Section two content</p>",
               "lang": "html"
+            },
+            {
+              "title": "Inverted",
+              "code": "<p>Section one content</p>\n<nys-divider inverted></nys-divider>\n<p>Section two content</p>",
+              "lang": "html",
+              "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>"
+            },
+            {
+              "title": "Subtle",
+              "code": "<p>Section one content</p>\n<nys-divider subtle></nys-divider>\n<p>Section two content</p>",
+              "lang": "html"
             }
           ]
         }
@@ -5514,7 +5902,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "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.",
           "name": "NysDropdownMenu",
           "members": [
             {
@@ -5891,7 +6279,16 @@
             "package": "lit"
           },
           "tagName": "nys-dropdownmenu",
-          "customElement": true
+          "customElement": true,
+          "summary": "Action menu with auto-positioning, keyboard support, and screen reader integration.",
+          "examples": [
+            {
+              "title": "Basic",
+              "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>",
+              "lang": "html",
+              "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>"
+            }
+          ]
         }
       ],
       "exports": [
@@ -6070,19 +6467,7 @@
           },
           "tagName": "nys-dropdownmenuitem",
           "customElement": true,
-          "summary": "Dropdown item to display label and provide href link.",
-          "examples": [
-            {
-              "title": "Basic item",
-              "code": "<nys-dropdownmenuitem label=\"Edit\" link=\"/edit\"></nys-dropdownmenuitem>",
-              "lang": "html"
-            },
-            {
-              "title": "Disabled item",
-              "code": "<nys-dropdownmenuitem label=\"Delete\" link=\"/delete\" disabled></nys-dropdownmenuitem>",
-              "lang": "html"
-            }
-          ]
+          "summary": "Dropdown item to display label and provide href link."
         }
       ],
       "exports": [
@@ -6219,7 +6604,19 @@
           },
           "tagName": "nys-errormessage",
           "customElement": true,
-          "summary": "Internal error message display with icon and ARIA alert support."
+          "summary": "Internal error message display with icon and ARIA alert support.",
+          "examples": [
+            {
+              "title": "Basic",
+              "code": "<nys-errormessage showError errorMessage=\"This is an error message\"></nys-errormessage>",
+              "lang": "html"
+            },
+            {
+              "title": "Divider",
+              "code": "<nys-errormessage showError errorMessage=\"This is an error message\" showDivider></nys-errormessage>",
+              "lang": "html"
+            }
+          ]
         }
       ],
       "exports": [
@@ -6262,7 +6659,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.",
+          "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`).",
           "name": "NysFileinput",
           "slots": [
             {
@@ -6458,6 +6855,41 @@
               "privacy": "private",
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "files",
+              "type": {
+                "text": "File[]"
+              },
+              "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."
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "File | null"
+              },
+              "description": "Single-file convenience accessor (parity with `nys-textinput`'s `value`).\nReads the first selected file (or `null`); setting replaces the selection."
+            },
+            {
+              "kind": "method",
+              "name": "setFiles",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "incoming",
+                  "type": {
+                    "text": "File[]"
+                  }
+                }
+              ],
+              "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."
+            },
             {
               "kind": "field",
               "name": "_dragActive",
@@ -6605,6 +7037,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handleBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_dispatchChangeEvent",
@@ -6693,6 +7138,13 @@
             }
           ],
           "events": [
+            {
+              "name": "nys-blur",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Fired when focus leaves the component. Triggers validation."
+            },
             {
               "name": "nys-change",
               "type": {
@@ -6872,13 +7324,48 @@
           "summary": "File input with drag-and-drop, validation, and progress tracking.",
           "examples": [
             {
-              "title": "Single file upload",
-              "code": "<nys-fileinput label=\"Upload document\" accept=\".pdf,.doc\" required></nys-fileinput>",
+              "title": "Basic",
+              "code": "<nys-fileinput\nlabel=\"Upload a file\"\n></nys-fileinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Dropzone",
+              "code": "<nys-fileinput\nlabel=\"Upload a file\"\ndropzone\n></nys-fileinput>",
               "lang": "html"
             },
             {
-              "title": "Multiple files with dropzone",
-              "code": "<nys-fileinput label=\"Upload images\" accept=\"image/*\" multiple dropzone></nys-fileinput>",
+              "title": "Multiple",
+              "code": "<nys-fileinput\nlabel=\"Upload a file\"\nmultiple\n></nys-fileinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Accepted Filetypes",
+              "code": "<nys-fileinput\nlabel=\"Upload a file\"\ndescription=\"Accepted file types: .jpg, .png, .pdf\"\naccept=\"image/png, image/jpeg, .pdf\"\n></nys-fileinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Large",
+              "code": "<nys-fileinput\nlabel=\"Upload a file\"\nwidth=\"lg\"\n></nys-fileinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Large Dropzone",
+              "code": "<nys-fileinput\nlabel=\"Upload a file\"\nwidth=\"lg\"\ndropzone\n></nys-fileinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "code": "<nys-fileinput\nlabel=\"Upload a file\"\ndisabled\n></nys-fileinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Description",
+              "code": "<nys-fileinput\nlabel=\"Upload a file\"\ndescription=\"Make sure the file is not blurry and readable\"\n></nys-fileinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Description Slot",
+              "code": "<nys-fileinput label=\"Upload a file\">\n<div slot=\"description\">Make sure the file is <strong>legible</strong></div>\n</nys-fileinput>",
               "lang": "html"
             }
           ]
@@ -7215,8 +7702,28 @@
           "summary": "Agency footer with auto-layout for contact info and link sections.",
           "examples": [
             {
-              "title": "Simple footer",
-              "code": "<nys-globalfooter\nagencyName=\"Department of Health\"\nhomepageLink=\"/\"\nagencySubheading=\"Protecting and Promoting the Health of New Yorkers\"\n>\n<span>123 Main St, Albany NY</span>\n<span>info@health.ny.gov</span>\n</nys-globalfooter>",
+              "title": "Basic",
+              "code": "<nys-globalfooter agencyName=\"Office of Information Technology Services\"></nys-globalfooter>",
+              "lang": "html"
+            },
+            {
+              "title": "Homepage Link",
+              "code": "<nys-globalfooter\nagencyName=\"Office of Information Technology Services\"\nhomepageLink=\"https://its.ny.gov\"\n></nys-globalfooter>",
+              "lang": "html"
+            },
+            {
+              "title": "Menu Links",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Column Links",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Subheading",
+              "code": "<nys-globalfooter\nagencyName=\"Office of Information Technology Services\"\nagencySubheading=\"Innovating Technology for a Better New York\"\n></nys-globalfooter>",
               "lang": "html"
             }
           ]
@@ -7268,6 +7775,10 @@
             {
               "description": "Navigation content (typically `<ul>` with `<li><a>` links). Auto-sanitized.",
               "name": ""
+            },
+            {
+              "description": "User-account controls (e.g. profile link, settings, log-out button) shown in the header.",
+              "name": "user-actions"
             }
           ],
           "members": [
@@ -7308,7 +7819,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Toggles the NYS brand mark",
+              "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.",
               "attribute": "nysLogo"
             },
             {
@@ -7436,7 +7947,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Toggles the NYS brand mark",
+              "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.",
               "fieldName": "nysLogo",
               "propName": "nyslogo"
             }
@@ -7450,8 +7961,38 @@
           "summary": "Agency header with navigation, mobile menu, and active link highlighting.",
           "examples": [
             {
-              "title": "Basic header",
-              "code": "<nys-globalheader appName=\"My App\" agencyName=\"Department of Health\" homepageLink=\"/\">\n<ul><li><a href=\"/about\">About</a></li><li><a href=\"/contact\">Contact</a></li></ul>\n</nys-globalheader>",
+              "title": "Basic",
+              "code": "<nys-globalheader appName=\"User Registration Form\" agencyName=\"Office of Information Technology Services\"></nys-globalheader>",
+              "lang": "html"
+            },
+            {
+              "title": "Homepage Link",
+              "code": "<nys-globalheader\nagencyName=\"Office of Information Technology Services\"\nhomepageLink=\"https://its.ny.gov\"\n></nys-globalheader>",
+              "lang": "html"
+            },
+            {
+              "title": "Only Agency Name",
+              "code": "<nys-globalheader agencyName=\"Office of Information Technology Services\"></nys-globalheader>",
+              "lang": "html"
+            },
+            {
+              "title": "Only App Name",
+              "code": "<nys-globalheader appName=\"User Registration Form\"></nys-globalheader>",
+              "lang": "html"
+            },
+            {
+              "title": "With Links",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "User Actions",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "With NYS Logo",
+              "code": "<nys-globalheader nysLogo appName=\"Admin Dashboard\"></nys-globalheader>",
               "lang": "html"
             }
           ]
@@ -7497,7 +8038,7 @@
               }
             }
           ],
-          "description": "Clear one or all entries from the cache."
+          "description": "Clear one URL entry, or all cached icons (URL and inline) when no URL is given."
         },
         {
           "kind": "function",
@@ -7516,6 +8057,24 @@
             }
           ],
           "description": "Fetch and parse an SVG from a URL. Returns a cloned SVGElement (safe for multiple consumers)."
+        },
+        {
+          "kind": "function",
+          "name": "parseIcon",
+          "return": {
+            "type": {
+              "text": "SVGElement"
+            }
+          },
+          "parameters": [
+            {
+              "name": "source",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "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)."
         }
       ],
       "exports": [
@@ -7534,6 +8093,14 @@
             "name": "fetchIcon",
             "module": "packages/nys-icon/src/icon-cache.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "parseIcon",
+          "declaration": {
+            "name": "parseIcon",
+            "module": "packages/nys-icon/src/icon-cache.ts"
+          }
         }
       ]
     },
@@ -7581,7 +8148,7 @@
               }
             }
           ],
-          "description": "Register or replace a named icon library. All watching icons using this library will redraw.",
+          "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).",
           "examples": [
             {
               "title": "Register a Font Awesome library with a custom resolver:",
@@ -7721,6 +8288,14 @@
             "module": "./icon-cache"
           }
         },
+        {
+          "kind": "js",
+          "name": "getIconLibrary",
+          "declaration": {
+            "name": "getIconLibrary",
+            "module": "./icon-library-registry"
+          }
+        },
         {
           "kind": "js",
           "name": "IconLibrary",
@@ -7729,6 +8304,14 @@
             "module": "./icon-library-registry"
           }
         },
+        {
+          "kind": "js",
+          "name": "IconResolution",
+          "declaration": {
+            "name": "IconResolution",
+            "module": "./icon-library-registry"
+          }
+        },
         {
           "kind": "js",
           "name": "registerIconLibrary",
@@ -7978,19 +8561,51 @@
           "summary": "SVG icon with swappable library support, size, rotation, and color options.",
           "examples": [
             {
-              "title": "Basic icon (default NYSDS library)",
-              "code": "<nys-icon name=\"check_circle\" size=\"lg\"></nys-icon>",
+              "title": "Basic",
+              "code": "<nys-icon name=\"check_circle\"></nys-icon>",
+              "lang": "html"
+            },
+            {
+              "title": "ARIA Label",
+              "code": "<nys-icon\nname=\"edit_square\"\nariaLabel=\"Edit content\"\n></nys-icon>",
+              "lang": "html"
+            },
+            {
+              "title": "Size relative",
+              "code": "<nys-icon\nname=\"edit_square\"\nsize=\"4xl\"\n></nys-icon>",
+              "lang": "html"
+            },
+            {
+              "title": "Size literal",
+              "code": "<nys-icon\nname=\"edit_square\"\nsize=\"24\"\n></nys-icon>",
+              "lang": "html"
+            },
+            {
+              "title": "Color",
+              "code": "<nys-icon\nname=\"edit_square\"\ncolor=\"#db117d\"\n></nys-icon>",
               "lang": "html"
             },
             {
-              "title": "Font Awesome icon",
-              "code": "<nys-icon name=\"house\" library=\"fa\" size=\"lg\"></nys-icon>",
+              "title": "Rotate",
+              "code": "<nys-icon\nname=\"edit_square\"\nrotate=\"20\"\n></nys-icon>",
               "lang": "html"
             },
             {
-              "title": "Accessible icon with label",
-              "code": "<nys-icon name=\"warning\" ariaLabel=\"Warning\" color=\"var(--nys-color-warning)\"></nys-icon>",
+              "title": "Flip",
+              "code": "<nys-icon\nname=\"edit_square\"\nflip=\"vertical\"\n></nys-icon>",
               "lang": "html"
+            },
+            {
+              "title": "External Library - Font Awesome",
+              "code": "<nys-icon name=\"heart\" library=\"fa\"></nys-icon>",
+              "lang": "html",
+              "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>"
+            },
+            {
+              "title": "External Library - Material",
+              "code": "<nys-icon name=\"favorite\" library=\"material\"></nys-icon>",
+              "lang": "html",
+              "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>"
             }
           ]
         }
@@ -8173,23 +8788,54 @@
               "propName": "inverted"
             },
             {
-              "name": "tooltip",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Tooltip text shown on hover/focus of info icon next to label.",
-              "fieldName": "tooltip",
-              "propName": "tooltip"
+              "name": "tooltip",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Tooltip text shown on hover/focus of info icon next to label.",
+              "fieldName": "tooltip",
+              "propName": "tooltip"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "examples": [
+            {
+              "title": "Basic",
+              "code": "<nys-label label=\"This is a basic nys-label\"></nys-label>",
+              "lang": "html"
+            },
+            {
+              "title": "Required",
+              "code": "<nys-label label=\"This form is required\" flag=\"required\"></nys-label>",
+              "lang": "html"
+            },
+            {
+              "title": "Optional",
+              "code": "<nys-label label=\"This form is required\" flag=\"optional\"></nys-label>",
+              "lang": "html"
+            },
+            {
+              "title": "Description",
+              "code": "<nys-label label=\"Label Text\" description=\"Description text\"></nys-label>",
+              "lang": "html"
+            },
+            {
+              "title": "Description Slot",
+              "code": "<nys-label label=\"Label Text\">\n<p slot=\"description\">Rich text description passed in <strong>HERE</strong></p>\n</nys-label>",
+              "lang": "html"
+            },
+            {
+              "title": "With Tooltip",
+              "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>",
+              "lang": "html"
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
           "tagName": "nys-label",
-          "customElement": true,
-          "summary": "Internal label component for form fields with flag and tooltip support."
+          "customElement": true
         }
       ],
       "exports": [
@@ -8528,9 +9174,28 @@
           "summary": "Accessible modal dialog with focus trap, keyboard support, and action slots.",
           "examples": [
             {
-              "title": "Basic modal",
-              "code": "<nys-modal id=\"confirm-modal\" heading=\"Confirm action\" open>\n<p>Are you sure you want to proceed?</p>\n<div slot=\"actions\">\n<nys-button label=\"Cancel\" variant=\"outline\"></nys-button>\n<nys-button label=\"Confirm\" variant=\"filled\"></nys-button>\n</div>\n</nys-modal>",
-              "lang": "html"
+              "title": "Basic",
+              "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>",
+              "lang": "html",
+              "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>"
+            },
+            {
+              "title": "Subheading",
+              "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>",
+              "lang": "html",
+              "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>"
+            },
+            {
+              "title": "Actions Slot",
+              "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>",
+              "lang": "html",
+              "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>"
+            },
+            {
+              "title": "Mandatory Action",
+              "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>",
+              "lang": "html",
+              "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>"
             }
           ]
         }
@@ -8742,9 +9407,19 @@
           "summary": "Page navigation with numbered links, prev/next buttons, and responsive layout.",
           "examples": [
             {
-              "title": "Basic pagination",
+              "title": "Basic",
+              "code": "<nys-pagination currentPage=\"5\" totalPages=\"10\"></nys-pagination>",
+              "lang": "html"
+            },
+            {
+              "title": "First Page",
               "code": "<nys-pagination currentPage=\"1\" totalPages=\"10\"></nys-pagination>",
               "lang": "html"
+            },
+            {
+              "title": "Last Page",
+              "code": "<nys-pagination currentPage=\"10\" totalPages=\"10\"></nys-pagination>",
+              "lang": "html"
             }
           ]
         }
@@ -9101,8 +9776,8 @@
           "summary": "Radio button for single selection from mutually exclusive options. This is a READONLY data component.",
           "examples": [
             {
-              "title": "Radio group",
-              "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>",
+              "title": "Pre-selected",
+              "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>",
               "lang": "html"
             }
           ]
@@ -9734,9 +10409,54 @@
           "summary": "Container for grouping radio buttons as a single form control.",
           "examples": [
             {
-              "title": "Basic radio group",
+              "title": "Basic",
               "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>",
               "lang": "html"
+            },
+            {
+              "title": "Tile",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Required",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Optional",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Size Small",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Other Option",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Error Message",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Description",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Description Slot",
+              "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>",
+              "lang": "html"
             }
           ]
         }
@@ -9910,14 +10630,7 @@
           },
           "tagName": "nys-option",
           "customElement": true,
-          "summary": "Option item for nys-select dropdown.",
-          "examples": [
-            {
-              "title": "Basic options",
-              "code": "<nys-select>\n<nys-option value=\"ny\">New York</nys-option>\n<nys-option value=\"ca\" disabled>California</nys-option>\n</nys-select>",
-              "lang": "html"
-            }
-          ]
+          "summary": "Option item for nys-select dropdown."
         }
       ],
       "exports": [
@@ -10414,14 +11127,63 @@
           "summary": "Dropdown select for choosing one option from a list.",
           "examples": [
             {
-              "title": "Basic select",
-              "code": "<nys-select label=\"Select borough\">\n<option value=\"bronx\">The Bronx</option>\n<option value=\"brooklyn\">Brooklyn</option>\n<option value=\"manhattan\">Manhattan</option>\n</nys-select>",
+              "title": "Basic",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Default value",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Option Group",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled Option",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Required",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Optional",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Width small",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Width medium",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Width large",
+              "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>",
               "lang": "html"
             },
             {
-              "title": "With option groups",
-              "code": "<nys-select label=\"Select service\">\n<optgroup label=\"Transportation\">\n<option value=\"mta\">MTA</option>\n<option value=\"dmv\">DMV</option>\n</optgroup>\n</nys-select>",
+              "title": "Slotted Description",
+              "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>",
               "lang": "html"
+            },
+            {
+              "title": "Error Message",
+              "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>"
             }
           ]
         }
@@ -10538,13 +11300,13 @@
           "summary": "Skip navigation link for keyboard accessibility. Hidden until focused.",
           "examples": [
             {
-              "title": "Default skip link",
-              "code": "<nys-skipnav></nys-skipnav>\n<main id=\"main-content\">...</main>",
+              "title": "Basic",
+              "code": "<nys-skipnav></nys-skipnav>",
               "lang": "html"
             },
             {
               "title": "Custom target",
-              "code": "<nys-skipnav href=\"#content-area\"></nys-skipnav>",
+              "code": "<nys-skipnav href=\"#content-area\"></nys-skipnav>\n<p id=\"content-area\">...</p>",
               "lang": "html"
             }
           ]
@@ -10732,19 +11494,7 @@
           },
           "tagName": "nys-step",
           "customElement": true,
-          "summary": "Individual step for use within nys-stepper with navigation support.",
-          "examples": [
-            {
-              "title": "Step with page navigation",
-              "code": "<nys-step label=\"Personal Info\" href=\"/step-1\"></nys-step>",
-              "lang": "html"
-            },
-            {
-              "title": "Step with SPA navigation (no href)",
-              "code": "step.addEventListener('nys-step-click', (e) => {\ne.preventDefault(); // no href set, but good practice\nshowStepContent(e.detail.label);\n});",
-              "lang": "js"
-            }
-          ]
+          "summary": "Individual step for use within nys-stepper with navigation support."
         }
       ],
       "exports": [
@@ -10955,24 +11705,16 @@
           "summary": "Multi-step progress indicator with navigation and mobile-friendly compact view.",
           "examples": [
             {
-              "title": "Basic stepper",
-              "code": "<nys-stepper label=\"Application Progress\">\n<nys-step label=\"Personal Info\" current></nys-step>\n<nys-step label=\"Contact Details\"></nys-step>\n<nys-step label=\"Review\"></nys-step>\n</nys-stepper>",
-              "lang": "html"
-            },
-            {
-              "title": "Grid layout with sidebar placement",
-              "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>",
-              "lang": "html"
-            },
-            {
-              "title": "Navigation buttons in actions slot",
-              "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>",
-              "lang": "html"
+              "title": "Basic",
+              "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>",
+              "lang": "html",
+              "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>"
             },
             {
-              "title": "SPA / programmatic navigation",
-              "code": "let currentStep = 0; // furthest reached\nlet viewingStep = 0; // currently displayed\n\nfunction updateStepper(steps) {\nsteps.forEach((step, i) => {\nstep.toggleAttribute('current', i === currentStep);\nstep.toggleAttribute('selected', i === viewingStep);\n});\n}\n\ndocument.querySelector('nys-stepper').addEventListener('nys-step-click', (e) => {\ne.preventDefault();\nconst steps = Array.from(document.querySelectorAll('nys-step'));\nconst clicked = e.composedPath().find(el => el.tagName?.toLowerCase() === 'nys-step');\nconst index = steps.indexOf(clicked);\nif (index !== -1) { viewingStep = index; updateStepper(steps); }\n});\n\n// Advance to next step (call on form submit / \"Continue\" click)\nfunction advance(steps) {\nif (currentStep < steps.length - 1) {\ncurrentStep++;\nviewingStep = currentStep;\nupdateStepper(steps);\n}\n}",
-              "lang": "js"
+              "title": "Actions slot",
+              "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>",
+              "lang": "html",
+              "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>"
             }
           ]
         }
@@ -11212,8 +11954,13 @@
           "customElement": true,
           "examples": [
             {
-              "title": "`<nys-tab>` and `<nys-tabpanel>` should always be wrapped by `<nys-tabgroup>`",
-              "code": "<!-- Always place <nys-tab> elements inside a <nys-tabgroup>. -->\n<nys-tabgroup name=\"My Tabs\">\n<nys-tab label=\"Overview\"></nys-tab>\n<nys-tab label=\"Details\" selected></nys-tab>\n<nys-tab label=\"Archived\" disabled></nys-tab>\n<nys-tabpanel><p>Overview content</p></nys-tabpanel>\n<nys-tabpanel><p>Details content (shown by default)</p></nys-tabpanel>\n<nys-tabpanel><p>Archived content</p></nys-tabpanel>\n</nys-tabgroup>",
+              "title": "Disabled",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Preselected",
+              "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>",
               "lang": "html"
             }
           ]
@@ -11475,13 +12222,14 @@
           "customElement": true,
           "examples": [
             {
-              "title": "Disable a tab using the `disabled` attribute on `<nys-tab>`.",
-              "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>",
-              "lang": "html"
+              "title": "Basic",
+              "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>",
+              "lang": "html",
+              "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>"
             },
             {
-              "title": "Pre-select a tab using the `selected` attribute on `<nys-tab>`.",
-              "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>",
+              "title": "Explicit Ordering",
+              "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>",
               "lang": "html"
             }
           ]
@@ -11551,14 +12299,7 @@
             "package": "lit"
           },
           "tagName": "nys-tabpanel",
-          "customElement": true,
-          "examples": [
-            {
-              "title": "Panel content is wrapped by `<nys-tabpanel>`.",
-              "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>",
-              "lang": "html"
-            }
-          ]
+          "customElement": true
         }
       ],
       "exports": [
@@ -11923,6 +12664,33 @@
             "name": "LitElement",
             "package": "lit"
           },
+          "examples": [
+            {
+              "title": "Basic",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Striped",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Bordered",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Sortable",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Downloadable",
+              "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>",
+              "lang": "html"
+            }
+          ],
           "tagName": "nys-table",
           "customElement": true
         }
@@ -12065,7 +12833,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes textarea read-only but focusable.",
+              "description": "Makes textarea readonly but focusable.",
               "attribute": "readonly",
               "reflects": true
             },
@@ -12435,7 +13203,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes textarea read-only but focusable.",
+              "description": "Makes textarea readonly but focusable.",
               "fieldName": "readonly",
               "propName": "readonly"
             },
@@ -12559,13 +13327,58 @@
           "summary": "Multi-line text input for comments, descriptions, and feedback.",
           "examples": [
             {
-              "title": "Basic textarea",
-              "code": "<nys-textarea label=\"Comments\" rows=\"4\"></nys-textarea>",
+              "title": "Basic",
+              "code": "<nys-textarea label=\"Comments\"></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "code": "<nys-textarea label=\"Comments\" disabled></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Readonly",
+              "code": "<nys-textarea label=\"Comments\" readonly value=\"You can see me but not edit me\"></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Required",
+              "code": "<nys-textarea label=\"Describe the incident\" required></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Optional",
+              "code": "<nys-textarea label=\"Comments\" optional></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Max length",
+              "code": "<nys-textarea label=\"Comments\" maxlength=\"100\"></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Small",
+              "code": "<nys-textarea label=\"Comments\" width=\"sm\"></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Medium",
+              "code": "<nys-textarea label=\"Comments\" width=\"md\"></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Large",
+              "code": "<nys-textarea label=\"Comments\" width=\"lg\"></nys-textarea>",
+              "lang": "html"
+            },
+            {
+              "title": "Description",
+              "code": "<nys-textarea label=\"Describe the incident\" description=\"Please provide details\"></nys-textarea>",
               "lang": "html"
             },
             {
-              "title": "Required with description",
-              "code": "<nys-textarea label=\"Describe the incident\" description=\"Please provide details\" required></nys-textarea>",
+              "title": "Description Slot",
+              "code": "<nys-textarea label=\"Describe the incident\">\n<div slot=\"description\">Please provide details</div>\n</nys-textarea>",
               "lang": "html"
             }
           ]
@@ -13348,23 +14161,68 @@
           "summary": "Text input for short single-line data with validation and masking support.",
           "examples": [
             {
-              "title": "Basic text input",
-              "code": "<nys-textinput label=\"Full Name\" required></nys-textinput>",
+              "title": "Basic",
+              "code": "<nys-textinput label=\"Full Name\"></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "code": "<nys-textinput label=\"Email Address\" disabled></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Readonly",
+              "code": "<nys-textinput label=\"Email Address\" readonly value=\"You can see me but not edit me\"></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Required",
+              "code": "<nys-textinput label=\"Email Address\" required></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Optional",
+              "code": "<nys-textinput label=\"Email Address\" optional></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Small",
+              "code": "<nys-textinput label=\"Zip Code\" width=\"sm\"></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Medium",
+              "code": "<nys-textinput label=\"City\" width=\"md\"></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Width Large",
+              "code": "<nys-textinput label=\"Email Address\" width=\"lg\"></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Description",
+              "code": "<nys-textinput label=\"Email Address\" description=\"Only valid ny.gov emails are accepted.\"></nys-textinput>",
+              "lang": "html"
+            },
+            {
+              "title": "Description Slot",
+              "code": "<nys-textinput label=\"Email Address\">\n<div slot=\"description\">Only valid <strong>ny.gov</strong> emails are accepted.</div>\n</nys-textinput>",
               "lang": "html"
             },
             {
-              "title": "Required Email",
-              "code": "<nys-textinput type=\"email\" label=\"Email Address\" required></nys-textinput>",
+              "title": "Masking",
+              "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>",
               "lang": "html"
             },
             {
-              "title": "Phone with masking",
-              "code": "<nys-textinput type=\"tel\" label=\"Phone Number\"></nys-textinput>",
+              "title": "Max Min Values",
+              "code": "<nys-textinput type=\"number\" label=\"Age\" min=\"18\" max=\"99\" width=\"sm\"></nys-textinput>",
               "lang": "html"
             },
             {
-              "title": "Search with button",
-              "code": "<nys-textinput type=\"search\" placeholder=\"Search\">\n<nys-button slot=\"endButton\" label=\"Search\" prefixIcon=\"search\"></nys-button>\n</nys-textinput>",
+              "title": "Suffix Button",
+              "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>",
               "lang": "html"
             }
           ]
@@ -13760,13 +14618,38 @@
           "summary": "Toggle switch for binary settings with immediate effect.",
           "examples": [
             {
-              "title": "Basic toggle",
-              "code": "<nys-toggle label=\"Enable notifications\" name=\"notifications\"></nys-toggle>",
+              "title": "Basic",
+              "code": "<nys-toggle label=\"Enable notifications\" name=\"notifications\" value=\"enabled-notifications\"></nys-toggle>",
               "lang": "html"
             },
             {
-              "title": "Dark mode toggle",
-              "code": "<nys-toggle label=\"Dark mode\" description=\"Adjust display for low light\" checked></nys-toggle>",
+              "title": "Checked",
+              "code": "<nys-toggle label=\"Dark Mode\" name=\"theme\" value=\"dark\" checked></nys-toggle>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "code": "<nys-toggle label=\"Opt Out of emails\" name=\"toggle-switch\" value=\"emails\" disabled></nys-toggle>",
+              "lang": "html"
+            },
+            {
+              "title": "Hide Icon",
+              "code": "<nys-toggle label=\"No icon on the toggle knob\" name=\"icon\" value=\"no-icon\" noIcon></nys-toggle>",
+              "lang": "html"
+            },
+            {
+              "title": "Size small",
+              "code": "<nys-toggle label=\"Tiny but mighty\" name=\"sm-size\" value=\"sm-size\" size=\"sm\"></nys-toggle>",
+              "lang": "html"
+            },
+            {
+              "title": "Description",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Description Slot",
+              "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>",
               "lang": "html"
             }
           ]
@@ -14180,13 +15063,18 @@
           "summary": "Contextual tooltip with auto-positioning, keyboard support, and screen reader integration.",
           "examples": [
             {
-              "title": "Tooltip for button",
-              "code": "<nys-button id=\"help-btn\" label=\"Help\" circle icon=\"help\"></nys-button>\n<nys-tooltip for=\"help-btn\" text=\"Click for assistance\"></nys-tooltip>",
+              "title": "Basic",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Position",
+              "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>",
               "lang": "html"
             },
             {
-              "title": "Positioned tooltip",
-              "code": "<nys-icon id=\"info-icon\" name=\"info\"></nys-icon>\n<nys-tooltip for=\"info-icon\" text=\"Additional details\" position=\"right\"></nys-tooltip>",
+              "title": "Inverted",
+              "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>",
               "lang": "html"
             }
           ]
@@ -14251,8 +15139,8 @@
           "summary": "Universal NYS footer with logo and statewide links. Required site-wide.",
           "examples": [
             {
-              "title": "Standard usage",
-              "code": "<nys-globalfooter>...</nys-globalfooter>\n<nys-unavfooter></nys-unavfooter>",
+              "title": "Basic",
+              "code": "<nys-unavfooter></nys-unavfooter>",
               "lang": "html"
             }
           ]
@@ -14298,7 +15186,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "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.",
           "name": "NysUnavHeader",
           "members": [
             {
@@ -14474,6 +15362,16 @@
               ]
             }
           ],
+          "events": [
+            {
+              "description": "Fired when a language is selected. Detail: `{language: {code, label, url?}}`. Cancelable; `preventDefault()` overrides the default Smartling redirect.",
+              "name": "nys-language-select"
+            },
+            {
+              "description": "Fired when a search is submitted. Detail: `{query}`. Cancelable; `preventDefault()` overrides the default search redirect.",
+              "name": "nys-search-submit"
+            }
+          ],
           "attributes": [
             {
               "name": "trustbarVisible",
@@ -14561,7 +15459,40 @@
             "package": "lit"
           },
           "tagName": "nys-unavheader",
-          "customElement": true
+          "customElement": true,
+          "summary": "Universal NYS header with trust bar, search, and translation. Required site-wide.",
+          "examples": [
+            {
+              "title": "Basic",
+              "code": "<nys-unavheader></nys-unavheader>",
+              "lang": "html"
+            },
+            {
+              "title": "Hide search",
+              "code": "<nys-unavheader hideSearch></nys-unavheader>",
+              "lang": "html"
+            },
+            {
+              "title": "Hide translate",
+              "code": "<nys-unavheader hideTranslate></nys-unavheader>",
+              "lang": "html"
+            },
+            {
+              "title": "Custom Search URL",
+              "code": "<nys-unavheader searchUrl=\"https://designsystem.ny.gov/search/?q=\"></nys-unavheader>",
+              "lang": "html"
+            },
+            {
+              "title": "Custom Language List",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Custom Language List JS",
+              "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>",
+              "lang": "html"
+            }
+          ]
         }
       ],
       "exports": [
@@ -14886,8 +15817,38 @@
           "summary": "YouTube video player with thumbnail preview and accessibility announcements.",
           "examples": [
             {
-              "title": "Basic usage",
-              "code": "<nys-video\nvideourl=\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\"\ntitleText=\"Video Title\"\n></nys-video>",
+              "title": "Basic",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Thumbnail",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Autoplay",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Start Time",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Disabled",
+              "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>",
+              "lang": "html"
+            },
+            {
+              "title": "Size full",
+              "code": "<nys-video\nsize=\"full\"\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"Small (width: 320-439px)\"\n></nys-video>",
+              "lang": "html"
+            },
+            {
+              "title": "Size small",
+              "code": "<nys-video\nsize=\"sm\"\nvideourl=\"https://www.youtube.com/watch?v=TBfFzt0150Q\"\ntitleText=\"Small (width: 320-439px)\"\n></nys-video>",
               "lang": "html"
             }
           ]