@sbb-esta/lyne-elements 1.11.2 → 1.12.0

package/slider/slider.d.ts

@@ -1,5 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-declare const SbbSliderElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
+import { FormRestoreReason, FormRestoreState } from '../core/mixins.js';
+declare const SbbSliderElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & import('../core/mixins.js').Constructor<import('../core/mixins.js').SbbFormAssociatedMixinType> & typeof LitElement;
 /**
  * It displays an input knob that can be moved in a range.
  *
@@ -12,18 +13,23 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
     static readonly events: {
         readonly didChange: "didChange";
     };
-    /** Value for the inner HTMLInputElement. */
-    value?: string;
+    /**
+     * Value of the form element.
+     * If no value is provided, default is the middle point between min and max.
+     */
+    set value(value: string | null);
+    get value(): string;
     /** Numeric value for the inner HTMLInputElement. */
-    valueAsNumber?: number;
-    /** Name of the inner HTMLInputElement. */
-    name?: string;
-    /** The <form> element to associate the inner HTMLInputElement with. */
-    form?: string;
+    set valueAsNumber(value: number);
+    get valueAsNumber(): number | null;
     /** Minimum acceptable value for the inner HTMLInputElement. */
-    min?: string;
+    set min(value: string);
+    get min(): string;
+    private _min;
     /** Maximum acceptable value for the inner HTMLInputElement. */
-    max?: string;
+    set max(value: string);
+    get max(): string;
+    private _max;
     /**
      * Readonly state for the inner HTMLInputElement.
      * Since the input range does not allow this attribute, it will be merged with the `disabled` one.
@@ -45,16 +51,29 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
     /** Reference to the inner HTMLInputElement with type='range'. */
     private _rangeInput;
     private _abort;
+    constructor();
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
-    private _syncValues;
     /**
-     * Recalculates the `_valueFraction` on change to correctly display the slider knob and lines.
-     * The first calculation happens in connectedCallback(...), so since `_rangeInput` is not yet available,
-     * the `min` and `max` values are used; if `value` is not provided, the default value is halfway between min and max
-     * (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value).
+     * The reset value is the attribute value (the setup value). If not present, calculates the default.
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * @internal
+     */
+    formStateRestoreCallback(state: FormRestoreState | null, _reason: FormRestoreReason): void;
+    /**
+     *  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)
+     */
+    private _getDefaultValue;
+    private _isValidNumber;
+    /**
+     * Restrains the value between the min and max
      */
-    private _handleChange;
+    private _boundBetweenMinMax;
+    private _calculateValueFraction;
     private _handleKeydown;
     /** Emits the change event. */
     private _emitChange;

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;AAahD,OAAO,YAAY,CAAC;;AAEpB;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,qBAA4B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,4CAA4C;IACzB,KAAK,CAAC,EAAE,MAAM,CAAM;IAEvC,oDAAoD;IACa,aAAa,CAAC,EAAE,MAAM,CAAC;IAExF,0CAA0C;IACN,IAAI,CAAC,EAAE,MAAM,CAAM;IAEvD,uEAAuE;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEjC,+DAA+D;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAO;IAEtC,+DAA+D;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAS;IAExC;;;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;IAEvC,iBAAiB,IAAI,IAAI;cAOtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8B5E,OAAO,CAAC,WAAW;IAYnB;;;;;OAKG;IACH,OAAO,CAAC,aAAa;YAqBP,cAAc;IAgC5B,8BAA8B;IAC9B,OAAO,CAAC,WAAW;cAKA,MAAM,IAAI,cAAc;CAqC5C;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;;;;;;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;IAIP;;;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,80 +1,121 @@
-import { css as u, LitElement as v, html as c, nothing as b } from "lit";
-import { property as t, state as m, customElement as p } from "lit/decorators.js";
-import { ref as f } from "lit/directives/ref.js";
+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 g } from "./core/controllers.js";
-import { hostAttributes as y } from "./core/decorators.js";
-import { setOrRemoveAttribute as n } from "./core/dom.js";
-import { EventEmitter as w, forwardEventToHost as k } from "./core/eventing.js";
-import { SbbDisabledMixin as x } from "./core/mixins.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 = u`@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 A = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (e, o, l, a) => {
-  for (var i = a > 1 ? void 0 : a ? C(o, l) : o, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (i = (a ? h(o, l, i) : h(i)) || i);
-  return a && i && A(o, l, i), i;
+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;
 };
-let s = class extends x(v) {
+let s = class extends x(k(u)) {
   constructor() {
-    super(...arguments), this.value = "", this.name = "", this.min = "0", this.max = "100", this.readonly = !1, this._valueFraction = 0, this._didChange = new w(this, s.events.didChange, {
+    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 g(this);
+    }), 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", (o) => this._handleKeydown(o), { signal: e }), this._handleChange();
+    this.addEventListener("keydown", (i) => this._handleKeydown(i), { signal: e }), this.value || (this.value = this._getDefaultValue());
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("value") ? this._handleChange(Number(this.value)) : e.has("valueAsNumber") && this._handleChange(Number(this.valueAsNumber)), e.has("min") && n(this, "aria-valuemin", this.min ?? null), e.has("max") && n(this, "aria-valuemax", this.max ?? null), e.has("readonly") && n(this, "aria-readonly", this.readonly ? "true" : null), e.has("disabled") && (this.disabled ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0")));
+    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();
   }
-  _syncValues(e) {
-    e != null && (e && typeof e != "number" && (e = +e), this.value = e.toString(), this.valueAsNumber = e, n(this, "aria-valuenow", this.value || null));
+  /**
+   * @internal
+   */
+  formStateRestoreCallback(e, i) {
+    this.value = e;
   }
   /**
-   * Recalculates the `_valueFraction` on change to correctly display the slider knob and lines.
-   * The first calculation happens in connectedCallback(...), so since `_rangeInput` is not yet available,
-   * the `min` and `max` values are used; if `value` is not provided, the default value is halfway between min and max
-   * (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#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)
    */
-  _handleChange(e = ((o) => (o = this._rangeInput) == null ? void 0 : o.valueAsNumber)()) {
-    let l, a;
-    this._rangeInput ? (l = +this._rangeInput.min, a = +this._rangeInput.max) : (l = +this.min, a = +this.max, e = this.value && this.value !== "" ? +this.value : this.valueAsNumber ? this.valueAsNumber : +this.min + (+this.max - +this.min) / 2);
-    const i = (e - l) / (a - l);
-    this._valueFraction = isNaN(i) || i < 0 ? 0 : i > 1 ? 1 : i, this._syncValues(e);
+  _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.disabled || this.readonly)) {
+    if (e.key !== "Tab" && e.preventDefault(), !this.readonly) {
       if (e.key === "Home")
-        this._rangeInput.value = this._rangeInput.min;
+        this._rangeInput.value = this.min;
       else if (e.key === "End")
-        this._rangeInput.value = this._rangeInput.max;
+        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._rangeInput.max - +this._rangeInput.min) / 10);
+        this._rangeInput.stepDown((+this.max - +this.min) / 10);
       else if (e.key === "PageUp")
-        this._rangeInput.stepUp((+this._rangeInput.max - +this._rangeInput.min) / 10);
+        this._rangeInput.stepUp((+this.max - +this.min) / 10);
       else
         return;
-      this._handleChange(), this.dispatchEvent(
+      this._rangeInput.dispatchEvent(
         new InputEvent("input", { bubbles: !0, cancelable: !0, composed: !0 })
-      ), this._emitChange(new Event("change", { bubbles: !0, cancelable: !0, composed: !0 }));
+      ), this._rangeInput.dispatchEvent(new Event("change", { bubbles: !0 }));
     }
   }
   /** Emits the change event. */
   _emitChange(e) {
-    k(e, this), this._didChange.emit();
+    y(e, this), this._didChange.emit();
   }
   render() {
-    return c`
+    return d`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">
-            ${this.startIcon ? c`<sbb-icon name="${this.startIcon}"></sbb-icon>` : b}
+            ${this.startIcon ? d`<sbb-icon name="${this.startIcon}"></sbb-icon>` : h}
           </slot>
           <div
             class="sbb-slider__container"
@@ -82,17 +123,15 @@ let s = class extends x(v) {
           >
             <input
               tabindex="-1"
-              name=${this.name || b}
-              min=${this.min || b}
-              max=${this.max || b}
-              ?disabled=${this.disabled || this.readonly || b}
-              .valueAsNumber=${this.valueAsNumber || b}
-              value=${this.value || b}
+              min=${this.min}
+              max=${this.max}
+              ?disabled=${this.disabled || this.formDisabled || this.readonly}
+              value=${this.value || h}
               class="sbb-slider__range-input"
               type="range"
               @change=${(e) => this._emitChange(e)}
-              @input=${() => this._handleChange()}
-              ${f((e) => this._rangeInput = e)}
+              @input=${() => this.value = this._rangeInput.value}
+              ${p((e) => this._rangeInput = e)}
             />
             <div class="sbb-slider__line">
               <div class="sbb-slider__selected-line"></div>
@@ -100,7 +139,7 @@ let s = class extends x(v) {
             <div class="sbb-slider__knob"></div>
           </div>
           <slot name="suffix">
-            ${this.endIcon ? c`<sbb-icon name="${this.endIcon}"></sbb-icon>` : b}
+            ${this.endIcon ? d`<sbb-icon name="${this.endIcon}"></sbb-icon>` : h}
           </slot>
         </div>
       </div>
@@ -111,40 +150,34 @@ s.styles = I;
 s.events = {
   didChange: "didChange"
 };
-r([
-  t()
-], s.prototype, "value", 2);
-r([
-  t({ attribute: "value-as-number", type: Number })
-], s.prototype, "valueAsNumber", 2);
-r([
-  t({ reflect: !0 })
-], s.prototype, "name", 2);
-r([
-  t()
-], s.prototype, "form", 2);
-r([
-  t()
-], s.prototype, "min", 2);
-r([
-  t()
-], s.prototype, "max", 2);
-r([
-  t({ type: Boolean })
+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);
-r([
-  t({ attribute: "start-icon" })
+t([
+  a({ attribute: "start-icon" })
 ], s.prototype, "startIcon", 2);
-r([
-  t({ attribute: "end-icon" })
+t([
+  a({ attribute: "end-icon" })
 ], s.prototype, "endIcon", 2);
-r([
-  m()
+t([
+  v()
 ], s.prototype, "_valueFraction", 2);
-s = r([
-  p("sbb-slider"),
-  y({
-    role: "slider"
+s = t([
+  m("sbb-slider"),
+  g({
+    tabindex: "0"
   })
 ], s);
 export {

package/standard-theme.css

@@ -1697,24 +1697,56 @@ sup {
 }
 
 .sbb-step-list {
-  --sbb-step-list-marker-dimensions: 2.125rem;
-  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.sbb-step-list {
+  --sbb-step-list-dimensions: 2.125rem;
   --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
-  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
-  --sbb-step-list-text-to-marker-block-offset: calc(
-    0.5 *
-      (
-        var(--sbb-step-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) *
-          var(--sbb-text-font-size)
-      )
-  );
-  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-step-list-text-to-marker-block-offset: calc(0.5 * (var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size)));
   list-style: none;
   margin: 0;
   padding: 0;
+}
+@media (min-width: calc(52.5rem)) {
+  .sbb-step-list:where(.sbb-text-xl) {
+    --sbb-step-list-dimensions: 2.5625rem;
+  }
+}
+.sbb-step-list > li {
+  position: relative;
+  padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
+  min-height: var(--sbb-step-list-dimensions);
+}
+.sbb-step-list > li::before {
+  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  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);
+  font-weight: bold;
+  position: absolute;
+  height: var(--sbb-step-list-dimensions);
+  width: var(--sbb-step-list-dimensions);
+  margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
+  inset-inline-start: var(--sbb-step-list-padding-inline);
+  border-radius: 50%;
+}
+.sbb-step-list > li + li {
+  margin-block-start: var(--sbb-step-list-vertical-gap);
+}
+.sbb-step-list > li p {
+  margin-block: 0;
+}
+.sbb-step-list > li > * + p {
+  margin-block-start: var(--sbb-spacing-responsive-xxxs);
+}
+.sbb-step-list {
+  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
   counter-reset: steps;
-  /* stylelint-disable-next-line no-descending-specificity */
 }
 .sbb-step-list:where(.sbb-text-s) {
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -1722,18 +1754,20 @@ sup {
 .sbb-step-list:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
 }
-@media (min-width: calc(52.5rem)) {
-  .sbb-step-list:where(.sbb-text-xl) {
-    --sbb-step-list-marker-dimensions: 2.5625rem;
-  }
-}
 .sbb-step-list > li {
-  position: relative;
   counter-increment: steps;
   background-color: var(--sbb-color-milk);
   padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
-  padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) + var(--sbb-step-list-marker-to-text-gap)) var(--sbb-step-list-padding-inline);
-  min-height: calc(var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block));
+  padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
+  min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
+}
+.sbb-step-list > li::before {
+  content: counter(steps);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+  color: var(--sbb-color-charcoal);
 }
 .sbb-step-list > li:first-of-type {
   border-start-start-radius: var(--sbb-step-list-border-radius);
@@ -1743,7 +1777,30 @@ sup {
   border-end-start-radius: var(--sbb-step-list-border-radius);
   border-end-end-radius: var(--sbb-step-list-border-radius);
 }
-.sbb-step-list > li::before {
+
+.sbb-icon-list {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.sbb-icon-list {
+  --sbb-icon-list-dimensions: 2.125rem;
+  --sbb-icon-list-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-icon-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-icon-list-text-to-marker-block-offset: calc(0.5 * (var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size)));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+@media (min-width: calc(52.5rem)) {
+  .sbb-icon-list:where(.sbb-text-xl) {
+    --sbb-icon-list-dimensions: 2.5625rem;
+  }
+}
+.sbb-icon-list > li {
+  position: relative;
+  padding-inline: calc(var(--sbb-icon-list-padding-inline) + var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) var(--sbb-icon-list-padding-inline);
+  min-height: var(--sbb-icon-list-dimensions);
+}
+.sbb-icon-list > li::before {
   --sbb-text-font-size: var(--sbb-font-size-text-xxs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
@@ -1751,28 +1808,37 @@ sup {
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
-  content: counter(steps);
   position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--sbb-step-list-marker-dimensions);
-  width: var(--sbb-step-list-marker-dimensions);
-  margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
-  inset-inline-start: var(--sbb-step-list-padding-inline);
-  border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+  height: var(--sbb-icon-list-dimensions);
+  width: var(--sbb-icon-list-dimensions);
+  margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
+  inset-inline-start: var(--sbb-icon-list-padding-inline);
   border-radius: 50%;
-  color: var(--sbb-color-charcoal);
 }
-.sbb-step-list > li + li {
-  margin-block-start: var(--sbb-step-list-vertical-gap);
+.sbb-icon-list > li + li {
+  margin-block-start: var(--sbb-icon-list-vertical-gap);
 }
-.sbb-step-list > li p {
+.sbb-icon-list > li p {
   margin-block: 0;
 }
-.sbb-step-list > li > * + p {
+.sbb-icon-list > li > * + p {
   margin-block-start: var(--sbb-spacing-responsive-xxxs);
 }
+.sbb-icon-list {
+  --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
+  --sbb-icon-list-marker-icon-color: currentcolor;
+  --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
+  --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
+}
+.sbb-icon-list > li::before {
+  content: "";
+  background-color: var(--sbb-icon-list-marker-icon-color);
+  mask-image: var(--sbb-icon-list-marker-icon);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100%;
+}
 
 .sbb-table,
 .sbb-table-m,