@nysds/nys-stepper 1.18.0 → 1.18.3

package/dist/nys-stepper.js

@@ -1,11 +1,11 @@
-import { LitElement as u, unsafeCSS as f, html as v } from "lit";
+import { LitElement as f, unsafeCSS as u, html as v } from "lit";
 import { property as i } from "lit/decorators.js";
 /*!
    * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Stepper Component v1.18.0
+   * Stepper Component v1.18.3
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -16,9 +16,9 @@ var x = Object.defineProperty, l = (c, e, n, r) => {
     (o = c[t]) && (s = o(e, n, s) || s);
   return s && x(e, n, s), s;
 };
-const y = class y extends u {
+const y = class y extends f {
   constructor() {
-    super(...arguments), this.selected = !1, this.current = !1, this.label = "", this.href = "", this.isCompactExpanded = !1, this.stepNumber = 0;
+    super(...arguments), this.selected = !1, this.current = !1, this.label = "", this.href = "", this.previous = !1, this.isCompactExpanded = !1, this.stepNumber = 0;
   }
   _handleActivate(e) {
     typeof this.onClick == "function" && this.onClick(e);
@@ -64,7 +64,7 @@ const y = class y extends u {
     `;
   }
 };
-y.styles = f(m);
+y.styles = u(m);
 let a = y;
 l([
   i({ type: Boolean, reflect: !0 })
@@ -78,6 +78,9 @@ l([
 l([
   i({ type: String })
 ], a.prototype, "href");
+l([
+  i({ type: Boolean, reflect: !0 })
+], a.prototype, "previous");
 l([
   i({ type: Boolean })
 ], a.prototype, "isCompactExpanded");
@@ -94,7 +97,7 @@ var _ = Object.defineProperty, d = (c, e, n, r) => {
   return s && _(e, n, s), s;
 };
 let b = 0;
-const h = class h extends u {
+const h = class h extends f {
   constructor() {
     super(), this.id = "", this.name = "", this.label = "", this.counterText = "initial", this.isCompactExpanded = !1, this._stepsNumbered = !1, this._onStepClick = async (e) => {
       const n = e.composedPath().find(
@@ -158,9 +161,9 @@ const h = class h extends u {
     }), this._stepsNumbered = !0);
     let n = !1, r = !1, s = !1;
     e.forEach((t, o) => {
-      t.hasAttribute("current") && (s ? t.removeAttribute("current") : s = !0), o === 0 ? t.setAttribute("first", "") : t.removeAttribute("first"), t.hasAttribute("current") ? (n = !0, t.removeAttribute("previous")) : n ? t.removeAttribute("previous") : t.setAttribute("previous", ""), t.hasAttribute("selected") && (n || r ? t.removeAttribute("selected") : r = !0), this.isCompactExpanded ? t.setAttribute("isCompactExpanded", "") : t.removeAttribute("isCompactExpanded");
+      t.current && (s ? t.current = !1 : s = !0), o === 0 ? t.setAttribute("first", "") : t.removeAttribute("first"), t.current ? (n = !0, t.previous = !1) : n ? t.previous = !1 : t.previous = !0, t.selected && (n || r ? t.selected = !1 : r = !0), this.isCompactExpanded ? t.setAttribute("isCompactExpanded", "") : t.removeAttribute("isCompactExpanded");
     }), r || (s ? e.forEach((t) => {
-      t.hasAttribute("current") && !r && (t.setAttribute("selected", ""), r = !0);
+      t.current && !r && (t.setAttribute("selected", ""), r = !0);
     }) : e.length > 0 && (e[0].setAttribute("current", ""), e[0].setAttribute("selected", ""))), this._updateCounter();
   }
   _toggleCompact() {
@@ -194,7 +197,7 @@ const h = class h extends u {
     `;
   }
 };
-h.styles = f(m);
+h.styles = u(m);
 let p = h;
 d([
   i({ type: String, reflect: !0 })

package/dist/nys-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-stepper.js","sources":["../src/nys-step.ts","../src/nys-stepper.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-stepper.scss?inline\";\n\n/**\n * A single step within `nys-stepper`. Represents one stage in a multi-step process.\n *\n * Mark as `current` to indicate active progress point. Previous steps become clickable for navigation.\n * Set `href` for page-based navigation or listen to `nys-step-click` for SPA routing.\n *\n * ## Step States\n *\n * Understanding the three step states is critical for proper stepper usage:\n *\n * - **`selected`** - Which step is currently being displayed/viewed. This controls which step's\n *   content is shown. Defaults to `current` if not set. Cannot be set on a step after `current`.\n *   Users can click previous steps to change `selected` without changing `current`.\n *\n * - **`current`** - The furthest step the user has reached. This is the progress boundary.\n *   Update this as the user completes steps and advances. Steps after `current` are not navigable.\n *   Only one step should have `current` at a time.\n *\n * - **`previous`** - Auto-applied by the stepper to all steps before `current`. Do not set manually.\n *   Steps with `previous` are clickable and allow the user to navigate back.\n *\n * ## Common Patterns\n *\n * **Initial state:** Set `current` on the first step. `selected` will default to it.\n * ```html\n * <nys-step label=\"Step 1\" current></nys-step>\n * <nys-step label=\"Step 2\"></nys-step>\n * ```\n *\n * **User completed step 1, now on step 2:**\n * ```html\n * <nys-step label=\"Step 1\"></nys-step>\n * <nys-step label=\"Step 2\" current></nys-step>\n * ```\n *\n * **User went back to review step 1 (but progress is still at step 2):**\n * ```html\n * <nys-step label=\"Step 1\" selected></nys-step>\n * <nys-step label=\"Step 2\" current></nys-step>\n * ```\n *\n * @summary Individual step for use within nys-stepper with navigation support.\n * @element nys-step\n *\n * @fires nys-step-click - Fired when a navigable step is clicked. Detail: `{href, label}`. Cancelable.\n *\n * @example Step with navigation\n * ```html\n * <nys-step label=\"Personal Info\" href=\"/step-1\"></nys-step>\n * ```\n */\nexport class NysStep extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Whether this step is currently being viewed. Set by parent stepper. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Marks the furthest reached step. Steps before this are navigable. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  /** Step label text displayed alongside the step number. */\n  @property({ type: String }) label = \"\";\n\n  /** URL for page navigation when step is clicked. Optional for SPA routing. */\n  @property({ type: String }) href = \"\";\n\n  /** Internal: Whether parent stepper's compact view is expanded. */\n  @property({ type: Boolean }) isCompactExpanded = false;\n\n  /** Custom click handler. Called before `nys-step-click` event. */\n  @property({ attribute: false }) onClick?: (e: Event) => void;\n\n  /** Step number (1-indexed). Auto-assigned by parent stepper. */\n  @property({ type: Number }) stepNumber = 0;\n\n  private _handleActivate(e: Event) {\n    // Run user-supplied onClick first (if present)\n    if (typeof this.onClick === \"function\") {\n      this.onClick(e);\n    }\n\n    // Dispatch event as cancelable so user can prevent navigation\n    const event = new CustomEvent(\"nys-step-click\", {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { href: this.href, label: this.label },\n    });\n\n    if ((this.hasAttribute(\"previous\") || this.current) && !this.selected) {\n      this.dispatchEvent(event);\n\n      // Only navigate if event was not canceled\n      if (!event.defaultPrevented && this.href) {\n        window.location.href = this.href;\n      }\n    }\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleActivate(e);\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-step\">\n        <div class=\"nys-step__linewrapper\">\n          <div class=\"nys-step__line\"></div>\n        </div>\n        <div\n          class=\"nys-step__contentwrapper\"\n          @click=${this._handleActivate}\n          @keydown=${this._handleKeydown}\n          ?disabled=${!(\n            this.selected ||\n            this.current ||\n            this.hasAttribute(\"previous\")\n          )}\n        >\n          <div class=\"nys-step__number\" tabindex=\"-1\" aria-hidden=\"true\">\n            ${this.stepNumber}\n          </div>\n          <div class=\"nys-step__content\" tabindex=\"-1\" aria-hidden=\"true\">\n            <div\n              class=\"nys-step__label\"\n              role=\"button\"\n              aria-label=\"${this.label} Step\"\n              tabindex=${!(\n                this.selected ||\n                this.current ||\n                this.hasAttribute(\"previous\")\n              )\n                ? \"-1\"\n                : \"0\"}\n              aria-hidden=\"true\"\n            >\n              ${this.label}\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-step\")) {\n  customElements.define(\"nys-step\", NysStep);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport \"./nys-step\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-stepper.scss?inline\";\n\nlet stepperIdCounter = 0;\n\n/**\n * A multi-step progress indicator for forms or wizards. Manages `nys-step` children with selection and navigation.\n *\n * Add `nys-step` elements as children. Mark one step as `current` to indicate progress; previous steps become\n * navigable. Compact view on mobile expands to show all steps. Use `actions` slot for navigation buttons.\n * Do not place the stepper inside a form element.\n *\n * @summary Multi-step progress indicator with navigation and mobile-friendly compact view.\n * @element nys-stepper\n *\n * @slot - Default slot for `nys-step` elements.\n * @slot actions - Navigation buttons (e.g., Back, Continue). Must be wrapped in a `<div>`.\n *\n * @example Basic stepper\n * ```html\n * <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>\n * ```\n *\n * @example Grid layout with sidebar placement\n * Use NYSDS grid utilities to position the stepper as a sidebar alongside form content.\n * **Layout requirements:**\n * - Wrap in `nys-grid-container` > `nys-grid-row`\n * - Use mobile-first classes: `nys-grid-col-12` (stacks on mobile) plus `nys-desktop:nys-grid-col-*`\n * - Columns must total 12 (e.g., 3+9 or 4+8)\n * - Recommended: stepper 3-4 cols, content 8-9 cols\n * ```html\n * <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>\n * ```\n *\n * @example Navigation buttons in actions slot\n * Add Previous/Next buttons using the actions slot. Wrap buttons in a `<div>`.\n * ```html\n * <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>\n * ```\n */\n\nexport class NysStepper extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Unique identifier. */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /** Name attribute for form association. */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /** Title displayed above the step counter. */\n  @property({ type: String }) label = \"\";\n\n  /** Progress text (e.g., \"Step 2 of 5\"). Auto-updated based on selection. */\n  @property({ type: String }) counterText = \"initial\";\n\n  /** Whether compact mobile view is expanded to show all steps. */\n  @property({ type: Boolean, reflect: true })\n  isCompactExpanded = false;\n\n  private _stepsNumbered = false;\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"nys-step-click\", this._onStepClick);\n    // Defer step validation to next tick to ensure children are upgraded\n    requestAnimationFrame(() => this._validateSteps());\n\n    // Generate unique id if not provided\n    if (!this.id) {\n      this.id = `nys-stepper-${++stepperIdCounter}-${Date.now()}`;\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\"nys-step-click\", this._onStepClick);\n    super.disconnectedCallback();\n  }\n\n  private _validateSteps() {\n    Array.from(this.children).forEach((child) => {\n      const isStep =\n        child instanceof HTMLElement &&\n        child.tagName.toLowerCase() === \"nys-step\";\n      const isSlotActionsContainer =\n        child instanceof HTMLElement &&\n        child.hasAttribute(\"slot\") &&\n        child.getAttribute(\"slot\") === \"actions\";\n\n      if (!isStep && !isSlotActionsContainer) {\n        console.warn(\n          \"Only <nys-step> elements or the <div slot='actions'> container are allowed as direct children of <nys-stepper>. Removing:\",\n          child,\n        );\n        child.remove();\n      }\n    });\n  }\n\n  private _validateButtonSlot(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements();\n\n    // Ensure exactly one direct node in the slot, and it must be a div\n    if (\n      assignedElements.length !== 1 ||\n      assignedElements[0].tagName.toLowerCase() !== \"div\"\n    ) {\n      console.warn(\n        \"The 'actions' slot must have exactly one <div> as a direct child.\",\n      );\n      return;\n    }\n\n    const div = assignedElements[0] as HTMLElement;\n\n    // Iterate through all buttons and validate\n    Array.from(div.children).forEach((button) => {\n      const isNysButton =\n        button instanceof HTMLElement &&\n        button.tagName.toLowerCase() === \"nys-button\";\n\n      if (!isNysButton) {\n        console.warn(\n          \"The <div> inside 'actions' slot only accepts <nys-button> elements. Removing invalid node:\",\n          button,\n        );\n        button.remove();\n      } else {\n        // Ensure nys-button has correct styles\n        button.setAttribute(\"size\", \"sm\");\n        if (button.hasAttribute(\"fullWidth\")) {\n          button.style.flex = \"1 1 0\";\n        }\n      }\n    });\n  }\n\n  private _onStepClick = async (event: Event) => {\n    const clickedStep = event\n      .composedPath()\n      .find(\n        (el) =>\n          el instanceof HTMLElement && el.tagName.toLowerCase() === \"nys-step\",\n      ) as HTMLElement | undefined;\n\n    if (!clickedStep) return;\n\n    const steps = Array.from(this.querySelectorAll(\"nys-step\"));\n    const currentIndex = steps.findIndex((step) =>\n      step.hasAttribute(\"current\"),\n    );\n    const clickedIndex = steps.indexOf(clickedStep);\n\n    // Can't select past current\n    if (currentIndex !== -1 && clickedIndex > currentIndex) return;\n\n    // Can't select already selected\n    if (clickedStep.hasAttribute(\"selected\")) return;\n\n    // Remove selected from previous and move to new selected\n    steps.forEach((step) => step.removeAttribute(\"selected\"));\n    clickedStep.setAttribute(\"selected\", \"\");\n\n    // Update counter immediately\n    this._updateCounter();\n\n    // Close expanded if it was open\n    this.isCompactExpanded = false;\n  };\n\n  private _updateCounter() {\n    let newCounterText: string;\n\n    if (this.isCompactExpanded) {\n      newCounterText = \"Back to Form\";\n      this.style.height = \"-webkit-fit-content\";\n      this.style.height = \"-moz-fit-content\";\n      this.style.height = \"fit-content\";\n    } else {\n      this.style.height = \"auto\";\n\n      const steps = this.querySelectorAll<HTMLElement>(\"nys-step\");\n      const selectedIndex = Array.from(steps).findIndex((step) =>\n        step.hasAttribute(\"selected\"),\n      );\n      const totalSteps = steps.length;\n\n      newCounterText =\n        selectedIndex >= 0\n          ? `Step ${selectedIndex + 1} of ${totalSteps}`\n          : `Step 1 of ${totalSteps}`;\n    }\n\n    if (newCounterText !== this.counterText) {\n      this.counterText = newCounterText;\n    }\n  }\n\n  willUpdate() {\n    const steps = this.querySelectorAll<any>(\"nys-step\");\n\n    if (!this._stepsNumbered) {\n      steps.forEach((step, index) => {\n        step.stepNumber = index + 1;\n      });\n      this._stepsNumbered = true;\n    }\n\n    let foundCurrent = false;\n    let selectedAssigned = false;\n    let currentAssigned = false;\n\n    steps.forEach((step, i) => {\n      // Check if multiple \"current\" exist, respect the first instance\n      if (step.hasAttribute(\"current\")) {\n        if (!currentAssigned) {\n          currentAssigned = true;\n        } else {\n          step.removeAttribute(\"current\");\n        }\n      }\n\n      // Set first\n      if (i === 0) {\n        step.setAttribute(\"first\", \"\");\n      } else {\n        step.removeAttribute(\"first\");\n      }\n\n      // Set previous\n      if (step.hasAttribute(\"current\")) {\n        foundCurrent = true;\n        step.removeAttribute(\"previous\");\n      } else if (!foundCurrent) {\n        step.setAttribute(\"previous\", \"\");\n      } else {\n        step.removeAttribute(\"previous\");\n      }\n\n      // Handle selected, respect first instance\n      if (step.hasAttribute(\"selected\")) {\n        if (foundCurrent || selectedAssigned) {\n          step.removeAttribute(\"selected\");\n        } else {\n          selectedAssigned = true;\n        }\n      }\n\n      // Handle compact expanded\n      if (this.isCompactExpanded) {\n        step.setAttribute(\"isCompactExpanded\", \"\");\n      } else {\n        step.removeAttribute(\"isCompactExpanded\");\n      }\n    });\n\n    // Selected fallback\n    if (!selectedAssigned) {\n      if (currentAssigned) {\n        steps.forEach((step) => {\n          if (step.hasAttribute(\"current\") && !selectedAssigned) {\n            step.setAttribute(\"selected\", \"\");\n            selectedAssigned = true;\n          }\n        });\n      } else if (steps.length > 0) {\n        // If no current or selected, mark first as both current and selected\n        steps[0].setAttribute(\"current\", \"\");\n        steps[0].setAttribute(\"selected\", \"\");\n      }\n    }\n\n    // Always update counter\n    this._updateCounter();\n  }\n\n  private _toggleCompact() {\n    this.isCompactExpanded = !this.isCompactExpanded;\n  }\n\n  private _handleCounterKeydown(event: KeyboardEvent) {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      this._toggleCompact();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-stepper\" name=${this.name}>\n        <div class=\"nys-stepper__header\">\n          <slot name=\"actions\" @slotchange=${this._validateButtonSlot}></slot>\n          <div class=\"nys-stepper__headertext\">\n            <div class=\"nys-stepper__label\">${this.label}</div>\n            <div\n              class=\"nys-stepper__counter\"\n              @click=${this._toggleCompact}\n              @keydown=${this._handleCounterKeydown}\n              role=\"button\"\n              tabindex=\"0\"\n              aria-label=${this.isCompactExpanded\n                ? \"Collapse step navigation to view the form\"\n                : `Expand step navigation. You are on ${this.counterText}`}\n              aria-expanded=${this.isCompactExpanded ? \"true\" : \"false\"}\n            >\n              ${this.counterText}\n            </div>\n          </div>\n        </div>\n        <slot class=\"nys-stepper__steps\"></slot>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-stepper\")) {\n  customElements.define(\"nys-stepper\", NysStepper);\n}\n"],"names":["_NysStep","LitElement","event","html","unsafeCSS","styles","NysStep","__decorateClass","property","stepperIdCounter","_NysStepper","clickedStep","el","steps","currentIndex","step","clickedIndex","child","isStep","isSlotActionsContainer","assignedElements","div","button","newCounterText","selectedIndex","totalSteps","index","foundCurrent","selectedAssigned","currentAssigned","i","NysStepper"],"mappings":"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"}
+{"version":3,"file":"nys-stepper.js","sources":["../src/nys-step.ts","../src/nys-stepper.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-stepper.scss?inline\";\n\n/**\n * A single step within `nys-stepper`. Represents one stage in a multi-step process.\n *\n * Mark as `current` to indicate the active progress point. Previous steps become clickable for navigation.\n * Set `href` for page-based navigation, or omit it and listen to `nys-step-click` for SPA/framework routing.\n *\n * ## Step states\n *\n * Three boolean attributes control step appearance and behavior:\n *\n * - **`current`** — The furthest step the user has reached (the progress boundary). Only one step should\n *   have `current` at a time; if multiple are set the parent stepper keeps the first and removes the rest.\n *   Steps after `current` are not navigable and do not fire `nys-step-click`. Update `current` in your\n *   application state when the user advances.\n *\n * - **`selected`** — Which step's content is currently displayed. Defaults to the `current` step if not\n *   explicitly set. If `selected` is placed on a step after `current`, the stepper silently corrects it\n *   to match `current`. When managing state from a framework, always set `selected` explicitly — without\n *   it the stepper's fallback will reset in-sidebar navigation on every state update.\n *\n * - **`previous`** — Auto-applied by the parent stepper to every step before `current`. Do not set this\n *   manually. Steps with `previous` are clickable and fire `nys-step-click`.\n *\n * ## `nys-step-click` firing conditions\n *\n * The event fires only when ALL of the following are true:\n * 1. The step has `previous` or `current` (i.e. it is navigable).\n * 2. The step does NOT already have `selected` (clicking the already-viewed step is a no-op).\n *\n * Steps that are neither `previous` nor `current` (future steps) never fire the event.\n *\n * ## `href` and navigation\n *\n * If `href` is set, the stepper calls `window.location.href = href` after dispatching `nys-step-click`\n * — but only if the event was **not canceled**. To handle navigation yourself (SPA routing, fetch, etc.),\n * always call `e.preventDefault()` in your listener. Omitting `href` entirely is simpler for SPAs.\n *\n * ## `onClick` vs `nys-step-click`\n *\n * The `onClick` property (a function reference, not a DOM attribute) is called **before** the\n * `nys-step-click` event is dispatched. Use it for imperative pre-navigation logic. In React, pass it\n * as the `onClick` prop on `NysStep`.\n *\n * ## Accessibility\n * - The step label renders with `role=\"button\"` and is keyboard-focusable (`tabindex=\"0\"`) for navigable\n *   steps (`current`, `previous`). Future steps get `tabindex=\"-1\"` and are not reachable by keyboard.\n * - Enter and Space activate the step (same as click).\n * - `aria-label` is set to `\"{label} Step\"` for screen reader announcement.\n *\n * ## Common patterns\n *\n * **Initial state:** Set `current` on the first step. `selected` defaults to it.\n * ```html\n * <nys-step label=\"Step 1\" current></nys-step>\n * <nys-step label=\"Step 2\"></nys-step>\n * ```\n *\n * **User completed step 1, now on step 2:**\n * ```html\n * <nys-step label=\"Step 1\"></nys-step>\n * <nys-step label=\"Step 2\" current></nys-step>\n * ```\n *\n * **User went back to review step 1 (progress still at step 2):**\n * ```html\n * <nys-step label=\"Step 1\" selected></nys-step>\n * <nys-step label=\"Step 2\" current></nys-step>\n * ```\n *\n * @summary Individual step for use within nys-stepper with navigation support.\n * @element nys-step\n *\n * @fires nys-step-click - Fired when a navigable (`previous` or `current`) non-selected step is clicked\n *   or activated by keyboard. Detail: `{ href: string, label: string }`. Cancelable — call\n *   `e.preventDefault()` to suppress `window.location.href` navigation.\n *\n * @example Step with page navigation\n * ```html\n * <nys-step label=\"Personal Info\" href=\"/step-1\"></nys-step>\n * ```\n *\n * @example Step with SPA navigation (no href)\n * ```js\n * step.addEventListener('nys-step-click', (e) => {\n *   e.preventDefault(); // no href set, but good practice\n *   showStepContent(e.detail.label);\n * });\n * ```\n */\nexport class NysStep extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /**\n   * Which step is currently being displayed. If not set, defaults to the `current` step.\n   * Setting this on a step after `current` is silently corrected to match `current`.\n   * When controlling state from a framework, always set this explicitly.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** The furthest step the user has reached (progress boundary). Steps before this are navigable. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  /** Step label text displayed alongside the step number. */\n  @property({ type: String }) label = \"\";\n\n  /**\n   * URL navigated to when the step is activated, via `window.location.href`.\n   * Navigation is suppressed if the `nys-step-click` listener calls `e.preventDefault()`.\n   * Omit for SPA/framework routing and handle navigation in the event listener instead.\n   */\n  @property({ type: String }) href = \"\";\n\n  /**\n   * @internal Auto-applied by `nys-stepper` to every step that comes before `current`.\n   * Marks the step as navigable and clickable. Do not set this manually — the parent stepper\n   * adds and removes it on every render based on which step has `current`.\n   */\n  @property({ type: Boolean, reflect: true }) previous = false;\n\n  /** @internal Propagated by the parent stepper. Do not set manually. */\n  @property({ type: Boolean }) isCompactExpanded = false;\n\n  /** Optional function called before `nys-step-click` is dispatched. Use for pre-navigation logic. */\n  @property({ attribute: false }) onClick?: (e: Event) => void;\n\n  /** @internal 1-indexed position. Auto-assigned by the parent stepper on first render. Do not set manually. */\n  @property({ type: Number }) stepNumber = 0;\n\n  private _handleActivate(e: Event) {\n    // Run user-supplied onClick first (if present)\n    if (typeof this.onClick === \"function\") {\n      this.onClick(e);\n    }\n\n    // Dispatch event as cancelable so user can prevent navigation\n    const event = new CustomEvent(\"nys-step-click\", {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { href: this.href, label: this.label },\n    });\n\n    if ((this.hasAttribute(\"previous\") || this.current) && !this.selected) {\n      this.dispatchEvent(event);\n\n      // Only navigate if event was not canceled\n      if (!event.defaultPrevented && this.href) {\n        window.location.href = this.href;\n      }\n    }\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleActivate(e);\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-step\">\n        <div class=\"nys-step__linewrapper\">\n          <div class=\"nys-step__line\"></div>\n        </div>\n        <div\n          class=\"nys-step__contentwrapper\"\n          @click=${this._handleActivate}\n          @keydown=${this._handleKeydown}\n          ?disabled=${!(\n            this.selected ||\n            this.current ||\n            this.hasAttribute(\"previous\")\n          )}\n        >\n          <div class=\"nys-step__number\" tabindex=\"-1\" aria-hidden=\"true\">\n            ${this.stepNumber}\n          </div>\n          <div class=\"nys-step__content\" tabindex=\"-1\" aria-hidden=\"true\">\n            <div\n              class=\"nys-step__label\"\n              role=\"button\"\n              aria-label=\"${this.label} Step\"\n              tabindex=${!(\n                this.selected ||\n                this.current ||\n                this.hasAttribute(\"previous\")\n              )\n                ? \"-1\"\n                : \"0\"}\n              aria-hidden=\"true\"\n            >\n              ${this.label}\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-step\")) {\n  customElements.define(\"nys-step\", NysStep);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport \"./nys-step\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-stepper.scss?inline\";\n\nlet stepperIdCounter = 0;\n\n/**\n * A multi-step progress indicator for forms or wizards. Manages `nys-step` children with selection and navigation.\n *\n * Add `nys-step` elements as children. Mark one step as `current` to indicate the progress boundary; all steps\n * before it become navigable. Compact view on mobile expands to show all steps. Use the `actions` slot for\n * persistent navigation buttons (e.g., Save & Exit). Do not place the stepper inside a `<form>` element —\n * put form fields in the main content area alongside it.\n *\n * ## When to use\n * - Linear, ordered forms or wizards with more than 2 sections.\n *\n * ## When not to use\n * - Forms with only 1 or 2 sections — use a simpler layout.\n * - Non-linear forms where sections can be completed in any order.\n *\n * ## Compact mode (mobile)\n * On small screens the stepper collapses to a compact view: step labels are hidden and progress\n * is shown as a bar indicator with a \"Step x of y\" counter. Clicking or pressing Enter/Space on\n * the counter expands the full step list (counter text changes to \"Back to Form\"). Collapsing\n * again returns the user to the form view.\n *\n * ## actions slot constraints\n * The `actions` slot must contain exactly one `<div>` as its direct child. That `<div>` may only\n * contain `<nys-button>` elements — any other element is removed with a console warning.\n * The stepper automatically forces `size=\"sm\"` on every button in the slot. Buttons with the\n * `fullWidth` attribute get `flex: 1 1 0` injected so they share available width equally.\n *\n * ## Multiple `current` conflict\n * If more than one `nys-step` has the `current` attribute, only the first one is kept; the rest\n * are silently removed. Always mark exactly one step as `current`.\n *\n * ## id auto-generation\n * If no `id` is provided, a unique id is generated automatically in the form\n * `nys-stepper-{n}-{timestamp}`.\n *\n * ## Accessibility\n * - The compact counter is rendered as a `role=\"button\"` with `aria-expanded` and a descriptive\n *   `aria-label` that announces the current step (e.g., \"Expand step navigation. You are on Step 2 of 4\").\n * - Keyboard: Enter or Space toggles the compact view.\n * - Each `nys-step` label is keyboard-focusable and activatable for navigable steps.\n * - Visual focus indicators are provided on all interactive elements.\n *\n * @summary Multi-step progress indicator with navigation and mobile-friendly compact view.\n * @element nys-stepper\n *\n * @slot - Default slot for `nys-step` elements. Only `nys-step` children are accepted; others are removed.\n * @slot actions - Persistent navigation buttons. Must contain exactly one `<div>` wrapping only `<nys-button>` elements.\n *\n * @example Basic stepper\n * ```html\n * <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>\n * ```\n *\n * @example Grid layout with sidebar placement\n * Use NYSDS grid utilities to position the stepper as a sidebar alongside form content.\n * **Layout requirements:**\n * - Wrap in `nys-grid-container` > `nys-grid-row`\n * - Use mobile-first classes: `nys-grid-col-12` (stacks on mobile) plus `nys-desktop:nys-grid-col-*`\n * - Columns must total 12 (e.g., 3+9 or 4+8)\n * - Recommended: stepper 3-4 cols, content 8-9 cols\n * ```html\n * <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>\n * ```\n *\n * @example Navigation buttons in actions slot\n * Add Previous/Next buttons using the actions slot. Wrap buttons in a `<div>`.\n * ```html\n * <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>\n * ```\n *\n * @example SPA / programmatic navigation\n * Two state variables drive the stepper in any framework or vanilla JS:\n * - `currentStep` (progress boundary) → set `current` on the matching step\n * - `viewingStep` (displayed content) → set `selected` on the matching step\n *\n * Always set both explicitly. Always call `e.preventDefault()` in the\n * `nys-step-click` listener to suppress href navigation. Do NOT nest inside a\n * `<form>` element.\n * ```js\n * let currentStep = 0; // furthest reached\n * let viewingStep = 0; // currently displayed\n *\n * function updateStepper(steps) {\n *   steps.forEach((step, i) => {\n *     step.toggleAttribute('current', i === currentStep);\n *     step.toggleAttribute('selected', i === viewingStep);\n *   });\n * }\n *\n * document.querySelector('nys-stepper').addEventListener('nys-step-click', (e) => {\n *   e.preventDefault();\n *   const steps = Array.from(document.querySelectorAll('nys-step'));\n *   const clicked = e.composedPath().find(el => el.tagName?.toLowerCase() === 'nys-step');\n *   const index = steps.indexOf(clicked);\n *   if (index !== -1) { viewingStep = index; updateStepper(steps); }\n * });\n *\n * // Advance to next step (call on form submit / \"Continue\" click)\n * function advance(steps) {\n *   if (currentStep < steps.length - 1) {\n *     currentStep++;\n *     viewingStep = currentStep;\n *     updateStepper(steps);\n *   }\n * }\n * ```\n */\n\nexport class NysStepper extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Unique identifier. Auto-generated as `nys-stepper-{n}-{timestamp}` if not provided. */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /** Name attribute for form association. */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /** Title displayed above the step list and compact counter. */\n  @property({ type: String }) label = \"\";\n\n  /** Progress text displayed in compact mode (e.g., \"Step 2 of 5\"). Auto-managed — do not set manually. */\n  @property({ type: String }) counterText = \"initial\";\n\n  /** Whether compact mobile view is expanded to show all steps. Toggled by clicking the counter. */\n  @property({ type: Boolean, reflect: true })\n  isCompactExpanded = false;\n\n  private _stepsNumbered = false;\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"nys-step-click\", this._onStepClick);\n    // Defer step validation to next tick to ensure children are upgraded\n    requestAnimationFrame(() => this._validateSteps());\n\n    // Generate unique id if not provided\n    if (!this.id) {\n      this.id = `nys-stepper-${++stepperIdCounter}-${Date.now()}`;\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\"nys-step-click\", this._onStepClick);\n    super.disconnectedCallback();\n  }\n\n  private _validateSteps() {\n    Array.from(this.children).forEach((child) => {\n      const isStep =\n        child instanceof HTMLElement &&\n        child.tagName.toLowerCase() === \"nys-step\";\n      const isSlotActionsContainer =\n        child instanceof HTMLElement &&\n        child.hasAttribute(\"slot\") &&\n        child.getAttribute(\"slot\") === \"actions\";\n\n      if (!isStep && !isSlotActionsContainer) {\n        console.warn(\n          \"Only <nys-step> elements or the <div slot='actions'> container are allowed as direct children of <nys-stepper>. Removing:\",\n          child,\n        );\n        child.remove();\n      }\n    });\n  }\n\n  private _validateButtonSlot(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements();\n\n    // Ensure exactly one direct node in the slot, and it must be a div\n    if (\n      assignedElements.length !== 1 ||\n      assignedElements[0].tagName.toLowerCase() !== \"div\"\n    ) {\n      console.warn(\n        \"The 'actions' slot must have exactly one <div> as a direct child.\",\n      );\n      return;\n    }\n\n    const div = assignedElements[0] as HTMLElement;\n\n    // Iterate through all buttons and validate\n    Array.from(div.children).forEach((button) => {\n      const isNysButton =\n        button instanceof HTMLElement &&\n        button.tagName.toLowerCase() === \"nys-button\";\n\n      if (!isNysButton) {\n        console.warn(\n          \"The <div> inside 'actions' slot only accepts <nys-button> elements. Removing invalid node:\",\n          button,\n        );\n        button.remove();\n      } else {\n        // Ensure nys-button has correct styles\n        button.setAttribute(\"size\", \"sm\");\n        if (button.hasAttribute(\"fullWidth\")) {\n          button.style.flex = \"1 1 0\";\n        }\n      }\n    });\n  }\n\n  private _onStepClick = async (event: Event) => {\n    const clickedStep = event\n      .composedPath()\n      .find(\n        (el) =>\n          el instanceof HTMLElement && el.tagName.toLowerCase() === \"nys-step\",\n      ) as HTMLElement | undefined;\n\n    if (!clickedStep) return;\n\n    const steps = Array.from(this.querySelectorAll(\"nys-step\"));\n    const currentIndex = steps.findIndex((step) =>\n      step.hasAttribute(\"current\"),\n    );\n    const clickedIndex = steps.indexOf(clickedStep);\n\n    // Can't select past current\n    if (currentIndex !== -1 && clickedIndex > currentIndex) return;\n\n    // Can't select already selected\n    if (clickedStep.hasAttribute(\"selected\")) return;\n\n    // Remove selected from previous and move to new selected\n    steps.forEach((step) => step.removeAttribute(\"selected\"));\n    clickedStep.setAttribute(\"selected\", \"\");\n\n    // Update counter immediately\n    this._updateCounter();\n\n    // Close expanded if it was open\n    this.isCompactExpanded = false;\n  };\n\n  private _updateCounter() {\n    let newCounterText: string;\n\n    if (this.isCompactExpanded) {\n      newCounterText = \"Back to Form\";\n      this.style.height = \"-webkit-fit-content\";\n      this.style.height = \"-moz-fit-content\";\n      this.style.height = \"fit-content\";\n    } else {\n      this.style.height = \"auto\";\n\n      const steps = this.querySelectorAll<HTMLElement>(\"nys-step\");\n      const selectedIndex = Array.from(steps).findIndex((step) =>\n        step.hasAttribute(\"selected\"),\n      );\n      const totalSteps = steps.length;\n\n      newCounterText =\n        selectedIndex >= 0\n          ? `Step ${selectedIndex + 1} of ${totalSteps}`\n          : `Step 1 of ${totalSteps}`;\n    }\n\n    if (newCounterText !== this.counterText) {\n      this.counterText = newCounterText;\n    }\n  }\n\n  willUpdate() {\n    const steps = this.querySelectorAll<any>(\"nys-step\");\n\n    if (!this._stepsNumbered) {\n      steps.forEach((step, index) => {\n        step.stepNumber = index + 1;\n      });\n      this._stepsNumbered = true;\n    }\n\n    let foundCurrent = false;\n    let selectedAssigned = false;\n    let currentAssigned = false;\n\n    steps.forEach((step, i) => {\n      // Check if multiple \"current\" exist, respect the first instance.\n      // Read the Lit property (set synchronously by frameworks) rather than the\n      // DOM attribute (which Lit reflects asynchronously) so this works in React.\n      if (step.current) {\n        if (!currentAssigned) {\n          currentAssigned = true;\n        } else {\n          step.current = false;\n        }\n      }\n\n      // Set first\n      if (i === 0) {\n        step.setAttribute(\"first\", \"\");\n      } else {\n        step.removeAttribute(\"first\");\n      }\n\n      // Set previous\n      if (step.current) {\n        foundCurrent = true;\n        step.previous = false;\n      } else if (!foundCurrent) {\n        step.previous = true;\n      } else {\n        step.previous = false;\n      }\n\n      // Handle selected, respect first instance\n      if (step.selected) {\n        if (foundCurrent || selectedAssigned) {\n          step.selected = false;\n        } else {\n          selectedAssigned = true;\n        }\n      }\n\n      // Handle compact expanded\n      if (this.isCompactExpanded) {\n        step.setAttribute(\"isCompactExpanded\", \"\");\n      } else {\n        step.removeAttribute(\"isCompactExpanded\");\n      }\n    });\n\n    // Selected fallback\n    if (!selectedAssigned) {\n      if (currentAssigned) {\n        steps.forEach((step) => {\n          if (step.current && !selectedAssigned) {\n            step.setAttribute(\"selected\", \"\");\n            selectedAssigned = true;\n          }\n        });\n      } else if (steps.length > 0) {\n        // If no current or selected, mark first as both current and selected\n        steps[0].setAttribute(\"current\", \"\");\n        steps[0].setAttribute(\"selected\", \"\");\n      }\n    }\n\n    // Always update counter\n    this._updateCounter();\n  }\n\n  private _toggleCompact() {\n    this.isCompactExpanded = !this.isCompactExpanded;\n  }\n\n  private _handleCounterKeydown(event: KeyboardEvent) {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      this._toggleCompact();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-stepper\" name=${this.name}>\n        <div class=\"nys-stepper__header\">\n          <slot name=\"actions\" @slotchange=${this._validateButtonSlot}></slot>\n          <div class=\"nys-stepper__headertext\">\n            <div class=\"nys-stepper__label\">${this.label}</div>\n            <div\n              class=\"nys-stepper__counter\"\n              @click=${this._toggleCompact}\n              @keydown=${this._handleCounterKeydown}\n              role=\"button\"\n              tabindex=\"0\"\n              aria-label=${this.isCompactExpanded\n                ? \"Collapse step navigation to view the form\"\n                : `Expand step navigation. You are on ${this.counterText}`}\n              aria-expanded=${this.isCompactExpanded ? \"true\" : \"false\"}\n            >\n              ${this.counterText}\n            </div>\n          </div>\n        </div>\n        <slot class=\"nys-stepper__steps\"></slot>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-stepper\")) {\n  customElements.define(\"nys-stepper\", NysStepper);\n}\n"],"names":["_NysStep","LitElement","event","html","unsafeCSS","styles","NysStep","__decorateClass","property","stepperIdCounter","_NysStepper","clickedStep","el","steps","currentIndex","step","clickedIndex","child","isStep","isSlotActionsContainer","assignedElements","div","button","newCounterText","selectedIndex","totalSteps","index","foundCurrent","selectedAssigned","currentAssigned","i","NysStepper"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-stepper",
-  "version": "1.18.0",
+  "version": "1.18.3",
   "description": "The Stepper component from the NYS Design System.",
   "module": "dist/nys-stepper.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-button": "^1.18.0"
+    "@nysds/nys-button": "^1.18.3"
   },
   "devDependencies": {
     "lit": "^3.3.1",