@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/stepper/step.js

@@ -1,35 +1,35 @@
 import { css as o, LitElement as l, html as p } from "lit";
 import { customElement as h } from "lit/decorators.js";
-import { ref as c } from "lit/directives/ref.js";
-import { SbbConnectedAbortController as d } from "../core/controllers.js";
+import { ref as d } from "lit/directives/ref.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, y = Object.getOwnPropertyDescriptor, x = (t, i, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? y(i, a) : i, b = t.length - 1, r; b >= 0; b--)
-    (r = t[b]) && (e = (s ? r(i, a, e) : r(e)) || e);
-  return s && e && g(i, a, e), e;
+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--)
+    (b = t[r]) && (e = (i ? b(s, a, e) : b(e)) || e);
+  return i && e && g(s, a, e), e;
 };
-let w = 0, n = class extends l {
+let x = 0, n = class extends l {
   constructor() {
-    super(...arguments), this.f = new m(
+    super(...arguments), this._validate = new m(
       this,
       n.events.validate
-    ), this.c = !1, this.g = new d(this), this.a = null, this.b = null, this.d = new u(
-      (t) => this.h(t)
+    ), this._loaded = !1, this._abort = new c(this), this._stepper = null, this._label = null, this._stepResizeObserver = new u(
+      (t) => this._onStepElementResize(t)
     );
   }
   /** The label of the step. */
   get label() {
-    return this.b;
+    return this._label;
   }
   /**
    * Selects and configures the step.
    * @internal
    */
   select() {
-    !this.c || !this.label || (this.toggleAttribute("data-selected", !0), this.label.select());
+    !this._loaded || !this.label || (this.toggleAttribute("data-selected", !0), this.label.select());
   }
   /**
    * Deselects and configures the step.
@@ -43,35 +43,35 @@ let w = 0, n = class extends l {
    * @internal
    */
   validate(t) {
-    return !!this.f.emit(t);
+    return !!this._validate.emit(t);
   }
   /**
    * Configures the step.
    * @internal
    */
   configure(t) {
-    t && (this.b = this.e()), this.label && this.setAttribute("aria-labelledby", this.label.id);
+    t && (this._label = this._getStepLabel()), this.label && this.setAttribute("aria-labelledby", this.label.id);
   }
   /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
-  i(t) {
-    var a, s;
-    const i = t.composedPath().filter((e) => e instanceof window.HTMLElement);
-    i.some((e) => this.j(e)) ? (a = this.a) == null || a.next() : i.some((e) => this.k(e)) && ((s = this.a) == null || s.previous());
+  _handleClick(t) {
+    var a, i;
+    const s = t.composedPath().filter((e) => e instanceof window.HTMLElement);
+    s.some((e) => this._isGoNextElement(e)) ? (a = this._stepper) == null || a.next() : s.some((e) => this._isGoPreviousElement(e)) && ((i = this._stepper) == null || i.previous());
   }
-  j(t) {
+  _isGoNextElement(t) {
     return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
   }
-  k(t) {
+  _isGoPreviousElement(t) {
     return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
   }
-  h(t) {
-    var a, s;
+  _onStepElementResize(t) {
+    var a, i;
     if (!this.hasAttribute("data-selected"))
       return;
-    const i = Math.floor(t[0].contentRect.height);
-    (s = (a = this.a) == null ? void 0 : a.style) == null || s.setProperty("--sbb-stepper-content-height", `${i}px`);
+    const s = Math.floor(t[0].contentRect.height);
+    (i = (a = this._stepper) == null ? void 0 : a.style) == null || i.setProperty("--sbb-stepper-content-height", `${s}px`);
   }
-  e() {
+  _getStepLabel() {
     let t = this.previousElementSibling;
     for (; t && t.localName !== "sbb-step-label"; )
       t = t.previousElementSibling;
@@ -79,21 +79,21 @@ let w = 0, n = class extends l {
   }
   connectedCallback() {
     super.connectedCallback();
-    const t = this.g.signal;
-    this.id = this.id || `sbb-step-${w++}`, this.addEventListener("click", (i) => this.i(i), { signal: t }), this.a = this.closest("sbb-stepper"), this.b = this.e();
+    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();
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this.c = !0;
+    super.firstUpdated(t), this._loaded = !0;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.d.disconnect();
+    super.disconnectedCallback(), this._stepResizeObserver.disconnect();
   }
   render() {
     return p`
       <div class="sbb-step--wrapper">
         <div
           class="sbb-step"
-          ${c((t) => t && this.d.observe(t))}
+          ${d((t) => t && this._stepResizeObserver.observe(t))}
         >
           <slot></slot>
         </div>
@@ -105,7 +105,7 @@ n.styles = f;
 n.events = {
   validate: "validate"
 };
-n = x([
+n = y([
   h("sbb-step"),
   v({
     slot: "step",

package/stepper/stepper.js

@@ -1,34 +1,34 @@
 import { css as h, LitElement as p, html as c } from "lit";
 import { property as l, customElement as f } from "lit/decorators.js";
 import { isArrowKeyPressed as u, getNextElementIndex as m } from "../core/a11y.js";
-import { SbbConnectedAbortController as v } from "../core/controllers.js";
-import { breakpoints as x, isBreakpoint as g } from "../core/dom.js";
-const _ = h`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-charcoal);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:space-between;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-fixed-4x);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`;
-var w = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? I(t, s) : t, a = e.length - 1, b; a >= 0; a--)
-    (b = e[a]) && (r = (i ? b(t, s, r) : b(r)) || r);
-  return i && r && w(t, s, r), r;
+import { SbbConnectedAbortController as _ } from "../core/controllers.js";
+import { breakpoints as v, isBreakpoint as g } from "../core/dom.js";
+const x = h`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-charcoal);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:space-between;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-fixed-4x);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`;
+var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? w(t, s) : t, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (r = (i ? d(t, s, r) : d(r)) || r);
+  return i && r && z(t, s, r), r;
 };
-const d = 150;
+const b = 150;
 let o = class extends p {
   constructor() {
-    super(...arguments), this.linear = !1, this.orientation = "horizontal", this.a = !1, this.k = new v(this), this.g = null;
+    super(...arguments), this.linear = !1, this.orientation = "horizontal", this._loaded = !1, this._abort = new _(this), this._resizeObserverTimeout = null;
   }
   set horizontalFrom(e) {
-    this.c = x.includes(e) ? e : void 0, this.c && this.a && this.d();
+    this._horizontalFrom = v.includes(e) ? e : void 0, this._horizontalFrom && this._loaded && this._checkOrientation();
   }
   get horizontalFrom() {
-    return this.c;
+    return this._horizontalFrom;
   }
   set selected(e) {
-    this.a && this.b(e);
+    this._loaded && this._select(e);
   }
   get selected() {
     var e;
     return ((e = this.querySelector) == null ? void 0 : e.call(this, "sbb-step[data-selected]")) ?? void 0;
   }
   set selectedIndex(e) {
-    this.a && this.b(this.steps[e]);
+    this._loaded && this._select(this.steps[e]);
   }
   get selectedIndex() {
     return this.selected ? this.steps.indexOf(this.selected) : void 0;
@@ -38,7 +38,7 @@ let o = class extends p {
     var e;
     return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-step")) ?? []);
   }
-  get f() {
+  get _enabledSteps() {
     return this.steps.filter((e) => {
       var t;
       return !((t = e.label) != null && t.hasAttribute("disabled"));
@@ -46,11 +46,11 @@ let o = class extends p {
   }
   /** Selects the next step. */
   next() {
-    this.selectedIndex !== void 0 && this.b(this.steps[this.selectedIndex + 1]);
+    this.selectedIndex !== void 0 && this._select(this.steps[this.selectedIndex + 1]);
   }
   /** Selects the previous step. */
   previous() {
-    this.selectedIndex !== void 0 && this.b(this.steps[this.selectedIndex - 1]);
+    this.selectedIndex !== void 0 && this._select(this.steps[this.selectedIndex - 1]);
   }
   /** Resets the form in which the stepper is nested or every form of each step, if any. */
   reset() {
@@ -58,7 +58,7 @@ let o = class extends p {
     const e = this.closest("form");
     e ? e.reset() : this.querySelectorAll("form").forEach((r) => r.reset()), this.selectedIndex = 0, ((t = document.activeElement) == null ? void 0 : t.closest("sbb-stepper")) === this && ((i = (s = this.selected) == null ? void 0 : s.label) == null || i.focus());
   }
-  l(e) {
+  _isValidStep(e) {
     var t;
     if (!e || !this.linear && ((t = e.label) != null && t.hasAttribute("disabled")))
       return !1;
@@ -70,9 +70,9 @@ let o = class extends p {
     }
     return !0;
   }
-  b(e) {
+  _select(e) {
     var i, r, a;
-    if (!this.l(e))
+    if (!this._isValidStep(e))
       return;
     const t = {
       currentIndex: this.selectedIndex,
@@ -83,15 +83,15 @@ let o = class extends p {
     if (this.selected && !this.selected.validate(t))
       return;
     const s = this.selected;
-    s == null || s.deselect(), e.select(), this.e(), this.h(), ((i = document.activeElement) == null ? void 0 : i.closest("sbb-stepper")) === this && ((a = (r = this.selected) == null ? void 0 : r.label) == null || a.focus());
+    s == null || s.deselect(), e.select(), this._setMarkerSize(), this._configureLinearMode(), ((i = document.activeElement) == null ? void 0 : i.closest("sbb-stepper")) === this && ((a = (r = this.selected) == null ? void 0 : r.label) == null || a.focus());
   }
-  e() {
-    if (!this.a || !this.selected || this.selectedIndex === void 0 || !this.selected.label)
+  _setMarkerSize() {
+    if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label)
       return;
-    const e = this.orientation === "horizontal" ? this.selected.label.offsetLeft + this.selected.label.offsetWidth : this.m();
+    const e = this.orientation === "horizontal" ? this.selected.label.offsetLeft + this.selected.label.offsetWidth : this._calculateLabelOffsetTop();
     this.style.setProperty("--sbb-stepper-marker-size", `${e}px`);
   }
-  m() {
+  _calculateLabelOffsetTop() {
     if (this.selectedIndex === void 0)
       return;
     let e = 0;
@@ -102,28 +102,28 @@ let o = class extends p {
     }
     return e + this.selected.label.offsetHeight + parseFloat(getComputedStyle(this).getPropertyValue("--sbb-spacing-fixed-6x")) * 16 * this.selectedIndex;
   }
-  i() {
+  _configure() {
     const e = this.steps;
-    e.forEach((t) => t.configure(this.a)), e.filter((t) => t.label).map((t) => t.label).forEach((t, s, i) => {
-      t.configure(s + 1, i.length, this.a);
-    }), this.b(this.selected || this.f[0]);
+    e.forEach((t) => t.configure(this._loaded)), e.filter((t) => t.label).map((t) => t.label).forEach((t, s, i) => {
+      t.configure(s + 1, i.length, this._loaded);
+    }), this._select(this.selected || this._enabledSteps[0]);
   }
-  j() {
+  _updateLabels() {
     this.steps.forEach((e) => {
       var t;
       e.slot = this.orientation === "horizontal" ? "step" : "step-label", e.setAttribute("data-orientation", this.orientation), (t = e.label) == null || t.setAttribute("data-orientation", this.orientation);
     });
   }
-  d() {
-    this.horizontalFrom && (this.orientation = g(this.horizontalFrom) ? "horizontal" : "vertical", this.j()), setTimeout(() => this.e(), 0);
+  _checkOrientation() {
+    this.horizontalFrom && (this.orientation = g(this.horizontalFrom) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
   }
-  n() {
-    this.d(), clearTimeout(this.g), this.toggleAttribute("data-disable-animation", !0), this.g = setTimeout(
+  _onStepperResize() {
+    this._checkOrientation(), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(
       () => this.toggleAttribute("data-disable-animation", !1),
-      d
+      b
     );
   }
-  h() {
+  _configureLinearMode() {
     this.steps.forEach((e, t) => {
       var s;
       (s = e.label) == null || s.toggleAttribute(
@@ -134,40 +134,40 @@ let o = class extends p {
   }
   connectedCallback() {
     super.connectedCallback();
-    const e = this.k.signal;
-    this.addEventListener("keydown", (t) => this.o(t), { signal: e }), window.addEventListener("resize", () => this.n(), {
+    const e = this._abort.signal;
+    this.addEventListener("keydown", (t) => this._handleKeyDown(t), { signal: e }), window.addEventListener("resize", () => this._onStepperResize(), {
       signal: e,
       passive: !0
-    }), this.toggleAttribute("data-disable-animation", !this.a);
+    }), this.toggleAttribute("data-disable-animation", !this._loaded);
   }
   async firstUpdated(e) {
-    super.firstUpdated(e), await this.updateComplete, this.a = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this.d(), setTimeout(() => this.toggleAttribute("data-disable-animation", !1), d);
+    super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this._checkOrientation(), setTimeout(() => this.toggleAttribute("data-disable-animation", !1), b);
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("orientation") && !this.horizontalFrom && (this.j(), this.e()), e.has("linear") && this.a && this.h();
+    super.willUpdate(e), e.has("orientation") && !this.horizontalFrom && (this._updateLabels(), this._setMarkerSize()), e.has("linear") && this._loaded && this._configureLinearMode();
   }
-  o(e) {
-    const t = this.f;
+  _handleKeyDown(e) {
+    const t = this._enabledSteps;
     if (!(!t || // don't trap nested handling
     e.target !== this && e.target.parentElement !== this) && u(e)) {
       const s = t.indexOf(this.selected), i = m(e, s, t.length);
-      this.b(t[i]), e.preventDefault();
+      this._select(t[i]), e.preventDefault();
     }
   }
   render() {
     return c`
       <div class="sbb-stepper">
         <div class="sbb-stepper__labels" role="tablist">
-          <slot name="step-label" @slotchange=${this.i}></slot>
+          <slot name="step-label" @slotchange=${this._configure}></slot>
         </div>
         <div class="sbb-stepper__steps">
-          <slot name="step" @slotchange=${this.i}></slot>
+          <slot name="step" @slotchange=${this._configure}></slot>
         </div>
       </div>
     `;
   }
 };
-o.styles = _;
+o.styles = x;
 n([
   l({ type: Boolean })
 ], o.prototype, "linear", 2);

package/tabs/tab-group.js

@@ -1,50 +1,50 @@
 import { css as h, LitElement as u, html as f } from "lit";
-import { property as c, customElement as v } from "lit/decorators.js";
+import { property as d, customElement as v } from "lit/decorators.js";
 import { ref as p } 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 x, throttle as y } from "../core/eventing.js";
-import { AgnosticMutationObserver as C, AgnosticResizeObserver as d } from "../core/observers.js";
-const E = h`@charset "UTF-8";*,: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:after,.tab-content:before{content:" ";display:block;visibility:hidden;height:0}.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)}:host([data-nested]:not([active])) *,:host([data-nested]:not([active])) ::slotted(*){visibility:hidden;opacity:0;height:0}`;
-var w = Object.defineProperty, G = Object.getOwnPropertyDescriptor, l = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? G(e, i) : e, n = t.length - 1, r; n >= 0; n--)
+import { isArrowKeyPressed as g, getNextElementIndex as _ } from "../core/a11y.js";
+import { SbbConnectedAbortController as m } from "../core/controllers.js";
+import { EventEmitter as A, throttle as C } from "../core/eventing.js";
+import { AgnosticMutationObserver as T, AgnosticResizeObserver as b } from "../core/observers.js";
+const y = h`@charset "UTF-8";*,: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:after,.tab-content:before{content:" ";display:block;visibility:hidden;height:0}.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)}:host([data-nested]:not([active])) *,:host([data-nested]:not([active])) ::slotted(*){visibility:hidden;opacity:0;height:0}`;
+var E = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? x(e, i) : e, n = t.length - 1, r; n >= 0; n--)
     (r = t[n]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && w(e, i, a), a;
+  return s && a && E(e, i, a), a;
 };
-const S = {
+const z = {
   attributeFilter: ["active", "disabled"]
-}, T = ["article", "div", "section", "sbb-tab-group"];
-let I = 0, o = class extends u {
+}, G = ["article", "div", "section", "sbb-tab-group"];
+let S = 0, o = class extends u {
   constructor() {
-    super(...arguments), this.a = [], this.l = new A(this), this.h = new C(
-      (t) => this.m(t)
-    ), this.i = new d(
-      (t) => this.n(t)
-    ), this.d = new d(
-      (t) => this.o(t)
-    ), this.j = "l", this.initialSelectedIndex = 0, this.q = new x(
+    super(...arguments), this._tabs = [], this._abort = new m(this), this._tabAttributeObserver = new T(
+      (t) => this._onTabAttributesChange(t)
+    ), this._tabGroupResizeObserver = new b(
+      (t) => this._onTabGroupElementResize(t)
+    ), this._tabContentResizeObserver = new b(
+      (t) => this._onTabContentElementResize(t)
+    ), this._size = "l", this.initialSelectedIndex = 0, this._selectedTabChanged = new A(
       this,
       o.events.didChange
-    ), this.t = () => {
-      this.g = this.shadowRoot.querySelector("div.tab-content");
-      const t = this.e().filter((e) => !this.a.includes(e));
-      t.length && (t.forEach((e) => this.k(e)), this.a = this.a.concat(t));
-    }, this.u = () => {
-      const t = this.e();
-      t.length < this.a.length && (this.a.filter((i) => !t.includes(i)).forEach((i) => {
+    ), this._onContentSlotChange = () => {
+      this._tabContentElement = this.shadowRoot.querySelector("div.tab-content");
+      const t = this._getTabs().filter((e) => !this._tabs.includes(e));
+      t.length && (t.forEach((e) => this._configure(e)), this._tabs = this._tabs.concat(t));
+    }, this._onTabsSlotChange = () => {
+      const t = this._getTabs();
+      t.length < this._tabs.length && (this._tabs.filter((i) => !t.includes(i)).forEach((i) => {
         var s;
         (s = i.relatedContent) == null || s.remove();
-      }), this.a = t), this.a.forEach((e) => e.setAttribute("data-size", this.size));
+      }), this._tabs = t), this._tabs.forEach((e) => e.setAttribute("data-size", this.size));
     };
   }
   set size(t) {
-    this.j = t, this.p();
+    this._size = t, this._updateSize();
   }
   get size() {
-    return this.j;
+    return this._size;
   }
-  p() {
-    for (const t of this.a)
+  _updateSize() {
+    for (const t of this._tabs)
       t.setAttribute("data-size", this.size);
   }
   /**
@@ -53,7 +53,7 @@ let I = 0, o = class extends u {
    */
   disableTab(t) {
     var e, i;
-    (i = (e = this.a[t]) == null ? void 0 : e.tabGroupActions) == null || i.disable();
+    (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.disable();
   }
   /**
    * Enables a tab by index.
@@ -61,7 +61,7 @@ let I = 0, o = class extends u {
    */
   enableTab(t) {
     var e, i;
-    (i = (e = this.a[t]) == null ? void 0 : e.tabGroupActions) == null || i.enable();
+    (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.enable();
   }
   /**
    * Activates a tab by index.
@@ -69,61 +69,61 @@ let I = 0, o = class extends u {
    */
   activateTab(t) {
     var e, i;
-    (i = (e = this.a[t]) == null ? void 0 : e.tabGroupActions) == null || i.select();
+    (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.select();
   }
-  e() {
+  _getTabs() {
     return Array.from(this.children ?? []).filter(
       (t) => /^sbb-tab-title$/u.test(t.localName)
     );
   }
-  get f() {
-    return this.a.filter((t) => !t.hasAttribute("disabled"));
+  get _enabledTabs() {
+    return this._tabs.filter((t) => !t.hasAttribute("disabled"));
   }
   connectedCallback() {
     var e;
     super.connectedCallback();
-    const t = this.l.signal;
-    this.addEventListener("keydown", (i) => this.r(i), { signal: t }), this.toggleAttribute("data-nested", !!((e = this.parentElement) != null && e.closest("sbb-tab-group")));
+    const t = this._abort.signal;
+    this.addEventListener("keydown", (i) => this._handleKeyDown(i), { signal: t }), this.toggleAttribute("data-nested", !!((e = this.parentElement) != null && e.closest("sbb-tab-group")));
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this.a = this.e(), this.a.forEach((e) => this.k(e)), this.s(), this.i.observe(this.c);
+    super.firstUpdated(t), this._tabs = this._getTabs(), this._tabs.forEach((e) => this._configure(e)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.h.disconnect(), this.d.disconnect(), this.i.disconnect();
+    super.disconnectedCallback(), this._tabAttributeObserver.disconnect(), this._tabContentResizeObserver.disconnect(), this._tabGroupResizeObserver.disconnect();
   }
-  v() {
-    return `sbb-tab-panel-${++I}`;
+  _assignId() {
+    return `sbb-tab-panel-${++S}`;
   }
-  s() {
+  _initSelection() {
     var t, e, i;
-    this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this.a.length && !this.a[this.initialSelectedIndex].disabled ? (t = this.a[this.initialSelectedIndex].tabGroupActions) == null || t.select() : (i = (e = this.f[0]) == null ? void 0 : e.tabGroupActions) == null || i.select();
+    this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this._tabs.length && !this._tabs[this.initialSelectedIndex].disabled ? (t = this._tabs[this.initialSelectedIndex].tabGroupActions) == null || t.select() : (i = (e = this._enabledTabs[0]) == null ? void 0 : e.tabGroupActions) == null || i.select();
   }
-  m(t) {
+  _onTabAttributesChange(t) {
     var e, i, s;
     for (const a of t) {
       if (a.type !== "attributes")
         return;
       const n = a.target;
-      a.attributeName === "disabled" && (n.hasAttribute("disabled") && n !== this.b ? (e = n.tabGroupActions) == null || e.disable() : n.disabled && ((i = n.tabGroupActions) == null || i.enable())), a.attributeName === "active" && (n.hasAttribute("active") && !n.disabled ? (s = n.tabGroupActions) == null || s.select() : n === this.b && n.toggleAttribute("active", !0));
+      a.attributeName === "disabled" && (n.hasAttribute("disabled") && n !== this._selectedTab ? (e = n.tabGroupActions) == null || e.disable() : n.disabled && ((i = n.tabGroupActions) == null || i.enable())), a.attributeName === "active" && (n.hasAttribute("active") && !n.disabled ? (s = n.tabGroupActions) == null || s.select() : n === this._selectedTab && n.toggleAttribute("active", !0));
     }
   }
-  n(t) {
+  _onTabGroupElementResize(t) {
     for (const e of t) {
       const i = e.target.firstElementChild.assignedElements();
       for (const s of i)
         s.toggleAttribute(
           "data-has-divider",
           s === i[0] || s.offsetLeft === i[0].offsetLeft
-        ), this.style.setProperty("--sbb-tab-group-width", `${this.c.clientWidth}px`);
+        ), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
     }
   }
-  o(t) {
+  _onTabContentElementResize(t) {
     for (const e of t) {
       const i = Math.floor(e.contentRect.height);
-      this.g.style.height = `${i}px`;
+      this._tabContentElement.style.height = `${i}px`;
     }
   }
-  k(t) {
+  _configure(t) {
     var e, i;
     t.tabGroupActions = {
       activate: () => {
@@ -136,29 +136,29 @@ let I = 0, o = class extends u {
       },
       disable: () => {
         var s, a, n;
-        t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (s = t.relatedContent) == null || s.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, (n = (a = this.f[0]) == null ? void 0 : a.tabGroupActions) == null || n.select()));
+        t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (s = t.relatedContent) == null || s.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, (n = (a = this._enabledTabs[0]) == null ? void 0 : a.tabGroupActions) == null || n.select()));
       },
       enable: () => {
         t.disabled && (t.removeAttribute("disabled"), t.disabled = !1);
       },
       select: () => {
         var s, a;
-        if (t !== this.b && !t.disabled) {
-          const n = this.b;
-          n && ((s = n.tabGroupActions) == null || s.deactivate(), this.d.unobserve(n.relatedContent)), (a = t.tabGroupActions) == null || a.activate(), this.b = t, this.d.observe(t.relatedContent), this.q.emit();
+        if (t !== this._selectedTab && !t.disabled) {
+          const n = this._selectedTab;
+          n && ((s = n.tabGroupActions) == null || s.deactivate(), this._tabContentResizeObserver.unobserve(n.relatedContent)), (a = t.tabGroupActions) == null || a.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.relatedContent), this._selectedTabChanged.emit();
         }
       }
-    }, (e = t.nextElementSibling) != null && e.localName && T.includes((i = t.nextElementSibling) == null ? void 0 : i.localName) ? (t.relatedContent = t.nextElementSibling, t.relatedContent.id = this.v(), t.relatedContent.nodeName !== "SBB-TAB-GROUP" && (t.relatedContent.tabIndex = 0)) : (t.insertAdjacentHTML("afterend", "<div>No content.</div>"), t.relatedContent = t.nextElementSibling), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-controls", t.relatedContent.id), t.setAttribute("aria-selected", "false"), t.relatedContent.setAttribute("role", "tabpanel"), t.relatedContent.toggleAttribute("active", t.active), t.addEventListener("click", () => {
+    }, (e = t.nextElementSibling) != null && e.localName && G.includes((i = t.nextElementSibling) == null ? void 0 : i.localName) ? (t.relatedContent = t.nextElementSibling, t.relatedContent.id = this._assignId(), t.relatedContent.nodeName !== "SBB-TAB-GROUP" && (t.relatedContent.tabIndex = 0)) : (t.insertAdjacentHTML("afterend", "<div>No content.</div>"), t.relatedContent = t.nextElementSibling), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-controls", t.relatedContent.id), t.setAttribute("aria-selected", "false"), t.relatedContent.setAttribute("role", "tabpanel"), t.relatedContent.toggleAttribute("active", t.active), t.addEventListener("click", () => {
       var s;
       (s = t.tabGroupActions) == null || s.select();
-    }), this.h.observe(t, S), t.slot = "tab-bar";
+    }), this._tabAttributeObserver.observe(t, z), t.slot = "tab-bar";
   }
-  r(t) {
+  _handleKeyDown(t) {
     var i, s, a;
-    const e = this.f;
+    const e = this._enabledTabs;
     if (!(!e || // don't trap nested handling
     t.target !== this && t.target.parentElement !== this) && g(t)) {
-      const n = e.findIndex((b) => b.active), r = m(t, n, e.length);
+      const n = e.findIndex((c) => c.active), r = _(t, n, e.length);
       (s = (i = e[r]) == null ? void 0 : i.tabGroupActions) == null || s.select(), (a = e[r]) == null || a.focus(), t.preventDefault();
     }
   }
@@ -167,26 +167,26 @@ let I = 0, o = class extends u {
       <div
         class="tab-group"
         role="tablist"
-        ${p((t) => this.c = t)}
+        ${p((t) => this._tabGroupElement = t)}
       >
-        <slot name="tab-bar" @slotchange=${this.u}></slot>
+        <slot name="tab-bar" @slotchange=${this._onTabsSlotChange}></slot>
       </div>
 
       <div class="tab-content">
-        <slot @slotchange=${y(this.t, 150)}></slot>
+        <slot @slotchange=${C(this._onContentSlotChange, 150)}></slot>
       </div>
     `;
   }
 };
-o.styles = E;
+o.styles = y;
 o.events = {
   didChange: "didChange"
 };
 l([
-  c()
+  d()
 ], o.prototype, "size", 1);
 l([
-  c({ attribute: "initial-selected-index", type: Number })
+  d({ attribute: "initial-selected-index", type: Number })
 ], o.prototype, "initialSelectedIndex", 2);
 o = l([
   v("sbb-tab-group")