@cobwds/cob-stepper 1.19.3

package/dist/cob-stepper.js

@@ -0,0 +1,222 @@
+import { LitElement as h, unsafeCSS as u, html as v } from "lit";
+import { property as c } from "lit/decorators.js";
+/*!
+   * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
+   * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
+   * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
+   *
+   * Stepper Component v1.19.3
+   * Part of the City of Boston Web Design System
+   * Repository: https://github.com/CityOfBoston/nywds-poc
+   * License: MIT
+*/
+const m = ':host{--_cob-stepper-font-size: var(--cob-font-size-ui-md, 16px);--_cob-stepper-font-weight: var(--cob-font-weight-semibold, 600);--_cob-stepper-line-height: var(--cob-font-lineheight-ui-md, 24px);--_cob-stepper-font-family: var( --cob-font-family-ui, var(--cob-font-family-serif, "Lora", "Georgia", "Times New Roman", serif) );--_cob-step-color: var(--cob-color-text, #1b1b1b);--_cob-stepper-background-color: var(--cob-color-surface-raised, #f6f6f6)}.cob-stepper{font-family:var(--_cob-stepper-font-family);font-size:var(--_cob-stepper-font-size);font-weight:var(--_cob-stepper-font-weight);line-height:var(--_cob-stepper-line-height);display:flex;flex-direction:column;counter-reset:step;background-color:var(--_cob-stepper-background-color);max-width:100%;height:100%}.cob-stepper__header{display:flex;flex-direction:column;padding:var(--cob-space-400, 32px) var(--cob-space-400, 32px) var(--cob-space-150, 12px)}::slotted(div[slot=actions]){display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--cob-space-100, 8px);margin-bottom:var(--cob-space-300, 24px)}.cob-stepper__counter{display:none;text-decoration:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:auto;text-underline-position:from-font;color:var(--cob-color-text, #1b1b1b);text-overflow:ellipsis;font-family:var(--cob-font-family-ui, "Montserrat");font-size:var(--cob-font-size-ui-md, 16px);font-style:normal;font-weight:400;line-height:var(--cob-font-size-ui-md, 16px);cursor:pointer;width:fit-content}.cob-stepper__steps{display:flex;flex-direction:column;padding:var(--cob-space-150, 12px) var(--cob-space-400, 32px) var(--cob-space-400, 32px);overflow-y:scroll;height:fit-content;height:-moz-available;scrollbar-width:none;background:linear-gradient(var(--cob-color-surface-raised, #f6f6f6) 30%,rgba(255,255,255,0)) center top,linear-gradient(rgba(255,255,255,0),var(--cob-color-surface-raised, #f6f6f6) 70%) center bottom,linear-gradient(to bottom,#63636333,#0000) top,linear-gradient(to top,#63636333,#0000) bottom;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;background-color:var(--cob-color-surface-raised, #f6f6f6)}.cob-step{position:relative;counter-increment:step;display:flex;flex-direction:column}.cob-step__contentwrapper{display:flex;flex-direction:row;align-items:center;gap:var(--cob-space-150, 12px);cursor:default;width:fit-content}.cob-step__contentwrapper:focus-visible{outline:solid var(--cob-color-focus, #004dd1) var(--cob-border-width-md, 2px);outline-offset:var(--cob-space-2px, 2px);border-radius:var(--cob-radius-md, 4px)}.cob-step__linewrapper{width:24px;display:flex;justify-content:center}.cob-step__line{width:var(--cob-size-1px, 1px);height:var(--cob-size-300, 24px);border-radius:var(--cob-radius-round, 1776px);background:var(--cob-color-black-transparent-200, rgba(27, 27, 27, .2));margin:var(--cob-space-100, 8px) 0}.cob-step__number{border-radius:var(--cob-radius-round, 1776px);border:var(--cob-size-1px, 1px) solid var(--cob-color-neutral-400, #909395);background:var(--cob-color-white-transparent-900, rgba(255, 255, 255, .9));width:var(--cob-size-300, 24px);min-width:var(--cob-size-300, 24px);max-width:var(--cob-size-300, 24px);height:var(--cob-size-300, 24px);min-height:var(--cob-size-300, 24px);max-height:var(--cob-size-300, 24px);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cob-color-text, #1b1b1b)}:host([previous]) .cob-step__number,:host([previous]) .cob-step__line,:host([current]) .cob-step__number,:host([current]) .cob-step__line{background-color:var(--cob-color-theme-stronger, #091f2f);color:var(--cob-color-text-reverse, #ffffff);border-color:var(--cob-color-theme-stronger, #091f2f)}:host([selected]) .cob-step__number{background-color:var(--cob-color-theme, #1871bd);color:var(--cob-color-text-reverse, #ffffff);border-color:var(--cob-color-theme, #1871bd);outline:var(--cob-size-50, 4px) solid var(--cob-color-theme-weak, #cddde9)}:host([first]) .cob-step__linewrapper{display:none!important}.cob-step__content{display:flex;flex-direction:column;gap:var(--cob-space-100, 8px)}.cob-step__label{color:var(--_cob-step-color);font-family:var(--_cob-stepper-font-family);font-size:var(--_cob-stepper-font-size);font-weight:var(--_cob-stepper-font-weight);line-height:var(--_cob-stepper-line-height);line-height:var(--cob-font-size-ui-md, 16px);letter-spacing:var(--cob-font-letterspacing-ui-md, .044px);text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:var(7%, 1.12px);text-underline-offset:auto}:host([current]) .cob-step__label,:host([previous]) .cob-step__label{text-decoration-line:underline}:host([current]) .cob-step__contentwrapper,:host([previous]) .cob-step__contentwrapper{cursor:pointer}:host([selected]) .cob-step__label{font-weight:700;text-decoration-line:none}:host([selected]) .cob-step__contentwrapper{cursor:default}:host([selected]) .cob-step__contentwrapper:focus-visible{outline-offset:6px}@media(max-width:1023px){.cob-stepper{max-width:1023px;width:100%}.cob-stepper__header{flex-direction:row-reverse;justify-content:space-between;padding:var(--cob-space-150, 12px);gap:var(--cob-space-200, 16px)}.cob-stepper__headertext{flex:1 1 0;min-width:0}::slotted(div[slot=actions]){margin-bottom:0;min-width:0;justify-content:end}.cob-stepper__counter{display:block}.cob-stepper__steps{flex-direction:row;gap:var(--cob-space-2px, 2px);padding:0}.cob-stepper__steps::slotted(*){flex:1}.cob-step__number{border-radius:0;border:none;background-color:var(--cob-color-neutral-200, #bec0c1);height:var(--cob-size-100, 8px);min-height:var(--cob-size-100, 8px);max-height:var(--cob-size-100, 8px);width:100%;min-width:100%;max-width:100%;color:transparent}:host([previous]) .cob-step__number,:host([current]) .cob-step__number{background-color:var(--cob-color-neutral-900, #1b1b1b);color:transparent}:host([selected]) .cob-step__number{background-color:var(--cob-color-theme-mid, #457aa5);outline:none}.cob-step__content,.cob-step__linewrapper{display:none}.cob-step__contentwrapper{cursor:default;pointer-events:none;width:auto}:host([isCompactExpanded]) .cob-step__content,:host([isCompactExpanded]) .cob-step__linewrapper{display:flex}:host([isCompactExpanded]) .cob-stepper__header{padding-bottom:var(--cob-space-250, 20px)}:host([isCompactExpanded]) .cob-stepper__steps{width:-webkit-fill-available;width:-moz-available;z-index:9999;overflow-y:auto;flex-direction:column;gap:0;padding:var(--cob-space-150, 12px) var(--cob-space-400, 32px) var(--cob-space-400, 32px)}:host([isCompactExpanded]) .cob-stepper__steps::slotted(*){flex:none}:host([isCompactExpanded]) .cob-step__number{border-radius:var(--cob-radius-round, 1776px);border:1px solid var(--cob-color-neutral-400, #909395);background:var(--cob-color-white-transparent-900, rgba(255, 255, 255, .9));width:var(--cob-space-300, 24px);min-width:var(--cob-space-300, 24px);max-width:var(--cob-space-300, 24px);height:var(--cob-space-300, 24px);min-height:var(--cob-space-300, 24px);max-height:var(--cob-space-300, 24px);color:var(--cob-color-text, #1b1b1b)}:host([isCompactExpanded][previous]) .cob-step__number,:host([isCompactExpanded][previous]) .cob-step__line,:host([isCompactExpanded][current]) .cob-step__number,:host([isCompactExpanded][current]) .cob-step__line{background:var(--cob-color-theme-stronger, #091f2f);color:var(--cob-color-text-reverse, #ffffff);border-color:var(--cob-color-theme-stronger, #091f2f)}:host([isCompactExpanded][selected]) .cob-step__number{background:var(--cob-color-theme, #1871bd);color:var(--cob-color-text-reverse, #ffffff);border-color:var(--cob-color-theme, #1871bd);outline:4px solid var(--cob-color-theme-weak, #cddde9)}:host([isCompactExpanded]) .cob-step__contentwrapper{pointer-events:all}}';
+var x = Object.defineProperty, p = (l, e, r, s) => {
+  for (var o = void 0, t = l.length - 1, i; t >= 0; t--)
+    (i = l[t]) && (o = i(e, r, o) || o);
+  return o && x(e, r, o), o;
+};
+const b = class b extends h {
+  constructor() {
+    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);
+    const r = new CustomEvent("cob-step-click", {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0,
+      detail: { href: this.href, label: this.label }
+    });
+    (this.hasAttribute("previous") || this.current) && !this.selected && (this.dispatchEvent(r), !r.defaultPrevented && this.href && (window.location.href = this.href));
+  }
+  _handleKeydown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleActivate(e));
+  }
+  render() {
+    return v`
+      <div class="cob-step">
+        <div class="cob-step__linewrapper">
+          <div class="cob-step__line"></div>
+        </div>
+        <div
+          class="cob-step__contentwrapper"
+          @click=${this._handleActivate}
+          @keydown=${this._handleKeydown}
+          ?disabled=${!(this.selected || this.current || this.hasAttribute("previous"))}
+        >
+          <div class="cob-step__number" tabindex="-1" aria-hidden="true">
+            ${this.stepNumber}
+          </div>
+          <div class="cob-step__content" tabindex="-1" aria-hidden="true">
+            <div
+              class="cob-step__label"
+              role="button"
+              aria-label="${this.label} Step"
+              tabindex=${this.selected || this.current || this.hasAttribute("previous") ? "0" : "-1"}
+              aria-hidden="true"
+            >
+              ${this.label}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+b.styles = u(m);
+let a = b;
+p([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "selected");
+p([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "current");
+p([
+  c({ type: String })
+], a.prototype, "label");
+p([
+  c({ type: String })
+], a.prototype, "href");
+p([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "previous");
+p([
+  c({ type: Boolean })
+], a.prototype, "isCompactExpanded");
+p([
+  c({ attribute: !1 })
+], a.prototype, "onClick");
+p([
+  c({ type: Number })
+], a.prototype, "stepNumber");
+customElements.get("cob-step") || customElements.define("cob-step", a);
+var _ = Object.defineProperty, d = (l, e, r, s) => {
+  for (var o = void 0, t = l.length - 1, i; t >= 0; t--)
+    (i = l[t]) && (o = i(e, r, o) || o);
+  return o && _(e, r, o), o;
+};
+let g = 0;
+const f = class f extends h {
+  constructor() {
+    super(), this.id = "", this.name = "", this.label = "", this.counterText = "initial", this.isCompactExpanded = !1, this._stepsNumbered = !1, this._onStepClick = async (e) => {
+      const r = e.composedPath().find(
+        (i) => i instanceof HTMLElement && i.tagName.toLowerCase() === "cob-step"
+      );
+      if (!r) return;
+      const s = Array.from(this.querySelectorAll("cob-step")), o = s.findIndex(
+        (i) => i.hasAttribute("current")
+      ), t = s.indexOf(r);
+      o !== -1 && t > o || r.hasAttribute("selected") || (s.forEach((i) => i.removeAttribute("selected")), r.setAttribute("selected", ""), this._updateCounter(), this.isCompactExpanded = !1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("cob-step-click", this._onStepClick), requestAnimationFrame(() => this._validateSteps()), this.id || (this.id = `cob-stepper-${++g}-${Date.now()}`);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("cob-step-click", this._onStepClick), super.disconnectedCallback();
+  }
+  _validateSteps() {
+    Array.from(this.children).forEach((e) => {
+      const r = e instanceof HTMLElement && e.tagName.toLowerCase() === "cob-step", s = e instanceof HTMLElement && e.hasAttribute("slot") && e.getAttribute("slot") === "actions";
+      !r && !s && (console.warn(
+        "Only <cob-step> elements or the <div slot='actions'> container are allowed as direct children of <cob-stepper>. Removing:",
+        e
+      ), e.remove());
+    });
+  }
+  _validateButtonSlot(e) {
+    const s = e.target.assignedElements();
+    if (s.length !== 1 || s[0].tagName.toLowerCase() !== "div") {
+      console.warn(
+        "The 'actions' slot must have exactly one <div> as a direct child."
+      );
+      return;
+    }
+    const o = s[0];
+    Array.from(o.children).forEach((t) => {
+      t instanceof HTMLElement && t.tagName.toLowerCase() === "cob-button" ? (t.setAttribute("size", "sm"), t.hasAttribute("fullWidth") && (t.style.flex = "1 1 0")) : (console.warn(
+        "The <div> inside 'actions' slot only accepts <cob-button> elements. Removing invalid node:",
+        t
+      ), t.remove());
+    });
+  }
+  _updateCounter() {
+    let e;
+    if (this.isCompactExpanded)
+      e = "Back to Form", this.style.height = "-webkit-fit-content", this.style.height = "-moz-fit-content", this.style.height = "fit-content";
+    else {
+      this.style.height = "auto";
+      const r = this.querySelectorAll("cob-step"), s = Array.from(r).findIndex(
+        (t) => t.hasAttribute("selected")
+      ), o = r.length;
+      e = s >= 0 ? `Step ${s + 1} of ${o}` : `Step 1 of ${o}`;
+    }
+    e !== this.counterText && (this.counterText = e);
+  }
+  willUpdate() {
+    const e = this.querySelectorAll("cob-step");
+    this._stepsNumbered || (e.forEach((t, i) => {
+      t.stepNumber = i + 1;
+    }), this._stepsNumbered = !0);
+    let r = !1, s = !1, o = !1;
+    e.forEach((t, i) => {
+      t.current && (o ? t.current = !1 : o = !0), i === 0 ? t.setAttribute("first", "") : t.removeAttribute("first"), t.current ? (r = !0, t.previous = !1) : r ? t.previous = !1 : t.previous = !0, t.selected && (r || s ? t.selected = !1 : s = !0), this.isCompactExpanded ? t.setAttribute("isCompactExpanded", "") : t.removeAttribute("isCompactExpanded");
+    }), s || (o ? e.forEach((t) => {
+      t.current && !s && (t.setAttribute("selected", ""), s = !0);
+    }) : e.length > 0 && (e[0].setAttribute("current", ""), e[0].setAttribute("selected", ""))), this._updateCounter();
+  }
+  _toggleCompact() {
+    this.isCompactExpanded = !this.isCompactExpanded;
+  }
+  _handleCounterKeydown(e) {
+    (e.key === " " || e.key === "Enter") && (e.preventDefault(), this._toggleCompact());
+  }
+  render() {
+    return v`
+      <div class="cob-stepper" name=${this.name}>
+        <div class="cob-stepper__header">
+          <slot name="actions" @slotchange=${this._validateButtonSlot}></slot>
+          <div class="cob-stepper__headertext">
+            <div class="cob-stepper__label">${this.label}</div>
+            <div
+              class="cob-stepper__counter"
+              @click=${this._toggleCompact}
+              @keydown=${this._handleCounterKeydown}
+              role="button"
+              tabindex="0"
+              aria-label=${this.isCompactExpanded ? "Collapse step navigation to view the form" : `Expand step navigation. You are on ${this.counterText}`}
+              aria-expanded=${this.isCompactExpanded ? "true" : "false"}
+            >
+              ${this.counterText}
+            </div>
+          </div>
+        </div>
+        <slot class="cob-stepper__steps"></slot>
+      </div>
+    `;
+  }
+};
+f.styles = u(m);
+let n = f;
+d([
+  c({ type: String, reflect: !0 })
+], n.prototype, "id");
+d([
+  c({ type: String, reflect: !0 })
+], n.prototype, "name");
+d([
+  c({ type: String })
+], n.prototype, "label");
+d([
+  c({ type: String })
+], n.prototype, "counterText");
+d([
+  c({ type: Boolean, reflect: !0 })
+], n.prototype, "isCompactExpanded");
+customElements.get("cob-stepper") || customElements.define("cob-stepper", n);
+export {
+  a as CobStep,
+  n as CobStepper
+};
+//# sourceMappingURL=cob-stepper.js.map

package/dist/cob-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cob-stepper.js","sources":["../src/cob-step.ts","../src/cob-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 \"./cob-stepper.scss?inline\";\n\n/**\n * A single step within `cob-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 `cob-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 `cob-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 `cob-step-click`.\n *\n * ## `cob-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 `cob-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 `cob-step-click`\n *\n * The `onClick` property (a function reference, not a DOM attribute) is called **before** the\n * `cob-step-click` event is dispatched. Use it for imperative pre-navigation logic. In React, pass it\n * as the `onClick` prop on `CobStep`.\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 * <cob-step label=\"Step 1\" current></cob-step>\n * <cob-step label=\"Step 2\"></cob-step>\n * ```\n *\n * **User completed step 1, now on step 2:**\n * ```html\n * <cob-step label=\"Step 1\"></cob-step>\n * <cob-step label=\"Step 2\" current></cob-step>\n * ```\n *\n * **User went back to review step 1 (progress still at step 2):**\n * ```html\n * <cob-step label=\"Step 1\" selected></cob-step>\n * <cob-step label=\"Step 2\" current></cob-step>\n * ```\n *\n * @summary Individual step for use within cob-stepper with navigation support.\n * @element cob-step\n *\n * @fires cob-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 */\nexport class CobStep 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 `cob-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 `cob-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 `cob-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(\"cob-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=\"cob-step\">\n        <div class=\"cob-step__linewrapper\">\n          <div class=\"cob-step__line\"></div>\n        </div>\n        <div\n          class=\"cob-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=\"cob-step__number\" tabindex=\"-1\" aria-hidden=\"true\">\n            ${this.stepNumber}\n          </div>\n          <div class=\"cob-step__content\" tabindex=\"-1\" aria-hidden=\"true\">\n            <div\n              class=\"cob-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(\"cob-step\")) {\n  customElements.define(\"cob-step\", CobStep);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport \"./cob-step\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./cob-stepper.scss?inline\";\n\nlet stepperIdCounter = 0;\n\n/**\n * A multi-step progress indicator for forms or wizards. Manages `cob-step` children with selection and navigation.\n *\n * Add `cob-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 `<cob-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 `cob-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 * `cob-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 `cob-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 cob-stepper\n *\n * @slot - Default slot for `cob-step` elements. Only `cob-step` children are accepted; others are removed.\n * @slot actions - Persistent navigation buttons. Must contain exactly one `<div>` wrapping only `<cob-button>` elements.\n *\n * @example Basic\n * ```html\n * <div class=\"cob-grid-row\">\n *   <cob-stepper\n *     id=\"stepper\"\n *     name=\"stepper\"\n *     label=\"Register for Web Design System Office Hours\"\n *     class=\"cob-desktop:cob-grid-col-3\"\n *   >\n *     <cob-step label=\"Personal Details\" href=\"/cob-stepper/personal.html\"></cob-step>\n *     <cob-step label=\"Team Info\" selected href=\"/cob-stepper/team.html\"></cob-step>\n *     <cob-step label=\"Usage Survey\" current href=\"/cob-stepper/survey.html\"></cob-step>\n *     <cob-step label=\"Newsletter Opt-In\" href=\"/cob-stepper/newsletter.html\"></cob-step>\n *     <div slot=\"actions\">\n *       <cob-button variant=\"outline\" label=\"Save & Exit\" fullWidth></cob-button>\n *     </div>\n *   </cob-stepper>\n *   <div class=\"cob-desktop:cob-grid-col-9\" id=\"cob-stepper-content\">\n *     Loading...\n *   </div>\n * </div>\n * ```\n * @render Basic\n * ```html\n * <div class=\"cob-grid-row\">\n *   <cob-stepper\n *     id=\"stepper\"\n *     name=\"stepper\"\n *     label=\"Register for Web Design System Office Hours\"\n *     class=\"cob-desktop:cob-grid-col-3\"\n *   >\n *     <cob-step label=\"Personal Details\" href=\"/cob-stepper/personal.html\"></cob-step>\n *     <cob-step label=\"Team Info\" selected href=\"/cob-stepper/team.html\"></cob-step>\n *     <cob-step label=\"Usage Survey\" current href=\"/cob-stepper/survey.html\"></cob-step>\n *     <cob-step label=\"Newsletter Opt-In\" href=\"/cob-stepper/newsletter.html\"></cob-step>\n *   </cob-stepper>\n *   <div class=\"cob-desktop:cob-grid-col-9\" id=\"cob-stepper-content\">\n *     Loading...\n *   </div>\n * </div>\n * <script>\n *   document.addEventListener(\"DOMContentLoaded\", async () => {\n *     const stepper = document.querySelector(\"cob-stepper\");\n *     if (stepper?.updateComplete) await stepper.updateComplete;\n *     const selectedStep = document.querySelector(\"cob-step[selected]\");\n *     const href = selectedStep?.getAttribute(\"href\");\n *     if (!href) return;\n *     const res = await fetch(href);\n *     if (!res.ok) return;\n *     const container = document.querySelector(\"#cob-stepper-content\");\n *     if (container) container.innerHTML = await res.text();\n *   });\n *\n *   document.addEventListener(\"cob-step-click\", async (e) => {\n *     const href = e.detail?.href;\n *     if (!href) return;\n *     e.preventDefault();\n *     const res = await fetch(href);\n *     if (!res.ok) return;\n *     const container = document.querySelector(\"#cob-stepper-content\");\n *     if (container) container.innerHTML = await res.text();\n *   });\n * </script>\n * ```\n *\n * @example Actions slot\n * ```html\n * <div class=\"cob-grid-row\">\n *   <cob-stepper\n *     id=\"stepper\"\n *     name=\"stepper\"\n *     label=\"Register for Web Design System Office Hours\"\n *     class=\"cob-desktop:cob-grid-col-3\"\n *   >\n *     <cob-step label=\"Personal Details\" href=\"/cob-stepper/personal.html\"></cob-step>\n *     <cob-step label=\"Team Info\" selected href=\"/cob-stepper/team.html\"></cob-step>\n *     <cob-step label=\"Usage Survey\" current href=\"/cob-stepper/survey.html\"></cob-step>\n *     <cob-step label=\"Newsletter Opt-In\" href=\"/cob-stepper/newsletter.html\"></cob-step>\n *     <div slot=\"actions\">\n *       <cob-button variant=\"outline\" label=\"Save & Exit\" fullWidth></cob-button>\n *     </div>\n *   </cob-stepper>\n *   <div class=\"cob-desktop:cob-grid-col-9\" id=\"cob-stepper-content\">\n *     Loading...\n *   </div>\n * </div>\n * ```\n * @render Actions slot\n * ```html\n * <div class=\"cob-grid-row\">\n *   <cob-stepper\n *     id=\"stepper\"\n *     name=\"stepper\"\n *     label=\"Register for Web Design System Office Hours\"\n *     class=\"cob-desktop:cob-grid-col-3\"\n *   >\n *     <cob-step label=\"Personal Details\" href=\"/cob-stepper/personal.html\"></cob-step>\n *     <cob-step label=\"Team Info\" selected href=\"/cob-stepper/team.html\"></cob-step>\n *     <cob-step label=\"Usage Survey\" current href=\"/cob-stepper/survey.html\"></cob-step>\n *     <cob-step label=\"Newsletter Opt-In\" href=\"/cob-stepper/newsletter.html\"></cob-step>\n *     <div slot=\"actions\">\n *       <cob-button variant=\"outline\" label=\"Save & Exit\" fullWidth></cob-button>\n *     </div>\n *   </cob-stepper>\n *   <div class=\"cob-desktop:cob-grid-col-9\" id=\"cob-stepper-content\">\n *     Loading...\n *   </div>\n * </div>\n * <script>\n *   document.addEventListener(\"DOMContentLoaded\", async () => {\n *     const stepper = document.querySelector(\"cob-stepper\");\n *     if (stepper?.updateComplete) await stepper.updateComplete;\n *     const selectedStep = document.querySelector(\"cob-step[selected]\");\n *     const href = selectedStep?.getAttribute(\"href\");\n *     if (!href) return;\n *     const res = await fetch(href);\n *     if (!res.ok) return;\n *     const container = document.querySelector(\"#cob-stepper-content\");\n *     if (container) container.innerHTML = await res.text();\n *   });\n *\n *   document.addEventListener(\"cob-step-click\", async (e) => {\n *     const href = e.detail?.href;\n *     if (!href) return;\n *     e.preventDefault();\n *     const res = await fetch(href);\n *     if (!res.ok) return;\n *     const container = document.querySelector(\"#cob-stepper-content\");\n *     if (container) container.innerHTML = await res.text();\n *   });\n * </script>\n * ```\n */\n\nexport class CobStepper extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Unique identifier. Auto-generated as `cob-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(\"cob-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 = `cob-stepper-${++stepperIdCounter}-${Date.now()}`;\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\"cob-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() === \"cob-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 <cob-step> elements or the <div slot='actions'> container are allowed as direct children of <cob-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() === \"cob-button\";\n\n      if (!isNysButton) {\n        console.warn(\n          \"The <div> inside 'actions' slot only accepts <cob-button> elements. Removing invalid node:\",\n          button,\n        );\n        button.remove();\n      } else {\n        // Ensure cob-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() === \"cob-step\",\n      ) as HTMLElement | undefined;\n\n    if (!clickedStep) return;\n\n    const steps = Array.from(this.querySelectorAll(\"cob-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>(\"cob-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>(\"cob-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=\"cob-stepper\" name=${this.name}>\n        <div class=\"cob-stepper__header\">\n          <slot name=\"actions\" @slotchange=${this._validateButtonSlot}></slot>\n          <div class=\"cob-stepper__headertext\">\n            <div class=\"cob-stepper__label\">${this.label}</div>\n            <div\n              class=\"cob-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=\"cob-stepper__steps\"></slot>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"cob-stepper\")) {\n  customElements.define(\"cob-stepper\", CobStepper);\n}\n"],"names":["_CobStep","LitElement","event","html","unsafeCSS","styles","CobStep","__decorateClass","property","stepperIdCounter","_CobStepper","clickedStep","el","steps","currentIndex","step","clickedIndex","child","isStep","isSlotActionsContainer","assignedElements","div","button","newCounterText","selectedIndex","totalSteps","index","foundCurrent","selectedAssigned","currentAssigned","CobStepper"],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@cobwds/cob-stepper",
+  "version": "1.19.3",
+  "description": "The Stepper component from the City of Boston Web Design System.",
+  "module": "dist/cob-stepper.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/cob-stepper.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "type": "module",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "dev": "tsc --emitDeclarationOnly && vite",
+    "build": "vite build",
+    "test": "vite build && wtr",
+    "build:watch": "tsc --emitDeclarationOnly && vite build --watch",
+    "test:watch": "vite build && wtr --watch",
+    "lit-analyze": "lit-analyzer '**/*.ts'"
+  },
+  "dependencies": {
+    "@cobwds/cob-button": "^1.19.3"
+  },
+  "devDependencies": {
+    "lit": "^3.3.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "keywords": [
+    "city-of-boston",
+    "design-system",
+    "web-components",
+    "lit",
+    "cob",
+    "stepper",
+    "forms"
+  ],
+  "author": "City of Boston Web Design System Team",
+  "license": "MIT",
+  "sideEffects": true,
+  "peerDependencies": {
+    "lit": "^3.3.1"
+  }
+}