@nectary/components 5.38.1 → 5.39.0

package/progress-stepper-v2/index.js

@@ -0,0 +1,618 @@
+import "../action-menu/index.js";
+import "../action-menu-option/index.js";
+import "../icon/index.js";
+import "../pop/index.js";
+import { TAG_PROGRESS_STEPPER, TAG_PROGRESS_STEPPER_ITEM, ATTR_PROGRESS_STEPPER_ITEM_STATUS, ATTR_PROGRESS_STEPPER_ITEM_LAYOUT, isProgressStepperItemActive, syncProgressStepperItemsRovingTabIndexes, setProgressStepperItemChecked, getProgressStepperFocusedItemIndex, setProgressStepperItemStatus, isProgressStepperItemChecked } from "../progress-stepper-item-v2/utils.js";
+import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { getTargetByAttribute } from "../utils/event-target.js";
+import { ProgressStepperCompactController } from "./compact.js";
+import { computeOrientationLayout, deriveStepStatuses } from "./model.js";
+import { OrientationScheduler } from "./orientation.js";
+import { syncStepSeparators } from "./separators.js";
+const templateHTML = '<style>:host{display:block;position:relative}#wrapper{display:flex;width:100%;align-items:stretch}#wrapper[data-orientation=horizontal]{flex-direction:row}#wrapper[data-orientation=horizontal] ::slotted(sinch-progress-stepper-item-v2){flex:0 0 auto;align-self:stretch;min-width:0}#wrapper[data-orientation=horizontal] ::slotted(sinch-icon[data-nectary-progress-stepper-v2-separator]){display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;min-inline-size:24px;padding-inline:4px;pointer-events:none;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-progress-stepper-v2-step-color-chevron)}#wrapper[data-orientation=vertical] ::slotted(sinch-icon[data-nectary-progress-stepper-v2-separator]){display:none!important}:host(:dir(rtl)) #wrapper[data-orientation=horizontal] ::slotted(sinch-icon[data-nectary-progress-stepper-v2-separator]){transform:scaleX(-1)}#wrapper[data-orientation=vertical]{position:absolute;width:100%;max-width:100%;height:0;overflow:hidden;visibility:hidden;pointer-events:none;flex-direction:row;align-items:stretch}#wrapper[data-orientation=vertical] ::slotted(sinch-progress-stepper-item-v2){flex:0 0 auto}#menu-wrapper{display:none;width:100%}#menu-wrapper[data-visible=true]{display:block;width:100%}#menu-wrapper[data-visible=true] sinch-pop{width:100%}#menu-wrapper[data-visible=true] #compact-stepper-pop-panel-gap{position:relative;padding-top:0;width:fit-content;min-width:100%;box-sizing:border-box}#menu-wrapper[data-visible=true] #compact-stepper-pop-panel{background-color:var(--sinch-comp-progress-stepper-v2-step-color-compact-background);border:1px solid var(--sinch-comp-progress-stepper-v2-step-color-compact-border);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}#menu-wrapper[data-visible=true] #compact-stepper-trigger{all:unset;display:flex;align-items:center;gap:8px;width:100%;max-width:100%;min-height:var(--sinch-comp-button-size-container-l);padding:8px 10px;box-sizing:border-box;border:1px solid var(--sinch-comp-progress-stepper-v2-step-color-compact-border);border-radius:var(--sinch-comp-popover-shape-radius);background-color:var(--sinch-comp-progress-stepper-v2-step-color-compact-background);cursor:pointer;user-select:none}#menu-wrapper[data-visible=true] #compact-stepper-trigger:focus-visible{outline:2px solid var(--sinch-sys-color-focus);outline-offset:2px}#menu-wrapper[data-visible=true] #compact-stepper-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start;font:var(--sinch-comp-progress-stepper-v2-step-font-label-initial);color:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-initial)}#menu-wrapper[data-visible=true] #compact-stepper-chevron{flex-shrink:0;color:var(--sinch-comp-progress-stepper-v2-step-color-compact-chevron);pointer-events:none;--sinch-global-color-icon:currentcolor;--sinch-global-size-icon:24px}#menu-wrapper[data-visible=true] #compact-stepper-counter{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;height:24px;min-height:24px;padding:2px 9px;border:none;border-radius:var(--sinch-comp-progress-stepper-v2-step-shape-radius-indicator);background-color:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-icon-container-initial);color:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-icon-initial);user-select:none;white-space:nowrap;font:var(--sinch-sys-font-body-s);line-height:1}#menu-wrapper[data-visible=true] #compact-stepper-trigger[data-step-invalid] #compact-stepper-counter{background-color:var(--sinch-comp-progress-stepper-v2-step-color-invalid-icon-container-initial);color:var(--sinch-comp-progress-stepper-v2-step-color-invalid-icon-initial)}#menu-wrapper[data-visible=true] #compact-stepper-trigger[data-step-status=complete]:not([data-step-invalid]) #compact-stepper-counter{background-color:var(--sinch-comp-progress-stepper-v2-step-color-complete-icon-container-initial);color:var(--sinch-comp-progress-stepper-v2-step-color-complete-icon-initial)}#menu-wrapper[data-visible=true] sinch-action-menu{display:block;width:100%;box-sizing:border-box}#menu-wrapper[data-visible=true] sinch-action-menu-option{width:100%;box-sizing:border-box;outline:0;-webkit-tap-highlight-color:transparent;--sinch-comp-text-align:start}#menu-wrapper[data-visible=true] sinch-action-menu-option:focus,#menu-wrapper[data-visible=true] sinch-action-menu-option:focus-visible{outline:0}#menu-wrapper[data-visible=true] sinch-action-menu-option:is([data-step-status=incomplete],[data-step-status=inactive]):not([data-step-invalid]){--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-initial);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-initial);--sinch-comp-action-menu-color-default-background-hover:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-background-hover);--sinch-comp-action-menu-color-disabled-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-initial)}#menu-wrapper[data-visible=true] sinch-action-menu-option:is([data-step-status=incomplete],[data-step-status=inactive]):not([data-step-invalid])[data-step-checked]{--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-current);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-current)}#menu-wrapper[data-visible=true] sinch-action-menu-option[data-step-status=complete]:not([data-step-invalid]){--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-initial);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-initial);--sinch-comp-action-menu-color-default-background-hover:var(--sinch-comp-progress-stepper-v2-step-color-complete-background-hover)}#menu-wrapper[data-visible=true] sinch-action-menu-option[data-step-status=complete]:not([data-step-invalid])[data-step-checked]{--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-current);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-current)}#menu-wrapper[data-visible=true] sinch-action-menu-option[data-step-invalid]{--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-initial);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-invalid-label-initial);--sinch-comp-action-menu-color-default-background-hover:var(--sinch-comp-progress-stepper-v2-step-color-invalid-background-hover)}#menu-wrapper[data-visible=true] sinch-action-menu-option[data-step-invalid][data-step-checked]{--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-current);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-invalid-label-current)}</style><div id="wrapper" data-orientation="horizontal"><slot></slot></div><div id="menu-wrapper" data-visible="false"><sinch-pop id="compact-stepper-pop" inset="4" orientation="bottom-stretch" allow-scroll><button id="compact-stepper-trigger" slot="target" type="button" tabindex="0"><span id="compact-stepper-counter" aria-hidden="true"></span> <span id="compact-stepper-label"></span><sinch-icon id="compact-stepper-chevron" icons-version="2" name="fa-chevron-down" aria-hidden="true"></sinch-icon></button><div id="compact-stepper-pop-panel-gap" slot="content"><div id="compact-stepper-pop-panel"><sinch-action-menu></sinch-action-menu></div></div></sinch-pop></div>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+const ITEM_ATTR_FILTER = [
+  "text",
+  "invalid",
+  "value",
+  "complete",
+  "disabled",
+  ATTR_PROGRESS_STEPPER_ITEM_STATUS,
+  "data-checked"
+];
+const ITEM_ATTR_RECOMPUTE_STEP_STATUS = /* @__PURE__ */ new Set(["complete", "disabled", "value"]);
+const ATTR_PROGRESS_STEPPER_ITEM_INDEX = "data-step-index";
+const ATTR_PROGRESS_STEPPER_ITEM_FORCE_FOCUS_VISIBLE = "data-force-focus-visible";
+class ProgressStepperV2 extends NectaryElement {
+  #$slot;
+  #$wrapper;
+  #$menuWrapper;
+  #$actionMenu;
+  #$compactPop;
+  #$compactTrigger;
+  #$compactLabel;
+  #$compactCounter;
+  #controller = null;
+  #$items = [];
+  #isGoingToFocusItem = false;
+  #resizeObserver;
+  #isHorizontal = true;
+  #usesCompactActionMenu = false;
+  #itemAttrObserver = null;
+  #childListObserver = null;
+  #orientationScheduler = new OrientationScheduler(() => this.#scheduleRender({ orientation: true }));
+  #renderQueued = false;
+  #renderNeedsItems = false;
+  #renderNeedsValue = false;
+  #renderNeedsStepStatuses = false;
+  #renderNeedsOrientation = false;
+  #renderNeedsCompactSync = false;
+  #renderShouldFocusValue = false;
+  #compactController;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$slot = shadowRoot.querySelector("slot:not([name])");
+    this.#$wrapper = shadowRoot.querySelector("#wrapper");
+    this.#$menuWrapper = shadowRoot.querySelector("#menu-wrapper");
+    this.#$compactPop = shadowRoot.querySelector("#compact-stepper-pop");
+    this.#$compactTrigger = shadowRoot.querySelector("#compact-stepper-trigger");
+    this.#$compactLabel = shadowRoot.querySelector("#compact-stepper-label");
+    this.#$compactCounter = shadowRoot.querySelector("#compact-stepper-counter");
+    this.#$actionMenu = shadowRoot.querySelector("sinch-action-menu");
+    this.#compactController = new ProgressStepperCompactController({
+      actionMenu: this.#$actionMenu,
+      pop: this.#$compactPop,
+      trigger: this.#$compactTrigger,
+      label: this.#$compactLabel,
+      counter: this.#$compactCounter
+    });
+    this.#resizeObserver = new ResizeObserver(this.#onResize);
+  }
+  connectedCallback() {
+    this.setAttribute("data-orientation", "horizontal");
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    const options = { signal };
+    this.#updateHostAriaRole();
+    this.#$slot.addEventListener("click", this.#onOptionClick, options);
+    this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
+    this.addEventListener("focusout", this.#onStepperFocusOut, { ...options, capture: true });
+    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("focusin", this.#onHostFocusInCompactOnly, options);
+    this.#$compactTrigger.addEventListener("click", this.#onCompactTriggerClick, options);
+    this.#$compactPop.addEventListener("-close", this.#onCompactPopoverClose, options);
+    this.#compactController.connect(signal);
+    this.#resizeObserver.observe(this);
+    this.#resizeObserver.observe(this.#$wrapper);
+    this.#setupChildListObserver();
+    this.#primeAssignedSlotStepStatuses();
+    window.addEventListener("resize", this.#onResize, { signal });
+    queueMicrotask(() => {
+      this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
+      this.#scheduleRender({ items: true });
+    });
+  }
+  disconnectedCallback() {
+    this.#orientationScheduler.cancel();
+    this.#controller.abort();
+    this.#controller = null;
+    this.#resizeObserver.disconnect();
+    this.#teardownItemAttrObserver();
+    this.#teardownChildListObserver();
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "progressvalue",
+      "nocompletionorder",
+      "noautoorientation",
+      "aria-label",
+      "compact-counter-format",
+      "compact-trigger-aria-label-format"
+    ];
+  }
+  attributeChangedCallback(name, _, _newVal) {
+    switch (name) {
+      case "value": {
+        const activeElement = document.activeElement;
+        const shouldFocusValue = activeElement === this || activeElement != null && this.contains(activeElement);
+        this.#scheduleRender({
+          value: true,
+          compact: true,
+          focusValue: shouldFocusValue
+        });
+        break;
+      }
+      case "progressvalue":
+      case "nocompletionorder": {
+        this.#scheduleRender({
+          stepStatuses: true,
+          compact: true
+        });
+        break;
+      }
+      case "noautoorientation": {
+        this.#scheduleRender({
+          orientation: true,
+          compact: true
+        });
+        break;
+      }
+      case "aria-label":
+      case "compact-counter-format":
+      case "compact-trigger-aria-label-format": {
+        this.#scheduleRender({ compact: true });
+        break;
+      }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, "value", value);
+  }
+  get value() {
+    return getAttribute(this, "value", "");
+  }
+  set progressValue(value) {
+    updateAttribute(this, "progressvalue", value);
+  }
+  get progressValue() {
+    return getAttribute(this, "progressvalue", "");
+  }
+  set noCompletionOrder(value) {
+    updateBooleanAttribute(this, "nocompletionorder", value);
+  }
+  get noCompletionOrder() {
+    return getBooleanAttribute(this, "nocompletionorder");
+  }
+  set noAutoOrientation(value) {
+    updateBooleanAttribute(this, "noautoorientation", value);
+  }
+  get noAutoOrientation() {
+    return getBooleanAttribute(this, "noautoorientation");
+  }
+  set compactCounterFormat(value) {
+    updateAttribute(this, "compact-counter-format", value);
+  }
+  get compactCounterFormat() {
+    return getAttribute(this, "compact-counter-format", "");
+  }
+  set compactTriggerAriaLabelFormat(value) {
+    updateAttribute(this, "compact-trigger-aria-label-format", value);
+  }
+  get compactTriggerAriaLabelFormat() {
+    return getAttribute(this, "compact-trigger-aria-label-format", "");
+  }
+  nthOptionRect(index) {
+    if (this.#usesCompactActionMenu) {
+      const $opt = this.#$actionMenu.children[index];
+      if ($opt != null) {
+        return getRect($opt);
+      }
+      return null;
+    }
+    const $el = this.#$items[index];
+    if ($el != null) {
+      return getRect($el);
+    }
+    return null;
+  }
+  #scheduleRender({
+    items = false,
+    value = false,
+    stepStatuses = false,
+    orientation = false,
+    compact = false,
+    focusValue = false
+  }) {
+    this.#renderNeedsItems ||= items;
+    this.#renderNeedsValue ||= value;
+    this.#renderNeedsStepStatuses ||= stepStatuses;
+    this.#renderNeedsOrientation ||= orientation;
+    this.#renderNeedsCompactSync ||= compact;
+    this.#renderShouldFocusValue ||= focusValue;
+    if (this.#renderQueued) {
+      return;
+    }
+    this.#renderQueued = true;
+    queueMicrotask(() => this.#flushRender());
+  }
+  #flushRender() {
+    this.#renderQueued = false;
+    const needsItems = this.#renderNeedsItems;
+    let needsValue = this.#renderNeedsValue;
+    let needsStepStatuses = this.#renderNeedsStepStatuses;
+    let needsOrientation = this.#renderNeedsOrientation;
+    let needsCompactSync = this.#renderNeedsCompactSync;
+    const shouldFocusValue = this.#renderShouldFocusValue;
+    this.#renderNeedsItems = false;
+    this.#renderNeedsValue = false;
+    this.#renderNeedsStepStatuses = false;
+    this.#renderNeedsOrientation = false;
+    this.#renderNeedsCompactSync = false;
+    this.#renderShouldFocusValue = false;
+    if (needsItems) {
+      this.#$items = this.#getAssignedStepItems();
+      this.#updateStepIndexes();
+      this.#setupItemAttrObserver();
+      needsValue = true;
+      needsStepStatuses = true;
+      needsOrientation = true;
+      needsCompactSync = true;
+    }
+    if (needsValue) {
+      this.#onValueChange(this.value, shouldFocusValue);
+    }
+    if (needsStepStatuses) {
+      this.#syncStepItemStatuses();
+    }
+    if (needsValue || needsStepStatuses) {
+      needsCompactSync = true;
+    }
+    if (needsOrientation) {
+      this.#updateOrientation();
+      needsCompactSync = true;
+    }
+    if (needsCompactSync) {
+      this.#syncCompactMenuOptions();
+    }
+  }
+  #onSlotChange = () => {
+    this.#primeAssignedSlotStepStatuses();
+    this.#scheduleRender({ items: true });
+  };
+  #updateStepIndexes() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      this.#$items[i].setAttribute(ATTR_PROGRESS_STEPPER_ITEM_INDEX, String(i + 1));
+    }
+  }
+  #getAssignedStepItems() {
+    return [...this.#$slot.assignedElements()].filter(
+      (el) => el.tagName.toLowerCase() === TAG_PROGRESS_STEPPER_ITEM
+    );
+  }
+  #setupChildListObserver() {
+    this.#teardownChildListObserver();
+    this.#childListObserver = new MutationObserver(() => {
+      this.#primeAssignedSlotStepStatuses();
+      this.#scheduleRender({ items: true });
+    });
+    this.#childListObserver.observe(this, { childList: true });
+  }
+  #teardownChildListObserver() {
+    this.#childListObserver?.disconnect();
+    this.#childListObserver = null;
+  }
+  #onResize = () => {
+    this.#orientationScheduler.schedule();
+  };
+  #updateHostAriaRole() {
+    if (this.#usesCompactActionMenu) {
+      this.setAttribute("role", "group");
+    } else {
+      this.setAttribute("role", "tablist");
+    }
+  }
+  #teardownItemAttrObserver() {
+    this.#itemAttrObserver?.disconnect();
+    this.#itemAttrObserver = null;
+  }
+  #setupItemAttrObserver() {
+    this.#teardownItemAttrObserver();
+    if (this.#$items.length === 0) {
+      return;
+    }
+    this.#itemAttrObserver = new MutationObserver((records) => {
+      const needsStepStatusSync = records.some(
+        (r) => r.type === "attributes" && r.attributeName != null && ITEM_ATTR_RECOMPUTE_STEP_STATUS.has(r.attributeName)
+      );
+      if (needsStepStatusSync) {
+        this.#scheduleRender({
+          stepStatuses: true,
+          compact: true
+        });
+      } else {
+        this.#scheduleRender({ compact: true });
+      }
+    });
+    for (const el of this.#$items) {
+      this.#itemAttrObserver.observe(el, {
+        attributes: true,
+        attributeFilter: [...ITEM_ATTR_FILTER]
+      });
+    }
+  }
+  #updateOrientation() {
+    if (!this.isConnected || !this.#$wrapper.isConnected) {
+      return;
+    }
+    const containerWidth = Math.max(this.clientWidth, 1);
+    syncStepSeparators(this, TAG_PROGRESS_STEPPER_ITEM);
+    this.#$wrapper.dataset.orientation = "horizontal";
+    this.#syncItemLayoutAttributes(true);
+    let wrapperScrollWidth = 0;
+    if (!this.noAutoOrientation) {
+      void this.#$wrapper.offsetWidth;
+      wrapperScrollWidth = this.#$wrapper.scrollWidth;
+    }
+    const layout = computeOrientationLayout({
+      noAutoOrientation: this.noAutoOrientation,
+      containerWidth,
+      wrapperScrollWidth
+    });
+    const { isHorizontal, dataOrientation: orientation, mode } = layout;
+    const usesCompactActionMenu = mode === "compact";
+    this.#$wrapper.dataset.orientation = orientation;
+    this.setAttribute("data-orientation", orientation);
+    this.#$menuWrapper.dataset.visible = usesCompactActionMenu ? "true" : "false";
+    this.#$wrapper.toggleAttribute("inert", usesCompactActionMenu);
+    const prevCompact = this.#usesCompactActionMenu;
+    this.#usesCompactActionMenu = usesCompactActionMenu;
+    if (prevCompact !== usesCompactActionMenu) {
+      this.#updateHostAriaRole();
+    }
+    if (isHorizontal !== this.#isHorizontal) {
+      this.#isHorizontal = isHorizontal;
+    }
+    if (!isHorizontal) {
+      this.#syncItemLayoutAttributes(false);
+    }
+  }
+  #syncItemLayoutAttributes(isHorizontal) {
+    const layout = isHorizontal ? "horizontal" : "vertical";
+    for (const item of this.#$items) {
+      updateAttribute(item, ATTR_PROGRESS_STEPPER_ITEM_LAYOUT, layout);
+    }
+  }
+  #onCompactTriggerClick = () => {
+    this.#compactController.onTriggerClick(this.#usesCompactActionMenu);
+  };
+  #onCompactPopoverClose = () => {
+    this.#compactController.onPopoverClose();
+  };
+  #syncCompactMenuOptions() {
+    this.#compactController.sync({
+      usesCompactActionMenu: this.#usesCompactActionMenu,
+      items: this.#$items,
+      hostAriaLabel: this.getAttribute("aria-label"),
+      compactCounterFormat: getAttribute(this, "compact-counter-format", ""),
+      compactTriggerAriaLabelFormat: getAttribute(this, "compact-trigger-aria-label-format", ""),
+      getCheckedItemIndex: () => this.#getCheckedItemIndex(),
+      getFirstActiveItemIndex: () => this.#getFirstActiveItemIndex(),
+      onChange: (value) => {
+        this.dispatchEvent(new CustomEvent("-change", {
+          detail: value
+        }));
+      }
+    });
+  }
+  #onOptionClick = (e) => {
+    if (this.#usesCompactActionMenu) {
+      return;
+    }
+    this.#clearForcedFocusVisible();
+    const target = getTargetByAttribute(e, "value");
+    if (target !== null && isProgressStepperItemActive(target)) {
+      this.dispatchEvent(new CustomEvent("-change", {
+        detail: getAttribute(target, "value", "")
+      }));
+    }
+  };
+  #onValueChange(value, shouldFocus) {
+    for (const $item of this.#$items) {
+      const isChecked = value === getAttribute($item, "value");
+      if (shouldFocus && isChecked && this.#isItemKeyboardFocusable($item)) {
+        requestAnimationFrame(() => {
+          if (this.#usesCompactActionMenu) {
+            this.#$compactTrigger.focus();
+          } else {
+            $item.focus();
+            syncProgressStepperItemsRovingTabIndexes(this.#$items);
+          }
+        });
+      }
+      setProgressStepperItemChecked($item, isChecked);
+    }
+    queueMicrotask(() => syncProgressStepperItemsRovingTabIndexes(this.#$items));
+  }
+  #isItemKeyboardFocusable(item) {
+    return !getBooleanAttribute(item, "disabled") && isProgressStepperItemActive(item);
+  }
+  #findFirstKeyboardFocusableIndex() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      if (this.#isItemKeyboardFocusable(this.#$items[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #getArrowNavigationOriginIndex(e) {
+    const focusIdx = getProgressStepperFocusedItemIndex(
+      this.#$items,
+      document.activeElement,
+      e
+    );
+    if (focusIdx >= 0 && this.#isItemKeyboardFocusable(this.#$items[focusIdx])) {
+      return focusIdx;
+    }
+    const checkedIdx = this.#getCheckedItemIndex();
+    if (checkedIdx >= 0 && this.#isItemKeyboardFocusable(this.#$items[checkedIdx])) {
+      return checkedIdx;
+    }
+    return this.#findFirstKeyboardFocusableIndex();
+  }
+  #focusStepItemAtIndex(nextIndex) {
+    const item = this.#$items[nextIndex];
+    if (!this.#isItemKeyboardFocusable(item)) {
+      return;
+    }
+    this.#setForcedFocusVisible(item);
+    const alreadyFocused = getProgressStepperFocusedItemIndex(this.#$items, document.activeElement) === nextIndex;
+    if (!alreadyFocused) {
+      this.#isGoingToFocusItem = true;
+      item.focus();
+    }
+    syncProgressStepperItemsRovingTabIndexes(this.#$items);
+  }
+  #focusNextItem(e) {
+    if (this.#usesCompactActionMenu) {
+      return;
+    }
+    const origin = this.#getArrowNavigationOriginIndex(e);
+    if (origin < 0) {
+      return;
+    }
+    for (let i = 0; i < this.#$items.length; i++) {
+      const nextIndex = (origin + 1 + i) % this.#$items.length;
+      if (this.#isItemKeyboardFocusable(this.#$items[nextIndex])) {
+        this.#focusStepItemAtIndex(nextIndex);
+        break;
+      }
+    }
+  }
+  #focusPrevItem(e) {
+    if (this.#usesCompactActionMenu) {
+      return;
+    }
+    const origin = this.#getArrowNavigationOriginIndex(e);
+    if (origin < 0) {
+      return;
+    }
+    for (let i = 0; i < this.#$items.length; i++) {
+      const nextIndex = (origin - i - 1 + this.#$items.length) % this.#$items.length;
+      if (this.#isItemKeyboardFocusable(this.#$items[nextIndex])) {
+        this.#focusStepItemAtIndex(nextIndex);
+        break;
+      }
+    }
+  }
+  /**
+   * Apply derived `data-status` before the queued `#flushRender` microtask so styling/state match
+   * assigned slot items on the first paint (frameworks may leave `data-status` as `""` briefly).
+   */
+  #primeAssignedSlotStepStatuses() {
+    this.#deriveAndApplyStepStatuses(this.#getAssignedStepItems());
+  }
+  #deriveAndApplyStepStatuses($items) {
+    if ($items.length === 0) {
+      return;
+    }
+    const snapshots = $items.map((item) => ({
+      value: getAttribute(item, "value", ""),
+      disabled: getBooleanAttribute(item, "disabled"),
+      complete: getBooleanAttribute(item, "complete")
+    }));
+    const statuses = deriveStepStatuses(snapshots, {
+      noCompletionOrder: this.noCompletionOrder,
+      progressValue: this.progressValue
+    });
+    for (let i = 0; i < $items.length; i++) {
+      setProgressStepperItemStatus($items[i], statuses[i]);
+    }
+  }
+  #syncStepItemStatuses() {
+    this.#deriveAndApplyStepStatuses(this.#$items);
+  }
+  #getCheckedItemIndex() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      if (isProgressStepperItemChecked(this.#$items[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #getFirstActiveItemIndex() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      if (isProgressStepperItemActive(this.#$items[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #onOptionKeydown = (e) => {
+    if (this.#usesCompactActionMenu) {
+      return;
+    }
+    switch (e.code) {
+      case "Enter":
+      case "Space": {
+        e.preventDefault();
+        getTargetByAttribute(e, "value")?.click();
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        this.#focusNextItem(e);
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        this.#focusPrevItem(e);
+        break;
+      }
+    }
+  };
+  #onStepperFocusOut = (e) => {
+    if (this.#usesCompactActionMenu) {
+      return;
+    }
+    if (this.#isGoingToFocusItem) {
+      this.#isGoingToFocusItem = false;
+      return;
+    }
+    const related = e.relatedTarget;
+    if (related instanceof Element && getProgressStepperFocusedItemIndex(this.#$items, related) >= 0) {
+      return;
+    }
+    queueMicrotask(() => {
+      if (this.#usesCompactActionMenu) {
+        return;
+      }
+      const active = document.activeElement;
+      if (active instanceof Element && getProgressStepperFocusedItemIndex(this.#$items, active) >= 0) {
+        return;
+      }
+      this.#clearForcedFocusVisible();
+      syncProgressStepperItemsRovingTabIndexes(this.#$items);
+    });
+  };
+  #setForcedFocusVisible(nextItem) {
+    for (const item of this.#$items) {
+      if (item === nextItem) {
+        item.setAttribute(ATTR_PROGRESS_STEPPER_ITEM_FORCE_FOCUS_VISIBLE, "");
+      } else {
+        item.removeAttribute(ATTR_PROGRESS_STEPPER_ITEM_FORCE_FOCUS_VISIBLE);
+      }
+    }
+  }
+  #clearForcedFocusVisible() {
+    for (const item of this.#$items) {
+      item.removeAttribute(ATTR_PROGRESS_STEPPER_ITEM_FORCE_FOCUS_VISIBLE);
+    }
+  }
+  #onChangeReactHandler = (e) => {
+    getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
+  };
+  #onHostFocusInCompactOnly = (e) => {
+    if (e.target !== this) {
+      return;
+    }
+    if (!this.#usesCompactActionMenu) {
+      return;
+    }
+    this.#$compactTrigger.focus();
+  };
+}
+defineCustomElement(TAG_PROGRESS_STEPPER, ProgressStepperV2);
+export {
+  OrientationScheduler,
+  ProgressStepperV2,
+  computeOrientationLayout,
+  deriveStepStatuses
+};

package/progress-stepper-v2/model.d.ts

@@ -0,0 +1,32 @@
+export type TStepItemSnapshot = {
+    value: string;
+    disabled: boolean;
+    complete: boolean;
+};
+export type TDerivedStepStatus = 'inactive' | 'incomplete' | 'complete';
+export type TOrientationMode = 'horizontal' | 'compact';
+export type TOrientationLayout = {
+    isHorizontal: boolean;
+    dataOrientation: 'horizontal' | 'vertical';
+    mode: TOrientationMode;
+};
+/**
+ * Derives each step’s `data-status` from host props and per-item flags.
+ * Mirrors `#syncStepItemStatuses` in `ProgressStepperV2` (must stay in sync).
+ *
+ * When `progressvalue` is unset or does not match any step `value`, steps would all become `inactive`
+ * (no tab stops). Treat that as “progress at the first step” so the stepper stays keyboard-reachable.
+ */
+export declare function deriveStepStatuses(items: readonly TStepItemSnapshot[], params: {
+    noCompletionOrder: boolean;
+    progressValue: string;
+}): TDerivedStepStatus[];
+/**
+ * Chooses layout mode from measured widths.
+ * Callers must force layout (`offsetWidth`) before reading `wrapperScrollWidth` when `noAutoOrientation` is false.
+ */
+export declare function computeOrientationLayout(params: {
+    noAutoOrientation: boolean;
+    containerWidth: number;
+    wrapperScrollWidth: number;
+}): TOrientationLayout;