@sbb-esta/lyne-elements 1.12.1 → 1.14.0

package/slider/slider.d.ts

@@ -1,12 +1,13 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
 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;
+declare const SbbSliderElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbFormAssociatedMixinType<string>> & typeof LitElement;
 /**
  * It displays an input knob that can be moved in a range.
  *
  * @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.
      */
@@ -63,6 +64,7 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
      * @internal
      */
     formStateRestoreCallback(state: FormRestoreState | null, _reason: FormRestoreReason): void;
+    protected updateFormValue(): 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)

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;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"}
+{"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,137 +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;
-  }
-  /**
-   *  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>
@@ -139,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/standard-theme.css

@@ -106,7 +106,7 @@ summary {
 
 /**
  * Do not edit directly
- * Generated on Mon, 02 Sep 2024 15:45:11 GMT
+ * Generated on Mon, 21 Oct 2024 06:34:22 GMT
  */
 *,
 ::before,
@@ -226,6 +226,7 @@ summary {
   --sbb-color-black-alpha-60: rgba(0, 0, 0, 0.6);
   --sbb-color-black-alpha-70: rgba(0, 0, 0, 0.7);
   --sbb-color-midnight: #151515;
+  --sbb-color-blue: #2d327d;
   --sbb-color-charcoal: #212121;
   --sbb-color-iron: #444444;
   --sbb-color-anthracite: #5a5a5a;
@@ -260,6 +261,9 @@ summary {
   --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
   --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
   --sbb-color-red150: #a20013;
+  --sbb-color-royal: #06348b;
+  --sbb-color-royal125: #032668;
+  --sbb-color-royal150: #021c4e;
   --sbb-color-white: #ffffff;
   --sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
   --sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);

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"}