@nysds/components 1.19.2 → 1.19.3

package/dist/packages/nys-tab/src/nys-tabgroup.d.ts

@@ -23,25 +23,87 @@ import { LitElement } from "lit";
  *   moved into internal shadow-DOM containers on `slotchange`; the slot
  *   itself is not rendered visibly.
  *
- * @example Disable a tab using the `disabled` attribute on `<nys-tab>`.
+ * @example Basic
  * ```html
- * <nys-tabgroup name="Account Settings">
- *   <nys-tab label="Profile"></nys-tab>
- *   <nys-tab label="Security"></nys-tab>
- *   <nys-tab label="Notifications" disabled></nys-tab>
- *   <nys-tabpanel><p>Manage your profile information.</p></nys-tabpanel>
- *   <nys-tabpanel><p>Update your password and 2FA settings.</p></nys-tabpanel>
- *   <nys-tabpanel><p>Notification preferences (coming soon).</p></nys-tabpanel>
- * </nys-tabgroup>
+ * <nys-tabgroup>
+ *   <nys-tab label="Marcy"></nys-tab>
+ *   <nys-tab label="Algonquin"></nys-tab>
+ *   <nys-tab label="Haystack"></nys-tab>
+ *   // rest of tabs
+ *   <nys-tabpanel
+ *     >Mount Marcy is the tallest peak in the Adirondacks. It has an elevation
+ *     of 5344 feet with 3166 feet of elevation gain. The roundtrip hike to the
+ *     top is 14.8 miles and is an out-and-back route.
+ *   </nys-tabpanel>
+ *   <nys-tabpanel
+ *     >Algonquin Peak is the 2nd tallest peak in the Adirondacks. It has an
+ *     elevation of 5114 feet with 3050 feet of elevation gain. The roundtrip
+ *     hike to the top is 7.8 miles and is an out-and-back route.</nys-tabpanel
+ *   >
+ *   <nys-tabpanel
+ *     >Mount Haystack is the 3rd tallest peak in the Adirondacks. It has an
+ *     elevation of 4960 feet with 4000 feet of elevation gain. The roundtrip
+ *     hike to the top is 16.4 miles and is an out-and-back
+ *     route.</nys-tabpanel
+ *   >
+ *   // rest of tab panel content
+ *  </nys-tabgroup>
+ * ```
+ *
+ * @render Basic
+ * ```html
+ * <nys-tabgroup>
+ *   <nys-tab label="Marcy"></nys-tab>
+ *   <nys-tab label="Algonquin"></nys-tab>
+ *   <nys-tab label="Haystack"></nys-tab>
+ *   <nys-tab label="Skylight" id="tab4"></nys-tab>
+ *   <nys-tab label="Whiteface" id="tab5"></nys-tab>
+ *   <nys-tabpanel
+ *     >Mount Marcy is the tallest peak in the Adirondacks. It has an elevation
+ *     of 5344 feet with 3166 feet of elevation gain. The roundtrip hike to the
+ *     top is 14.8 miles and is an out-and-back route.
+ *   </nys-tabpanel>
+ *   <nys-tabpanel
+ *     >Algonquin Peak is the 2nd tallest peak in the Adirondacks. It has an
+ *     elevation of 5114 feet with 3050 feet of elevation gain. The roundtrip
+ *     hike to the top is 7.8 miles and is an out-and-back route.</nys-tabpanel
+ *   >
+ *   <nys-tabpanel
+ *     >Mount Haystack is the 3rd tallest peak in the Adirondacks. It has an
+ *     elevation of 4960 feet with 4000 feet of elevation gain. The roundtrip
+ *     hike to the top is 16.4 miles and is an out-and-back
+ *     route.</nys-tabpanel
+ *   >
+ *   <nys-tabpanel
+ *     >Mount Skylight is the 4th tallest peak in the Adirondacks. It has an
+ *     elevation of 4926 feet with 5100 feet of elevation gain. The roundtrip
+ *     hike to the top is 16 miles and is an out-and-back route.</nys-tabpanel
+ *    >
+ *    <nys-tabpanel
+ *      >Whiteface is the 5th tallest peak in the Adirondacks. It has an
+ *      elevation of 4867 feet with 3050 feet of elevation gain. The roundtrip
+ *      hike to the top is 7.2 miles and is an out-and-back route.</nys-tabpanel
+ *    >
+ *    <p style="padding: 1rem;">
+ *      <strong>Note:</strong> The content in the tab panels was gathered from
+ *      <a href="https://www.lakeplacid.com/do/outdoors/summerfall/hiking"
+ *        >lakeplacid.com</a
+ *      >
+ *      and may not be completely accurate. This is meant to be a demo of how
+ *      the component works, not a hiking guide.
+ *    </p>
+ *  </nys-tabgroup>
  * ```
  *
- * @example Pre-select a tab using the `selected` attribute on `<nys-tab>`.
+ * @example Explicit Ordering
  * ```html
- * <nys-tabgroup name="Reports">
- *   <nys-tab label="Summary"></nys-tab>
- *   <nys-tab label="Details" selected></nys-tab>
- *   <nys-tabpanel><p>Summary view</p></nys-tabpanel>
- *   <nys-tabpanel><p>Detailed view (shown by default)</p></nys-tabpanel>
+ * <nys-tabgroup id="explicit-ordering">
+ *   <nys-tab label="1st Tab" id="tab1"></nys-tab>
+ *   <nys-tab label="2nd Tab" id="tab2"></nys-tab>
+ *   <nys-tab label="3rd Tab" id="tab3"></nys-tab>
+ *   <nys-tabpanel aria-labelledby="tab2">Content for tab 2</nys-tabpanel>
+ *   <nys-tabpanel aria-labelledby="tab3">Content for tab 3</nys-tabpanel>
+ *   <nys-tabpanel aria-labelledby="tab1">Content for tab 1</nys-tabpanel>
  * </nys-tabgroup>
  * ```
  */

package/dist/packages/nys-tab/src/nys-tabpanel.d.ts

@@ -12,23 +12,6 @@ import { LitElement } from "lit";
  *
  * @slot - Default slot for panel content. Rendered inside a wrapper `<div>`
  *   with the `.nys-tabpanel` class for styling.
- *
- * @example Panel content is wrapped by `<nys-tabpanel>`.
- * ```html
- * <!-- Panels are paired by position with <nys-tab> elements in the same <nys-tabgroup>. -->
- * <nys-tabgroup name="Steps">
- *   <nys-tab label="Step 1"></nys-tab>
- *   <nys-tab label="Step 2"></nys-tab>
- *   <nys-tabpanel>
- *     <h2>Step 1: Enter your information</h2>
- *     <p>Fill out the form below.</p>
- *   </nys-tabpanel>
- *   <nys-tabpanel>
- *     <h2>Step 2: Review and submit</h2>
- *     <p>Confirm your details before submitting.</p>
- *   </nys-tabpanel>
- * </nys-tabgroup>
- * ```
  */
 export declare class NysTabpanel extends LitElement {
     static styles: import("lit").CSSResult;

package/dist/packages/nys-table/src/nys-table.d.ts

@@ -10,6 +10,77 @@ import { LitElement } from "lit";
  *   Detail: { columnIndex: number, columnLabel: string, sortDirection: "asc" | "desc" | "none" }
  *
  * @method downloadFile - Triggers download of the CSV file if `download` is set.
+ *
+ * @example Basic
+ * ```html
+ * <nys-table id="table1" name="table1">
+ *   <table>
+ *     <caption>New York State High Peaks and Popular Hikes</caption>
+ *     <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
+ *     <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
+ *     <tr><td>Algonquin</td><td>5,114</td><td>Northeast Trail</td></tr>
+ *     <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
+ *     <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
+ *     <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
+ *   </table>
+ * </nys-table>
+ * ```
+ *
+ * @example Striped
+ * ```html
+ * <nys-table id="table2" name="table2" striped>
+ *   <table>
+ *     <caption>New York State High Peaks and Popular Hikes</caption>
+ *     <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
+ *     <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
+ *     <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
+ *     <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
+ *     <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
+ *   </table>
+ * </nys-table>
+ * ```
+ *
+ * @example Bordered
+ * ```html
+ * <nys-table id="table3" name="table3" bordered>
+ *   <table>
+ *     <caption>New York State High Peaks and Popular Hikes</caption>
+ *     <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
+ *     <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
+ *     <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
+ *     <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
+ *     <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
+ *   </table>
+ * </nys-table>
+ * ```
+ *
+ * @example Sortable
+ * ```html
+ * <nys-table id="table4" name="table4" sortable>
+ *   <table>
+ *     <caption>New York State High Peaks and Popular Hikes</caption>
+ *     <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
+ *     <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
+ *     <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
+ *     <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
+ *     <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
+ *   </table>
+ * </nys-table>
+ * ```
+ *
+ * @example Downloadable
+ * ```html
+ * <nys-table id="table5" name="table5" download="path/to/downloadable/version/of/table.filetype">
+ *   <table>
+ *     <caption>New York State High Peaks and Popular Hikes</caption>
+ *     <tr><th>Mountain</th><th>Peak Height (ft)</th><th>Hike Name</th></tr>
+ *     <tr><td>Marcy</td><td>5,344</td><td>Van Hoevenberg Trail</td></tr>
+ *     <tr><td>Haystack</td><td>4,960</td><td>Johns Brook Trail</td></tr>
+ *     <tr><td>Skylight</td><td>4,926</td><td>Lake Tear Trail</td></tr>
+ *     <tr><td>Whiteface</td><td>4,867</td><td>Whiteface Mountain Trail</td></tr>
+ *   </table>
+ * </nys-table>
+ * ```
  */
 export declare class NysTable extends LitElement {
     static styles: import("lit").CSSResult;

package/dist/packages/nys-textarea/src/nys-textarea.d.ts

@@ -16,14 +16,61 @@ import { LitElement } from "lit";
  * @fires nys-blur - Fired when textarea loses focus. Triggers validation.
  * @fires nys-select - Fired when user selects text. Detail: `{id, value}`.
  *
- * @example Basic textarea
+ * @example Basic
  * ```html
- * <nys-textarea label="Comments" rows="4"></nys-textarea>
+ * <nys-textarea label="Comments"></nys-textarea>
  * ```
  *
- * @example Required with description
+ * @example Disabled
  * ```html
- * <nys-textarea label="Describe the incident" description="Please provide details" required></nys-textarea>
+ * <nys-textarea label="Comments" disabled></nys-textarea>
+ * ```
+ *
+ * @example Readonly
+ * ```html
+ * <nys-textarea label="Comments" readonly value="You can see me but not edit me"></nys-textarea>
+ * ```
+ *
+ * @example Required
+ * ```html
+ * <nys-textarea label="Describe the incident" required></nys-textarea>
+ * ```
+ *
+ * @example Optional
+ * ```html
+ * <nys-textarea label="Comments" optional></nys-textarea>
+ * ```
+ *
+ * @example Max length
+ * ```html
+ * <nys-textarea label="Comments" maxlength="100"></nys-textarea>
+ * ```
+ *
+ * @example Width Small
+ * ```html
+ * <nys-textarea label="Comments" width="sm"></nys-textarea>
+ * ```
+ *
+ * @example Width Medium
+ * ```html
+ * <nys-textarea label="Comments" width="md"></nys-textarea>
+ * ```
+ *
+ * @example Width Large
+ * ```html
+ * <nys-textarea label="Comments" width="lg"></nys-textarea>
+ * ```
+ *
+ * @example Description
+ * ```html
+ * <nys-textarea label="Describe the incident" description="Please provide details"></nys-textarea>
+ * ```
+ *
+ * @example Description Slot
+ * ```html
+ * <nys-textarea label="Describe the incident">
+ *  <div slot="description">Please provide details</div>
+ * </nys-textarea>
  * ```
  */
 export declare class NysTextarea extends LitElement {
@@ -50,7 +97,7 @@ export declare class NysTextarea extends LitElement {
     value: string;
     /** Prevents interaction. */
     disabled: boolean;
-    /** Makes textarea read-only but focusable. */
+    /** Makes textarea readonly but focusable. */
     readonly: boolean;
     /** Marks as required. Shows "Required" flag and validates on blur. */
     required: boolean;

package/dist/packages/nys-textinput/src/nys-textinput.d.ts

@@ -17,25 +17,79 @@ import { LitElement } from "lit";
  * @fires nys-focus - Fired when input gains focus.
  * @fires nys-blur - Fired when input loses focus. Triggers validation.
  *
- * @example Basic text input
+ * @example Basic
  * ```html
- * <nys-textinput label="Full Name" required></nys-textinput>
+ * <nys-textinput label="Full Name"></nys-textinput>
  * ```
  *
- * @example Required Email
+ * @example Disabled
  * ```html
- * <nys-textinput type="email" label="Email Address" required></nys-textinput>
+ * <nys-textinput label="Email Address" disabled></nys-textinput>
  * ```
  *
- * @example Phone with masking
+ * @example Readonly
  * ```html
- * <nys-textinput type="tel" label="Phone Number"></nys-textinput>
+ * <nys-textinput label="Email Address" readonly value="You can see me but not edit me"></nys-textinput>
  * ```
  *
- * @example Search with button
+ * @example Required
  * ```html
- * <nys-textinput type="search" placeholder="Search">
- *   <nys-button slot="endButton" label="Search" prefixIcon="search"></nys-button>
+ * <nys-textinput label="Email Address" required></nys-textinput>
+ * ```
+ *
+ * @example Optional
+ * ```html
+ * <nys-textinput label="Email Address" optional></nys-textinput>
+ * ```
+ *
+ * @example Width Small
+ * ```html
+ * <nys-textinput label="Zip Code" width="sm"></nys-textinput>
+ * ```
+ *
+ * @example Width Medium
+ * ```html
+ * <nys-textinput label="City" width="md"></nys-textinput>
+ * ```
+ *
+ * @example Width Large
+ * ```html
+ * <nys-textinput label="Email Address" width="lg"></nys-textinput>
+ * ```
+ *
+ * @example Description
+ * ```html
+ * <nys-textinput label="Email Address" description="Only valid ny.gov emails are accepted."></nys-textinput>
+ * ```
+ *
+ * @example Description Slot
+ * ```html
+ * <nys-textinput label="Email Address">
+ *  <div slot="description">Only valid <strong>ny.gov</strong> emails are accepted.</div>
+ * </nys-textinput>
+ * ```
+ *
+ * @example Masking
+ * ```html
+ * <nys-textinput type="tel" label="Phone Number">
+ *  <div slot="description">Some types, such as <code>tel</code> have automatic masking available.</div>
+ * </nys-textinput>
+ * ```
+ *
+ * @example Max Min Values
+ * ```html
+ * <nys-textinput type="number" label="Age" min="18" max="99" width="sm"></nys-textinput>
+ * ```
+ *
+ * @example Suffix Button
+ * ```html
+ * <nys-textinput id="search-demo" type="search" placeholder="Search">
+ *   <nys-button
+ *     slot="endButton"
+ *     ariaLabel="Search"
+ *     prefixIcon="search"
+ *     onclick="alert('searching for: ' + document.getElementById('search-demo').value)"
+ *   ></nys-button>
  * </nys-textinput>
  * ```
  */

package/dist/packages/nys-toggle/src/nys-toggle.d.ts

@@ -14,14 +14,50 @@ import { LitElement } from "lit";
  * @fires nys-focus - Fired when toggle gains focus.
  * @fires nys-blur - Fired when toggle loses focus.
  *
- * @example Basic toggle
+ * @example Basic
  * ```html
- * <nys-toggle label="Enable notifications" name="notifications"></nys-toggle>
+ * <nys-toggle label="Enable notifications" name="notifications" value="enabled-notifications"></nys-toggle>
  * ```
  *
- * @example Dark mode toggle
+ * @example Checked
  * ```html
- * <nys-toggle label="Dark mode" description="Adjust display for low light" checked></nys-toggle>
+ * <nys-toggle label="Dark Mode" name="theme" value="dark" checked></nys-toggle>
+ * ```
+ *
+ * @example Disabled
+ * ```html
+ * <nys-toggle label="Opt Out of emails" name="toggle-switch" value="emails" disabled></nys-toggle>
+ * ```
+ *
+ * @example Hide Icon
+ * ```html
+ * <nys-toggle label="No icon on the toggle knob" name="icon" value="no-icon" noIcon></nys-toggle>
+ * ```
+ *
+ * @example Size small
+ * ```html
+ *  <nys-toggle label="Tiny but mighty" name="sm-size" value="sm-size" size="sm"></nys-toggle>
+ * ```
+ *
+ * @example Description
+ * ```html
+ * <nys-toggle
+ *   label="Opt Out of emails"
+ *   description="An email address is recommended to be on file for contact information."
+ *   name="toggle-switch"
+ *   value="emails"
+ * ></nys-toggle>
+ * ```
+ *
+ * @example Description Slot
+ * ```html
+ * <nys-toggle
+ *   label="Opt Out of emails"
+ *   name="toggle-switch"
+ *   value="emails"
+ * >
+ *   <p slot="description">We <strong>REALLY</strong> encourage you to keep emails enabled for contact purposes.</p>
+ * </nys-toggle>
  * ```
  */
 export declare class NysToggle extends LitElement {

package/dist/packages/nys-tooltip/src/nys-tooltip.d.ts

@@ -5,19 +5,51 @@ import { LitElement } from "lit";
  * Link to a trigger element via `for` attribute matching the trigger's `id`. Tooltip appears on hover or focus
  * and dismisses on blur, mouse leave, or Escape key. Use for supplementary info only—not critical content.
  *
+ * @accessibility
+ * - Linked to trigger element via `for` attribute (must match trigger's `id`).
+ * - `role="tooltip"` with dynamic `aria-hidden` based on visibility.
+ * - Keyboard accessible: Tab to trigger, Enter/Space shows tooltip, Escape dismisses.
+ * - Screen readers announce tooltip text when visible.
+ * - Visual focus indicators on trigger elements meet WCAG 2.2 AA standards.
+ * - Auto-positioning respects viewport bounds to prevent content loss.
+ *
  * @summary Contextual tooltip with auto-positioning, keyboard support, and screen reader integration.
  * @element nys-tooltip
  *
- * @example Tooltip for button
+ * @example  Basic
+ * ```html
+ * <div style="display: flex; justify-content: center; gap: 5px; padding: 40px;">
+ *   <nys-tooltip for="my-button" text="I am a tooltip."></nys-tooltip>
+ *   <nys-button  id="my-button" label="Hover Me"></nys-button>
+ * </div>
+ * ```
+ *
+ * @example Position
  * ```html
- * <nys-button id="help-btn" label="Help" circle icon="help"></nys-button>
- * <nys-tooltip for="help-btn" text="Click for assistance"></nys-tooltip>
+ * <div style="display: flex; justify-content: center; gap: 5px; padding: 40px;">
+ *   <p>Hover over the icon</p>
+ *   <nys-tooltip
+ *     for="my-icon2"
+ *     text="I am a tooltip."
+ *     position="right"
+ *   >
+ *   </nys-tooltip>
+ *   <nys-icon id="my-icon2" name="info" size="3xl"></nys-icon>
+ * </div>
  * ```
  *
- * @example Positioned tooltip
+ * @example Inverted
  * ```html
- * <nys-icon id="info-icon" name="info"></nys-icon>
- * <nys-tooltip for="info-icon" text="Additional details" position="right"></nys-tooltip>
+ * <div style="background-color: #1b1b1b; color: #ffffff; padding: 40px; display: flex; gap: 5px">
+ *   <p>Hover over the icon</p>
+ *   <nys-tooltip
+ *     for="my-tooltip3"
+ *     text="I am a tooltip."
+ *     inverted
+ *   >
+ *   </nys-tooltip>
+ *   <nys-icon id="my-tooltip3" name="info" size="3xl"></nys-icon>
+ * </div>
  * ```
  */
 export declare class NysTooltip extends LitElement {

package/dist/packages/nys-unavfooter/src/nys-unavfooter.d.ts

@@ -5,12 +5,20 @@ import { LitElement } from "lit";
  * Place as the last element before `</body>`. Displays NY.gov logo and links to Agencies,
  * App Directory, Counties, Events, Programs, and Services. No configuration needed.
  *
+ * @accessibility
+ * - Uses semantic `<footer>` element for assistive technology recognition.
+ * - All links are keyboard-navigable via Tab.
+ * - Proper link text for screen reader users.
+ * - Links open in same window (no target="_blank") unless external policy requires otherwise.
+ * - Visual design meets WCAG 2.2 AA contrast and focus indicator standards.
+ * - Footer is not hidden from screen readers and is announced as navigation.
+ *
+ *
  * @summary Universal NYS footer with logo and statewide links. Required site-wide.
  * @element nys-unavfooter
  *
- * @example Standard usage
+ * @example Basic
  * ```html
- * <nys-globalfooter>...</nys-globalfooter>
  * <nys-unavfooter></nys-unavfooter>
  * ```
  */

package/dist/packages/nys-unavheader/src/nys-unavheader.d.ts

@@ -1,4 +1,9 @@
 import { LitElement } from "lit";
+interface Language {
+    code: string;
+    label: string;
+    url?: string;
+}
 /**
  * Universal NYS header with trust bar, logo, search, and language translation. Required on all NYS sites.
  *
@@ -6,25 +11,66 @@ import { LitElement } from "lit";
  * site search (searches ny.gov), and 14-language translation dropdown. Use `hideSearch` or `hideTranslate`
  * to remove features if not applicable.
  *
+ * @accessibility
+ * - Semantic `<header>` element ensures assistive technology recognition.
+ * - Trust bar button: `role="button"`, `aria-expanded`, descriptive `aria-label`.
+ * - All links and buttons are keyboard-navigable via Tab.
+ * - Language dropdown announces current language and list on focus.
+ * - Search input announces field purpose and keyboard shortcuts (Enter to submit, Escape to dismiss).
+ * - Visual focus indicators meet WCAG 2.2 AA standards.
+ * - All text has sufficient color contrast (4.5:1 minimum).
+ * - Icons have text labels or `aria-label` attributes.
+ *
  * @summary Universal NYS header with trust bar, search, and translation. Required site-wide.
  * @element nys-unavheader
  *
- * @example Standard usage
+ * @fires nys-language-select - Fired when a language is selected. Detail: `{language: {code, label, url?}}`. Cancelable; `preventDefault()` overrides the default Smartling redirect.
+ * @fires nys-search-submit - Fired when a search is submitted. Detail: `{query}`. Cancelable; `preventDefault()` overrides the default search redirect.
+ *
+ * @example Basic
  * ```html
  * <nys-unavheader></nys-unavheader>
- * <nys-globalheader>...</nys-globalheader>
  * ```
  *
- * @example Without search
+ * @example Hide search
  * ```html
  * <nys-unavheader hideSearch></nys-unavheader>
  * ```
+ *
+ *  @example Hide translate
+ * ```html
+ * <nys-unavheader hideTranslate></nys-unavheader>
+ * ```
+ *
+ * @example Custom Search URL
+ * ```html
+ * <nys-unavheader searchUrl="https://designsystem.ny.gov/search/?q="></nys-unavheader>
+ * ```
+ *
+ * @example Custom Language List
+ * ```html
+ * <nys-unavheader id="my-header"></nys-unavheader>
+ * <script>
+ *   const header = document.querySelector('#my-header');
+ *   header.languages = [
+ *   { code: 'en', label: 'English' },
+ *   { code: 'es', label: 'Español' , url: '"https://ny.gov/?lang=es"'},
+ *   { code: 'fr', label: 'Français', url: '"https://ny.gov/?lang=fr"'},
+ *   ];
+ * </script>
+ * ```
+ *
+ * @example Custom Language List JS
+ * ```html
+ * <nys-unavheader id="my-header2"></nys-unavheader>
+ * <script>
+ *   document.querySelector('#my-header2').addEventListener('nys-language-select', (event) => {
+ *   event.preventDefault();
+ *   const selectedLanguage = event.detail.language.label;
+ *   });
+ * </script>
+ * ```
  */
-interface Language {
-    code: string;
-    label: string;
-    url?: string;
-}
 export declare class NysUnavHeader extends LitElement {
     static styles: import("lit").CSSResult;
     /** Internal: Whether trust bar panel is expanded. */