@sbb-esta/lyne-elements 2.8.0 → 2.9.0

package/development/status/status.component.js

@@ -0,0 +1,198 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { slotState, forceType, omitEmptyConverter } from "../core/decorators.js";
+import { SbbIconNameMixin } from "../icon.js";
+import "../title.js";
+const style = css`*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-status-color: var(--sbb-color-iron);
+  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-status-text-color: var(--sbb-status-color);
+  --_sbb-status-icon-color: var(--sbb-status-color);
+  --_sbb-status-icon-font-size: var(--sbb-font-size-text-s);
+  display: block;
+}
+
+:host([type=error]) {
+  --sbb-status-color: var(--sbb-color-red125);
+}
+
+:host([type=success]) {
+  --sbb-status-color: var(--sbb-color-green);
+}
+
+:host([type=warning]) {
+  --sbb-status-color: var(--sbb-color-charcoal);
+}
+
+:host([type=pending]) {
+  --sbb-status-color: var(--sbb-color-sky);
+}
+
+:host([type=incomplete]) {
+  --sbb-status-color: var(--sbb-color-red125);
+}
+
+:host([type=not-started]) {
+  --sbb-status-color: var(--sbb-color-smoke);
+  --sbb-status-text-color: var(--sbb-color-charcoal);
+}
+
+:host([type=in-progress]) {
+  --sbb-status-color: var(--sbb-color-pink);
+}
+
+:host(:is([data-slot-names~=title], [title-content])) {
+  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
+  --_sbb-status-text-color-override: var(--sbb-color-granite);
+  --_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: normal;
+  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-override, 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;
+}`;
+let SbbStatusElement = (() => {
+  var _type_accessor_storage, _titleContent_accessor_storage, _titleLevel_accessor_storage, _a;
+  let _classDecorators = [customElement("sbb-status"), slotState()];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbIconNameMixin(LitElement);
+  let _type_decorators;
+  let _type_initializers = [];
+  let _type_extraInitializers = [];
+  let _titleContent_decorators;
+  let _titleContent_initializers = [];
+  let _titleContent_extraInitializers = [];
+  let _titleLevel_decorators;
+  let _titleLevel_initializers = [];
+  let _titleLevel_extraInitializers = [];
+  _a = class extends _classSuper {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _type_accessor_storage);
+      __privateAdd(this, _titleContent_accessor_storage);
+      __privateAdd(this, _titleLevel_accessor_storage);
+      this._statusTypes = /* @__PURE__ */ new Map([
+        ["info", "circle-information-small"],
+        ["success", "circle-tick-small"],
+        ["warning", "circle-exclamation-point-small"],
+        ["error", "circle-cross-small"],
+        ["pending", "circle-three-dots-small"],
+        ["incomplete", "circle-dotted-part-x-small"],
+        ["not-started", "circle-dotted-small"],
+        ["in-progress", "circle-dotted-part-small"]
+      ]);
+      __privateSet(this, _type_accessor_storage, __runInitializers(this, _type_initializers, "info"));
+      __privateSet(this, _titleContent_accessor_storage, (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _titleContent_initializers, "")));
+      __privateSet(this, _titleLevel_accessor_storage, (__runInitializers(this, _titleContent_extraInitializers), __runInitializers(this, _titleLevel_initializers, "3")));
+      __runInitializers(this, _titleLevel_extraInitializers);
+    }
+    /** The type of the status. */
+    get type() {
+      return __privateGet(this, _type_accessor_storage);
+    }
+    set type(value) {
+      __privateSet(this, _type_accessor_storage, value);
+    }
+    /** Content of title. */
+    get titleContent() {
+      return __privateGet(this, _titleContent_accessor_storage);
+    }
+    set titleContent(value) {
+      __privateSet(this, _titleContent_accessor_storage, value);
+    }
+    /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
+    get titleLevel() {
+      return __privateGet(this, _titleLevel_accessor_storage);
+    }
+    set titleLevel(value) {
+      __privateSet(this, _titleLevel_accessor_storage, value);
+    }
+    renderIconSlot() {
+      return html`
+      <slot name="icon">
+        <sbb-icon name=${this.iconName || this._statusTypes.get(this.type)}></sbb-icon>
+      </slot>
+    `;
+    }
+    render() {
+      return html`
+      <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>
+    `;
+    }
+  }, _type_accessor_storage = new WeakMap(), _titleContent_accessor_storage = new WeakMap(), _titleLevel_accessor_storage = new WeakMap(), _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    _type_decorators = [property({ reflect: true })];
+    _titleContent_decorators = [forceType(), property({ attribute: "title-content", reflect: true, converter: omitEmptyConverter })];
+    _titleLevel_decorators = [property({ attribute: "title-level" })];
+    __esDecorate(_a, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: (obj) => "type" in obj, get: (obj) => obj.type, set: (obj, value) => {
+      obj.type = value;
+    } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+    __esDecorate(_a, null, _titleContent_decorators, { kind: "accessor", name: "titleContent", static: false, private: false, access: { has: (obj) => "titleContent" in obj, get: (obj) => obj.titleContent, set: (obj, value) => {
+      obj.titleContent = value;
+    } }, metadata: _metadata }, _titleContent_initializers, _titleContent_extraInitializers);
+    __esDecorate(_a, null, _titleLevel_decorators, { kind: "accessor", name: "titleLevel", static: false, private: false, access: { has: (obj) => "titleLevel" in obj, get: (obj) => obj.titleLevel, set: (obj, value) => {
+      obj.titleLevel = value;
+    } }, metadata: _metadata }, _titleLevel_initializers, _titleLevel_extraInitializers);
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = style, __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbStatusElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3N0YXR1cy9zdGF0dXMuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwsIExpdEVsZW1lbnQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IGZvcmNlVHlwZSwgb21pdEVtcHR5Q29udmVydGVyLCBzbG90U3RhdGUgfSBmcm9tICcuLi9jb3JlL2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgU2JiSWNvbk5hbWVNaXhpbiB9IGZyb20gJy4uL2ljb24uanMnO1xuaW1wb3J0IHR5cGUgeyBTYmJUaXRsZUxldmVsIH0gZnJvbSAnLi4vdGl0bGUuanMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9zdGF0dXMuc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICcuLi90aXRsZS5qcyc7XG5cbmV4cG9ydCB0eXBlIFNiYlN0YXR1c1R5cGUgPVxuICB8ICdpbmZvJ1xuICB8ICdzdWNjZXNzJ1xuICB8ICd3YXJuaW5nJ1xuICB8ICdlcnJvcidcbiAgfCAncGVuZGluZydcbiAgfCAnaW5jb21wbGV0ZSdcbiAgfCAnbm90LXN0YXJ0ZWQnXG4gIHwgJ2luLXByb2dyZXNzJztcblxuLyoqXG4gKiBEaXNwbGF5cyBhIG1lc3NhZ2UgdG8gdGhlIHVzZXIncyBhdHRlbnRpb24uXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgY29udGVudCB0byB0aGUgc3RhdHVzIG1lc3NhZ2UuXG4gKiBAc2xvdCB0aXRsZSAtIFVzZSB0aGlzIHRvIHByb3ZpZGUgYSB0aXRsZSBmb3IgdGhlIHN0YXR1cyAob3B0aW9uYWwpLlxuICogQHNsb3QgaWNvbiAtIFVzZSB0aGlzIHNsb3QgdG8gb3ZlcnJpZGUgdGhlIGRlZmF1bHQgc3RhdHVzIGljb24uXG4gKiBAY3NzcHJvcCBbLS1zYmItc3RhdHVzLWNvbG9yPXZhcigtLXNiYi1jb2xvci1pcm9uKV0gLSBTcGVjaWZ5IGEgY3VzdG9tIGNvbG9yLFxuICogd2hpY2ggd2lsbCBvdmVycmlkZSB0aGUgcHJlZGVmaW5lZCBjb2xvciBmb3IgYW55IHR5cGUuXG4gKiBAY3NzcHJvcCBbLS1zYmItc3RhdHVzLXRleHQtY29sb3I9dmFyKC0tc2JiLXN0YXR1cy1jb2xvcildIC0gU3BlY2lmeSBhIGN1c3RvbSB0ZXh0IGNvbG9yLFxuICogd2hpY2ggd2lsbCBvdmVycmlkZSB0aGUgcHJlZGVmaW5lZCBjb2xvciBmb3IgYW55IHR5cGUuIE9ubHkgdmFsaWQgZm9yIGEgc3RhdHVzIHdpdGhvdXQgYSB0aXRsZS5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXN0YXR1cycpXG5Ac2xvdFN0YXRlKClcbmNsYXNzIFNiYlN0YXR1c0VsZW1lbnQgZXh0ZW5kcyBTYmJJY29uTmFtZU1peGluKExpdEVsZW1lbnQpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gc3R5bGU7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBfc3RhdHVzVHlwZXM6IE1hcDxTYmJTdGF0dXNUeXBlLCBzdHJpbmc+ID0gbmV3IE1hcChbXG4gICAgWydpbmZvJywgJ2NpcmNsZS1pbmZvcm1hdGlvbi1zbWFsbCddLFxuICAgIFsnc3VjY2VzcycsICdjaXJjbGUtdGljay1zbWFsbCddLFxuICAgIFsnd2FybmluZycsICdjaXJjbGUtZXhjbGFtYXRpb24tcG9pbnQtc21hbGwnXSxcbiAgICBbJ2Vycm9yJywgJ2NpcmNsZS1jcm9zcy1zbWFsbCddLFxuICAgIFsncGVuZGluZycsICdjaXJjbGUtdGhyZWUtZG90cy1zbWFsbCddLFxuICAgIFsnaW5jb21wbGV0ZScsICdjaXJjbGUtZG90dGVkLXBhcnQteC1zbWFsbCddLFxuICAgIFsnbm90LXN0YXJ0ZWQnLCAnY2lyY2xlLWRvdHRlZC1zbWFsbCddLFxuICAgIFsnaW4tcHJvZ3Jlc3MnLCAnY2lyY2xlLWRvdHRlZC1wYXJ0LXNtYWxsJ10sXG4gIF0pO1xuXG4gIC8qKiBUaGUgdHlwZSBvZiB0aGUgc3RhdHVzLiAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciB0eXBlOiBTYmJTdGF0dXNUeXBlID0gJ2luZm8nO1xuXG4gIC8qKiBDb250ZW50IG9mIHRpdGxlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAndGl0bGUtY29udGVudCcsIHJlZmxlY3Q6IHRydWUsIGNvbnZlcnRlcjogb21pdEVtcHR5Q29udmVydGVyIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciB0aXRsZUNvbnRlbnQ6IHN0cmluZyA9ICcnO1xuXG4gIC8qKiBMZXZlbCBvZiB0aXRsZSwgaXQgd2lsbCBiZSByZW5kZXJlZCBhcyBoZWFkaW5nIHRhZyAoZS5nLiBoMykuIERlZmF1bHRzIHRvIGxldmVsIDMuICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ3RpdGxlLWxldmVsJyB9KSBwdWJsaWMgYWNjZXNzb3IgdGl0bGVMZXZlbDogU2JiVGl0bGVMZXZlbCA9ICczJztcblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVySWNvblNsb3QoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNsb3QgbmFtZT1cImljb25cIj5cbiAgICAgICAgPHNiYi1pY29uIG5hbWU9JHt0aGlzLmljb25OYW1lIHx8IHRoaXMuX3N0YXR1c1R5cGVzLmdldCh0aGlzLnR5cGUpIX0+PC9zYmItaWNvbj5cbiAgICAgIDwvc2xvdD5cbiAgICBgO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLXN0YXR1c1wiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi1zdGF0dXNfX2ljb25cIj4gJHt0aGlzLnJlbmRlckljb25TbG90KCl9IDwvc3Bhbj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItc3RhdHVzX19jb250ZW50XCI+XG4gICAgICAgICAgPHNiYi10aXRsZSBjbGFzcz1cInNiYi1zdGF0dXNfX3RpdGxlXCIgbGV2ZWw9JHt0aGlzLnRpdGxlTGV2ZWx9IHZpc3VhbC1sZXZlbD1cIjVcIj5cbiAgICAgICAgICAgIDxzbG90IG5hbWU9XCJ0aXRsZVwiPiR7dGhpcy50aXRsZUNvbnRlbnR9PC9zbG90PlxuICAgICAgICAgIDwvc2JiLXRpdGxlPlxuICAgICAgICAgIDxwIGNsYXNzPVwic2JiLXN0YXR1c19fY29udGVudC1zbG90XCI+XG4gICAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgICAgPC9wPlxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItc3RhdHVzJzogU2JiU3RhdHVzRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFvQ00sb0JBQWdCLE1BQUE7O0FBRnJCLE1BQUEsbUJBQUEsQ0FBQSxjQUFjLFlBQVksR0FDMUIsV0FBVzs7OztvQkFDbUIsaUJBQWlCLFVBQVU7Ozs7Ozs7Ozs7QUFBbkMsRUFBQSxtQkFBUSxZQUE0QjtBQUFB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

package/development/status.d.ts

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

package/development/status.d.ts.map

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

package/development/status.js

@@ -1,4 +1,4 @@
-import { SbbStatusElement } from "./status/status.js";
+import { SbbStatusElement } from "./status/status.component.js";
 export {
   SbbStatusElement
 };

package/development/stepper/step/step.component.d.ts

@@ -0,0 +1,74 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SbbStepLabelElement } from '../step-label.js';
+export type SbbStepValidateEventDetails = {
+    currentIndex: number | null;
+    currentStep: SbbStepElement | null;
+    nextIndex: number | null;
+    nextStep: SbbStepElement | null;
+};
+/**
+ * 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";
+        readonly resizeChange: "resizeChange";
+    };
+    /** Emits whenever step switch is triggered. */
+    private _validate;
+    /**
+     * @internal
+     * Emits when a resize happens, used to avoid setting the height of the stepper from the step component.
+     */
+    private _resizeChange;
+    private _stepper;
+    private _label;
+    private _stepResizeObserver;
+    /** The label of the step. */
+    get label(): SbbStepLabelElement | null;
+    constructor();
+    /**
+     * 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;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-step': SbbStepElement;
+    }
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        resizeChange: CustomEvent<void>;
+    }
+}
+//# sourceMappingURL=step.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/stepper/step/step.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF;;;;;GAKG;AACH,qBAMM,cAAe,SAAQ,UAAU;IACrC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,MAAM,CAAoC;IAMlD,OAAO,CAAC,mBAAmB,CAIxB;IAEH,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;;IAOD;;;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;IAO5B,OAAO,CAAC,aAAa;IAQL,iBAAiB,IAAI,IAAI;cAOtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACjC;CACF"}

package/development/stepper/step/step.component.js

@@ -0,0 +1,218 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { hostAttributes } from "../../core/decorators.js";
+import { EventEmitter } from "../../core/eventing.js";
+const style = css`*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-step-position: initial;
+  --sbb-step-inset-block-start: unset;
+  --sbb-step-opacity: 0;
+  --sbb-step-display: none;
+  --sbb-step-height: 0;
+  --sbb-step-animation-duration: var(
+    --sbb-disable-animation-duration,
+    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-display: block;
+  --sbb-step-height: fit-content;
+  --sbb-step-animation-duration: var(
+    --sbb-disable-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: display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);
+  transition-behavior: allow-discrete;
+}
+:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper {
+  opacity: 1;
+  height: var(--sbb-stepper-content-height);
+  transition: display var(--sbb-step-animation-duration) var(--sbb-animation-easing), 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);
+  transition-behavior: allow-discrete;
+}
+
+.sbb-step {
+  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  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);
+  display: var(--sbb-step-display);
+  height: var(--sbb-step-height);
+  color: var(--sbb-step-color);
+  transition-property: display, opacity;
+  transition-duration: var(--sbb-step-animation-duration);
+  transition-delay: var(--sbb-step-animation-delay);
+  transition-timing-function: var(--sbb-animation-easing);
+  transition-behavior: allow-discrete;
+}
+@starting-style {
+  .sbb-step {
+    --sbb-step-opacity: 0;
+  }
+}`;
+let nextId = 0;
+let SbbStepElement = (() => {
+  var _a;
+  let _classDecorators = [customElement("sbb-step"), hostAttributes({
+    slot: "step",
+    role: "tabpanel"
+  })];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = LitElement;
+  var SbbStepElement2 = (_a = class extends _classSuper {
+    /** The label of the step. */
+    get label() {
+      return this._label;
+    }
+    constructor() {
+      var _a2;
+      super();
+      this._validate = new EventEmitter(this, SbbStepElement2.events.validate);
+      this._resizeChange = new EventEmitter(this, SbbStepElement2.events.resizeChange, { bubbles: true });
+      this._stepper = null;
+      this._label = null;
+      this._stepResizeObserver = new ResizeController(this, {
+        target: null,
+        skipInitial: true,
+        callback: () => setTimeout(() => this._onStepElementResize())
+      });
+      (_a2 = this.addEventListener) == null ? void 0 : _a2.call(this, "click", (e) => this._handleClick(e));
+    }
+    /**
+     * Selects and configures the step.
+     * @internal
+     */
+    select() {
+      if (!this.hasUpdated || !this.label) {
+        return;
+      }
+      this.toggleAttribute("data-selected", true);
+      this.label.select();
+    }
+    /**
+     * Deselects and configures the step.
+     * @internal
+     */
+    deselect() {
+      if (!this.label) {
+        return;
+      }
+      this.toggleAttribute("data-selected", false);
+      this.label.deselect();
+    }
+    /**
+     * Emits a validate event whenever step switch is triggered.
+     * @internal
+     */
+    validate(eventData) {
+      return !!this._validate.emit(eventData);
+    }
+    /**
+     * Configures the step.
+     * @internal
+     */
+    configure(stepperLoaded) {
+      if (stepperLoaded) {
+        this._label = this._getStepLabel();
+      }
+      if (this.label) {
+        this.setAttribute("aria-labelledby", this.label.id);
+      }
+    }
+    /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
+    _handleClick(event) {
+      var _a2, _b;
+      const composedPathElements = event.composedPath().filter((el) => el instanceof window.HTMLElement);
+      if (composedPathElements.some((el) => this._isGoNextElement(el))) {
+        (_a2 = this._stepper) == null ? void 0 : _a2.next();
+      } else if (composedPathElements.some((el) => this._isGoPreviousElement(el))) {
+        (_b = this._stepper) == null ? void 0 : _b.previous();
+      }
+    }
+    _isGoNextElement(element) {
+      return element.hasAttribute("sbb-stepper-next") && !element.hasAttribute("disabled");
+    }
+    _isGoPreviousElement(element) {
+      return element.hasAttribute("sbb-stepper-previous") && !element.hasAttribute("disabled");
+    }
+    _onStepElementResize() {
+      if (!this.hasAttribute("data-selected")) {
+        return;
+      }
+      this._resizeChange.emit();
+    }
+    _getStepLabel() {
+      let previousSibling = this.previousElementSibling;
+      while (previousSibling && previousSibling.localName !== "sbb-step-label") {
+        previousSibling = previousSibling.previousElementSibling;
+      }
+      return previousSibling;
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.id || (this.id = `sbb-step-${nextId++}`);
+      this._stepper = this.closest("sbb-stepper");
+      this._label = this._getStepLabel();
+    }
+    firstUpdated(changedProperties) {
+      super.firstUpdated(changedProperties);
+      this.updateComplete.then(() => {
+        this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
+      });
+    }
+    render() {
+      return html`
+      <div class="sbb-step--wrapper">
+        <div class="sbb-step">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+  }, _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    SbbStepElement2 = _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = style, _a.events = {
+    validate: "validate",
+    resizeChange: "resizeChange"
+  }, __runInitializers(_classThis, _classExtraInitializers), _a);
+  return SbbStepElement2 = _classThis;
+})();
+export {
+  SbbStepElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC5jb21wb25lbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9zdGVwcGVyL3N0ZXAvc3RlcC5jb21wb25lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVzaXplQ29udHJvbGxlciB9IGZyb20gJ0BsaXQtbGFicy9vYnNlcnZlcnMvcmVzaXplLWNvbnRyb2xsZXIuanMnO1xuaW1wb3J0IHtcbiAgdHlwZSBDU1NSZXN1bHRHcm91cCxcbiAgaHRtbCxcbiAgTGl0RWxlbWVudCxcbiAgdHlwZSBQcm9wZXJ0eVZhbHVlcyxcbiAgdHlwZSBUZW1wbGF0ZVJlc3VsdCxcbn0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IGhvc3RBdHRyaWJ1dGVzIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciB9IGZyb20gJy4uLy4uL2NvcmUvZXZlbnRpbmcuanMnO1xuaW1wb3J0IHR5cGUgeyBTYmJTdGVwTGFiZWxFbGVtZW50IH0gZnJvbSAnLi4vc3RlcC1sYWJlbC5qcyc7XG5pbXBvcnQgdHlwZSB7IFNiYlN0ZXBwZXJFbGVtZW50IH0gZnJvbSAnLi4vc3RlcHBlci5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3N0ZXAuc2Nzcz9saXQmaW5saW5lJztcblxubGV0IG5leHRJZCA9IDA7XG5cbmV4cG9ydCB0eXBlIFNiYlN0ZXBWYWxpZGF0ZUV2ZW50RGV0YWlscyA9IHtcbiAgY3VycmVudEluZGV4OiBudW1iZXIgfCBudWxsO1xuICBjdXJyZW50U3RlcDogU2JiU3RlcEVsZW1lbnQgfCBudWxsO1xuICBuZXh0SW5kZXg6IG51bWJlciB8IG51bGw7XG4gIG5leHRTdGVwOiBTYmJTdGVwRWxlbWVudCB8IG51bGw7XG59O1xuXG4vKipcbiAqIENvbWJpbmVkIHdpdGggYSBgc2JiLXN0ZXBwZXJgLCBpdCBkaXNwbGF5cyBhIHN0ZXAncyBjb250ZW50LlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gcHJvdmlkZSBjb250ZW50LlxuICogQGV2ZW50IHtDdXN0b21FdmVudDxTYmJTdGVwVmFsaWRhdGVFdmVudERldGFpbHM+fSB2YWxpZGF0ZSAtIEVtaXRzIHdoZW5ldmVyIHN0ZXAgc3dpdGNoIGlzIHRyaWdnZXJlZC4gQ2FuIGJlIGNhbmNlbGVkLlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItc3RlcCcpXG5AaG9zdEF0dHJpYnV0ZXMoe1xuICBzbG90OiAnc3RlcCcsXG4gIHJvbGU6ICd0YWJwYW5lbCcsXG59KVxuY2xhc3MgU2JiU3RlcEVsZW1lbnQgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gc3R5bGU7XG4gIHB1YmxpYyBzdGF0aWMgcmVhZG9ubHkgZXZlbnRzID0ge1xuICAgIHZhbGlkYXRlOiAndmFsaWRhdGUnLFxuICAgIHJlc2l6ZUNoYW5nZTogJ3Jlc2l6ZUNoYW5nZScsXG4gIH0gYXMgY29uc3Q7XG5cbiAgLyoqIEVtaXRzIHdoZW5ldmVyIHN0ZXAgc3dpdGNoIGlzIHRyaWdnZXJlZC4gKi9cbiAgcHJpdmF0ZSBfdmFsaWRhdGU6IEV2ZW50RW1pdHRlcjxTYmJTdGVwVmFsaWRhdGVFdmVudERldGFpbHM+ID0gbmV3IEV2ZW50RW1pdHRlcihcbiAgICB0aGlzLFxuICAgIFNiYlN0ZXBFbGVtZW50LmV2ZW50cy52YWxpZGF0ZSxcbiAgKTtcblxuICAvKipcbiAgICogQGludGVybmFsXG4gICAqIEVtaXRzIHdoZW4gYSByZXNpemUgaGFwcGVucywgdXNlZCB0byBhdm9pZCBzZXR0aW5nIHRoZSBoZWlnaHQgb2YgdGhlIHN0ZXBwZXIgZnJvbSB0aGUgc3RlcCBjb21wb25lbnQuXG4gICAqL1xuICBwcml2YXRlIF9yZXNpemVDaGFuZ2U6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXIoXG4gICAgdGhpcyxcbiAgICBTYmJTdGVwRWxlbWVudC5ldmVudHMucmVzaXplQ2hhbmdlLFxuICAgIHsgYnViYmxlczogdHJ1ZSB9LFxuICApO1xuXG4gIHByaXZhdGUgX3N0ZXBwZXI6IFNiYlN0ZXBwZXJFbGVtZW50IHwgbnVsbCA9IG51bGw7XG4gIHByaXZhdGUgX2xhYmVsOiBTYmJTdGVwTGFiZWxFbGVtZW50IHwgbnVsbCA9IG51bGw7XG5cbiAgLy8gV2UgdXNlIGEgdGltZW91dCBhcyBhIHdvcmthcm91bmQgdG8gdGhlIFwiUmVzaXplT2JzZXJ2ZXIgbG9vcCBjb21wbGV0ZWQgd2l0aCB1bmRlbGl2ZXJlZCBub3RpZmljYXRpb25zXCIgZXJyb3IuXG4gIC8vIEZvciBtb3JlIGRldGFpbHM6XG4gIC8vIC0gaHR0cHM6Ly9naXRodWIuY29tL1dJQ0cvcmVzaXplLW9ic2VydmVyL2lzc3Vlcy8zOCNpc3N1ZWNvbW1lbnQtNDIyMTI2MDA2XG4gIC8vIC0gaHR0cHM6Ly9naXRodWIuY29tL2p1Z2dsZS9yZXNpemUtb2JzZXJ2ZXIvaXNzdWVzLzEwMyNpc3N1ZWNvbW1lbnQtMTcxMTE0ODI4NVxuICBwcml2YXRlIF9zdGVwUmVzaXplT2JzZXJ2ZXIgPSBuZXcgUmVzaXplQ29udHJvbGxlcih0aGlzLCB7XG4gICAgdGFyZ2V0OiBudWxsLFxuICAgIHNraXBJbml0aWFsOiB0cnVlLFxuICAgIGNhbGxiYWNrOiAoKSA9PiBzZXRUaW1lb3V0KCgpID0+IHRoaXMuX29uU3RlcEVsZW1lbnRSZXNpemUoKSksXG4gIH0pO1xuXG4gIC8qKiBUaGUgbGFiZWwgb2YgdGhlIHN0ZXAuICovXG4gIHB1YmxpYyBnZXQgbGFiZWwoKTogU2JiU3RlcExhYmVsRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLl9sYWJlbDtcbiAgfVxuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMuYWRkRXZlbnRMaXN0ZW5lcj8uKCdjbGljaycsIChlKSA9PiB0aGlzLl9oYW5kbGVDbGljayhlKSk7XG4gIH1cblxuICAvKipcbiAgICogU2VsZWN0cyBhbmQgY29uZmlndXJlcyB0aGUgc3RlcC5cbiAgICogQGludGVybmFsXG4gICAqL1xuICBwdWJsaWMgc2VsZWN0KCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5oYXNVcGRhdGVkIHx8ICF0aGlzLmxhYmVsKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMudG9nZ2xlQXR0cmlidXRlKCdkYXRhLXNlbGVjdGVkJywgdHJ1ZSk7XG4gICAgdGhpcy5sYWJlbC5zZWxlY3QoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBEZXNlbGVjdHMgYW5kIGNvbmZpZ3VyZXMgdGhlIHN0ZXAuXG4gICAqIEBpbnRlcm5hbFxuICAgKi9cbiAgcHVibGljIGRlc2VsZWN0KCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5sYWJlbCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnRvZ2dsZUF0dHJpYnV0ZSgnZGF0YS1zZWxlY3RlZCcsIGZhbHNlKTtcbiAgICB0aGlzLmxhYmVsLmRlc2VsZWN0KCk7XG4gIH1cblxuICAvKipcbiAgICogRW1pdHMgYSB2YWxpZGF0ZSBldmVudCB3aGVuZXZlciBzdGVwIHN3aXRjaCBpcyB0cmlnZ2VyZWQuXG4gICAqIEBpbnRlcm5hbFxuICAgKi9cbiAgcHVibGljIHZhbGlkYXRlKGV2ZW50RGF0YTogU2JiU3RlcFZhbGlkYXRlRXZlbnREZXRhaWxzKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICEhdGhpcy5fdmFsaWRhdGUuZW1pdChldmVudERhdGEpO1xuICB9XG5cbiAgLyoqXG4gICAqIENvbmZpZ3VyZXMgdGhlIHN0ZXAuXG4gICAqIEBpbnRlcm5hbFxuICAgKi9cbiAgcHVibGljIGNvbmZpZ3VyZShzdGVwcGVyTG9hZGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgaWYgKHN0ZXBwZXJMb2FkZWQpIHtcbiAgICAgIHRoaXMuX2xhYmVsID0gdGhpcy5fZ2V0U3RlcExhYmVsKCk7XG4gICAgfVxuICAgIGlmICh0aGlzLmxhYmVsKSB7XG4gICAgICB0aGlzLnNldEF0dHJpYnV0ZSgnYXJpYS1sYWJlbGxlZGJ5JywgdGhpcy5sYWJlbC5pZCk7XG4gICAgfVxuICB9XG5cbiAgLyoqIFdhdGNoZXMgZm9yIGNsaWNrZWQgZWxlbWVudHMgd2l0aCBgc2JiLXN0ZXBwZXItbmV4dGAgb3IgYHNiYi1zdGVwcGVyLXByZXZpb3VzYCBhdHRyaWJ1dGVzLiAqL1xuICBwcml2YXRlIF9oYW5kbGVDbGljayhldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCBjb21wb3NlZFBhdGhFbGVtZW50cyA9IGV2ZW50XG4gICAgICAuY29tcG9zZWRQYXRoKClcbiAgICAgIC5maWx0ZXIoKGVsKSA9PiBlbCBpbnN0YW5jZW9mIHdpbmRvdy5IVE1MRWxlbWVudCk7XG4gICAgaWYgKGNvbXBvc2VkUGF0aEVsZW1lbnRzLnNvbWUoKGVsKSA9PiB0aGlzLl9pc0dvTmV4dEVsZW1lbnQoZWwgYXMgSFRNTEVsZW1lbnQpKSkge1xuICAgICAgdGhpcy5fc3RlcHBlcj8ubmV4dCgpO1xuICAgIH0gZWxzZSBpZiAoY29tcG9zZWRQYXRoRWxlbWVudHMuc29tZSgoZWwpID0+IHRoaXMuX2lzR29QcmV2aW91c0VsZW1lbnQoZWwgYXMgSFRNTEVsZW1lbnQpKSkge1xuICAgICAgdGhpcy5fc3RlcHBlcj8ucHJldmlvdXMoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9pc0dvTmV4dEVsZW1lbnQoZWxlbWVudDogSFRNTEVsZW1lbnQpOiBib29sZWFuIHtcbiAgICByZXR1cm4gZWxlbWVudC5oYXNBdHRyaWJ1dGUoJ3NiYi1zdGVwcGVyLW5leHQnKSAmJiAhZWxlbWVudC5oYXNBdHRyaWJ1dGUoJ2Rpc2FibGVkJyk7XG4gIH1cblxuICBwcml2YXRlIF9pc0dvUHJldmlvdXNFbGVtZW50KGVsZW1lbnQ6IEhUTUxFbGVtZW50KTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIGVsZW1lbnQuaGFzQXR0cmlidXRlKCdzYmItc3RlcHBlci1wcmV2aW91cycpICYmICFlbGVtZW50Lmhhc0F0dHJpYnV0ZSgnZGlzYWJsZWQnKTtcbiAgfVxuXG4gIHByaXZhdGUgX29uU3RlcEVsZW1lbnRSZXNpemUoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmhhc0F0dHJpYnV0ZSgnZGF0YS1zZWxlY3RlZCcpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuX3Jlc2l6ZUNoYW5nZS5lbWl0KCk7XG4gIH1cblxuICBwcml2YXRlIF9nZXRTdGVwTGFiZWwoKTogU2JiU3RlcExhYmVsRWxlbWVudCB8IG51bGwge1xuICAgIGxldCBwcmV2aW91c1NpYmxpbmcgPSB0aGlzLnByZXZpb3VzRWxlbWVudFNpYmxpbmc7XG4gICAgd2hpbGUgKHByZXZpb3VzU2libGluZyAmJiBwcmV2aW91c1NpYmxpbmcubG9jYWxOYW1lICE9PSAnc2JiLXN0ZXAtbGFiZWwnKSB7XG4gICAgICBwcmV2aW91c1NpYmxpbmcgPSBwcmV2aW91c1NpYmxpbmcucHJldmlvdXNFbGVtZW50U2libGluZztcbiAgICB9XG4gICAgcmV0dXJuIHByZXZpb3VzU2libGluZyBhcyBTYmJTdGVwTGFiZWxFbGVtZW50O1xuICB9XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gICAgdGhpcy5pZCB8fD0gYHNiYi1zdGVwLSR7bmV4dElkKyt9YDtcbiAgICB0aGlzLl9zdGVwcGVyID0gdGhpcy5jbG9zZXN0KCdzYmItc3RlcHBlcicpO1xuICAgIHRoaXMuX2xhYmVsID0gdGhpcy5fZ2V0U3RlcExhYmVsKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgZmlyc3RVcGRhdGVkKGNoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlczx0aGlzPik6IHZvaWQge1xuICAgIHN1cGVyLmZpcnN0VXBkYXRlZChjaGFuZ2VkUHJvcGVydGllcyk7XG4gICAgdGhpcy51cGRhdGVDb21wbGV0ZS50aGVuKCgpID0+IHtcbiAgICAgIHRoaXMuX3N0ZXBSZXNpemVPYnNlcnZlci5vYnNlcnZlKHRoaXMuc2hhZG93Um9vdCEucXVlcnlTZWxlY3RvcignLnNiYi1zdGVwJykgYXMgSFRNTEVsZW1lbnQpO1xuICAgIH0pO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLXN0ZXAtLXdyYXBwZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNiYi1zdGVwXCI+XG4gICAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1zdGVwJzogU2JiU3RlcEVsZW1lbnQ7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgR2xvYmFsRXZlbnRIYW5kbGVyc0V2ZW50TWFwIHtcbiAgICByZXNpemVDaGFuZ2U6IEN1c3RvbUV2ZW50PHZvaWQ+O1xuICB9XG59XG4iXSwibmFtZXMiOlsiU2JiU3RlcEVsZW1lbnQiLCJfYSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWlCQSxJQUFJLFNBQVM7SUFxQlAsa0JBQWMsTUFBQTs7QUFMbkIsTUFBQSxtQkFBQSxDQUFBLGNBQWMsVUFBVSxHQUN4QixlQUFlO0FBQUEsSUFDZCxNQUFNO0FBQUEsSUFDTixNQUFNO0FBQUEsRUFB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

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

@@ -0,0 +1,44 @@
+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;
+    /** The step controlled by the label. */
+    get step(): SbbStepElement | null;
+    private _stepper;
+    private _step;
+    constructor();
+    private _getStep;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    /**
+     * 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;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-step-label': SbbStepLabelElement;
+    }
+}
+export {};
+//# sourceMappingURL=step-label.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-label.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/stepper/step-label/step-label.component.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;AAInE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;GAKG;AACH,qBAOM,mBAAoB,SAAQ,wBAAwD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IAED,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,KAAK,CAA+B;;IAW5C,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;cAWtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E;;;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;cAQ9D,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}