@nysds/components 1.19.3 → 1.20.0-alpha-3

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

@@ -15,50 +15,21 @@ import "./nys-accordionitem";
  * @cssprop [--nys-accordion-background-color--header--hover] - Background hover color of the accordion header.
  * @cssprop [--nys-accordion-content-max-width] - Maximum readable width of accordion content. Defaults to a character-based width (80ch) for readability.
  *
- * @example Basic
+ * @example Basic accordion
  * ```html
  * <nys-accordion>
- *   <nys-accordionitem id="accordionId1" heading="How do I renew my passport or apply for a new one?">
- *     <p>
- *       You can apply for or renew a U.S. passport through the U.S. Department
- *       of State. Some renewals can be done by mail.
- *     </p>
- *     <div style="display: flex; gap: 0.5rem; font-size: 1rem;">
- *      <a href="https://www.ny.gov" target="_blank">Check your registration</a>
- *      <a href="https://www.ny.gov" target="_blank">Fill out application</a>
- *    </div>
- *  </nys-accordionitem>
- *  <nys-accordionitem id="accordionId2" heading="How can I find out if I’m registered to vote?">
- *    <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>
- *   </nys-accordionitem>
+ *   <nys-accordionitem heading="Section 1">Content for section 1</nys-accordionitem>
+ *   <nys-accordionitem heading="Section 2">Content for section 2</nys-accordionitem>
  * </nys-accordion>
  * ```
  *
- * @example Single Select
+ * @example Single-select accordion
  * ```html
- * <nys-accordion singleSelect>
- *   <nys-accordionitem heading="FAQ 1">Answer 1</nys-accordionitem>
+ * <nys-accordion singleSelect bordered>
+ *   <nys-accordionitem heading="FAQ 1" expanded>Answer 1</nys-accordionitem>
  *   <nys-accordionitem heading="FAQ 2">Answer 2</nys-accordionitem>
  * </nys-accordion>
  * ```
- *
- * @example Bordered
- * ```html
- *
- * <nys-accordion bordered>
- *  <nys-accordionitem heading="We are a group of accordions">
- *   <p>Stronger together! Learn more at
- *      <a href="https://www.ny.gov" target="_blank">ny.gov</a>
- *    </p>
- *  </nys-accordionitem>
- *   <nys-accordionitem heading="Liberty Ipsum: Bridges & Boroughs">
- *    <p>Empire ipsum dolor sit amet, across the Brooklyn Bridge to Central Park, consectetur adipiscing elit.</p>
- *   </nys-accordionitem>
- *   <nys-accordionitem heading="Hudson Ipsum: Riverfront Stories">
- *     <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>
- *   </nys-accordionitem>
- * </nys-accordion>
- * ```
  */
 export declare class NysAccordion extends LitElement {
     static styles: import("lit").CSSResult;

package/dist/packages/nys-accordion/src/nys-accordionitem.d.ts

@@ -14,14 +14,9 @@ import { LitElement } from "lit";
  *
  * @example Expanded item
  * ```html
- * <nys-accordion>
- *   <nys-accordionitem heading="How do I apply?" expanded>
- *     <p>Visit ny.gov and complete the online application.</p>
- *   </nys-accordionitem>
- *   <nys-accordionitem heading="What documents do I need?">
- *     <p>You will need a valid ID and proof of residency.</p>
- *   </nys-accordionitem>
- * </nys-accordion>
+ * <nys-accordionitem heading="How do I apply?" expanded>
+ *   <p>Visit ny.gov and complete the online application.</p>
+ * </nys-accordionitem>
  * ```
  */
 export declare class NysAccordionItem extends LitElement {

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

@@ -12,92 +12,15 @@ import { LitElement } from "lit";
  *
  * @fires nys-close - Fired when alert is dismissed. Detail: `{id, type, label}`.
  *
- * @example Basic
+ * @example Info alert
  * ```html
- * <nys-alert heading="This is a heading"></nys-alert>
+ * <nys-alert type="info" heading="Update available" text="A new version is ready to install."></nys-alert>
  * ```
  *
- * @example Text
+ * @example Dismissible success alert
  * ```html
- * <nys-alert
- *  heading="This is a heading"
- *  text="This is additional information passed in through the text property"
- * ></nys-alert>
+ * <nys-alert type="success" heading="Application submitted" dismissible></nys-alert>
  * ```
- *
- * @example Rich Text
- * ```html
- * <nys-alert heading="Rich Text">
- *  <p>This is a custom alert with <strong>HTML content</strong> passed in through the slot.</p>
- *  <a href="https://www.ny.gov/" target="_blank">Learn more about our accessibility services</a>
- * </nys-alert>
- * ```
- *
- * @example Info Type
- * ```html
- * <nys-alert type="info" heading="Info alert type"></nys-alert>
- * ```
- *
- * @example Success Type
- * ```html
- * <nys-alert type="success" heading="Success alert type"></nys-alert>
- * ```
- *
- * @example Warning Type
- * ```html
- * <nys-alert type="warning" heading="Warning alert type"></nys-alert>
- * ```
- *
- * @example Danger Type
- * ```html
- * <nys-alert type="danger" heading="Danger alert type"></nys-alert>
- * ```
- *
- * @example Emergency Type
- * ```html
- * <nys-alert type="emergency" heading="Emergency alert type"></nys-alert>
- * ```
- *
- * @example Dismissible
- * ```html
- * <nys-alert heading="This alert is dismisable" text="Close it by clicking on the X in the corner." dismissible>
- * </nys-alert>
- * ```
- *
- * @example Duration
- * ```html
- * <nys-alert heading="Disappearing alert" text="This alert will disappear after 3 seconds." duration="3000"></nys-alert>
- * ```
- *
- * @render Duration
- * ```html
- * <nys-button
- *  class="nys-margin-b-100"
- *  label="Show alert"
- *  onclick="document.body.appendChild(Object.assign(document.createElement('nys-alert'), {heading: 'Disappearing alert', text: 'This alert will disappear after 3 seconds.', duration: 3000}))"
- * ></nys-button>
- * ```
- *
- * @example Custom Icon
- * ```html
- * <nys-alert
- *   type="emergency"
- *   heading="Winter storm warning: Dec 10th, 2024."
- *   text="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."
- *   icon="ac_unit">
- * </nys-alert>
- *```
-
- * @example Action Links
- * ```html
- * <nys-alert
- *  heading="Alert with links"
- *  primaryLabel="{primaryAction}"
- *  secondaryLabel="{secondaryAction}"
- *  primaryAction="https://www.ny.gov/"
- *  secondaryAction="https://www.ny.gov/"
- * ></nys-alert>
- *```
  */
 export declare class NysAlert extends LitElement {
     static styles: import("lit").CSSResult;

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

@@ -10,54 +10,14 @@ import { LitElement } from "lit";
  *
  * @slot - Custom icon content. Overrides default icon when no image or initials.
  *
- * @example Basic
+ * @example Image avatar
  * ```html
- * <nys-avatar ariaLabel="User avatar"></nys-avatar>
+ * <nys-avatar image="/path/to/photo.jpg" ariaLabel="Jane Smith"></nys-avatar>
  * ```
  *
- * @example Image
+ * @example Initials avatar with custom color
  * ```html
- * <nys-avatar
- *  image="path/to/img.png"
- *  ariaLabel="Jane Smith"
- * ></nys-avatar>
- * ```
- * @render Image
- * ```html
- * <nys-avatar
- *  image="https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
- *  ariaLabel="Jane Smith"
- * ></nys-avatar>
- * ```
- *
- * @example Initials
- * ```html
- * <nys-avatar initials="JS" ariaLabel="Jane Smith"></nys-avatar>
- * ```
- *
- * @example Icon
- * ```html
- * <nys-avatar icon="account_circle"></nys-avatar>
- * ```
- *
- * @example Interactive
- * ```html
- * <nys-avatar interactive></nys-avatar>
- * ```
- *
- * @example Disabled
- * ```html
- * <nys-avatar disabled></nys-avatar>
- * ```
- *
- * @example Custom Background Color
- * ```html
- * <nys-avatar color="var(--nys-color-red-500)" interactive></nys-avatar>
- * ```
- *
- * @example Lazy Loading
- * ```html
- * <nys-avatar lazy></nys-avatar>
+ * <nys-avatar initials="JS" color="var(--nys-color-theme)" ariaLabel="Jane Smith"></nys-avatar>
  * ```
  */
 export declare class NysAvatar extends LitElement {

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

@@ -16,7 +16,7 @@ import { LitElement } from "lit";
  * @summary Floating back-to-top button with auto-show behavior, smooth scroll, and focus management.
  * @element nys-backtotop
  *
- * @example Basic
+ * @example Auto-appearing button in footer
  * ```html
  * <footer>
  *   <nys-backtotop></nys-backtotop>
@@ -24,76 +24,9 @@ import { LitElement } from "lit";
  * </footer>
  * ```
  *
- * @render Basic
+ * @example Always visible, left position
  * ```html
- * <style>
- *   code {
- *     white-space: nowrap;
- *     padding: var(--nys-space-1px) var(--nys-space-2px);
- *     border-radius: var(--nys-radius-md);
- *     color: var(--nys-color-red-600);
- *     background: var(--nys-color-neutral-10);
- *     font-size: var(--nys-font-size-sm);
- *   }
- * </style>
- * <nys-unavheader hideTranslate hideSearch></nys-unavheader>
- * <nys-globalheader appName="Back to Top Example"></nys-globalheader>
- * <main style="padding: 0 2rem">
- *   <h1>Sample Content on page</h1>
- *   <p>
- *     This is a sample content area used to demonstrate the functionality of
- *     the Back to Top button. In an actual application,
- *     <code>nys-backtotop</code> would not be visible until the user scrolls
- *     down the page.
- *   </p>
- * </main>
- * <footer>
- *   <nys-backtotop visible></nys-backtotop>
- *   <nys-unavfooter></nys-unavfooter>
- * </footer>
- * ```
- * @example Left
- * ```html
- * <footer>
- *   <nys-backtotop position="left"></nys-backtotop>
- *   <!-- Other footer content -->
- * </footer>
- * ```
- *
- * @render Left
- * ```html
- * <style>
- *   code {
- *     white-space: nowrap;
- *     padding: var(--nys-space-1px) var(--nys-space-2px);
- *     border-radius: var(--nys-radius-md);
- *     color: var(--nys-color-red-600);
- *     background: var(--nys-color-neutral-10);
- *     font-size: var(--nys-font-size-sm);
- *   }
- *   nys-button {
- *     position: fixed;
- *     bottom: 1rem;
- *     right: 1rem;
- *     --_nys-button-border-radius: var(--nys-radius-round);
- *  }
- * </style>
- * <nys-unavheader hideTranslate hideSearch></nys-unavheader>
- * <nys-globalheader appName="Back to Top Example"></nys-globalheader>
- * <main style="padding: 0 2rem">
- *   <h1>Sample Content on page</h1>
- *   <p>
- *     This is a sample content area used to demonstrate the functionality of
- *     the Back to Top button. In an actual application,
- *     <code>nys-backtotop</code> would not be visible until the user scrolls
- *     down the page.
- *   </p>
- * </main>
- * <footer>
- *   <nys-backtotop visible position="left"></nys-backtotop>
- *   <nys-button prefixIcon="sms" variant="outline" label="Chat with us" size="sm"></nys-button>
- *   <nys-unavfooter></nys-unavfooter>
- * </footer>
+ * <nys-backtotop visible position="left"></nys-backtotop>
  * ```
  */
 export declare class NysBacktotop extends LitElement {

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

@@ -9,64 +9,14 @@ import { LitElement } from "lit";
  * @summary Compact label for status, counts, or categorization with semantic styling.
  * @element nys-badge
  *
- * @example Basic
+ * @example Status badge
  * ```html
- * <nys-badge label="Basic badge"></nys-badge>
+ * <nys-badge intent="success" label="Approved" prefixIcon></nys-badge>
  * ```
  *
- * @example Error Intent
+ * @example Count badge
  * ```html
- * <nys-badge label="Error" intent="error" prefixIcon></nys-badge>
- * ```
- *
- * @example Warning Intent
- * ```html
- * <nys-badge label="Warning" intent="warning" prefixIcon></nys-badge>
- * ```
- *
- * @example Success Intent
- * ```html
- * <nys-badge label="Success" intent="success" prefixIcon></nys-badge>
- * ```
- *
- * @example Strong Neutral
- * ```html
- * <nys-badge variant="strong" label="Neutral" prefixIcon></nys-badge>
- * ```
- *
- * @example Strong Error
- * ```html
- * <nys-badge variant="strong" label="Error" intent="error" prefixIcon></nys-badge>
- * ```
- *
- * @example Strong Warning
- * ```html
- * <nys-badge variant="strong" label="Warning" intent="warning" prefixIcon></nys-badge>
- * ```
- *
- * @example Strong Success
- * ```html
- * <nys-badge variant="strong" label="Success" intent="success" prefixIcon></nys-badge>
- * ```
- *
- * @example Custom Prefix Icon
- * ```html
- * <nys-badge label="Custom prefixIcon" prefixIcon="check"></nys-badge>
- * ```
- *
- * @example Custom Suffix Icon
- * ```html
- * <nys-badge label="Custom suffixIcon" suffixIcon="check"></nys-badge>
- * ```
- *
- * @example Size Small
- * ```html
- * <nys-badge label="Small" size="sm"></nys-badge>
- * ```
- *
- * @example Screen reader text
- * ```html
- * <nys-badge intent="warning" label="Caution" prefixIcon srText="concern"></nys-badge>
+ * <nys-badge prefixLabel="Messages" label="12"></nys-badge>
  * ```
  */
 export declare class NysBadge extends LitElement {

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 /**
- * A breadcrumb navigation trail composed of `li` elements.
+ * A breadcrumb navigation trail composed of `nys-breadcrumbitem` elements.
  * Collapses when the trail exceeds 5 items on desktop or 3 items on mobile,
  * showing the first, last, and item before the current page, with an ellipsis to expand.
  * A single item renders as a back-to-parent link instead of a trail.
@@ -8,21 +8,11 @@ import { LitElement } from "lit";
  * @summary Breadcrumb navigation trail with responsive collapse support.
  * @element nys-breadcrumbs
  *
- * @slot - One or more `li` elements defining the trail.
+ * @slot - One or more `nys-breadcrumbitem` elements defining the trail.
  *
  * @fires nys-breadcrumbs-expand - Fired when the user clicks the ellipsis to expand the trail.
  *
- * @example Basic
- * ```html
- * <nys-breadcrumbs>
- *  <ol>
- *   <li><a href="/">Home</a></li>
- *   <li><a href="/services">Services</a></li>
- *  </ol>
- * </nys-breadcrumbs>
- * ```
- *
- * @example Current page
+ * @example Full trail with current page
  * ```html
  * <nys-breadcrumbs>
  *  <ol>
@@ -33,79 +23,21 @@ import { LitElement } from "lit";
  * </nys-breadcrumbs>
  * ```
  *
- * @example Single item list
+ * @example Trail without current page
  * ```html
  * <nys-breadcrumbs>
  *  <ol>
- *   <li><a href="/services">Services</a></li>
- *  </ol>
- * </nys-breadcrumbs>
- * ```
- *
- * @example Long list
- * ```html
- * <nys-breadcrumbs>
- *   <ol>
- *     <li><a href="/">Home</a></li>
- *     <li><a href="/government">Government</a></li>
- *     <li><a href="/government/agencies">Agencies</a></li>
- *     <li><a href="/government/agencies/parks">Parks & Recreation</a></li>
- *     <li><a href="/parks/state-parks">State Parks</a></li>
- *     <li><a href="/parks/state-parks/delaware">Delaware Region</a></li>
- *     <li><a href="/parks/state-parks/delaware/water-gap">Delaware Water Gap</a></li>
- *     <li>Trail Conditions</li>
- *   </ol>
- * </nys-breadcrumbs>
- * ```
- *
- * @example Size small
- * ```html
- * <nys-breadcrumbs size="sm">
- *  <ol>
- *   <li><a href="/">Home</a></li>
- *   <li><a href="/government">Government</a></li>
- *   <li><a href="/government/agencies">Agencies</a></li>
- *   <li>Parks & Recreation</li>
- *  </ol>
- * </nys-breadcrumbs>
- * ```
- *
- * @example Back to parent (mobile)
- * ```html
- * <nys-breadcrumbs backToParent>
- *  <ol>
- *   <li><a href="/">Home</a></li>
- *   <li><a href="/government">Government</a></li>
- *   <li><a href="/government/agencies">Agencies</a></li>
- *   <li><a href="/government/agencies/parks">Parks & Recreation</a></li>
- *   <li><a href="/parks/state-parks">State Parks</a></li>
- *   <li><a href="/parks/state-parks/delaware">Delaware Region</a></li>
- *   <li><a href="/parks/state-parks/delaware/water-gap">Delaware Water Gap</a></li>
- *   <li>Trail Conditions</li>
- *  </ol>
- * </nys-breadcrumbs>
- * ```
- *
- * @example Background bar
- * ```html
- * <nys-breadcrumbs backgroundBar>
- *  <ol>
  *   <li><a href="/">Home</a></li>
  *   <li><a href="/services">Services</a></li>
- *   <li><a href="/tickets">Ticket System</a></li>
- *   <li>Del Water Gap</li>
  *  </ol>
  * </nys-breadcrumbs>
  * ```
  *
- * @example Disabled
+ * @example Single item renders as back-to-parent
  * ```html
- * <nys-breadcrumbs disabled>
+ * <nys-breadcrumbs>
  *  <ol>
- *   <li><a href="/">Home</a></li>
  *   <li><a href="/services">Services</a></li>
- *   <li><a href="/tickets">Ticket System</a></li>
- *   <li>Del Water Gap</li>
  *  </ol>
  * </nys-breadcrumbs>
  * ```
@@ -125,7 +57,7 @@ export declare class NysBreadcrumbs extends LitElement {
      * Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.
      * @default "md"
      */
-    size: "sm" | "md";
+    size: "sm" | "md" | "";
     /**
      * On mobile, renders the trail as a single back-to-parent link pointing to the item before the current page.
      * Has no effect on desktop or when only one item is present (which always renders as a back link).

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

@@ -8,7 +8,6 @@ import { LitElement } from "lit";
  * @summary Button for actions and CTAs with variants, sizes, and icon support.
  * @element nys-button
  *
- * @slot - Button label text. Use as fallback when `label` prop is not provided.
  * @slot prefix-icon - Icon before label. Not shown for `text` variant.
  * @slot suffix-icon - Icon after label. Not shown for `text` variant.
  * @slot circle-icon - Icon for circle mode. Overrides `icon` prop.
@@ -27,85 +26,33 @@ import { LitElement } from "lit";
  * @fires nys-focus - Fired when the button receives focus.
  * @fires nys-blur - Fired when the button loses focus.
  *
- * @example Basic
+ * @example Basic filled button
  * ```html
- * <nys-button label="Button" variant="filled"></nys-button>
+ * <nys-button label="Submit" variant="filled"></nys-button>
  * ```
  *
- * @example Variant Outline
+ * @example Secondary outline button
  * ```html
- * <nys-button label="Button" variant="outline"></nys-button>
+ * <nys-button label="Cancel" variant="outline"></nys-button>
  * ```
  *
- * @example Variant Ghost
- * ```html
- * <nys-button label="Button" variant="ghost"></nys-button>
- * ```
- *
- * @example Variant Text
- * ```html
- * <nys-button label="Button" variant="text"></nys-button>
- * ```
- *
- * @example Prefix Icon
+ * @example Button with icons
  * ```html
  * <nys-button label="Previous" prefixIcon="chevron_left"></nys-button>
- * ```
- *
- * @example Suffix Icon
- * ```html
  * <nys-button label="Next" suffixIcon="chevron_right"></nys-button>
  * ```
  *
- * @example Slotted Icons
- * ```html
- * <nys-button label="Slotted icons">
- *   <nys-icon color="#db117d" slot="prefix-icon" name="chevron_left"></nys-icon>
- *   <nys-icon color="#db117d" slot="suffix-icon" name="chevron_right"></nys-icon>
- * </nys-button>
- * ```
- *
  * @example Circle icon button
  * ```html
  * <nys-button circle icon="close" label="Close dialog"></nys-button>
  * ```
  *
- * @example Size Small
- * ```html
- * <nys-button label="Small" size="sm"></nys-button>
- * ```
- * @example Size Large
- * ```html
- * <nys-button label="Large" size="lg"></nys-button>
- * ```
- *
- * @example Full width
- * ```html
- * <nys-button label="Full width" fullWidth></nys-button>
- * ```
- *
- * @example Inverted
- * ```html
- * <nys-button label="Inverted" inverted></nys-button>
- * ```
- * @render Inverted
- * ```html
- * <div style="background: #1b1b1b; padding: 1rem;">
- *   <nys-button label="Inverted" inverted></nys-button>
- * </div>
- * ```
- *
- * @example Disabled
- * ```html
- * <nys-button label="Disabled" disabled></nys-button>
- * ```
- *
- * @example Href
+ * @example Link-style button for navigation
  * ```html
  * <nys-button label="Visit NY.gov" href="https://www.ny.gov/" target="_blank" suffixIcon="open_in_new"></nys-button>
  * ```
  *
- * @example Type
+ * @example Form submit button
  * ```html
  * <nys-button type="submit" label="Save Changes" variant="filled"></nys-button>
  * ```

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

@@ -17,14 +17,17 @@ import "./nys-checkboxgroup";
  * @fires nys-blur - Fired when checkbox loses focus.
  * @fires nys-other-input - Fired when "other" text input value changes. Detail: `{id, name, value}`.
  *
- * @example Single
+ * @example Single checkbox
  * ```html
- * <nys-checkbox label="I agree to the terms" name="terms"></nys-checkbox>
+ * <nys-checkbox label="I agree to the terms" name="terms" required></nys-checkbox>
  * ```
  *
- * @example Preselected
+ * @example Checkbox group
  * ```html
- * <nys-checkbox label="I agree to the terms" name="terms" checked></nys-checkbox>
+ * <nys-checkboxgroup label="Select landmarks">
+ *   <nys-checkbox name="landmarks" value="adirondacks" label="Adirondacks"></nys-checkbox>
+ *   <nys-checkbox name="landmarks" value="niagara" label="Niagara Falls"></nys-checkbox>
+ * </nys-checkboxgroup>
  * ```
  */
 export declare class NysCheckbox extends LitElement {