@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/status/status.d.ts

@@ -0,0 +1,32 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../title.js';
+
+export type SbbStatusType = 'info' | 'success' | 'warning' | 'error';
+declare const SbbStatusElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & typeof LitElement;
+/**
+ * Displays a message to the user's attention.
+ *
+ * @slot - Use the unnamed slot to add content to the status message.
+ * @slot title - Use this to provide a title for the status (optional).
+ * @slot icon - Use this slot to override the default status icon.
+ */
+export declare class SbbStatusElement extends SbbStatusElement_base {
+    static styles: CSSResultGroup;
+    private readonly _statusTypes;
+    /** The type of the status. */
+    type: SbbStatusType;
+    /** Content of title. */
+    titleContent?: string;
+    /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
+    titleLevel: SbbTitleLevel;
+    constructor();
+    protected renderIconSlot(): TemplateResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-status': SbbStatusElement;
+    }
+}
+export {};
+//# sourceMappingURL=status.d.ts.map

package/status/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/elements/status/status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,aAAa,CAAC;AAGrB,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;;AAErE;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,qBAA4B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK1B;IAEH,8BAA8B;IACM,IAAI,EAAE,aAAa,CAAU;IAEjE,wBAAwB;IACwC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,yFAAyF;IAC1C,UAAU,EAAE,aAAa,CAAO;;cAO5D,cAAc,IAAI,cAAc;cAQhC,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/status.d.ts

@@ -0,0 +1,2 @@
+export * from './status/status.js';
+//# sourceMappingURL=status.d.ts.map

package/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../src/elements/status.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/status.js

@@ -0,0 +1,59 @@
+import { css as p, LitElement as u, html as c } from "lit";
+import { property as i, customElement as v } from "lit/decorators.js";
+import { SbbSlotStateController as m } from "./core/controllers.js";
+import { SbbIconNameMixin as f } from "./icon.js";
+import "./title.js";
+const y = p`*,:before,:after{box-sizing:border-box}:host{--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-icon-color: var(--sbb-color-iron);--sbb-status-text-color: var(--sbb-color-iron);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=error],[type=error]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-text-color: var(--sbb-color-green)}:host(:is([type=success],[type=success]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-text-color: var(--sbb-color-granite);--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-icon-font-size) * var(--sbb-typo-line-height-body-text) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__title{margin-block:0}:host(:not(:is([data-slot-names~=title],[title-content]))) .sbb-status__title{display:none}.sbb-status__content-slot{display:inline;margin:0;padding:0}`;
+var h = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (n, e, b, o) => {
+  for (var t = o > 1 ? void 0 : o ? x(e, b) : e, a = n.length - 1, l; a >= 0; a--)
+    (l = n[a]) && (t = (o ? l(e, b, t) : l(t)) || t);
+  return o && t && h(e, b, t), t;
+};
+let s = class extends f(u) {
+  constructor() {
+    super(), this._statusTypes = /* @__PURE__ */ new Map([
+      ["info", "circle-information-small"],
+      ["success", "circle-tick-small"],
+      ["warning", "circle-exclamation-point-small"],
+      ["error", "circle-cross-small"]
+    ]), this.type = "info", this.titleLevel = "3", new m(this);
+  }
+  renderIconSlot() {
+    return c`
+      <slot name="icon">
+        <sbb-icon name=${this.iconName ?? this._statusTypes.get(this.type)}></sbb-icon>
+      </slot>
+    `;
+  }
+  render() {
+    return c`
+      <div class="sbb-status">
+        <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
+        <span class="sbb-status__content">
+          <sbb-title class="sbb-status__title" level=${this.titleLevel} visual-level="5">
+            <slot name="title">${this.titleContent}</slot>
+          </sbb-title>
+          <p class="sbb-status__content-slot">
+            <slot></slot>
+          </p>
+        </span>
+      </div>
+    `;
+  }
+};
+s.styles = y;
+r([
+  i({ reflect: !0 })
+], s.prototype, "type", 2);
+r([
+  i({ reflect: !0, attribute: "title-content" })
+], s.prototype, "titleContent", 2);
+r([
+  i({ attribute: "title-level" })
+], s.prototype, "titleLevel", 2);
+s = r([
+  v("sbb-status")
+], s);
+export {
+  s as SbbStatusElement
+};

package/stepper/step/step.d.ts

@@ -0,0 +1,66 @@
+import { CSSResultGroup, LitElement, TemplateResult, PropertyValues } from 'lit';
+import { SbbStepLabelElement } from '../step-label.js';
+
+export type SbbStepValidateEventDetails = {
+    currentIndex?: number;
+    currentStep?: SbbStepElement;
+    nextIndex?: number;
+    nextStep?: SbbStepElement;
+};
+/**
+ * Combined with a `sbb-stepper`, it displays a step's content.
+ *
+ * @slot - Use the unnamed slot to provide content.
+ * @event {CustomEvent<SbbStepValidateEventDetails>} validate - Emits whenever step switch is triggered. Can be canceled.
+ */
+export declare class SbbStepElement extends LitElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly validate: "validate";
+    };
+    /** Emits whenever step switch is triggered. */
+    private _validate;
+    private _loaded;
+    private _abort;
+    private _stepper;
+    private _label;
+    private _stepResizeObserver;
+    /** The label of the step. */
+    get label(): SbbStepLabelElement | null;
+    /**
+     * Selects and configures the step.
+     * @internal
+     */
+    select(): void;
+    /**
+     * Deselects and configures the step.
+     * @internal
+     */
+    deselect(): void;
+    /**
+     * Emits a validate event whenever step switch is triggered.
+     * @internal
+     */
+    validate(eventData: SbbStepValidateEventDetails): boolean;
+    /**
+     * Configures the step.
+     * @internal
+     */
+    configure(stepperLoaded: boolean): void;
+    /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
+    private _handleClick;
+    private _isGoNextElement;
+    private _isGoPreviousElement;
+    private _onStepElementResize;
+    private _getStepLabel;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-step': SbbStepElement;
+    }
+}
+//# sourceMappingURL=step.d.ts.map

package/stepper/step/step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,qBAKa,cAAe,SAAQ,UAAU;IAC5C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,MAAM,CAAoC;IAClD,OAAO,CAAC,mBAAmB,CAEzB;IAEF,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;IAED;;;OAGG;IACI,MAAM,IAAI,IAAI;IAQrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAQvB;;;OAGG;IACI,QAAQ,CAAC,SAAS,EAAE,2BAA2B,GAAG,OAAO;IAIhE;;;OAGG;IACI,SAAS,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAS9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,aAAa;IAQL,iBAAiB,IAAI,IAAI;cAStB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK9D,oBAAoB,IAAI,IAAI;cAKzB,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/stepper/step-label/step-label.d.ts

@@ -0,0 +1,47 @@
+import { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbStepElement } from '../step.js';
+
+declare const SbbStepLabelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
+/**
+ * Combined with a `sbb-stepper`, it displays a step's label.
+ *
+ * @slot - Use the unnamed slot to provide a label.
+ * @slot icon - Use this to display an icon in the label bubble.
+ */
+export declare class SbbStepLabelElement extends SbbStepLabelElement_base {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private readonly _internals;
+    /** The step controlled by the label. */
+    get step(): SbbStepElement | null;
+    /**
+     * Selects and configures the step label.
+     * @internal
+     */
+    select(): void;
+    /**
+     * Deselects and configures the step label.
+     * @internal
+     */
+    deselect(): void;
+    /**
+     * Configures the step label.
+     * @internal
+     */
+    configure(posInSet: number, setSize: number, stepperLoaded: boolean): void;
+    private _abort;
+    private _stepper;
+    private _step;
+    private _getStep;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-step-label': SbbStepLabelElement;
+    }
+}
+export {};
+//# sourceMappingURL=step-label.d.ts.map

package/stepper/step-label/step-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-label.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;GAKG;AACH,qBAMa,mBAAoB,SAAQ,wBAAwD;IAC/F,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAgB;IAChB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4C;IAEvE,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IAED;;;OAGG;IACI,MAAM,IAAI,IAAI;IAMrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAMvB;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI;IAQjF,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,KAAK,CAA+B;IAE5C,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;cAqBtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/stepper/step-label.d.ts

@@ -0,0 +1,2 @@
+export * from './step-label/step-label.js';
+//# sourceMappingURL=step-label.d.ts.map

package/stepper/step-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-label.d.ts","sourceRoot":"","sources":["../../../src/elements/stepper/step-label.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/stepper/step-label.js

@@ -0,0 +1,83 @@
+import { css as l, html as n } from "lit";
+import { customElement as p } from "lit/decorators.js";
+import { SbbButtonBaseElement as c } from "../core/base-elements.js";
+import { SbbConnectedAbortController as d } from "../core/controllers.js";
+import { hostAttributes as f } from "../core/decorators.js";
+import { SbbDisabledMixin as h } from "../core/mixins.js";
+import { SbbIconNameMixin as v } from "../icon.js";
+const x = l`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-iron);--sbb-step-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-color-cloud);--sbb-step-label-prefix-background-color: var(--sbb-color-white);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-font-size-text-l) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host([data-selected]){--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-charcoal)}@media (forced-colors: active){:host([data-selected]){--sbb-step-label-color: Highlight !important}}:host([disabled]){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-prefix-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-step-label-color: GrayText !important}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-step-label-cursor: pointer;--sbb-step-label-prefix-background-color: var(--sbb-color-milk);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host([data-orientation=vertical]){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([data-orientation=vertical]:not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host([data-selected][data-orientation=vertical]){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-spacing-fixed-4x);color:var(--sbb-step-label-color)}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host([data-orientation=horizontal]) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
+var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, g = (t, s, r, i) => {
+  for (var e = i > 1 ? void 0 : i ? m(s, r) : s, a = t.length - 1, o; a >= 0; a--)
+    (o = t[a]) && (e = (i ? o(s, r, e) : o(e)) || e);
+  return i && e && u(s, r, e), e;
+};
+let y = 0, b = class extends v(h(c)) {
+  constructor() {
+    super(...arguments), this._internals = this.attachInternals(), this._abort = new d(this), this._stepper = null, this._step = null;
+  }
+  /** The step controlled by the label. */
+  get step() {
+    return this._step;
+  }
+  /**
+   * Selects and configures the step label.
+   * @internal
+   */
+  select() {
+    this.tabIndex = 0, this._internals.ariaSelected = "true", this.toggleAttribute("data-selected", !0);
+  }
+  /**
+   * Deselects and configures the step label.
+   * @internal
+   */
+  deselect() {
+    this.tabIndex = -1, this._internals.ariaSelected = "false", this.toggleAttribute("data-selected", !1);
+  }
+  /**
+   * Configures the step label.
+   * @internal
+   */
+  configure(t, s, r) {
+    r && (this._step = this._getStep()), this._internals.ariaPosInSet = `${t}`, this._internals.ariaSetSize = `${s}`;
+  }
+  _getStep() {
+    let t = this.nextElementSibling;
+    for (; t && t.localName !== "sbb-step"; )
+      t = t.nextElementSibling;
+    return t;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this._abort.signal;
+    this.id = this.id || `sbb-step-label-${y++}`, this._internals.ariaSelected = "false", this._stepper = this.closest("sbb-stepper"), this._step = this._getStep(), this.toggleAttribute("data-disabled", this.hasAttribute("disabled")), this.addEventListener(
+      "click",
+      () => {
+        this._stepper && this._step && (this._stepper.selected = this._step);
+      },
+      { signal: t }
+    );
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.step && this.setAttribute("aria-controls", this.step.id);
+  }
+  render() {
+    return n`
+      <div class="sbb-step-label">
+        <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
+        <span class="sbb-step-label__text"><slot></slot></span>
+      </div>
+    `;
+  }
+};
+b.styles = x;
+b = g([
+  p("sbb-step-label"),
+  f({
+    slot: "step-label",
+    tabindex: "-1",
+    role: "tab"
+  })
+], b);
+export {
+  b as SbbStepLabelElement
+};

package/stepper/step.d.ts

@@ -0,0 +1,2 @@
+export * from './step/step.js';
+//# sourceMappingURL=step.d.ts.map

package/stepper/step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/elements/stepper/step.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/stepper/step.js

@@ -0,0 +1,117 @@
+import { css as o, LitElement as l, html as p } from "lit";
+import { customElement as h } from "lit/decorators.js";
+import { ref as d } from "lit/directives/ref.js";
+import { SbbConnectedAbortController as c } from "../core/controllers.js";
+import { hostAttributes as v } from "../core/decorators.js";
+import { EventEmitter as m } from "../core/eventing.js";
+import { AgnosticResizeObserver as u } from "../core/observers.js";
+const f = o`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-visibility: hidden;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-visibility: visible;--sbb-step-height: fit-content;--sbb-step-animation-duration: var(--sbb-animation-duration-4x);--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing)}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-step{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);visibility:var(--sbb-step-visibility);height:var(--sbb-step-height);color:var(--sbb-step-color);transition-property:opacity,visibility;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing)}`;
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, y = (t, s, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? _(s, a) : s, r = t.length - 1, b; r >= 0; r--)
+    (b = t[r]) && (e = (i ? b(s, a, e) : b(e)) || e);
+  return i && e && g(s, a, e), e;
+};
+let x = 0, n = class extends l {
+  constructor() {
+    super(...arguments), this._validate = new m(
+      this,
+      n.events.validate
+    ), this._loaded = !1, this._abort = new c(this), this._stepper = null, this._label = null, this._stepResizeObserver = new u(
+      (t) => this._onStepElementResize(t)
+    );
+  }
+  /** The label of the step. */
+  get label() {
+    return this._label;
+  }
+  /**
+   * Selects and configures the step.
+   * @internal
+   */
+  select() {
+    !this._loaded || !this.label || (this.toggleAttribute("data-selected", !0), this.label.select());
+  }
+  /**
+   * Deselects and configures the step.
+   * @internal
+   */
+  deselect() {
+    this.label && (this.toggleAttribute("data-selected", !1), this.label.deselect());
+  }
+  /**
+   * Emits a validate event whenever step switch is triggered.
+   * @internal
+   */
+  validate(t) {
+    return !!this._validate.emit(t);
+  }
+  /**
+   * Configures the step.
+   * @internal
+   */
+  configure(t) {
+    t && (this._label = this._getStepLabel()), this.label && this.setAttribute("aria-labelledby", this.label.id);
+  }
+  /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
+  _handleClick(t) {
+    var a, i;
+    const s = t.composedPath().filter((e) => e instanceof window.HTMLElement);
+    s.some((e) => this._isGoNextElement(e)) ? (a = this._stepper) == null || a.next() : s.some((e) => this._isGoPreviousElement(e)) && ((i = this._stepper) == null || i.previous());
+  }
+  _isGoNextElement(t) {
+    return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
+  }
+  _isGoPreviousElement(t) {
+    return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
+  }
+  _onStepElementResize(t) {
+    var a, i;
+    if (!this.hasAttribute("data-selected"))
+      return;
+    const s = Math.floor(t[0].contentRect.height);
+    (i = (a = this._stepper) == null ? void 0 : a.style) == null || i.setProperty("--sbb-stepper-content-height", `${s}px`);
+  }
+  _getStepLabel() {
+    let t = this.previousElementSibling;
+    for (; t && t.localName !== "sbb-step-label"; )
+      t = t.previousElementSibling;
+    return t;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this._abort.signal;
+    this.id = this.id || `sbb-step-${x++}`, this.addEventListener("click", (s) => this._handleClick(s), { signal: t }), this._stepper = this.closest("sbb-stepper"), this._label = this._getStepLabel();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._loaded = !0;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._stepResizeObserver.disconnect();
+  }
+  render() {
+    return p`
+      <div class="sbb-step--wrapper">
+        <div
+          class="sbb-step"
+          ${d((t) => t && this._stepResizeObserver.observe(t))}
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+n.styles = f;
+n.events = {
+  validate: "validate"
+};
+n = y([
+  h("sbb-step"),
+  v({
+    slot: "step",
+    role: "tabpanel"
+  })
+], n);
+export {
+  n as SbbStepElement
+};

package/stepper/stepper/stepper.d.ts

@@ -0,0 +1,59 @@
+import { CSSResultGroup, LitElement, TemplateResult, PropertyValues } from 'lit';
+import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
+import { SbbStepElement } from '../step.js';
+
+/**
+ * Provides a structured, step-by-step workflow for user interactions.
+ * @slot - Provide a `sbb-expansion-panel-header` and a `sbb-expansion-panel-content` to the stepper.
+ * @slot step-label - Use this slot to provide an `sbb-step-label`.
+ * @slot step - Use this slot to provide an `sbb-step`.
+ */
+export declare class SbbStepperElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** If set to true, only the current and previous labels can be clicked and selected. */
+    linear: boolean;
+    /** Overrides the behaviour of `orientation` property. */
+    get horizontalFrom(): SbbHorizontalFrom | undefined;
+    set horizontalFrom(value: SbbHorizontalFrom);
+    private _horizontalFrom?;
+    /** Steps orientation, either horizontal or vertical. */
+    orientation: SbbOrientation;
+    /** The currently selected step. */
+    set selected(step: SbbStepElement);
+    get selected(): SbbStepElement | undefined;
+    /** The currently selected step index. */
+    set selectedIndex(index: number);
+    get selectedIndex(): number | undefined;
+    /** The steps of the stepper. */
+    get steps(): SbbStepElement[];
+    private get _enabledSteps();
+    /** Selects the next step. */
+    next(): void;
+    /** Selects the previous step. */
+    previous(): void;
+    /** Resets the form in which the stepper is nested or every form of each step, if any. */
+    reset(): void;
+    private _loaded;
+    private _abort;
+    private _resizeObserverTimeout;
+    private _isValidStep;
+    private _select;
+    private _setMarkerSize;
+    private _calculateLabelOffsetTop;
+    private _configure;
+    private _updateLabels;
+    private _checkOrientation;
+    private _onStepperResize;
+    private _configureLinearMode;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _handleKeyDown;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-stepper': SbbStepperElement;
+    }
+}
+//# sourceMappingURL=stepper.d.ts.map

package/stepper/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;AAM9E;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wFAAwF;IACpD,MAAM,UAAS;IAEnD,yDAAyD;IACzD,IACW,cAAc,IAAI,iBAAiB,GAAG,SAAS,CAEzD;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,iBAAiB,EAKjD;IACD,OAAO,CAAC,eAAe,CAAC,CAAgC;IAExD,wDAAwD;IAEjD,WAAW,EAAE,cAAc,CAAgB;IAElD,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,EAIvC;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEhD;IAED,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAIrC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,SAAS,CAE7C;IAED,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAEnC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,6BAA6B;IACtB,IAAI,IAAI,IAAI;IAMnB,iCAAiC;IAC1B,QAAQ,IAAI,IAAI;IAMvB,yFAAyF;IAClF,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,sBAAsB,CAA8C;IAE5E,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,oBAAoB;IAUZ,iBAAiB,IAAI,IAAI;cAWhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAU1E,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW5E,OAAO,CAAC,cAAc;cAmBH,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/stepper/stepper.d.ts

@@ -0,0 +1,2 @@
+export * from './stepper/stepper.js';
+//# sourceMappingURL=stepper.d.ts.map

package/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/elements/stepper/stepper.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}