@sbb-esta/lyne-elements 1.10.0 → 1.11.0

package/stepper/step.js

@@ -1,24 +1,25 @@
-import { css as o, LitElement as l, html as p } from "lit";
-import { customElement as h } from "lit/decorators.js";
-import { ref as d } from "lit/directives/ref.js";
+import { ResizeController as o } from "@lit-labs/observers/resize-controller.js";
+import { css as l, LitElement as p, html as h } from "lit";
+import { customElement as d } from "lit/decorators.js";
 import { SbbConnectedAbortController as c } from "../core/controllers.js";
 import { hostAttributes as v } from "../core/decorators.js";
 import { EventEmitter as m } from "../core/eventing.js";
-import { AgnosticResizeObserver as u } from "../core/observers.js";
-const f = o`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-visibility: hidden;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-visibility: visible;--sbb-step-height: fit-content;--sbb-step-animation-duration: var(--sbb-animation-duration-4x);--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing)}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-step{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);visibility:var(--sbb-step-visibility);height:var(--sbb-step-height);color:var(--sbb-step-color);transition-property:opacity,visibility;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing)}`;
-var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, y = (t, s, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? _(s, a) : s, r = t.length - 1, b; r >= 0; r--)
+const u = l`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-visibility: hidden;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-visibility: visible;--sbb-step-height: fit-content;--sbb-step-animation-duration: var(--sbb-animation-duration-4x);--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing)}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-step{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);visibility:var(--sbb-step-visibility);height:var(--sbb-step-height);color:var(--sbb-step-color);transition-property:opacity,visibility;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing)}`;
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, _ = (t, s, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? f(s, a) : s, r = t.length - 1, b; r >= 0; r--)
     (b = t[r]) && (e = (i ? b(s, a, e) : b(e)) || e);
   return i && e && g(s, a, e), e;
 };
-let x = 0, n = class extends l {
+let y = 0, n = class extends p {
   constructor() {
     super(...arguments), this._validate = new m(
       this,
       n.events.validate
-    ), this._loaded = !1, this._abort = new c(this), this._stepper = null, this._label = null, this._stepResizeObserver = new u(
-      (t) => this._onStepElementResize(t)
-    );
+    ), this._loaded = !1, this._abort = new c(this), this._stepper = null, this._label = null, this._stepResizeObserver = new o(this, {
+      target: null,
+      skipInitial: !0,
+      callback: (t) => this._onStepElementResize(t)
+    });
   }
   /** The label of the step. */
   get label() {
@@ -80,33 +81,27 @@ let x = 0, n = class extends l {
   connectedCallback() {
     super.connectedCallback();
     const t = this._abort.signal;
-    this.id = this.id || `sbb-step-${x++}`, this.addEventListener("click", (s) => this._handleClick(s), { signal: t }), this._stepper = this.closest("sbb-stepper"), this._label = this._getStepLabel();
+    this.id = this.id || `sbb-step-${y++}`, this.addEventListener("click", (s) => this._handleClick(s), { signal: t }), this._stepper = this.closest("sbb-stepper"), this._label = this._getStepLabel();
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this._loaded = !0;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._stepResizeObserver.disconnect();
+    super.firstUpdated(t), this._loaded = !0, this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
   }
   render() {
-    return p`
+    return h`
       <div class="sbb-step--wrapper">
-        <div
-          class="sbb-step"
-          ${d((t) => t && this._stepResizeObserver.observe(t))}
-        >
+        <div class="sbb-step">
           <slot></slot>
         </div>
       </div>
     `;
   }
 };
-n.styles = f;
+n.styles = u;
 n.events = {
   validate: "validate"
 };
-n = y([
-  h("sbb-step"),
+n = _([
+  d("sbb-step"),
   v({
     slot: "step",
     role: "tabpanel"

package/table/table-wrapper/table-wrapper.d.ts

@@ -9,7 +9,6 @@ export declare class SbbTableWrapperElement extends SbbTableWrapperElement_base
     static styles: CSSResultGroup;
     private _resizeObserver;
     private _tableWrapper;
-    disconnectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     private _checkHorizontalScrollbar;
     protected render(): TemplateResult;

package/table/table-wrapper/table-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAQb;;;;GAIG;AACH,qBACa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAAsE;IAC7F,OAAO,CAAC,aAAa,CAAe;IAEpB,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMxE,OAAO,CAAC,yBAAyB;cAOd,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAOb;;;;GAIG;AACH,qBACa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,aAAa,CAAe;cAEjB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMxE,OAAO,CAAC,yBAAyB;cAOd,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/table/table-wrapper.js

@@ -1,19 +1,20 @@
-import { css as c, LitElement as i, html as p } from "lit";
-import { customElement as h } from "lit/decorators.js";
-import { SbbNegativeMixin as d } from "../core/mixins.js";
-import { AgnosticResizeObserver as n } from "../core/observers.js";
-const v = c`*,:before,:after{box-sizing:border-box}:host{--sbb-table-wrapper-border-radius: var(--sbb-border-radius-4x);display:block}::slotted(.sbb-table){width:100%}.sbb-table-wrapper{overflow:auto;--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-table-wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-table-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-table-wrapper::-webkit-scrollbar-button,.sbb-table-wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-table-wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-table-wrapper{--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-iron)}:host([data-has-horizontal-scrollbar]) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
+import { ResizeController as c } from "@lit-labs/observers/resize-controller.js";
+import { css as i, LitElement as p, html as h } from "lit";
+import { customElement as d } from "lit/decorators.js";
+import { SbbNegativeMixin as n } from "../core/mixins.js";
+const v = i`*,:before,:after{box-sizing:border-box}:host{--sbb-table-wrapper-border-radius: var(--sbb-border-radius-4x);display:block}::slotted(.sbb-table){width:100%}.sbb-table-wrapper{overflow:auto;--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-table-wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-table-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-table-wrapper::-webkit-scrollbar-button,.sbb-table-wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-table-wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-table-wrapper{--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-iron)}:host([data-has-horizontal-scrollbar]) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
 var w = Object.defineProperty, u = Object.getOwnPropertyDescriptor, m = (b, o, l, a) => {
-  for (var r = a > 1 ? void 0 : a ? u(o, l) : o, s = b.length - 1, e; s >= 0; s--)
-    (e = b[s]) && (r = (a ? e(o, l, r) : e(r)) || r);
+  for (var r = a > 1 ? void 0 : a ? u(o, l) : o, s = b.length - 1, t; s >= 0; s--)
+    (t = b[s]) && (r = (a ? t(o, l, r) : t(r)) || r);
   return a && r && w(o, l, r), r;
 };
-let t = class extends d(i) {
+let e = class extends n(p) {
   constructor() {
-    super(...arguments), this._resizeObserver = new n(() => this._checkHorizontalScrollbar());
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._resizeObserver.disconnect();
+    super(...arguments), this._resizeObserver = new c(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => this._checkHorizontalScrollbar()
+    });
   }
   firstUpdated(b) {
     super.firstUpdated(b), this._tableWrapper = this.shadowRoot.querySelector(".sbb-table-wrapper"), this._resizeObserver.observe(this._tableWrapper);
@@ -25,15 +26,15 @@ let t = class extends d(i) {
     );
   }
   render() {
-    return p`<div class="sbb-table-wrapper">
+    return h`<div class="sbb-table-wrapper">
       <slot></slot>
     </div>`;
   }
 };
-t.styles = v;
-t = m([
-  h("sbb-table-wrapper")
-], t);
+e.styles = v;
+e = m([
+  d("sbb-table-wrapper")
+], e);
 export {
-  t as SbbTableWrapperElement
+  e as SbbTableWrapperElement
 };

package/tabs/tab-group/tab-group.d.ts

@@ -75,7 +75,6 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
     activateTab(tabIndex: number): void;
     private _getTabs;
     private _enabledTabs;
-    disconnectedCallback(): void;
     private _updateSize;
     private _onContentSlotChange;
     private _onTabsSlotChange;

package/tabs/tab-group/tab-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAQD;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,uBAA6B;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,qBAAqB,CAE3B;IACF,OAAO,CAAC,uBAAuB,CAE7B;IACF,OAAO,CAAC,yBAAyB,CAE/B;IAEF,uCAAuC;IACvC,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAwC;IAErD;;;OAGG;IACqE,oBAAoB,SAAK;IAEjG,6CAA6C;IAC7C,OAAO,CAAC,mBAAmB,CAGzB;IAEc,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,YAAY;IAIJ,oBAAoB,IAAI,IAAI;IAO5C,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAS1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAQlC,OAAO,CAAC,UAAU;IAkGlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAQD;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,uBAA6B;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,qBAAqB,CAI1B;IACH,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH,uCAAuC;IACvC,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAwC;IAErD;;;OAGG;IACqE,oBAAoB,SAAK;IAEjG,6CAA6C;IAC7C,OAAO,CAAC,mBAAmB,CAGzB;IAEc,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAS1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAQlC,OAAO,CAAC,UAAU;IAkGlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/tabs/tab-group.js

@@ -1,30 +1,37 @@
-import { css as h, LitElement as u, html as f } from "lit";
-import { property as c, customElement as v } from "lit/decorators.js";
-import { ref as p } from "lit/directives/ref.js";
-import { isArrowKeyPressed as _, getNextElementIndex as g } from "../core/a11y.js";
-import { SbbConnectedAbortController as m } from "../core/controllers.js";
-import { EventEmitter as A, throttle as T } from "../core/eventing.js";
-import { SbbHydrationMixin as x } from "../core/mixins.js";
-import { AgnosticMutationObserver as C, AgnosticResizeObserver as d } from "../core/observers.js";
-import { SbbTabElement as y } from "./tab.js";
-const E = h`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content ::slotted(*){visibility:hidden;opacity:0;height:0;overflow:hidden;position:relative}.tab-content ::slotted(*[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted([role=tabpanel]:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
-var z = Object.defineProperty, G = Object.getOwnPropertyDescriptor, b = (t, i, e, n) => {
-  for (var s = n > 1 ? void 0 : n ? G(i, e) : i, r = t.length - 1, o; r >= 0; r--)
+import { MutationController as h } from "@lit-labs/observers/mutation-controller.js";
+import { ResizeController as l } from "@lit-labs/observers/resize-controller.js";
+import { css as u, LitElement as f, html as p } from "lit";
+import { property as d, customElement as v } from "lit/decorators.js";
+import { ref as _ } from "lit/directives/ref.js";
+import { isArrowKeyPressed as g, getNextElementIndex as m } from "../core/a11y.js";
+import { SbbConnectedAbortController as A } from "../core/controllers.js";
+import { EventEmitter as T, throttle as x } from "../core/eventing.js";
+import { SbbHydrationMixin as y } from "../core/mixins.js";
+import { SbbTabElement as C } from "./tab.js";
+const E = u`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content ::slotted(*){visibility:hidden;opacity:0;height:0;overflow:hidden;position:relative}.tab-content ::slotted(*[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted([role=tabpanel]:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
+var z = Object.defineProperty, I = Object.getOwnPropertyDescriptor, b = (t, i, e, n) => {
+  for (var s = n > 1 ? void 0 : n ? I(i, e) : i, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (n ? o(i, e, s) : o(s)) || s);
   return n && s && z(i, e, s), s;
 };
-const I = {
+const G = {
   attributeFilter: ["active", "disabled"]
 };
-let S = 0, a = class extends x(u) {
+let S = 0, a = class extends y(f) {
   constructor() {
-    super(...arguments), this._tabs = [], this._abort = new m(this), this._tabAttributeObserver = new C(
-      (t) => this._onTabAttributesChange(t)
-    ), this._tabGroupResizeObserver = new d(
-      (t) => this._onTabGroupElementResize(t)
-    ), this._tabContentResizeObserver = new d(
-      (t) => this._onTabContentElementResize(t)
-    ), this._size = "l", this.initialSelectedIndex = 0, this._selectedTabChanged = new A(
+    super(...arguments), this._tabs = [], this._abort = new A(this), this._tabAttributeObserver = new h(this, {
+      target: null,
+      config: G,
+      callback: (t) => this._onTabAttributesChange(t)
+    }), this._tabGroupResizeObserver = new l(this, {
+      target: null,
+      skipInitial: !0,
+      callback: (t) => this._onTabGroupElementResize(t)
+    }), this._tabContentResizeObserver = new l(this, {
+      target: null,
+      skipInitial: !0,
+      callback: (t) => this._onTabContentElementResize(t)
+    }), this._size = "l", this.initialSelectedIndex = 0, this._selectedTabChanged = new T(
       this,
       a.events.didChange
     ), this._onContentSlotChange = () => {
@@ -85,9 +92,6 @@ let S = 0, a = class extends x(u) {
   _enabledTabs() {
     return this._tabs.filter((t) => !t.hasAttribute("disabled"));
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._tabAttributeObserver.disconnect(), this._tabContentResizeObserver.disconnect(), this._tabGroupResizeObserver.disconnect();
-  }
   _updateSize() {
     for (const t of this._tabs)
       t.setAttribute("data-size", this.size);
@@ -158,32 +162,32 @@ let S = 0, a = class extends x(u) {
           });
         }
       }
-    }, ((i = t.nextElementSibling) == null ? void 0 : i.localName) === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof y && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
+    }, ((i = t.nextElementSibling) == null ? void 0 : i.localName) === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof C && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
       var e;
       (e = t.tabGroupActions) == null || e.select();
-    }), t.tab && (t.setAttribute("aria-controls", t.tab.id), t.tab.setAttribute("role", "tabpanel"), t.tab.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t, I), t.slot = "tab-bar";
+    }), t.tab && (t.setAttribute("aria-controls", t.tab.id), t.tab.setAttribute("role", "tabpanel"), t.tab.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t), t.slot = "tab-bar";
   }
   _handleKeyDown(t) {
     var e, n, s;
     const i = this._enabledTabs();
     if (!(!i || // don't trap nested handling
-    t.target !== this && t.target.parentElement !== this) && _(t)) {
-      const r = i.findIndex((l) => l.active), o = g(t, r, i.length);
+    t.target !== this && t.target.parentElement !== this) && g(t)) {
+      const r = i.findIndex((c) => c.active), o = m(t, r, i.length);
       (n = (e = i[o]) == null ? void 0 : e.tabGroupActions) == null || n.select(), (s = i[o]) == null || s.focus(), t.preventDefault();
     }
   }
   render() {
-    return f`
+    return p`
       <div
         class="tab-group"
         role="tablist"
-        ${p((t) => this._tabGroupElement = t)}
+        ${_((t) => this._tabGroupElement = t)}
       >
         <slot name="tab-bar" @slotchange=${this._onTabsSlotChange}></slot>
       </div>
 
       <div class="tab-content">
-        <slot @slotchange=${T(this._onContentSlotChange, 150)}></slot>
+        <slot @slotchange=${x(this._onContentSlotChange, 150)}></slot>
       </div>
     `;
   }
@@ -193,10 +197,10 @@ a.events = {
   didChange: "didChange"
 };
 b([
-  c()
+  d()
 ], a.prototype, "size", 1);
 b([
-  c({ attribute: "initial-selected-index", type: Number })
+  d({ attribute: "initial-selected-index", type: Number })
 ], a.prototype, "initialSelectedIndex", 2);
 a = b([
   v("sbb-tab-group")

package/tag/tag/tag.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
 export type SbbTagSize = 's' | 'm';
-declare const SbbTagElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
+declare const SbbTagElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a selectable element which can be used as a filter.
  *

package/tag/tag.js

@@ -4,24 +4,24 @@ import { SbbButtonBaseElement as v } from "../core/base-elements.js";
 import { SbbConnectedAbortController as u } from "../core/controllers.js";
 import { slotState as m } from "../core/decorators.js";
 import { EventEmitter as l } from "../core/eventing.js";
-import { SbbFocusableDisabledActionMixin as p } from "../core/mixins.js";
+import { SbbDisabledTabIndexActionMixin as p } from "../core/mixins.js";
 import { SbbIconNameMixin as f } from "../icon.js";
 const x = d`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;max-width:100%;--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-color-white);--sbb-tag-border-color: var(--sbb-color-cloud);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-charcoal);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host([checked]){--sbb-tag-border-color: var(--sbb-color-charcoal);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host([checked]){--sbb-tag-border-color: Highlight !important}}:host([disabled]){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host([checked][disabled]){--sbb-tag-border-color: var(--sbb-color-metal)}@media (any-hover: hover){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-border-color: Highlight}}:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-iron)}@media (forced-colors: active){:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:pointer;border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([disabled]) .sbb-tag{cursor:unset;pointer-events:none}.sbb-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-body-text) * 1em);flex-shrink:0}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-tag-amount-color)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (t, o, b, a) => {
-  for (var s = a > 1 ? void 0 : a ? _(o, b) : o, i = t.length - 1, n; i >= 0; i--)
-    (n = t[i]) && (s = (a ? n(o, b, s) : n(s)) || s);
-  return a && s && y(o, b, s), s;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (t, e, b, a) => {
+  for (var s = a > 1 ? void 0 : a ? _(e, b) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (s = (a ? n(e, b, s) : n(s)) || s);
+  return a && s && y(e, b, s), s;
 };
-let e = class extends f(
+let o = class extends f(
   p(v)
 ) {
   constructor() {
-    super(...arguments), this.checked = !1, this._size = "m", this._group = null, this._input = new l(this, e.events.input, {
+    super(...arguments), this.checked = !1, this._size = "m", this._group = null, this._input = new l(this, o.events.input, {
       bubbles: !0,
       composed: !0
-    }), this._didChange = new l(this, e.events.didChange, {
+    }), this._didChange = new l(this, o.events.didChange, {
       bubbles: !0
-    }), this._change = new l(this, e.events.change, {
+    }), this._change = new l(this, o.events.change, {
       bubbles: !0
     }), this._abort = new u(this);
   }
@@ -45,8 +45,8 @@ let e = class extends f(
   willUpdate(t) {
     var b;
     super.willUpdate(t), t.has("checked") && this.setAttribute("aria-pressed", `${this.checked}`);
-    const o = (b = this.closest) == null ? void 0 : b.call(this, "sbb-tag-group");
-    o && !o.multiple && t.has("checked") && this.checked && (o == null || o.tags.filter((a) => a !== this).forEach((a) => a.checked = !1));
+    const e = (b = this.closest) == null ? void 0 : b.call(this, "sbb-tag-group");
+    e && !e.multiple && t.has("checked") && this.checked && (e == null || e.tags.filter((a) => a !== this).forEach((a) => a.checked = !1));
   }
   renderTemplate() {
     return g`
@@ -60,25 +60,25 @@ let e = class extends f(
     `;
   }
 };
-e.styles = x;
-e.events = {
+o.styles = x;
+o.events = {
   input: "input",
   didChange: "didChange",
   change: "change"
 };
 r([
   c({ reflect: !0 })
-], e.prototype, "amount", 2);
+], o.prototype, "amount", 2);
 r([
   c({ reflect: !0, type: Boolean })
-], e.prototype, "checked", 2);
+], o.prototype, "checked", 2);
 r([
   c({ reflect: !0 })
-], e.prototype, "size", 1);
-e = r([
+], o.prototype, "size", 1);
+o = r([
   h("sbb-tag"),
   m()
-], e);
+], o);
 export {
-  e as SbbTagElement
+  o as SbbTagElement
 };

package/toggle/toggle/toggle.d.ts

@@ -47,7 +47,6 @@ export declare class SbbToggleElement extends LitElement {
     updatePillPosition(resizing: boolean): void;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
-    disconnectedCallback(): void;
     private _updateToggle;
     private _valueChanged;
     private _updateDisabled;

package/toggle/toggle/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAAmE;IAEhG;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IA6BlC,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAI1B;IAEH;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IA6BlC,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7F,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/toggle/toggle.js

@@ -1,25 +1,29 @@
-import { css as u, LitElement as v, isServer as c, html as m } from "lit";
-import { property as b, customElement as f } from "lit/decorators.js";
-import { interactivityChecker as y, isArrowKeyPressed as w, getNextElementIndex as _ } from "../core/a11y.js";
-import { SbbConnectedAbortController as x } from "../core/controllers.js";
-import { hostAttributes as k } from "../core/decorators.js";
+import { ResizeController as u } from "@lit-labs/observers/resize-controller.js";
+import { css as v, LitElement as m, isServer as c, html as f } from "lit";
+import { property as b, customElement as y } from "lit/decorators.js";
+import { interactivityChecker as w, isArrowKeyPressed as _, getNextElementIndex as x } from "../core/a11y.js";
+import { SbbConnectedAbortController as k } from "../core/controllers.js";
+import { hostAttributes as C } from "../core/decorators.js";
 import { EventEmitter as p } from "../core/eventing.js";
-import { AgnosticResizeObserver as C } from "../core/observers.js";
-const z = u`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity)}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-toggle{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
-var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? E(t, s) : t, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (o = (i ? l(t, s, o) : l(o)) || o);
-  return i && o && P(t, s, o), o;
+const z = v`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity)}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-toggle{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
+var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? E(t, o) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (s = (i ? l(t, o, s) : l(s)) || s);
+  return i && s && P(t, o, s), s;
 };
-let r = class extends v {
+let r = class extends m {
   constructor() {
-    super(...arguments), this._disabled = !1, this.even = !1, this.size = "m", this._value = null, this._loaded = !1, this._toggleResizeObserver = new C(() => this.updatePillPosition(!0)), this._didChange = new p(this, r.events.didChange, {
+    super(...arguments), this._disabled = !1, this.even = !1, this.size = "m", this._value = null, this._loaded = !1, this._toggleResizeObserver = new u(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => this.updatePillPosition(!0)
+    }), this._didChange = new p(this, r.events.didChange, {
       bubbles: !0,
       composed: !0
     }), this._change = new p(this, r.events.change, {
       bubbles: !0,
       composed: !0
-    }), this._abort = new x(this);
+    }), this._abort = new k(this);
   }
   set disabled(e) {
     this._disabled = e, this._updateDisabled();
@@ -32,7 +36,7 @@ let r = class extends v {
   }
   get value() {
     var e, t;
-    return c ? this._value ?? "" : ((e = this.options.find((s) => s.checked)) == null ? void 0 : e.value) ?? ((t = this.options[0]) == null ? void 0 : t.value) ?? "";
+    return c ? this._value ?? "" : ((e = this.options.find((o) => o.checked)) == null ? void 0 : e.value) ?? ((t = this.options[0]) == null ? void 0 : t.value) ?? "";
   }
   /** The child instances of sbb-toggle-option as an array. */
   get options() {
@@ -44,11 +48,11 @@ let r = class extends v {
     var g, h;
     if (!this._loaded)
       return;
-    const t = this.options, s = this.shadowRoot.querySelector(".sbb-toggle");
-    if (t.every((d) => !d.checked) || t.every((d) => !d.clientWidth) || !s)
+    const t = this.options, o = this.shadowRoot.querySelector(".sbb-toggle");
+    if (t.every((d) => !d.checked) || t.every((d) => !d.clientWidth) || !o)
       return;
     this.toggleAttribute("data-disable-animation-on-resizing", e);
-    const i = t[0], o = i.checked, n = i.checked ? "0px" : `${i.clientWidth}px`, l = o ? `${s.clientWidth - i.clientWidth}px` : "0px";
+    const i = t[0], s = i.checked, n = i.checked ? "0px" : `${i.clientWidth}px`, l = s ? `${o.clientWidth - i.clientWidth}px` : "0px";
     (g = this.style) == null || g.setProperty("--sbb-toggle-option-left", n), (h = this.style) == null || h.setProperty("--sbb-toggle-option-right", l);
   }
   connectedCallback() {
@@ -59,17 +63,14 @@ let r = class extends v {
   async firstUpdated(e) {
     super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.updatePillPosition(!1);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._toggleResizeObserver.disconnect();
-  }
   _updateToggle() {
     this._valueChanged(this.value), this._updateDisabled();
   }
   _valueChanged(e) {
-    const t = this.options, s = t.find(
+    const t = this.options, o = t.find(
       (i) => e === ("value" in i ? i.value : i.getAttribute("value"))
     ) ?? t.find((i) => i.checked) ?? t[0];
-    s && (s.checked || (s.checked = !0), this.updatePillPosition(!1));
+    o && (o.checked || (o.checked = !0), this.updatePillPosition(!1));
   }
   _updateDisabled() {
     for (const e of this.options)
@@ -80,20 +81,20 @@ let r = class extends v {
   }
   _handleKeyDown(e) {
     const t = this.options.filter(
-      (s) => !s.disabled && y.isVisible(s)
+      (o) => !o.disabled && w.isVisible(o)
     );
     if (!(!t || // don't trap nested handling
-    e.target !== this && e.target.parentElement !== this) && w(e)) {
-      const s = t.findIndex(
-        (o) => o.checked
-      ), i = _(e, s, t.length);
+    e.target !== this && e.target.parentElement !== this) && _(e)) {
+      const o = t.findIndex(
+        (s) => s.checked
+      ), i = x(e, o, t.length);
       t[i].checked || (t[i].checked = !0, t[i].focus(), t[i].dispatchEvent(
         new InputEvent("input", { bubbles: !0, composed: !0 })
       )), e.preventDefault();
     }
   }
   render() {
-    return m`
+    return f`
       <div class="sbb-toggle">
         <slot @slotchange=${this._updateToggle}></slot>
       </div>
@@ -118,8 +119,8 @@ a([
   b()
 ], r.prototype, "value", 1);
 r = a([
-  f("sbb-toggle"),
-  k({
+  y("sbb-toggle"),
+  C({
     role: "radiogroup"
   })
 ], r);

package/train/train-formation/train-formation.d.ts

@@ -14,12 +14,11 @@ export declare class SbbTrainFormationElement extends SbbTrainFormationElement_b
     hideWagonLabel: boolean;
     private _sectors;
     /** Element that defines the visible content width. */
-    private _formationDiv;
+    private _formationDiv?;
     private _contentResizeObserver;
     private _abort;
     private _language;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
      * Apply width of the scrollable space of the formation as a css variable. This will be used from
      * every slotted sbb-train for the direction-label

package/train/train-formation/train-formation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-formation/train-formation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;;AAUnD;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,6BAGjC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAiB;IAEhE,uCAAuC;IAC2C,cAAc,UACxF;IAEC,OAAO,CAAC,QAAQ,CAA0B;IAEnD,sDAAsD;IACtD,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,sBAAsB,CAA2D;IACzF,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5C;;;OAGG;IACH,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;YA0CN,mBAAmB;cAcd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
+{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-formation/train-formation.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;;AAUnD;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,6BAGjC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAiB;IAEhE,uCAAuC;IAC2C,cAAc,UACxF;IAEC,OAAO,CAAC,QAAQ,CAA0B;IAEnD,sDAAsD;IACtD,OAAO,CAAC,aAAa,CAAC,CAAiB;IACvC,OAAO,CAAC,sBAAsB,CAI3B;IACH,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAOzC;;;OAGG;IACH,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;YA0CN,mBAAmB;cAgBd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}