@nectary/components 5.38.1 → 5.39.0

package/bundle.ts

@@ -44,7 +44,9 @@ export * from './pagination/index.js'
 export * from './persistent-overlay/index.js'
 export * from './pop/index.js'
 export * from './popover/index.js'
+export * from './progress-stepper-item-v2/index.js'
 export * from './progress-stepper-item/index.js'
+export * from './progress-stepper-v2/index.js'
 export * from './progress-stepper/index.js'
 export * from './progress/index.js'
 export * from './radio-option/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.38.1",
+  "version": "5.39.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.6.13"
+    "@nectary/assets": "3.6.14"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.16.2"
+    "@nectary/theme-base": "1.17.0"
   }
 }

package/progress-stepper-item-v2/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/progress-stepper-item-v2/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-progress-stepper-item-v2");

package/progress-stepper-item-v2/index.d.ts

@@ -0,0 +1,23 @@
+import '../icon';
+import '../text';
+import { NectaryElement } from '../utils';
+export * from './types';
+export declare class ProgressStepperItemV2 extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set text(value: string);
+    get text(): string;
+    set invalid(isInvalid: boolean);
+    get invalid(): boolean;
+    set complete(value: boolean);
+    get complete(): boolean;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    get focusable(): boolean;
+}

package/progress-stepper-item-v2/index.js

@@ -0,0 +1,187 @@
+import "../icon/index.js";
+import "../text/index.js";
+import { fillProgressStepperStepChipHost } from "../progress-stepper-v2/step-chip.js";
+import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { TAG_PROGRESS_STEPPER_ITEM, ATTR_PROGRESS_STEPPER_ITEM_STATUS, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, syncProgressStepperItemsRovingTabIndexes } from "./utils.js";
+const templateHTML = '<style>:host{display:grid;grid-template-columns:minmax(0,max-content);grid-template-rows:minmax(0,1fr);min-height:0;min-width:0;outline:0}#button{position:relative;grid-area:1/1;align-self:stretch;justify-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:0;width:100%;min-width:100%;min-height:0;padding:8px 4px;box-sizing:border-box;cursor:pointer;border-radius:var(--sinch-comp-progress-stepper-v2-step-shape-radius-container)}:host([data-stepper-layout=horizontal]) #button{padding:8px 12px 8px 10px}#label-bar{position:relative;width:100%;min-width:0}:host([data-status=inactive])>#button{cursor:default}:host([data-status=incomplete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-background-hover)}:host([data-status=complete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-v2-step-color-complete-background-hover)}:host([invalid]:not([data-status=inactive]):hover)>#button{background-color:var(--sinch-comp-progress-stepper-v2-step-color-invalid-background-hover)}#outline{position:absolute;inset:-2px;border:2px solid var(--sinch-comp-progress-stepper-v2-step-color-outline-focus);border-radius:calc(var(--sinch-comp-progress-stepper-v2-step-shape-radius-container) + 2px);pointer-events:none;opacity:0}:host(:focus-visible) #outline,:host([data-force-focus-visible]) #outline{opacity:1}#text{flex-shrink:1;flex-basis:auto;min-width:0;transition:color .25s ease-out}#label-content{display:flex;align-items:center;gap:8px;min-width:0}:host([invalid]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-invalid-label-initial);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-initial)}:host(:is([data-status=incomplete],[data-status=inactive]):not([invalid])) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-initial);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-initial)}:host([data-status=complete]:not([invalid])) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-initial);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-initial)}:host([invalid][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-invalid-label-current);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-current)}:host(:is([data-status=incomplete],[data-status=inactive]):not([invalid])[data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-current);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-current)}:host([data-status=complete]:not([invalid])[data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-current);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-current)}</style><div id="button"><div id="label-bar"><div id="label-content"><span id="index" aria-hidden="true"></span><sinch-text id="text" type="m"></sinch-text></div></div><div id="outline"></div></div>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class ProgressStepperItemV2 extends NectaryElement {
+  #$text;
+  #$indicator;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ delegatesFocus: false });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector("#text");
+    this.#$indicator = shadowRoot.querySelector("#index");
+  }
+  connectedCallback() {
+    this.setAttribute("role", "tab");
+    this.#syncAriaDisabled();
+    this.#syncStepIndex();
+    this.#updateTabIndex();
+  }
+  disconnectedCallback() {
+  }
+  static get observedAttributes() {
+    return [
+      "text",
+      "data-step-index",
+      "invalid",
+      "complete",
+      "disabled",
+      ATTR_PROGRESS_STEPPER_ITEM_STATUS,
+      ATTR_PROGRESS_STEPPER_ITEM_CHECKED
+    ];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case "text": {
+        this.#$text.textContent = newVal;
+        break;
+      }
+      case "data-step-index": {
+        this.#syncIndicatorAttributes();
+        break;
+      }
+      case ATTR_PROGRESS_STEPPER_ITEM_CHECKED: {
+        updateExplicitBooleanAttribute(
+          this,
+          "aria-selected",
+          isAttrTrue(newVal)
+        );
+        this.#syncIndicatorAttributes();
+        this.#updateTabIndex();
+        break;
+      }
+      case ATTR_PROGRESS_STEPPER_ITEM_STATUS: {
+        this.#syncAriaDisabled();
+        this.#updateTabIndex();
+        this.#syncIndicatorAttributes();
+        break;
+      }
+      case "invalid": {
+        if (isAttrEqual(oldVal, newVal)) {
+          return;
+        }
+        const isInvalid = isAttrTrue(newVal);
+        updateExplicitBooleanAttribute(this, "aria-invalid", isInvalid);
+        updateBooleanAttribute(this, "invalid", isInvalid);
+        this.#syncIndicatorAttributes();
+        break;
+      }
+      case "disabled": {
+        if (isAttrEqual(oldVal, newVal)) {
+          return;
+        }
+        updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
+        this.#syncAriaDisabled();
+        this.#updateTabIndex();
+        break;
+      }
+      case "complete": {
+        if (isAttrEqual(oldVal, newVal)) {
+          return;
+        }
+        updateBooleanAttribute(this, "complete", isAttrTrue(newVal));
+        break;
+      }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, "value", value);
+  }
+  get value() {
+    return getAttribute(this, "value", "");
+  }
+  set text(value) {
+    updateAttribute(this, "text", value);
+  }
+  get text() {
+    return getAttribute(this, "text", "");
+  }
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, "invalid", isInvalid);
+  }
+  get invalid() {
+    return getBooleanAttribute(this, "invalid");
+  }
+  set complete(value) {
+    updateBooleanAttribute(this, "complete", value);
+  }
+  get complete() {
+    return getBooleanAttribute(this, "complete");
+  }
+  set disabled(value) {
+    updateBooleanAttribute(this, "disabled", value);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, "disabled");
+  }
+  get focusable() {
+    return true;
+  }
+  #syncAriaDisabled() {
+    const status = getAttribute(this, ATTR_PROGRESS_STEPPER_ITEM_STATUS, "");
+    const isUnavailable = getBooleanAttribute(this, "disabled") || status === "inactive";
+    updateExplicitBooleanAttribute(this, "aria-disabled", isUnavailable);
+  }
+  #syncIndicatorAttributes() {
+    let stepIndexDisplay = getAttribute(this, "data-step-index", "");
+    if (stepIndexDisplay === "") {
+      const fallback = this.#computeFallbackIndex();
+      if (fallback > 0) {
+        stepIndexDisplay = String(fallback);
+      }
+    }
+    fillProgressStepperStepChipHost(this.#$indicator, {
+      stepIndexDisplay,
+      status: getAttribute(this, ATTR_PROGRESS_STEPPER_ITEM_STATUS, "incomplete"),
+      invalid: getBooleanAttribute(this, "invalid"),
+      checked: getBooleanAttribute(this, ATTR_PROGRESS_STEPPER_ITEM_CHECKED)
+    });
+  }
+  #updateTabIndex() {
+    const parent = this.parentElement;
+    if (parent === null) {
+      return;
+    }
+    const items = [...parent.children].filter(
+      (el) => el.tagName.toLowerCase() === TAG_PROGRESS_STEPPER_ITEM
+    );
+    syncProgressStepperItemsRovingTabIndexes(items);
+  }
+  #syncStepIndex() {
+    let index = getAttribute(this, "data-step-index", "");
+    if (index === "") {
+      const fallback = this.#computeFallbackIndex();
+      if (fallback > 0) {
+        index = String(fallback);
+        this.setAttribute("data-step-index", index);
+      }
+    }
+    this.#syncIndicatorAttributes();
+  }
+  #computeFallbackIndex() {
+    const parent = this.parentElement;
+    if (parent === null) {
+      return -1;
+    }
+    let index = 0;
+    for (const sibling of Array.from(parent.children)) {
+      if (sibling.tagName.toLowerCase() === TAG_PROGRESS_STEPPER_ITEM) {
+        index += 1;
+      }
+      if (sibling === this) {
+        return index;
+      }
+    }
+    return -1;
+  }
+}
+defineCustomElement(TAG_PROGRESS_STEPPER_ITEM, ProgressStepperItemV2);
+export {
+  ProgressStepperItemV2
+};

package/progress-stepper-item-v2/types.d.ts

@@ -0,0 +1,69 @@
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export type TSinchProgressStepperItemV2Props = {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Invalid */
+    invalid?: boolean;
+    /** Mark step complete (only applies when parent `sinch-progress-stepper-v2` has `noCompletionOrder`. Ignored in ordered mode). */
+    complete?: boolean;
+    /** Mark step inactive / not selectable (only applies when parent `sinch-progress-stepper-v2` has `noCompletionOrder`. Ignored in ordered mode). */
+    disabled?: boolean;
+};
+export type TSinchProgressStepperItemV2Style = {
+    '--sinch-comp-progress-stepper-v2-step-shape-radius-container'?: string;
+    '--sinch-comp-progress-stepper-v2-step-shape-radius-indicator'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-outline-focus'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-compact-background'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-compact-border'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-incomplete-background-hover'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-incomplete-label-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-incomplete-label-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-incomplete-icon-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-incomplete-icon-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-incomplete-icon-container-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-incomplete-icon-container-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-complete-background-hover'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-complete-label-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-complete-label-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-complete-icon-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-complete-icon-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-complete-icon-container-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-complete-icon-container-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-invalid-background-hover'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-invalid-label-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-invalid-label-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-invalid-icon-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-invalid-icon-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-invalid-icon-container-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-color-invalid-icon-container-current'?: string;
+    '--sinch-comp-progress-stepper-v2-step-font-label-initial'?: string;
+    '--sinch-comp-progress-stepper-v2-step-font-label-current'?: string;
+};
+export type TSinchProgressStepperItemV2 = {
+    props: TSinchProgressStepperItemV2Props;
+    style: TSinchProgressStepperItemV2Style;
+};
+export type TSinchProgressStepperItemV2Element = NectaryComponentVanillaByType<TSinchProgressStepperItemV2>;
+export type TSinchProgressStepperItemV2React = NectaryComponentReactByType<TSinchProgressStepperItemV2>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-progress-stepper-item-v2': TSinchProgressStepperItemV2;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress-stepper-item-v2': NectaryComponentVanilla<'sinch-progress-stepper-item-v2'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress-stepper-item-v2': NectaryComponentReact<'sinch-progress-stepper-item-v2'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-progress-stepper-item-v2': NectaryComponentReact<'sinch-progress-stepper-item-v2'>;
+        }
+    }
+}

package/progress-stepper-item-v2/types.js

@@ -0,0 +1 @@
+

package/progress-stepper-item-v2/utils.d.ts

@@ -0,0 +1,22 @@
+type TSinchProgressStepperItemStatus = 'inactive' | 'incomplete' | 'invalid' | 'complete';
+export declare const TAG_PROGRESS_STEPPER = "sinch-progress-stepper-v2";
+export declare const TAG_PROGRESS_STEPPER_ITEM = "sinch-progress-stepper-item-v2";
+export declare const ATTR_PROGRESS_STEPPER_ITEM_CHECKED = "data-checked";
+export declare const ATTR_PROGRESS_STEPPER_ITEM_STATUS = "data-status";
+/** Set by `sinch-progress-stepper-v2` on default-slot items for layout-specific styling. */
+export declare const ATTR_PROGRESS_STEPPER_ITEM_LAYOUT = "data-stepper-layout";
+export declare const isProgressStepperItemChecked: ($el: Element) => boolean;
+export declare const setProgressStepperItemChecked: ($el: Element, isChecked: boolean) => void;
+export declare const isProgressStepperItemActive: ($el: Element) => boolean;
+export declare const setProgressStepperItemStatus: ($el: Element, status: TSinchProgressStepperItemStatus) => void;
+/**
+ * Nested shadow trees (e.g. `sinch-text` inside a step) break `shadowRoot.contains(active)` —
+ * walk up through shadow boundaries, and optionally use `composedPath()` from the key event.
+ */
+export declare const getProgressStepperFocusedItemIndex: (items: HTMLElement[], active: Element | null, fromEvent?: Event) => number;
+/**
+ * APG roving tabs: one `tabIndex === 0`. Prefer the item that actually has focus (arrow moves);
+ * otherwise the selected (`data-checked`) item; otherwise the first focusable.
+ */
+export declare const syncProgressStepperItemsRovingTabIndexes: (items: HTMLElement[]) => void;
+export {};

package/progress-stepper-item-v2/utils.js

@@ -0,0 +1,88 @@
+import { getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute } from "../utils/dom.js";
+const TAG_PROGRESS_STEPPER = "sinch-progress-stepper-v2";
+const TAG_PROGRESS_STEPPER_ITEM = "sinch-progress-stepper-item-v2";
+const ATTR_PROGRESS_STEPPER_ITEM_CHECKED = "data-checked";
+const ATTR_PROGRESS_STEPPER_ITEM_STATUS = "data-status";
+const ATTR_PROGRESS_STEPPER_ITEM_LAYOUT = "data-stepper-layout";
+const isProgressStepperItemChecked = ($el) => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED);
+const setProgressStepperItemChecked = ($el, isChecked) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, isChecked);
+const isProgressStepperItemActive = ($el) => {
+  const attrValue = getAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS);
+  if (attrValue === null || attrValue === "") {
+    return true;
+  }
+  return attrValue !== "inactive";
+};
+const setProgressStepperItemStatus = ($el, status) => updateAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS, status);
+const isStepperTabFocusable = (item) => !getBooleanAttribute(item, "disabled") && isProgressStepperItemActive(item);
+const getProgressStepperFocusedItemIndex = (items, active, fromEvent) => {
+  if (fromEvent != null && typeof fromEvent.composedPath === "function") {
+    for (const node of fromEvent.composedPath()) {
+      if (node instanceof HTMLElement) {
+        const i = items.indexOf(node);
+        if (i >= 0) {
+          return i;
+        }
+      }
+    }
+  }
+  if (active === null) {
+    return -1;
+  }
+  let n = active;
+  while (n != null) {
+    if (n instanceof HTMLElement) {
+      const i = items.indexOf(n);
+      if (i >= 0) {
+        return i;
+      }
+    }
+    const parentNode = n.parentNode;
+    if (parentNode != null) {
+      n = parentNode;
+      continue;
+    }
+    const root = n.getRootNode();
+    if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+      n = root.host;
+      continue;
+    }
+    break;
+  }
+  return -1;
+};
+const syncProgressStepperItemsRovingTabIndexes = (items) => {
+  const focusIdx = getProgressStepperFocusedItemIndex(items, document.activeElement);
+  let primaryIdx = -1;
+  if (focusIdx >= 0 && isStepperTabFocusable(items[focusIdx])) {
+    primaryIdx = focusIdx;
+  } else {
+    const checkedIdx = items.findIndex((s) => getBooleanAttribute(s, ATTR_PROGRESS_STEPPER_ITEM_CHECKED));
+    if (checkedIdx >= 0 && isStepperTabFocusable(items[checkedIdx])) {
+      primaryIdx = checkedIdx;
+    } else {
+      primaryIdx = items.findIndex(isStepperTabFocusable);
+    }
+  }
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (!isStepperTabFocusable(item)) {
+      item.tabIndex = -1;
+      continue;
+    }
+    item.tabIndex = i === primaryIdx ? 0 : -1;
+  }
+};
+export {
+  ATTR_PROGRESS_STEPPER_ITEM_CHECKED,
+  ATTR_PROGRESS_STEPPER_ITEM_LAYOUT,
+  ATTR_PROGRESS_STEPPER_ITEM_STATUS,
+  TAG_PROGRESS_STEPPER,
+  TAG_PROGRESS_STEPPER_ITEM,
+  getProgressStepperFocusedItemIndex,
+  isProgressStepperItemActive,
+  isProgressStepperItemChecked,
+  setProgressStepperItemChecked,
+  setProgressStepperItemStatus,
+  syncProgressStepperItemsRovingTabIndexes
+};

package/progress-stepper-v2/compact-format.d.ts

@@ -0,0 +1,22 @@
+export type TCompactFormatVars = {
+    current: number | string;
+    total: number | string;
+    step: string;
+    label: string;
+};
+/** Visible compact counter badge when `compact-counter-format` is unset. */
+export declare const DEFAULT_COMPACT_COUNTER_FORMAT = "{current} of {total}";
+/** Compact trigger `aria-label` when host `aria-label` is set and format attr is unset. */
+export declare const DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT_WITH_LABEL = "{label}, {current} of {total}, {step}";
+/** Compact trigger `aria-label` when host `aria-label` is unset and format attr is unset. */
+export declare const DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT = "{current} of {total}, {step}";
+export declare function formatCompactTemplate(template: string, vars: TCompactFormatVars): string;
+export declare function resolveCompactCounterFormat(explicit: string): string;
+export declare function resolveCompactTriggerAriaLabelFormat(explicit: string, hostAriaLabel: string | null): string;
+/** Accessible name for the compact trigger button. */
+export declare function resolveCompactTriggerAriaLabel(compactTriggerAriaLabelFormat: string, hostAriaLabel: string | null, vars: TCompactFormatVars): string;
+/**
+ * Accessible name for compact `sinch-action-menu` / `sinch-pop`.
+ * Uses host `aria-label` when set; otherwise matches the derived trigger name.
+ */
+export declare function resolveCompactMenuAndPopAriaLabel(hostAriaLabel: string | null, compactTriggerAriaLabelFormat: string, vars: TCompactFormatVars): string;

package/progress-stepper-v2/compact-format.js

@@ -0,0 +1,56 @@
+const DEFAULT_COMPACT_COUNTER_FORMAT = "{current} of {total}";
+const DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT_WITH_LABEL = "{label}, {current} of {total}, {step}";
+const DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT = "{current} of {total}, {step}";
+function formatCompactTemplate(template, vars) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => {
+    const value = vars[key];
+    return value != null ? String(value) : "";
+  });
+}
+function resolveCompactCounterFormat(explicit) {
+  return explicit !== "" ? explicit : DEFAULT_COMPACT_COUNTER_FORMAT;
+}
+function resolveCompactTriggerAriaLabelFormat(explicit, hostAriaLabel) {
+  if (explicit !== "") {
+    return explicit;
+  }
+  if (hostAriaLabel != null && hostAriaLabel !== "") {
+    return DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT_WITH_LABEL;
+  }
+  return DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT;
+}
+function adjustDefaultTriggerFormatForEmptyStep(format, stepEmpty) {
+  if (!stepEmpty) {
+    return format;
+  }
+  if (format === DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT) {
+    return "{current} of {total}";
+  }
+  if (format === DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT_WITH_LABEL) {
+    return "{label}, {current} of {total}";
+  }
+  return format;
+}
+function resolveCompactTriggerAriaLabel(compactTriggerAriaLabelFormat, hostAriaLabel, vars) {
+  let format = resolveCompactTriggerAriaLabelFormat(compactTriggerAriaLabelFormat, hostAriaLabel);
+  if (compactTriggerAriaLabelFormat === "") {
+    format = adjustDefaultTriggerFormatForEmptyStep(format, vars.step === "");
+  }
+  return formatCompactTemplate(format, vars);
+}
+function resolveCompactMenuAndPopAriaLabel(hostAriaLabel, compactTriggerAriaLabelFormat, vars) {
+  if (hostAriaLabel != null && hostAriaLabel !== "") {
+    return hostAriaLabel;
+  }
+  return resolveCompactTriggerAriaLabel(compactTriggerAriaLabelFormat, hostAriaLabel, vars);
+}
+export {
+  DEFAULT_COMPACT_COUNTER_FORMAT,
+  DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT,
+  DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT_WITH_LABEL,
+  formatCompactTemplate,
+  resolveCompactCounterFormat,
+  resolveCompactMenuAndPopAriaLabel,
+  resolveCompactTriggerAriaLabel,
+  resolveCompactTriggerAriaLabelFormat
+};

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

@@ -0,0 +1,26 @@
+type TCompactElements = {
+    actionMenu: HTMLElementTagNameMap['sinch-action-menu'];
+    pop: HTMLElementTagNameMap['sinch-pop'];
+    trigger: HTMLButtonElement;
+    label: HTMLElement;
+    counter: HTMLElement;
+};
+type TCompactSyncParams = {
+    usesCompactActionMenu: boolean;
+    items: HTMLElement[];
+    hostAriaLabel: string | null;
+    compactCounterFormat: string;
+    compactTriggerAriaLabelFormat: string;
+    getCheckedItemIndex: () => number;
+    getFirstActiveItemIndex: () => number;
+    onChange: (value: string) => void;
+};
+export declare class ProgressStepperCompactController {
+    #private;
+    constructor(elements: TCompactElements);
+    connect(signal: AbortSignal): void;
+    onTriggerClick(usesCompactActionMenu: boolean): void;
+    onPopoverClose(): void;
+    sync(params: TCompactSyncParams): void;
+}
+export {};