@skf-design-system/ui-components 1.0.0-beta.7 → 1.0.1-beta.1

package/dist/components/select/select.controllers.js

@@ -1,67 +1,9 @@
-import { raiseError as r } from "../../internal/helpers/raiseError.js";
+import { raiseError as l } from "../../internal/helpers/raiseError.js";
 class d {
-  constructor(e) {
-    this.localExpanded = !1, this.host = e, e.addController(this);
-  }
-  hostDisconnected() {
-    this.disableScrollDetection();
-  }
-  hostUpdated() {
-    var e, t, s;
-    ((e = this.host) == null ? void 0 : e._expanded) !== this.localExpanded && (this.localExpanded = !!((t = this.host) != null && t._expanded), (s = this.host) != null && s._expanded ? this.enableScrollDetection() : this.disableScrollDetection());
-  }
-  enableScrollDetection() {
-    if (this._scrollHandler = () => {
-      if (!this.host) return;
-      this.host._expanded = !1;
-      const t = this.host.getBoundingClientRect();
-      t.top < 0 || t.bottom > window.innerHeight || t.left < 0 || t.right > window.innerWidth ? this._onScrollOutOfView() : this._onScrollIntoView();
-    }, window.addEventListener("scroll", this._scrollHandler, !0), !this.host) return;
-    let e = this.host.parentElement;
-    for (; e; )
-      (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth) && e.addEventListener("scroll", this._scrollHandler, !0), e = e.parentElement;
-  }
-  disableScrollDetection() {
-    if (!this._scrollHandler || (window.removeEventListener("scroll", this._scrollHandler, !0), !this.host)) return;
-    let e = this.host.parentElement;
-    for (; e; )
-      (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth) && e.removeEventListener("scroll", this._scrollHandler, !0), e = e.parentElement;
-  }
-  /** @internal */
-  _onScrollOutOfView() {
-    this.host && (this.host._expanded = !1);
-  }
-  /** @internal */
-  _onScrollIntoView() {
-  }
-}
-class b {
-  constructor(e) {
-    this._onResize = () => {
-      this.host._expanded = !1;
-    }, this.host = e, e.addController(this);
-  }
-  hostConnected() {
-    this.enableResizeObserver();
-  }
-  hostDisconnected() {
-    this.disableResizeObserver();
-  }
-  enableResizeObserver() {
-    this._resizeObserver = new ResizeObserver(() => {
-      this.host._expanded = !1, this.host._updateWidth();
-    }), this._resizeObserver.observe(document.body), this._resizeObserver.observe(this.host);
-  }
-  disableResizeObserver() {
-    var e;
-    (e = this._resizeObserver) == null || e.disconnect();
-  }
-}
-class p {
-  constructor(e) {
-    this._globalClickHandler = (t) => {
-      t.target.closest(this.host.localName) || (this.host._expanded = !1);
-    }, this.host = e, e.addController(this);
+  constructor(t) {
+    this._globalClickHandler = (e) => {
+      e.target.closest(this.host.localName) || (this.host._expanded = !1);
+    }, this.host = t, t.addController(this);
   }
   // hostConnected() {
   // 	this.enableGlobalClickDetection();
@@ -79,26 +21,26 @@ class p {
     document.removeEventListener("click", this._globalClickHandler);
   }
 }
-class u {
-  constructor(e) {
-    this._handleKeyDown = (t) => {
-      switch (t.key) {
+class p {
+  constructor(t) {
+    this._handleKeyDown = (e) => {
+      switch (e.key) {
         case "ArrowDown":
-          t.preventDefault(), this._focusSiblingOption("next");
+          e.preventDefault(), this._focusSiblingOption("next");
           break;
         case "ArrowUp":
-          t.preventDefault(), this._focusSiblingOption("prev");
+          e.preventDefault(), this._focusSiblingOption("prev");
           break;
         case "Enter":
-          t.preventDefault(), this._selectFocusedOption(t.target);
+          e.preventDefault(), this._selectFocusedOption(e.target);
           break;
         case "Escape":
-          t.preventDefault(), this.host._expanded = !1, setTimeout(() => {
+          e.preventDefault(), this.host._expanded = !1, setTimeout(() => {
             this.host.focus();
           });
           break;
       }
-    }, this.host = e, e.addController(this), this._listenerActivated = !1;
+    }, this.host = t, t.addController(this), this._listenerActivated = !1;
   }
   hostDisconnected() {
     this.removeKeyboardListener();
@@ -113,50 +55,50 @@ class u {
     this.host.removeEventListener("keydown", this._handleKeyDown), this._listenerActivated = !1;
   }
   _focusFirstOption() {
-    const e = this._selectableOptions[0];
+    const t = this._selectableOptions[0];
     setTimeout(() => {
-      e.focus();
+      t.focus();
     });
   }
-  _focusSiblingOption(e) {
-    const t = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => t(n));
+  _focusSiblingOption(t) {
+    const e = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => e(n));
     if (!s) {
       this._focusFirstOption();
       return;
     }
-    const h = this._selectableOptions.indexOf(s);
-    let o = h - 1, l = h + 1;
-    o < 0 && (o = this._selectableOptions.length - 1), l >= this._selectableOptions.length && (l = 0);
-    const a = this._selectableOptions[e === "next" ? l : o];
-    s.blur(), a.focus();
+    const r = this._selectableOptions.indexOf(s);
+    let i = r - 1, o = r + 1;
+    i < 0 && (i = this._selectableOptions.length - 1), o >= this._selectableOptions.length && (o = 0);
+    const h = this._selectableOptions[t === "next" ? o : i];
+    s.blur(), h.focus();
   }
-  _selectFocusedOption(e) {
-    e.selected = !0;
+  _selectFocusedOption(t) {
+    t.selected = !0;
   }
   get _selectableOptions() {
-    return this.host._optionsList.filter((e) => !e.disabled);
+    return this.host._optionsList.filter((t) => !t.disabled);
   }
 }
-class _ {
-  constructor(e) {
-    this.host = e, e.addController(this);
+class b {
+  constructor(t) {
+    this.host = t, t.addController(this);
   }
   hostConnected() {
     this._badAttributeCombinationWarning();
   }
   _badAttributeCombinationWarning() {
-    r({
+    l({
       assert: (this.host.min ?? 0) <= (this.host.max ?? 1 / 0),
       reason: "attribute-mismatch",
       replaceStrings: [this.host.localName, "min", "smaller than max"]
-    }), r({
+    }), l({
       assert: (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         (this.host.min || this.host.max) && this.host.multiple || !(this.host.min && this.host.max)
       ),
       reason: "attribute-mismatch",
       replaceStrings: [this.host.localName, "min or max", "together with multiple"]
-    }), r({
+    }), l({
       assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
       reason: "attribute-mismatch",
       replaceStrings: [this.host.localName, "hide-tags", "together with multiple"]
@@ -164,9 +106,7 @@ class _ {
   }
 }
 export {
-  _ as DeveloperFeedbackController,
-  p as GlobalClickController,
-  u as KeyboardNavigationController,
-  b as ResizeController,
-  d as ScrollController
+  b as DeveloperFeedbackController,
+  d as GlobalClickController,
+  p as KeyboardNavigationController
 };

package/dist/components/stepper/stepper.component.d.ts

@@ -0,0 +1,38 @@
+import type { SkfStepperItem } from '../stepper-item/stepper-item.component.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-stepper>` is a component that displays a list of actions or options.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - One or more `<skf-stepper-item>`
+ *
+ * @event skf-stepper-item-select - Dispatched when the stepper item is selected
+ *
+ * @tagname skf-stepper
+ */
+export declare class SkfStepper extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
+    /** Sets the active item */
+    activeIndex: number;
+    /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
+    linear: boolean;
+    /** @internal */
+    _items?: NodeListOf<SkfStepperItem>;
+    constructor();
+    firstUpdated(): void;
+    /** @internal activeIndex is the source of truth. Once updated all stepper states are recalculated. */
+    _handleActiveIndexChanged(): void;
+    /** @internal */
+    _handleLinearMode(): void;
+    private _handleSelected;
+    /** @internal */
+    private _resetActive;
+    /** @internal */
+    private _getCurrentActiveIndex;
+    /** @internal Not much can be handled before this kick off */
+    private _handleSlotChanged;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/stepper/stepper.component.js

@@ -0,0 +1,91 @@
+var p = (t) => {
+  throw TypeError(t);
+};
+var m = (t, i, e) => i.has(t) || p("Cannot " + e);
+var _ = (t, i, e) => (m(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), l = (t, i, e, s) => (m(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
+import { SkfElement as I } from "../../internal/components/skf-element.js";
+import { watch as v } from "../../internal/helpers/watch.js";
+import u from "../../styles/component.styles.js";
+import { html as g } from "lit";
+import { property as x, queryAssignedElements as y } from "lit/decorators.js";
+import { classMap as A } from "lit/directives/class-map.js";
+import { stepperState as C } from "./stepper.helpers.js";
+import { styles as b } from "./stepper.styles.js";
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, i, e, s) => {
+  for (var n = s > 1 ? void 0 : s ? S(i, e) : i, r = t.length - 1, d; r >= 0; r--)
+    (d = t[r]) && (n = (s ? d(i, e, n) : d(n)) || n);
+  return s && n && E(i, e, n), n;
+}, o;
+const c = class c extends I {
+  constructor() {
+    super();
+    f(this, o);
+    l(this, o, !1), this.activeIndex = -1, this.linear = !1, this._handleSelected = (e) => {
+      if (!_(this, o)) return;
+      const { item: s, triggerActiveIndexUpdate: n } = e.detail, r = [...this._items ?? []].findIndex((d) => d === s);
+      r === this.activeIndex ? this._handleActiveIndexChanged() : (n && this._resetActive(r), this.activeIndex = r);
+    }, this._handleSlotChanged = () => {
+      l(this, o, !0), this.activeIndex = this._getCurrentActiveIndex();
+    }, this.addEventListener("skf-stepper-item-select", this._handleSelected);
+  }
+  firstUpdated() {
+    this._handleLinearMode();
+  }
+  _handleActiveIndexChanged() {
+    !this._items || this.activeIndex < 0 || this._items.forEach((e, s) => {
+      const { isDisabled: n, stateLabel: r } = C({
+        activeIndex: this.activeIndex,
+        items: [...this._items ?? []],
+        linear: this.linear,
+        state: e.state,
+        index: s
+      });
+      e._setInternalState = r, e._index = s + 1, e._disabled = n;
+    });
+  }
+  _handleLinearMode() {
+    var e;
+    (e = this._items) == null || e.forEach((s) => {
+      this.linear && (s._linear = !0);
+    });
+  }
+  /** @internal */
+  _resetActive(e) {
+    this._items && this._items.forEach((s, n) => {
+      n !== e && (s._setInternalState = void 0);
+    });
+  }
+  /** @internal */
+  _getCurrentActiveIndex() {
+    if (!this._items) return -1;
+    const e = [...this._items], s = e.reverse().findIndex((r) => ["active", "completed"].includes(String(r.state))) || e.length - 1;
+    return e.length - s - 1;
+  }
+  render() {
+    return g`
+			<ol class=${A({ stepper: !0 })}>
+				<slot @slotchange=${this._handleSlotChanged}></slot>
+			</ol>
+		`;
+  }
+};
+o = new WeakMap(), c.styles = [u, b];
+let a = c;
+h([
+  x({ type: Number })
+], a.prototype, "activeIndex", 2);
+h([
+  x({ type: Boolean })
+], a.prototype, "linear", 2);
+h([
+  y()
+], a.prototype, "_items", 2);
+h([
+  v("activeIndex")
+], a.prototype, "_handleActiveIndexChanged", 1);
+h([
+  v("linear")
+], a.prototype, "_handleLinearMode", 1);
+export {
+  a as SkfStepper
+};

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,8 @@
+import { SkfStepper } from './stepper.component';
+export * from './stepper.component';
+export default SkfStepper;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-stepper': SkfStepper;
+    }
+}

package/dist/components/stepper/stepper.helpers.d.ts

@@ -0,0 +1,16 @@
+import type { SkfStepperItem, SkfStepperItemState } from '../stepper-item/stepper-item.component.js';
+import type { SkfStepper } from './stepper.component.js';
+interface StepperStateProps extends Pick<SkfStepper, '_items' | 'linear'>, Pick<SkfStepperItem, 'state'> {
+    items: SkfStepperItem[];
+    activeIndex: number;
+    index: number;
+}
+interface StepperReturns {
+    isCurrentStep: boolean;
+    isDisabled: boolean;
+    isSpan: boolean;
+    stateLabel?: SkfStepperItemState;
+}
+/** Calculate each step state while iterating all */
+export declare const stepperState: ({ activeIndex, items, linear, state, index, }: StepperStateProps) => StepperReturns;
+export {};

package/dist/components/stepper/stepper.helpers.js

@@ -0,0 +1,18 @@
+const A = ({
+  activeIndex: c,
+  items: r,
+  linear: i,
+  state: o,
+  index: e
+}) => {
+  var l;
+  const n = (l = r[e - 1]) == null ? void 0 : l.state, p = e > c + 1, b = n === "active", a = ["active", "completed"].includes(o ?? ""), s = !i && a, d = i && !s ? !1 : (p || b || a) && !s, v = o === "active", f = e < c, m = o === "completed", u = !s && n === "completed" && e === c + 1, t = {
+    isCurrentStep: a,
+    isDisabled: d,
+    isSpan: s
+  };
+  return u ? { stateLabel: "enabled", ...t } : v ? { stateLabel: "active", ...t } : m ? { stateLabel: "activeCompleted", ...t } : f ? { stateLabel: "completed", ...t } : { stateLabel: void 0, ...t };
+};
+export {
+  A as stepperState
+};

package/dist/components/stepper/stepper.js

@@ -0,0 +1,6 @@
+import { SkfStepper as e } from "./stepper.component.js";
+e.define("skf-stepper");
+export {
+  e as SkfStepper,
+  e as default
+};

package/dist/components/stepper/stepper.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/stepper/stepper.styles.js

@@ -0,0 +1,15 @@
+import { css as e } from "lit";
+const p = e`
+	@layer components {
+		.stepper {
+			--_skf-stepper-gap: 2rem;
+
+			align-items: flex-start;
+			display: flex;
+			gap: var(--_skf-stepper-gap);
+		}
+	}
+`;
+export {
+  p as styles
+};

package/dist/components/stepper-item/stepper-item.component.d.ts

@@ -0,0 +1,47 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+export interface SkfStepperItemEvent {
+    item: SkfStepperItem;
+    triggerActiveIndexUpdate: boolean;
+}
+export type SkfStepperItemState = 'active' | 'activeCompleted' | 'completed' | 'enabled';
+/**
+ * The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - Label of the stepper item
+ *
+ * @event skf-stepper-item-select - Dispatched when the stepper item is selected
+ *
+ * @tagname skf-stepper-item
+ */
+export declare class SkfStepperItem extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
+    /** If defined, gives the supplied appearance */
+    state?: Extract<SkfStepperItemState, 'active' | 'completed'>;
+    /** If true, item marked as completed  */
+    completed: boolean;
+    /** @internal */
+    _disabled?: boolean;
+    /** @internal */
+    _index: number;
+    /** @internal */
+    _linear: boolean;
+    /** @internal */
+    _uiState?: SkfStepperItemState;
+    /** @internal */
+    set _setInternalState(state: typeof this._uiState);
+    get _setInternalState(): typeof this._uiState;
+    constructor();
+    protected firstUpdated(): void;
+    /** @internal */
+    _handleState(): void;
+    /** @internal */
+    private _emitUpdate;
+    /** @internal */
+    private _handleClick;
+    render(): import("lit").TemplateResult;
+}

package/dist/components/stepper-item/stepper-item.component.js

@@ -0,0 +1,113 @@
+var v = (e) => {
+  throw TypeError(e);
+};
+var u = (e, i, t) => i.has(e) || v("Cannot " + t);
+var d = (e, i, t) => (u(e, i, "read from private field"), t ? t.call(e) : i.get(e)), _ = (e, i, t) => i.has(e) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), r = (e, i, t, s) => (u(e, i, "write to private field"), s ? s.call(e, t) : i.set(e, t), t);
+import "../icon/icon.js";
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { watch as g } from "../../internal/helpers/watch.js";
+import C from "../../styles/component.styles.js";
+import "lit";
+import { property as y, state as c } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+import { literal as w, unsafeStatic as U, html as S } from "lit/static-html.js";
+import { styles as I } from "./stepper-item.styles.js";
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, i, t, s) => {
+  for (var p = s > 1 ? void 0 : s ? P(i, t) : i, h = e.length - 1, m; h >= 0; h--)
+    (m = e[h]) && (p = (s ? m(i, t, p) : m(p)) || p);
+  return s && p && O(i, t, p), p;
+}, o, n;
+const f = class f extends b {
+  constructor() {
+    super();
+    _(this, o);
+    _(this, n);
+    r(this, o, !1), r(this, n, !1), this.completed = !1, this._index = 0, this._linear = !1, this._handleClick = () => {
+      this._linear || (this.state = "active");
+    }, this.role = "listitem";
+  }
+  set _setInternalState(t) {
+    r(this, o, !0), this._uiState = t, t === "active" || t === "activeCompleted" ? this.state = t === "active" ? "active" : "completed" : this.state = void 0, setTimeout(() => {
+      r(this, o, !1);
+    });
+  }
+  get _setInternalState() {
+    return this.state;
+  }
+  firstUpdated() {
+    this._handleState();
+  }
+  _handleState() {
+    const t = this._uiState;
+    if (this.state === "completed" && t !== "active") {
+      this._setInternalState = "activeCompleted";
+      return;
+    }
+    if (d(this, o)) {
+      r(this, o, !1);
+      return;
+    }
+    r(this, n, ["active", "completed"].includes(String(this.state)) && !["active", "activeCompleted"].includes(String(this._uiState))), this._emitUpdate();
+  }
+  /** @internal */
+  _emitUpdate() {
+    this.emit("skf-stepper-item-select", {
+      detail: {
+        item: this,
+        triggerActiveIndexUpdate: d(this, n)
+      }
+    }), r(this, n, !1);
+  }
+  render() {
+    const t = this._linear ? "div" : "button", s = w`${U(t)}`;
+    return S`
+			<${s}
+				@click=${this._handleClick}
+				?disabled=${this._disabled}
+				class=${$({
+      "stepper-item": !0,
+      "stepper-item--active": this._uiState === "active",
+      "stepper-item--active-completed": this._uiState === "activeCompleted",
+      "stepper-item--completed": this._uiState === "completed",
+      "stepper-item--enabled": this._uiState === "enabled"
+    })}
+				type=${x(t == "button" ? "button" : void 0)}
+			>
+				<div class="stepper-item__circle">
+					${this._uiState === "activeCompleted" ? S`<skf-icon color="inverse" name="check"></skf-icon>` : this._index}
+				</div>
+				<slot class="stepper-item__label"></slot>
+			</${s}>
+		`;
+  }
+};
+o = new WeakMap(), n = new WeakMap(), f.styles = [C, I];
+let a = f;
+l([
+  y({ reflect: !0 })
+], a.prototype, "state", 2);
+l([
+  y({ type: Boolean })
+], a.prototype, "completed", 2);
+l([
+  c()
+], a.prototype, "_disabled", 2);
+l([
+  c()
+], a.prototype, "_index", 2);
+l([
+  c()
+], a.prototype, "_linear", 2);
+l([
+  c()
+], a.prototype, "_uiState", 2);
+l([
+  c()
+], a.prototype, "_setInternalState", 1);
+l([
+  g("state")
+], a.prototype, "_handleState", 1);
+export {
+  a as SkfStepperItem
+};

package/dist/components/stepper-item/stepper-item.d.ts

@@ -0,0 +1,8 @@
+import { SkfStepperItem } from './stepper-item.component';
+export * from './stepper-item.component';
+export default SkfStepperItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-stepper-item': SkfStepperItem;
+    }
+}

package/dist/components/stepper-item/stepper-item.js

@@ -0,0 +1,6 @@
+import { SkfStepperItem as e } from "./stepper-item.component.js";
+e.define("skf-stepper-item");
+export {
+  e as SkfStepperItem,
+  e as default
+};

package/dist/components/stepper-item/stepper-item.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/stepper-item/stepper-item.styles.js

@@ -0,0 +1,98 @@
+import { css as e } from "lit";
+const s = e`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		:host {
+			contain: layout;
+			flex: 1;
+			min-width: 0;
+		}
+
+		.stepper-item {
+			--_skf-stepper-circle-size: var(--skf-size-32);
+			--_skf-stepper-gap: inherit;
+			--_skf-stepper-line-offset: var(--skf-spacing-50);
+
+			align-items: center;
+			color: var(--_skf-stepper-color, var(--skf-text-color-tertiary));
+			display: flex;
+			flex-direction: column;
+			font-size: var(--skf-font-size-75);
+			font-weight: var(--skf-font-weight-bold);
+			gap: var(--skf-spacing-50);
+			inline-size: 100%;
+			position: relative;
+
+			&::before,
+			&::after {
+				border: var(--skf-border-width-sm) solid var(--skf-border-color-primary);
+				inset-block-start: calc(var(--_skf-stepper-circle-size) / 2);
+				position: absolute;
+				translate: 0 -50%;
+			}
+
+			&::before {
+				inset-inline: calc(-1 * var(--_skf-stepper-gap) / 2)
+					calc(50% + (var(--_skf-stepper-circle-size) / 2) + var(--_skf-stepper-line-offset));
+			}
+
+			&::after {
+				inset-inline: calc(
+						50% + (var(--_skf-stepper-circle-size) / 2) + var(--_skf-stepper-line-offset)
+					)
+					calc(-1 * var(--_skf-stepper-gap) / 2);
+			}
+
+			:host(:not(:first-of-type)) &::before,
+			:host(:not(:last-of-type)) &::after {
+				content: '';
+			}
+		}
+
+		:is(.stepper-item--active, .stepper-item--completed) {
+			--_skf-stepper-color: var(--skf-text-color-emphasised);
+		}
+
+		.stepper-item--enabled {
+			--_skf-stepper-color: #6292e4; /* Missing token */
+		}
+
+		.stepper-item__circle {
+			background-color: var(--_skf-stepper-circle-bg-color, var(--skf-bg-color-neutral-1));
+			block-size: var(--_skf-stepper-circle-size);
+			border: var(--skf-border-width-md) solid
+				var(--_skf-stepper-circle-border-color, var(--skf-border-color-primary));
+			border-radius: 50%;
+			color: var(--_skf-stepper-circle-color, inherit);
+			display: grid;
+			inline-size: var(--_skf-stepper-circle-size);
+			place-content: center;
+			user-select: none;
+
+			:is(.stepper-item--active, .stepper-item--active-completed, .stepper-item--completed) & {
+				--_skf-stepper-circle-border-color: var(--skf-border-color-emphasised);
+			}
+
+			:is(.stepper-item--active, .stepper-item--active-completed) & {
+				--_skf-stepper-circle-color: var(--skf-text-color-inverse);
+				--_skf-stepper-circle-bg-color: var(--skf-bg-color-emphasised);
+			}
+
+			.stepper-item--enabled & {
+				--_skf-stepper-circle-border-color: #6292e4; /* Missing token */
+				--_skf-stepper-circle-color: var(--skf-text-color-emphasised);
+			}
+		}
+
+		.stepper-item__label {
+			display: block;
+			max-inline-size: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+`;
+export {
+  s as styles
+};