@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/slider/slider.d.ts

@@ -7,6 +7,7 @@ declare const SbbSliderElement_base: import('../core/mixins.js').AbstractConstru
  * @slot prefix - Use this slot to render an icon on the left side of the input.
  * @slot suffix - Use this slot to render an icon on the right side of the input.
  * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
+ * @overrideType value - string | null
  */
 export declare class SbbSliderElement extends SbbSliderElement_base {
     static styles: CSSResultGroup;
@@ -34,16 +35,16 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
      * Readonly state for the inner HTMLInputElement.
      * Since the input range does not allow this attribute, it will be merged with the `disabled` one.
      */
-    readonly?: boolean;
+    accessor readonly: boolean;
     /** Name of the icon at component's start, which will be forward to the nested `sbb-icon`. */
-    startIcon?: string;
+    accessor startIcon: string;
     /** Name of the icon at component's end, which will be forward to the nested `sbb-icon`. */
-    endIcon?: string;
+    accessor endIcon: string;
     /**
      * The ratio between the absolute value and the validity interval.
      * E.g. given `min=0`, `max=100` and `value=50`, then `_valueFraction=0.5`
      */
-    private _valueFraction;
+    private accessor _valueFraction;
     /**
      * @deprecated only used for React. Will probably be removed once React 19 is available.
      */

package/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,YAAY,CAAC;;AAEpB;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,qBAAoD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAQ7C;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,oDAAoD;IACpD,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAe;IAE3B,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAiB;IAE7B;;;OAGG;IACiC,QAAQ,CAAC,EAAE,OAAO,CAAS;IAE/D,6FAA6F;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEjE,2FAA2F;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IAE7D;;;OAGG;IACM,OAAO,CAAC,cAAc,CAAK;IAEpC;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,iEAAiE;IACjE,OAAO,CAAC,WAAW,CAAoB;IAEvC,OAAO,CAAC,MAAM,CAAyC;;IAQvC,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;cAIY,eAAe,IAAI,IAAI;IAI1C;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;YASjB,cAAc;IAgC5B,8BAA8B;IAC9B,OAAO,CAAC,WAAW;cAKA,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,YAAY,CAAC;;AAEpB;;;;;;;GAOG;AACH,qBAKM,gBAAiB,SAAQ,qBAAoD;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAQ7C;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,oDAAoD;IACpD,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAe;IAE3B,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAiB;IAE7B;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,6FAA6F;IAC7F,SAEgB,SAAS,EAAE,MAAM,CAAM;IAEvC,2FAA2F;IAC3F,SAEgB,OAAO,EAAE,MAAM,CAAM;IAErC;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAK;IAE7C;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,iEAAiE;IACjE,OAAO,CAAC,WAAW,CAAoB;IAEvC,OAAO,CAAC,MAAM,CAAyC;;IAQvC,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;cAIY,eAAe,IAAI,IAAI;IAI1C;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;YASjB,cAAc;IAgC5B,8BAA8B;IAC9B,OAAO,CAAC,WAAW;cAKA,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/slider.js

@@ -1,140 +1,190 @@
-import { css as c, LitElement as u, html as d, nothing as h } from "lit";
-import { property as a, state as v, customElement as m } from "lit/decorators.js";
-import { ref as p } from "lit/directives/ref.js";
-import { styleMap as _ } from "lit/directives/style-map.js";
-import { SbbConnectedAbortController as f } from "./core/controllers.js";
-import { hostAttributes as g } from "./core/decorators.js";
-import { EventEmitter as w, forwardEventToHost as y } from "./core/eventing.js";
-import { SbbDisabledMixin as x, SbbFormAssociatedMixin as k } from "./core/mixins.js";
-import "./icon.js";
-const I = c`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
-var M = Object.defineProperty, N = Object.getOwnPropertyDescriptor, t = (e, i, l, r) => {
-  for (var o = r > 1 ? void 0 : r ? N(i, l) : i, n = e.length - 1, b; n >= 0; n--)
-    (b = e[n]) && (o = (r ? b(i, l, o) : b(o)) || o);
-  return r && o && M(i, l, o), o;
+var H = (t) => {
+  throw TypeError(t);
 };
-let s = class extends x(k(u)) {
-  constructor() {
-    super(), this._min = "0", this._max = "100", this.readonly = !1, this._valueFraction = 0, this._didChange = new w(this, s.events.didChange, {
-      bubbles: !0,
-      cancelable: !0
-    }), this._abort = new f(this), this.internals.role = "slider";
-  }
-  set value(e) {
-    this._isValidNumber(e) ? super.value = this._boundBetweenMinMax(e) : super.value = this._getDefaultValue(), this.internals.ariaValueNow = this.value, this._calculateValueFraction();
-  }
-  get value() {
-    return super.value;
-  }
-  set valueAsNumber(e) {
-    this.value = e == null ? void 0 : e.toString();
-  }
-  get valueAsNumber() {
-    return Number(this.value);
-  }
-  set min(e) {
-    this._isValidNumber(e) && (this._min = e, this.value = this._boundBetweenMinMax(this.value));
-  }
-  get min() {
-    return this._min;
-  }
-  set max(e) {
-    this._isValidNumber(e) && (this._max = e, this.value = this._boundBetweenMinMax(this.value));
-  }
-  get max() {
-    return this._max;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const e = this._abort.signal;
-    this.addEventListener("keydown", (i) => this._handleKeydown(i), { signal: e }), this.value || (this.value = this._getDefaultValue());
-  }
-  willUpdate(e) {
-    super.willUpdate(e), e.has("min") && (this.internals.ariaValueMin = this.min), e.has("max") && (this.internals.ariaValueMax = this.max), e.has("readonly") && (this.internals.ariaReadOnly = (!!this.readonly).toString());
-  }
-  /**
-   * The reset value is the attribute value (the setup value). If not present, calculates the default.
-   * @internal
-   */
-  formResetCallback() {
-    this.value = this.getAttribute("value") ?? this._getDefaultValue();
-  }
-  /**
-   * @internal
-   */
-  formStateRestoreCallback(e, i) {
-    this.value = e;
-  }
-  updateFormValue() {
-    this.internals.setFormValue(this.value);
-  }
-  /**
-   *  If no value is provided, default is the middle point between min and max
-   *  (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value)
-   */
-  _getDefaultValue() {
-    return (+this.min + (+this.max - +this.min) / 2).toString();
-  }
-  _isValidNumber(e) {
-    return !!e && !isNaN(Number(e));
-  }
-  /**
-   * Restrains the value between the min and max
-   */
-  _boundBetweenMinMax(e) {
-    return Math.max(+this.min, Math.min(+this.max, +e)).toString();
-  }
-  _calculateValueFraction() {
-    const e = this.valueAsNumber, i = +this.min, l = +this.max, r = (e - i) / (l - i);
-    this._valueFraction = isNaN(r) ? 0 : Math.max(0, Math.min(1, r));
-  }
-  async _handleKeydown(e) {
-    if (e.key !== "Tab" && e.preventDefault(), !this.readonly) {
-      if (e.key === "Home")
-        this._rangeInput.value = this.min;
-      else if (e.key === "End")
-        this._rangeInput.value = this.max;
-      else if (e.key === "ArrowLeft" || e.key === "ArrowDown")
-        this._rangeInput.stepDown();
-      else if (e.key === "ArrowRight" || e.key === "ArrowUp")
-        this._rangeInput.stepUp();
-      else if (e.key === "PageDown")
-        this._rangeInput.stepDown((+this.max - +this.min) / 10);
-      else if (e.key === "PageUp")
-        this._rangeInput.stepUp((+this.max - +this.min) / 10);
-      else
-        return;
-      this._rangeInput.dispatchEvent(
-        new InputEvent("input", { bubbles: !0, cancelable: !0, composed: !0 })
-      ), this._rangeInput.dispatchEvent(new Event("change", { bubbles: !0 }));
-    }
-  }
-  /** Emits the change event. */
-  _emitChange(e) {
-    y(e, this), this._didChange.emit();
-  }
-  render() {
-    return d`
+var L = (t, r, l) => r.has(t) || H("Cannot " + l);
+var f = (t, r, l) => (L(t, r, "read from private field"), l ? l.call(t) : r.get(t)), p = (t, r, l) => r.has(t) ? H("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, l), b = (t, r, l, o) => (L(t, r, "write to private field"), o ? o.call(t, l) : r.set(t, l), l);
+import { __esDecorate as d, __runInitializers as n } from "tslib";
+import { css as O, LitElement as j, html as x, nothing as y } from "lit";
+import { customElement as K, property as c, state as Y } from "lit/decorators.js";
+import { ref as q } from "lit/directives/ref.js";
+import { styleMap as J } from "lit/directives/style-map.js";
+import { SbbConnectedAbortController as P } from "./core/controllers.js";
+import { hostAttributes as Q, forceType as k } from "./core/decorators.js";
+import { EventEmitter as W, forwardEventToHost as X } from "./core/eventing.js";
+import { SbbDisabledMixin as Z, SbbFormAssociatedMixin as ee } from "./core/mixins.js";
+import "./icon.js";
+const se = O`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
+let me = (() => {
+  var h, u, m, v, a;
+  let t = [K("sbb-slider"), Q({
+    tabindex: "0"
+  })], r, l = [], o, w = Z(ee(j)), _ = [], I, z, F, N, S, M = [], A = [], E, V = [], C = [], D, $ = [], T = [], U, B = [], R = [];
+  var g = (a = class extends w {
+    constructor() {
+      super();
+      p(this, h);
+      p(this, u);
+      p(this, m);
+      p(this, v);
+      this._min = (n(this, _), "0"), this._max = "100", b(this, h, n(this, M, !1)), b(this, u, (n(this, A), n(this, V, ""))), b(this, m, (n(this, C), n(this, $, ""))), b(this, v, (n(this, T), n(this, B, 0))), this._didChange = (n(this, R), new W(this, g.events.didChange, {
+        bubbles: !0,
+        cancelable: !0
+      })), this._abort = new P(this), this.internals.role = "slider";
+    }
+    /**
+     * Value of the form element.
+     * If no value is provided, default is the middle point between min and max.
+     */
+    set value(e) {
+      this._isValidNumber(e) ? super.value = this._boundBetweenMinMax(e) : super.value = this._getDefaultValue(), this.internals.ariaValueNow = this.value, this._calculateValueFraction();
+    }
+    get value() {
+      return super.value;
+    }
+    /** Numeric value for the inner HTMLInputElement. */
+    set valueAsNumber(e) {
+      this.value = e == null ? void 0 : e.toString();
+    }
+    get valueAsNumber() {
+      return Number(this.value);
+    }
+    /** Minimum acceptable value for the inner HTMLInputElement. */
+    set min(e) {
+      this._isValidNumber(e) && (this._min = e, this.value = this._boundBetweenMinMax(this.value));
+    }
+    get min() {
+      return this._min;
+    }
+    /** Maximum acceptable value for the inner HTMLInputElement. */
+    set max(e) {
+      this._isValidNumber(e) && (this._max = e, this.value = this._boundBetweenMinMax(this.value));
+    }
+    get max() {
+      return this._max;
+    }
+    /**
+     * Readonly state for the inner HTMLInputElement.
+     * Since the input range does not allow this attribute, it will be merged with the `disabled` one.
+     */
+    get readonly() {
+      return f(this, h);
+    }
+    set readonly(e) {
+      b(this, h, e);
+    }
+    /** Name of the icon at component's start, which will be forward to the nested `sbb-icon`. */
+    get startIcon() {
+      return f(this, u);
+    }
+    set startIcon(e) {
+      b(this, u, e);
+    }
+    /** Name of the icon at component's end, which will be forward to the nested `sbb-icon`. */
+    get endIcon() {
+      return f(this, m);
+    }
+    set endIcon(e) {
+      b(this, m, e);
+    }
+    /**
+     * The ratio between the absolute value and the validity interval.
+     * E.g. given `min=0`, `max=100` and `value=50`, then `_valueFraction=0.5`
+     */
+    get _valueFraction() {
+      return f(this, v);
+    }
+    set _valueFraction(e) {
+      b(this, v, e);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      const e = this._abort.signal;
+      this.addEventListener("keydown", (s) => this._handleKeydown(s), { signal: e }), this.value || (this.value = this._getDefaultValue());
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("min") && (this.internals.ariaValueMin = this.min), e.has("max") && (this.internals.ariaValueMax = this.max), e.has("readonly") && (this.internals.ariaReadOnly = (!!this.readonly).toString());
+    }
+    /**
+     * The reset value is the attribute value (the setup value). If not present, calculates the default.
+     * @internal
+     */
+    formResetCallback() {
+      this.value = this.getAttribute("value") ?? this._getDefaultValue();
+    }
+    /**
+     * @internal
+     */
+    formStateRestoreCallback(e, s) {
+      this.value = e;
+    }
+    updateFormValue() {
+      this.internals.setFormValue(this.value);
+    }
+    /**
+     *  If no value is provided, default is the middle point between min and max
+     *  (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value)
+     */
+    _getDefaultValue() {
+      return (+this.min + (+this.max - +this.min) / 2).toString();
+    }
+    _isValidNumber(e) {
+      return !!e && !isNaN(Number(e));
+    }
+    /**
+     * Restrains the value between the min and max
+     */
+    _boundBetweenMinMax(e) {
+      return Math.max(+this.min, Math.min(+this.max, +e)).toString();
+    }
+    _calculateValueFraction() {
+      const e = this.valueAsNumber, s = +this.min, i = +this.max, G = (e - s) / (i - s);
+      this._valueFraction = isNaN(G) ? 0 : Math.max(0, Math.min(1, G));
+    }
+    async _handleKeydown(e) {
+      if (e.key !== "Tab" && e.preventDefault(), !this.readonly) {
+        if (e.key === "Home")
+          this._rangeInput.value = this.min;
+        else if (e.key === "End")
+          this._rangeInput.value = this.max;
+        else if (e.key === "ArrowLeft" || e.key === "ArrowDown")
+          this._rangeInput.stepDown();
+        else if (e.key === "ArrowRight" || e.key === "ArrowUp")
+          this._rangeInput.stepUp();
+        else if (e.key === "PageDown")
+          this._rangeInput.stepDown((+this.max - +this.min) / 10);
+        else if (e.key === "PageUp")
+          this._rangeInput.stepUp((+this.max - +this.min) / 10);
+        else
+          return;
+        this._rangeInput.dispatchEvent(new InputEvent("input", { bubbles: !0, cancelable: !0, composed: !0 })), this._rangeInput.dispatchEvent(new Event("change", { bubbles: !0 }));
+      }
+    }
+    /** Emits the change event. */
+    _emitChange(e) {
+      X(e, this), this._didChange.emit();
+    }
+    render() {
+      return x`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">
-            ${this.startIcon ? d`<sbb-icon name="${this.startIcon}"></sbb-icon>` : h}
+            ${this.startIcon ? x`<sbb-icon name="${this.startIcon}"></sbb-icon>` : y}
           </slot>
           <div
             class="sbb-slider__container"
-            style=${_({ "--sbb-slider-value-fraction": this._valueFraction.toString() })}
+            style=${J({ "--sbb-slider-value-fraction": this._valueFraction.toString() })}
           >
             <input
               tabindex="-1"
               min=${this.min}
               max=${this.max}
               ?disabled=${this.disabled || this.formDisabled || this.readonly}
-              value=${this.value || h}
+              value=${this.value || y}
               class="sbb-slider__range-input"
               type="range"
               @change=${(e) => this._emitChange(e)}
               @input=${() => this.value = this._rangeInput.value}
-              ${p((e) => this._rangeInput = e)}
+              ${q((e) => this._rangeInput = e)}
             />
             <div class="sbb-slider__line">
               <div class="sbb-slider__selected-line"></div>
@@ -142,47 +192,36 @@ let s = class extends x(k(u)) {
             <div class="sbb-slider__knob"></div>
           </div>
           <slot name="suffix">
-            ${this.endIcon ? d`<sbb-icon name="${this.endIcon}"></sbb-icon>` : h}
+            ${this.endIcon ? x`<sbb-icon name="${this.endIcon}"></sbb-icon>` : y}
           </slot>
         </div>
       </div>
     `;
-  }
-};
-s.styles = I;
-s.events = {
-  didChange: "didChange"
-};
-t([
-  a()
-], s.prototype, "value", 1);
-t([
-  a({ attribute: "value-as-number", type: Number })
-], s.prototype, "valueAsNumber", 1);
-t([
-  a()
-], s.prototype, "min", 1);
-t([
-  a()
-], s.prototype, "max", 1);
-t([
-  a({ type: Boolean })
-], s.prototype, "readonly", 2);
-t([
-  a({ attribute: "start-icon" })
-], s.prototype, "startIcon", 2);
-t([
-  a({ attribute: "end-icon" })
-], s.prototype, "endIcon", 2);
-t([
-  v()
-], s.prototype, "_valueFraction", 2);
-s = t([
-  m("sbb-slider"),
-  g({
-    tabindex: "0"
-  })
-], s);
+    }
+  }, h = new WeakMap(), u = new WeakMap(), m = new WeakMap(), v = new WeakMap(), o = a, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+    I = [c()], z = [c({ attribute: "value-as-number", type: Number })], F = [c()], N = [c()], S = [k(), c({ type: Boolean })], E = [k(), c({ attribute: "start-icon" })], D = [k(), c({ attribute: "end-icon" })], U = [Y()], d(a, null, I, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, i) => {
+      s.value = i;
+    } }, metadata: e }, null, _), d(a, null, z, { kind: "setter", name: "valueAsNumber", static: !1, private: !1, access: { has: (s) => "valueAsNumber" in s, set: (s, i) => {
+      s.valueAsNumber = i;
+    } }, metadata: e }, null, _), d(a, null, F, { kind: "setter", name: "min", static: !1, private: !1, access: { has: (s) => "min" in s, set: (s, i) => {
+      s.min = i;
+    } }, metadata: e }, null, _), d(a, null, N, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (s) => "max" in s, set: (s, i) => {
+      s.max = i;
+    } }, metadata: e }, null, _), d(a, null, S, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (s) => "readonly" in s, get: (s) => s.readonly, set: (s, i) => {
+      s.readonly = i;
+    } }, metadata: e }, M, A), d(a, null, E, { kind: "accessor", name: "startIcon", static: !1, private: !1, access: { has: (s) => "startIcon" in s, get: (s) => s.startIcon, set: (s, i) => {
+      s.startIcon = i;
+    } }, metadata: e }, V, C), d(a, null, D, { kind: "accessor", name: "endIcon", static: !1, private: !1, access: { has: (s) => "endIcon" in s, get: (s) => s.endIcon, set: (s, i) => {
+      s.endIcon = i;
+    } }, metadata: e }, $, T), d(a, null, U, { kind: "accessor", name: "_valueFraction", static: !1, private: !1, access: { has: (s) => "_valueFraction" in s, get: (s) => s._valueFraction, set: (s, i) => {
+      s._valueFraction = i;
+    } }, metadata: e }, B, R), d(null, r = { value: o }, t, { kind: "class", name: o.name, metadata: e }, null, l), g = o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.styles = se, a.events = {
+    didChange: "didChange"
+  }, n(o, l), a);
+  return g = o;
+})();
 export {
-  s as SbbSliderElement
+  me as SbbSliderElement
 };

package/status/status.d.ts

@@ -13,11 +13,11 @@ export declare class SbbStatusElement extends SbbStatusElement_base {
     static styles: CSSResultGroup;
     private readonly _statusTypes;
     /** The type of the status. */
-    type: SbbStatusType;
+    accessor type: SbbStatusType;
     /** Content of title. */
-    titleContent?: string;
+    accessor titleContent: string;
     /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
-    titleLevel: SbbTitleLevel;
+    accessor titleLevel: SbbTitleLevel;
     protected renderIconSlot(): TemplateResult;
     protected render(): TemplateResult;
 }

package/status/status.d.ts.map

@@ -1 +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;AAIjD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;GAMG;AACH,qBAEa,gBAAiB,SAAQ,qBAA4B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IACM,IAAI,EAAE,aAAa,CAAU;IAEjE,wBAAwB;IACwC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,yFAAyF;IAC1C,UAAU,EAAE,aAAa,CAAO;cAE5D,cAAc,IAAI,cAAc;cAQhC,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"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;AAIjD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;GAMG;AACH,qBAGM,gBAAiB,SAAQ,qBAA4B;IACzD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IAC9B,SAA6C,IAAI,EAAE,aAAa,CAAU;IAE1E,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,yFAAyF;IACzF,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,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.js

@@ -1,36 +1,65 @@
-import { css as p, LitElement as u, html as c } from "lit";
-import { property as i, customElement as m } from "lit/decorators.js";
-import { slotState as v } from "./core/decorators.js";
-import { SbbIconNameMixin as y } from "./icon.js";
-import "./title.js";
-const d = 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([type=pending]){--sbb-status-text-color: var(--sbb-color-sky)}:host(:is([type=pending],[type=pending]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=incomplete],[type=incomplete]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-icon-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([type=not-started],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-smoke)}:host([type=in-progress]){--sbb-status-text-color: var(--sbb-color-pink)}:host(:is([type=in-progress],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-pink)}: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, f = Object.getOwnPropertyDescriptor, r = (n, o, l, e) => {
-  for (var t = e > 1 ? void 0 : e ? f(o, l) : o, a = n.length - 1, b; a >= 0; a--)
-    (b = n[a]) && (t = (e ? b(o, l, t) : b(t)) || t);
-  return e && t && h(o, l, t), t;
+var I = (t) => {
+  throw TypeError(t);
 };
-let s = class extends y(u) {
-  constructor() {
-    super(...arguments), 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"]
-    ]), this.type = "info", this.titleLevel = "3";
-  }
-  renderIconSlot() {
-    return c`
+var w = (t, e, o) => e.has(t) || I("Cannot " + o);
+var m = (t, e, o) => (w(t, e, "read from private field"), o ? o.call(t) : e.get(t)), d = (t, e, o) => e.has(t) ? I("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), r = (t, e, o, l) => (w(t, e, "write to private field"), l ? l.call(t, o) : e.set(t, o), o);
+import { __esDecorate as h, __runInitializers as n } from "tslib";
+import { css as T, LitElement as $, html as E } from "lit";
+import { customElement as D, property as v } from "lit/decorators.js";
+import { slotState as j, forceType as M, omitEmptyConverter as N } from "./core/decorators.js";
+import { SbbIconNameMixin as O } from "./icon.js";
+import "./title.js";
+const P = T`*,: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([type=pending]){--sbb-status-text-color: var(--sbb-color-sky)}:host(:is([type=pending],[type=pending]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=incomplete],[type=incomplete]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-icon-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([type=not-started],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-smoke)}:host([type=in-progress]){--sbb-status-text-color: var(--sbb-color-pink)}:host(:is([type=in-progress],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-pink)}: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}`;
+let Q = (() => {
+  var c, b, p, i;
+  let t = [D("sbb-status"), j()], e, o = [], l, y = O($), _, g = [], f = [], x, z = [], k = [], C, L = [], S = [];
+  return i = class extends y {
+    constructor() {
+      super(...arguments);
+      d(this, c);
+      d(this, b);
+      d(this, p);
+      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"]
+      ]), r(this, c, n(this, g, "info")), r(this, b, (n(this, f), n(this, z, ""))), r(this, p, (n(this, k), n(this, L, "3"))), n(this, S);
+    }
+    /** The type of the status. */
+    get type() {
+      return m(this, c);
+    }
+    set type(a) {
+      r(this, c, a);
+    }
+    /** Content of title. */
+    get titleContent() {
+      return m(this, b);
+    }
+    set titleContent(a) {
+      r(this, b, a);
+    }
+    /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
+    get titleLevel() {
+      return m(this, p);
+    }
+    set titleLevel(a) {
+      r(this, p, a);
+    }
+    renderIconSlot() {
+      return E`
       <slot name="icon">
-        <sbb-icon name=${this.iconName ?? this._statusTypes.get(this.type)}></sbb-icon>
+        <sbb-icon name=${this.iconName || this._statusTypes.get(this.type)}></sbb-icon>
       </slot>
     `;
-  }
-  render() {
-    return c`
+    }
+    render() {
+      return E`
       <div class="sbb-status">
         <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
         <span class="sbb-status__content">
@@ -43,22 +72,18 @@ let s = class extends y(u) {
         </span>
       </div>
     `;
-  }
-};
-s.styles = d;
-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([
-  m("sbb-status"),
-  v()
-], s);
+    }
+  }, c = new WeakMap(), b = new WeakMap(), p = new WeakMap(), l = i, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    _ = [v({ reflect: !0 })], x = [M(), v({ attribute: "title-content", reflect: !0, converter: N })], C = [v({ attribute: "title-level" })], h(i, null, _, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (s) => "type" in s, get: (s) => s.type, set: (s, u) => {
+      s.type = u;
+    } }, metadata: a }, g, f), h(i, null, x, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (s) => "titleContent" in s, get: (s) => s.titleContent, set: (s, u) => {
+      s.titleContent = u;
+    } }, metadata: a }, z, k), h(i, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (s) => "titleLevel" in s, get: (s) => s.titleLevel, set: (s, u) => {
+      s.titleLevel = u;
+    } }, metadata: a }, L, S), h(null, e = { value: l }, t, { kind: "class", name: l.name, metadata: a }, null, o), l = e.value, a && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), i.styles = P, n(l, o), l;
+})();
 export {
-  s as SbbStatusElement
+  Q as SbbStatusElement
 };

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

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,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,CAIxB;IAEH,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;cAM3D,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,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,qBAMM,cAAe,SAAQ,UAAU;IACrC,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,CAIxB;IAEH,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;cAM3D,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}