@sbb-esta/lyne-elements 4.0.0-next.2 → 4.0.0-next.4

package/container/sticky-bar/sticky-bar.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-declare const SbbStickyBarElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
+declare const SbbStickyBarElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbUpdateSchedulerMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.ts').SbbElementInternalsConstructor;
 /**
  * A container that sticks to the bottom of the page if slotted into `sbb-container`.
  *
@@ -29,8 +29,10 @@ export declare class SbbStickyBarElement extends SbbStickyBarElement_base {
     /** The state of the component. */
     private set _state(value);
     private get _state();
+    private _stateInternal;
     private _intersector?;
     private _observer;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;

package/container/sticky-bar/sticky-bar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAWb;;;;;;;;;;GAUG;AACH,qBAEM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;cAMzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,yBAAyB;IAKjC,OAAO,CAAC,2BAA2B;cAKhB,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAWb;;;;;;;;;;GAUG;AACH,qBAEM,mBAAoB,SAAQ,wBAA6D;IAC7F,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAQjB;IACD,OAAO,KAAK,MAAM,GAEjB;IACD,OAAO,CAAC,cAAc,CAAe;IAErC,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;;IAQa,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,yBAAyB;IAKjC,OAAO,CAAC,2BAA2B;cAKhB,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/container/sticky-bar/sticky-bar.component.js

@@ -1,62 +1,62 @@
-var x = (a) => {
-  throw TypeError(a);
+var x = (s) => {
+  throw TypeError(s);
 };
-var w = (a, i, e) => i.has(a) || x("Cannot " + e);
-var k = (a, i, e) => (w(a, i, "read from private field"), e ? e.call(a) : i.get(a)), u = (a, i, e) => i.has(a) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, e), d = (a, i, e, r) => (w(a, i, "write to private field"), r ? r.call(a, e) : i.set(a, e), e);
-import { __runInitializers as l, __esDecorate as y } from "tslib";
-import { IntersectionController as S } from "@lit-labs/observers/intersection-controller.js";
-import { css as A, LitElement as C, html as R } from "lit";
-import { customElement as B, property as z } from "lit/decorators.js";
-import { isLean as I, isZeroAnimationDuration as D } from "../../core/dom.js";
-import { SbbUpdateSchedulerMixin as U } from "../../core/mixins.js";
-import { boxSizingStyles as T } from "../../core/styles.js";
-const H = A`:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-state=unsticky])){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
-let $ = (() => {
-  var o, b, n;
-  let a = [B("sbb-sticky-bar")], i, e = [], r, h = U(C), g, m = [], v = [], p, _ = [], f = [];
+var w = (s, i, e) => i.has(s) || x("Cannot " + e);
+var k = (s, i, e) => (w(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, r) => (w(s, i, "write to private field"), r ? r.call(s, e) : i.set(s, e), e);
+import { __esDecorate as y, __runInitializers as d } from "tslib";
+import { IntersectionController as E } from "@lit-labs/observers/intersection-controller.js";
+import { css as C, LitElement as I, html as R } from "lit";
+import { customElement as A, property as z } from "lit/decorators.js";
+import { isLean as B, isZeroAnimationDuration as D } from "../../core/dom.js";
+import { SbbUpdateSchedulerMixin as U, SbbElementInternalsMixin as T } from "../../core/mixins.js";
+import { boxSizingStyles as H } from "../../core/styles.js";
+const L = C`:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
+let F = (() => {
+  var o, c, n;
+  let s = [A("sbb-sticky-bar")], i, e = [], r, h = U(T(I)), g, v = [], m = [], p, _ = [], f = [];
   return n = class extends h {
     constructor() {
-      super(...arguments);
+      super();
       u(this, o);
-      u(this, b);
-      d(this, o, l(this, m, null)), d(this, b, (l(this, v), l(this, _, I() ? "s" : "m"))), this._intersector = l(this, f), this._observer = new S(this, {
+      u(this, c);
+      l(this, o, d(this, v, null)), l(this, c, (d(this, m), d(this, _, B() ? "s" : "m"))), this._stateInternal = d(this, f), this._observer = new E(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
         callback: (t) => this._detectStickyState(t[0])
-      });
+      }), this._state = "sticky";
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
       return k(this, o);
     }
     set color(t) {
-      d(this, o, t);
+      l(this, o, t);
     }
     /**
      * Size of the container.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return k(this, b);
+      return k(this, c);
     }
     set size(t) {
-      d(this, b, t);
+      l(this, c, t);
     }
     /** The state of the component. */
     set _state(t) {
-      this.setAttribute("data-state", t);
+      this._stateInternal && this.internals.states.delete(`state-${this._stateInternal}`), this._stateInternal = t, this._stateInternal && this.internals.states.add(`state-${this._stateInternal}`);
     }
     get _state() {
-      return this.getAttribute("data-state");
+      return this._stateInternal;
     }
     connectedCallback() {
-      super.connectedCallback(), this.slot ||= "sticky-bar", this._state = "sticky", this.startUpdate();
+      super.connectedCallback(), this.slot ||= "sticky-bar", this.startUpdate();
       const t = this.closest("sbb-container");
-      t && this.toggleAttribute("data-expanded", t.expanded), this._intersector && this._observer.observe(this._intersector);
+      t && this.toggleState("expanded", t.expanded), this._intersector && this._observer.observe(this._intersector);
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this.toggleAttribute("data-initialized", !1);
+      super.disconnectedCallback(), this.internals.states.delete("initialized");
     }
     firstUpdated(t) {
       super.firstUpdated(t), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
@@ -65,17 +65,17 @@ let $ = (() => {
       return D(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
     }
     _detectStickyState(t) {
-      this.toggleAttribute("data-initialized", !0);
-      const s = !t.isIntersecting && t.boundingClientRect.top > 0, c = this._intersector?.getBoundingClientRect(), E = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
-      this.toggleAttribute("data-slide-vertically", s && this._intersector && Math.abs(c.bottom - E.bottom) > 30), this.toggleAttribute("data-sticking", s), this.completeUpdate();
+      this.internals.states.add("initialized");
+      const a = !t.isIntersecting && t.boundingClientRect.top > 0, b = this._intersector?.getBoundingClientRect(), S = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+      this.toggleState("slide-vertically", a && this._intersector && Math.abs(b.bottom - S.bottom) > 30), this.toggleState("sticking", a), this.completeUpdate();
     }
     /** Animates from normal content flow position to `position: sticky`. */
     stick() {
-      this._state !== "unsticky" || !this._dispatchBeforeStickEvent() || (this._state = "sticking", (!this.hasAttribute("data-sticking") || this._isZeroAnimationDuration()) && this._stickyCallback());
+      this._state !== "unsticky" || !this._dispatchBeforeStickEvent() || (this._state = "sticking", (!this.internals.states.has("sticking") || this._isZeroAnimationDuration()) && this._stickyCallback());
     }
     /** Animates `position: sticky` to normal content flow position. */
     unstick() {
-      this._state !== "sticky" || !this._dispatchBeforeUnStickEvent() || (this._state = "unsticking", (!this.hasAttribute("data-sticking") || this._isZeroAnimationDuration()) && this._unstickyCallback());
+      this._state !== "sticky" || !this._dispatchBeforeUnStickEvent() || (this._state = "unsticking", (!this.internals.states.has("sticking") || this._isZeroAnimationDuration()) && this._unstickyCallback());
     }
     _stickyCallback() {
       this._state = "sticky", this.dispatchEvent(new Event("stick"));
@@ -102,20 +102,20 @@ let $ = (() => {
       <div class="sbb-sticky-bar__intersector"></div>
     `;
     }
-  }, o = new WeakMap(), b = new WeakMap(), r = n, (() => {
+  }, o = new WeakMap(), c = new WeakMap(), r = n, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    g = [z({ reflect: !0 })], p = [z({ reflect: !0 })], y(n, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (s) => "color" in s, get: (s) => s.color, set: (s, c) => {
-      s.color = c;
-    } }, metadata: t }, m, v), y(n, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, c) => {
-      s.size = c;
-    } }, metadata: t }, _, f), y(null, i = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = [T, H], n.events = {
+    g = [z({ reflect: !0 })], p = [z({ reflect: !0 })], y(n, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
+      a.color = b;
+    } }, metadata: t }, v, m), y(n, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
+      a.size = b;
+    } }, metadata: t }, _, f), y(null, i = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, e), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.styles = [H, L], n.events = {
     beforestick: "beforestick",
     stick: "stick",
     beforeunstick: "beforeunstick",
     unstick: "unstick"
-  }, l(r, e), r;
+  }, d(r, e), r;
 })();
 export {
-  $ as SbbStickyBarElement
+  F as SbbStickyBarElement
 };

package/container/sticky-bar.d.ts

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

package/container.d.ts

@@ -1,6 +1,6 @@
 /**
  * @entrypoint
  */
-export * from './container/container.js';
-export * from './container/sticky-bar.js';
+export * from './container/container.ts';
+export * from './container/sticky-bar.ts';
 //# sourceMappingURL=container.d.ts.map

package/core/a11y/focus-visible-within-controller.d.ts

@@ -1,7 +1,8 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { SbbElementInternalsMixinType } from '../mixins.ts';
 export declare class SbbFocusVisibleWithinController implements ReactiveController {
     private _host;
-    constructor(_host: ReactiveControllerHost & HTMLElement);
+    constructor(_host: SbbElementInternalsMixinType & ReactiveControllerHost & HTMLElement);
     private _focusinHandler;
     private _focusoutHandler;
     hostConnected(): void;

package/core/a11y/focus-visible-within-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus-visible-within-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus-visible-within-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAKtE,qBAAa,+BAAgC,YAAW,kBAAkB;IACrD,OAAO,CAAC,KAAK;gBAAL,KAAK,EAAE,sBAAsB,GAAG,WAAW;IAItE,OAAO,CAAC,eAAe,CAKrB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEK,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;CAIhC"}
+{"version":3,"file":"focus-visible-within-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus-visible-within-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAGtE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAKjE,qBAAa,+BAAgC,YAAW,kBAAkB;IAEtE,OAAO,CAAC,KAAK;gBAAL,KAAK,EAAE,4BAA4B,GAAG,sBAAsB,GAAG,WAAW;IAKpF,OAAO,CAAC,eAAe,CAKrB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEK,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;CAIhC"}

package/core/a11y/focus-visible-within-controller.js

@@ -1,10 +1,11 @@
-import { sbbInputModalityDetector as s } from "./input-modality-detector.js";
-class i {
-  constructor(t) {
-    this._host = t, this._focusinHandler = () => {
-      this._host.toggleAttribute("data-has-visible-focus-within", s.mostRecentModality === "keyboard");
+import { ɵstateController as t } from "../mixins/element-internals-mixin.js";
+import { sbbInputModalityDetector as o } from "./input-modality-detector.js";
+class h {
+  constructor(s) {
+    this._host = s, this._focusinHandler = () => {
+      t(this._host).toggle("has-visible-focus-within", o.mostRecentModality === "keyboard");
     }, this._focusoutHandler = () => {
-      this._host.removeAttribute("data-has-visible-focus-within");
+      t(this._host).delete("has-visible-focus-within");
     }, this._host.addController(this);
   }
   hostConnected() {
@@ -15,5 +16,5 @@ class i {
   }
 }
 export {
-  i as SbbFocusVisibleWithinController
+  h as SbbFocusVisibleWithinController
 };

package/core/a11y.d.ts

@@ -1,12 +1,12 @@
 /**
  * @entrypoint
  */
-export * from './a11y/arrow-navigation.js';
-export * from './a11y/fake-event-detection.js';
-export * from './a11y/focus-visible-within-controller.js';
-export * from './a11y/focus.js';
-export * from './a11y/focus-trap-controller.js';
-export * from './a11y/interactivity-checker.js';
-export * from './a11y/input-modality-detector.js';
-export * from './a11y/live-announcer.js';
+export * from './a11y/arrow-navigation.ts';
+export * from './a11y/fake-event-detection.ts';
+export * from './a11y/focus-visible-within-controller.ts';
+export * from './a11y/focus.ts';
+export * from './a11y/focus-trap-controller.ts';
+export * from './a11y/interactivity-checker.ts';
+export * from './a11y/input-modality-detector.ts';
+export * from './a11y/live-announcer.ts';
 //# sourceMappingURL=a11y.d.ts.map

package/core/base-elements/action-base-element.d.ts

@@ -1,8 +1,9 @@
 import { LitElement, TemplateResult } from 'lit';
-declare const SbbActionBaseElement_base: import('../mixins.js').AbstractConstructor<import('../mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../mixins.js').SbbElementInternalsConstructor;
+declare const SbbActionBaseElement_base: import('../mixins.ts').AbstractConstructor<import('../mixins.ts').SbbElementInternalsMixinType> & typeof LitElement & import('../mixins.ts').SbbElementInternalsConstructor;
 export declare abstract class SbbActionBaseElement extends SbbActionBaseElement_base {
     protected get maybeDisabled(): boolean | undefined;
     protected get maybeDisabledInteractive(): boolean | undefined;
+    constructor();
     connectedCallback(): void;
     protected setupBaseEventHandlers(): void;
     /** Override this method to render the component template. */

package/core/base-elements/action-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/action-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAgB5D,8BAIe,oBAAqB,SAAQ,yBAAoC;IAC9E,SAAS,KAAK,aAAa,IAAI,OAAO,GAAG,SAAS,CAGjD;IAED,SAAS,KAAK,wBAAwB,IAAI,OAAO,GAAG,SAAS,CAE5D;IAEe,iBAAiB,IAAI,IAAI;IAezC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAexC,6DAA6D;IAC7D,SAAS,CAAC,cAAc,IAAI,cAAc;IAI1C,wDAAwD;cACrC,MAAM,IAAI,cAAc;CAG5C"}
+{"version":3,"file":"action-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/action-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAe5D,8BAAsB,oBAAqB,SAAQ,yBAAoC;IACrF,SAAS,KAAK,aAAa,IAAI,OAAO,GAAG,SAAS,CAGjD;IAED,SAAS,KAAK,wBAAwB,IAAI,OAAO,GAAG,SAAS,CAE5D;;IAOe,iBAAiB,IAAI,IAAI;IAezC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAexC,6DAA6D;IAC7D,SAAS,CAAC,cAAc,IAAI,cAAc;IAI1C,wDAAwD;cACrC,MAAM,IAAI,cAAc;CAG5C"}

package/core/base-elements/action-base-element.js

@@ -1,47 +1,39 @@
-import { __esDecorate as n, __runInitializers as o } from "tslib";
-import { LitElement as m, html as c } from "lit";
-import { hostAttributes as b } from "../decorators.js";
-import { SbbElementInternalsMixin as d } from "../mixins.js";
-let y = (() => {
-  var a;
-  let i = [b({
-    "data-action": ""
-  })], r, l = [], t, s = d(m);
-  return a = class extends s {
-    get maybeDisabled() {
-      const e = this;
-      return e.disabled || e.formDisabled;
-    }
-    get maybeDisabledInteractive() {
-      return this.disabledInteractive;
-    }
-    connectedCallback() {
-      super.connectedCallback();
-    }
-    setupBaseEventHandlers() {
-      this.addEventListener(
-        "click",
-        (e) => {
-          this.maybeDisabled && !this.maybeDisabledInteractive && (e.preventDefault(), e.stopImmediatePropagation());
-        },
-        // capture is necessary here, as this event handler needs to be executed before any other
-        // in order to stop immediate propagation in the disabled case.
-        { capture: !0 }
-      );
-    }
-    /** Override this method to render the component template. */
-    renderTemplate() {
-      throw new Error("Implementation needed!");
-    }
-    /** Default render method for button-like components. */
-    render() {
-      return c`<span class="sbb-action-base ${this.localName}">${this.renderTemplate()}</span>`;
-    }
-  }, t = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    n(null, r = { value: t }, i, { kind: "class", name: t.name, metadata: e }, null, l), t = r.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), o(t, l);
-  })(), t;
-})();
+import { LitElement as t, html as a } from "lit";
+import { SbbElementInternalsMixin as s } from "../mixins.js";
+class l extends s(t) {
+  get maybeDisabled() {
+    const e = this;
+    return e.disabled || e.formDisabled;
+  }
+  get maybeDisabledInteractive() {
+    return this.disabledInteractive;
+  }
+  constructor() {
+    super(), this.internals.states.add("action");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  setupBaseEventHandlers() {
+    this.addEventListener(
+      "click",
+      (e) => {
+        this.maybeDisabled && !this.maybeDisabledInteractive && (e.preventDefault(), e.stopImmediatePropagation());
+      },
+      // capture is necessary here, as this event handler needs to be executed before any other
+      // in order to stop immediate propagation in the disabled case.
+      { capture: !0 }
+    );
+  }
+  /** Override this method to render the component template. */
+  renderTemplate() {
+    throw new Error("Implementation needed!");
+  }
+  /** Default render method for button-like components. */
+  render() {
+    return a`<span class="sbb-action-base ${this.localName}">${this.renderTemplate()}</span>`;
+  }
+}
 export {
-  y as SbbActionBaseElement
+  l as SbbActionBaseElement
 };

package/core/base-elements/button-base-element.d.ts

@@ -1,15 +1,15 @@
-import { FormRestoreReason, FormRestoreState } from '../mixins.js';
-import { SbbActionBaseElement } from './action-base-element.js';
+import { FormRestoreReason, FormRestoreState } from '../mixins.ts';
+import { SbbActionBaseElement } from './action-base-element.ts';
 /** Enumeration for type attribute in <button> HTML tag. */
 export type SbbButtonType = 'button' | 'reset' | 'submit';
-declare const SbbButtonLikeBaseElement_base: import('../mixins.js').AbstractConstructor<import('../mixins.js').SbbFormAssociatedMixinType> & typeof SbbActionBaseElement;
+declare const SbbButtonLikeBaseElement_base: import('../mixins.ts').AbstractConstructor<import('../mixins.ts').SbbFormAssociatedMixinType> & typeof SbbActionBaseElement;
 /** Button base class. */
 export declare abstract class SbbButtonLikeBaseElement extends SbbButtonLikeBaseElement_base {
     static readonly role: ElementInternals['role'];
     constructor();
     /**
      * Prevents scrolling from pressing Space, when the event target is an action element.
-     * Also sets data-active attribute.
+     * Also sets active state.
      * @param event The origin event.
      */
     private _preventScrollOnSpaceKeydown;

package/core/base-elements/button-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/button-base-element.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;;AAE1D,yBAAyB;AACzB,8BAKe,wBAAyB,SAAQ,6BAA4C;IAC1F,gBAAgC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAY;;IAwB1E;;;;OAIG;IACH,OAAO,CAAC,4BAA4B,CAKlC;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,+BAA+B,CAKrC;IAEF,OAAO,CAAC,mBAAmB,CAezB;IAEc,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;CAKR;AAED,yBAAyB;AACzB,8BAAsB,oBAAqB,SAAQ,wBAAwB;IACzE,OAAO,CAAC,QAAQ,CAAC,wCAAwC,CAIvD;IAEF,iCAAiC;IACjC,SAEgB,KAAK,EAAE,MAAM,CAAM;IAEnC;;;OAGG;IACH,IACoB,IAAI,CAAC,IAAI,EAAE,aAAa,EAE3C;IACD,IAAoB,IAAI,IAAI,aAAa,CAExC;IAED,yDAAyD;IACzD,IACoB,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrC;IACD,IAAoB,IAAI,IAAI,eAAe,GAAG,IAAI,CAQjD;IACD,OAAO,CAAC,OAAO,CAAc;;IAQb,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,kBAAkB,CAaxB;IAEF,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY,CA6BlB;IAEF;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAEzC;;;OAGG;IACa,wBAAwB,CACtC,MAAM,EAAE,gBAAgB,GAAG,IAAI,EAC/B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAEP;;;;OAIG;cACgB,eAAe,IAAI,IAAI;CAC3C"}
+{"version":3,"file":"button-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/button-base-element.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;;AAE1D,yBAAyB;AACzB,8BAIe,wBAAyB,SAAQ,6BAA4C;IAC1F,gBAAgC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAY;;IAyB1E;;;;OAIG;IACH,OAAO,CAAC,4BAA4B,CAKlC;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,+BAA+B,CAKrC;IAEF,OAAO,CAAC,mBAAmB,CAezB;IAEc,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;CAKR;AAED,yBAAyB;AACzB,8BAAsB,oBAAqB,SAAQ,wBAAwB;IACzE,OAAO,CAAC,QAAQ,CAAC,wCAAwC,CAIvD;IAEF,iCAAiC;IACjC,SAEgB,KAAK,EAAE,MAAM,CAAM;IAEnC;;;OAGG;IACH,IACoB,IAAI,CAAC,IAAI,EAAE,aAAa,EAE3C;IACD,IAAoB,IAAI,IAAI,aAAa,CAExC;IAED,yDAAyD;IACzD,IACoB,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrC;IACD,IAAoB,IAAI,IAAI,eAAe,GAAG,IAAI,CAQjD;IACD,OAAO,CAAC,OAAO,CAAc;;IAQb,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,kBAAkB,CAaxB;IAEF,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY,CA6BlB;IAEF;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAEzC;;;OAGG;IACa,wBAAwB,CACtC,MAAM,EAAE,gBAAgB,GAAG,IAAI,EAC/B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAEP;;;;OAIG;cACgB,eAAe,IAAI,IAAI;CAC3C"}

package/core/base-elements/button-base-element.js

@@ -4,29 +4,28 @@ var _ = (i) => {
 var v = (i, a, n) => a.has(i) || _("Cannot " + n);
 var k = (i, a, n) => (v(i, a, "read from private field"), n ? n.call(i) : a.get(i)), E = (i, a, n) => a.has(i) ? _("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, n), p = (i, a, n, l) => (v(i, a, "write to private field"), l ? l.call(i, n) : a.set(i, n), n);
 import { __esDecorate as d, __runInitializers as h } from "tslib";
-import { isServer as g } from "lit";
-import { property as b } from "lit/decorators.js";
-import { hostAttributes as S, forceType as C } from "../decorators.js";
+import { isServer as S } from "lit";
+import { property as f } from "lit/decorators.js";
+import { hostAttributes as g, forceType as C } from "../decorators.js";
 import { isEventPrevented as w } from "../eventing.js";
 import { SbbFormAssociatedMixin as K } from "../mixins.js";
 import { SbbActionBaseElement as O } from "./action-base-element.js";
 let I = (() => {
   var o;
-  let i = [S({
-    tabindex: "0",
-    "data-button": ""
+  let i = [g({
+    tabindex: "0"
   })], a, n = [], l, u = K(O);
   return o = class extends u {
     constructor() {
-      if (super(), this._preventScrollOnSpaceKeydown = (t) => {
-        t.key === " " && (t.preventDefault(), t.target.toggleAttribute("data-active", !0));
-      }, this._removeActiveMarker = (t) => {
-        t.target.removeAttribute("data-active");
-      }, this._dispatchClickEventOnSpaceKeyup = (t) => {
-        t.key === " " && (this._removeActiveMarker(t), this._dispatchClickEvent(t));
-      }, this._dispatchClickEvent = (t) => {
-        const { altKey: r, ctrlKey: m, metaKey: y, shiftKey: e } = t;
-        t.target.dispatchEvent(new PointerEvent("click", {
+      if (super(), this._preventScrollOnSpaceKeydown = (s) => {
+        s.key === " " && (s.preventDefault(), this.internals.states.add("active"));
+      }, this._removeActiveMarker = () => {
+        this.internals.states.delete("active");
+      }, this._dispatchClickEventOnSpaceKeyup = (s) => {
+        s.key === " " && (this._removeActiveMarker(), this._dispatchClickEvent(s));
+      }, this._dispatchClickEvent = (s) => {
+        const { altKey: r, ctrlKey: m, metaKey: y, shiftKey: t } = s;
+        s.target.dispatchEvent(new PointerEvent("click", {
           bubbles: !0,
           cancelable: !0,
           composed: !0,
@@ -35,68 +34,68 @@ let I = (() => {
           altKey: r,
           ctrlKey: m,
           metaKey: y,
-          shiftKey: e
+          shiftKey: t
         }));
-      }, !g) {
+      }, this.internals.states.add("button"), !S) {
         this.setupBaseEventHandlers();
-        const t = { passive: !0 };
-        this.addEventListener("keydown", this._preventScrollOnSpaceKeydown), this.addEventListener("keyup", this._dispatchClickEventOnSpaceKeyup, t), this.addEventListener("blur", this._removeActiveMarker, t), this.addEventListener("keypress", (r) => {
+        const s = { passive: !0 };
+        this.addEventListener("keydown", this._preventScrollOnSpaceKeydown), this.addEventListener("keyup", this._dispatchClickEventOnSpaceKeyup, s), this.addEventListener("blur", this._removeActiveMarker, s), this.addEventListener("keypress", (r) => {
           (r.key === "Enter" || r.key === `
 `) && this._dispatchClickEvent(r);
-        }, t);
+        }, s);
       }
     }
-    attributeChangedCallback(t, r, m) {
-      (!["name", "value"].includes(t) || r !== m) && super.attributeChangedCallback(t, r, m);
+    attributeChangedCallback(s, r, m) {
+      (!["name", "value"].includes(s) || r !== m) && super.attributeChangedCallback(s, r, m);
     }
   }, l = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    d(null, a = { value: l }, i, { kind: "class", name: l.name, metadata: t }, null, n), l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    d(null, a = { value: l }, i, { kind: "class", name: l.name, metadata: s }, null, n), l = a.value, s && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
   })(), o.role = "button", h(l, n), l;
 })(), q = (() => {
-  var t, r;
-  let i = I, a = [], n, l = [], u = [], o, f;
+  var s, r;
+  let i = I, a = [], n, l = [], u = [], o, b;
   return r = class extends i {
     constructor() {
       super();
-      E(this, t);
+      E(this, s);
       this._elementsOnWhichEnterPressTriggersSubmit = (h(this, a), [
         "input",
         "sbb-date-input",
         "sbb-time-input"
-      ]), p(this, t, h(this, l, "")), this._formId = (h(this, u), ""), this._handleButtonClick = async (e) => {
-        if (this.type === "button" || await w(e))
+      ]), p(this, s, h(this, l, "")), this._formId = (h(this, u), ""), this._handleButtonClick = async (t) => {
+        if (this.type === "button" || await w(t))
           return;
-        const s = this.form;
-        if (s)
-          this.type === "submit" ? this._requestSubmit(s) : this.type === "reset" && s.reset();
+        const e = this.form;
+        if (e)
+          this.type === "submit" ? this._requestSubmit(e) : this.type === "reset" && e.reset();
         else return;
-      }, this._formKeyDown = (e) => {
-        const s = this.form;
-        this.type === "submit" && s && (e.key === "Enter" || e.key === `
-`) && this._elementsOnWhichEnterPressTriggersSubmit.includes(e.target?.localName) && e.isTrusted && (e.stopImmediatePropagation(), e.preventDefault(), e.composedPath()[0].dispatchEvent(new KeyboardEvent(e.type, e)) && !this.matches(":disabled") && this._requestSubmit(s));
+      }, this._formKeyDown = (t) => {
+        const e = this.form;
+        this.type === "submit" && e && (t.key === "Enter" || t.key === `
+`) && this._elementsOnWhichEnterPressTriggersSubmit.includes(t.target?.localName) && t.isTrusted && (t.stopImmediatePropagation(), t.preventDefault(), t.composedPath()[0].dispatchEvent(new KeyboardEvent(t.type, t)) && !this.matches(":disabled") && this._requestSubmit(e));
       }, this.addEventListener("click", this._handleButtonClick);
     }
     /** Value of the form element. */
     get value() {
-      return k(this, t);
+      return k(this, s);
     }
-    set value(e) {
-      p(this, t, e);
+    set value(t) {
+      p(this, s, t);
     }
     /**
      * The type attribute to use for the button.
      * @default 'button'
      */
-    set type(e) {
-      this.setAttribute("type", `${e}`);
+    set type(t) {
+      this.setAttribute("type", `${t}`);
     }
     get type() {
       return this.getAttribute("type") ?? "button";
     }
     /** The `<form>` element to associate the button with. */
-    set form(e) {
-      this._formId = e, this.form?.addEventListener("keydown", this._formKeyDown, { capture: !0 });
+    set form(t) {
+      this._formId = t, this.form?.addEventListener("keydown", this._formKeyDown, { capture: !0 });
     }
     get form() {
       return this._formId ? this.getRootNode?.()?.getElementById?.(this._formId) ?? null : this.internals.form;
@@ -107,9 +106,9 @@ let I = (() => {
     disconnectedCallback() {
       super.disconnectedCallback(), this.form?.removeEventListener("keydown", this._formKeyDown, { capture: !0 });
     }
-    _requestSubmit(e) {
-      const s = document.createElement("button");
-      s.inert = !0, s.hidden = !0, s.name = this.name, s.value = this.value ?? "", e.append(s), e.requestSubmit(s), s.remove();
+    _requestSubmit(t) {
+      const e = document.createElement("button");
+      e.inert = !0, e.hidden = !0, e.name = this.name, e.value = this.value ?? "", t.append(e), t.requestSubmit(e), e.remove();
     }
     /**
      * Intentionally empty, as buttons are not targeted by form reset
@@ -121,7 +120,7 @@ let I = (() => {
      * Intentionally empty, as buttons are not targeted by form restore
      * @internal
      */
-    formStateRestoreCallback(e, s) {
+    formStateRestoreCallback(t, e) {
     }
     /**
      * Intentionally empty, as button does not write its data in form.
@@ -130,15 +129,15 @@ let I = (() => {
      */
     updateFormValue() {
     }
-  }, t = new WeakMap(), (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    n = [C(), b()], o = [b()], f = [b()], d(r, null, n, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, get: (s) => s.value, set: (s, c) => {
-      s.value = c;
-    } }, metadata: e }, l, u), d(r, null, o, { kind: "setter", name: "type", static: !1, private: !1, access: { has: (s) => "type" in s, set: (s, c) => {
-      s.type = c;
-    } }, metadata: e }, null, a), d(r, null, f, { kind: "setter", name: "form", static: !1, private: !1, access: { has: (s) => "form" in s, set: (s, c) => {
-      s.form = c;
-    } }, metadata: e }, null, a), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  }, s = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    n = [C(), f()], o = [f()], b = [f()], d(r, null, n, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, get: (e) => e.value, set: (e, c) => {
+      e.value = c;
+    } }, metadata: t }, l, u), d(r, null, o, { kind: "setter", name: "type", static: !1, private: !1, access: { has: (e) => "type" in e, set: (e, c) => {
+      e.type = c;
+    } }, metadata: t }, null, a), d(r, null, b, { kind: "setter", name: "form", static: !1, private: !1, access: { has: (e) => "form" in e, set: (e, c) => {
+      e.form = c;
+    } }, metadata: t }, null, a), t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), r;
 })();
 export {