@sbb-esta/lyne-elements 0.52.1 → 0.53.0

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/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tab.js';
+//# sourceMappingURL=index.d.ts.map

package/tabs/tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/tabs/tab/tab.d.ts

@@ -0,0 +1,24 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbTabLabelElement } from '../tab-label.js';
+
+/**
+ * Combined with a `sbb-tab-group`, it displays a tab's content.
+ *
+ * @slot - Use the unnamed slot to provide content.
+ */
+export declare class SbbTabElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** The `sbb-tab-label` associated with the tab. */
+    get label(): SbbTabLabelElement | null;
+    private _label;
+    private _getTabLabel;
+    /** @internal */
+    configure(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-tab': SbbTabElement;
+    }
+}
+//# sourceMappingURL=tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab/tab.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAI1D;;;;GAIG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mDAAmD;IACnD,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE5C;IACD,OAAO,CAAC,MAAM,CAAmC;IAEjD,OAAO,CAAC,YAAY;IAQpB,gBAAgB;IACT,SAAS,IAAI,IAAI;cAIL,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

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

@@ -1,5 +1,16 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbTabLabelElement } from '../tab-label.js';
+import { SbbTabElement } from '../tab.js';
 
+export type SbbTabSupportedContentType = SbbTabElement | SbbTabGroupElement;
+export type SbbTabChangedEventDetails = {
+    activeIndex: number;
+    activeTabLabel: SbbTabLabelElement;
+    activeTab: SbbTabElement;
+    previousIndex: number;
+    previousTabLabel: SbbTabLabelElement | undefined;
+    previousTab: SbbTabElement | undefined;
+};
 export interface InterfaceSbbTabGroupActions {
     activate(): void;
     deactivate(): void;
@@ -7,10 +18,10 @@ export interface InterfaceSbbTabGroupActions {
     disable(): void;
     select(): void;
 }
-export interface InterfaceSbbTabGroupTab extends HTMLElement {
+export interface InterfaceSbbTabGroupTab extends SbbTabLabelElement {
     active?: boolean;
-    disabled?: boolean;
-    relatedContent?: HTMLElement;
+    disabled: boolean;
+    relatedContent?: SbbTabSupportedContentType;
     index?: number;
     tabGroupActions?: InterfaceSbbTabGroupActions;
     size: 's' | 'l' | 'xl';
@@ -18,13 +29,11 @@ export interface InterfaceSbbTabGroupTab extends HTMLElement {
 /**
  * It displays one or more tab, each one with a title and a content.
  *
- * @slot - Use the unnamed slot to add html-content to the `sbb-tab-group`.
- * Wrap the content in a `div`, a `section`, an `article` or provide a nested `sbb-tab-group`:
- * This is correct: `<div>Some text <p>Some other text</p></div>`
- * This is not correct: `<span>Some text</span><p>Some other text</p>`
- * @slot tab-bar - When you provide the `sbb-tab-title` tag through the unnamed slot,
+ * @slot - Use the unnamed slot to add html-content to the `sbb-tab-group`;
+ * wrap the content in a `sbb-tab` or provide a nested `sbb-tab-group`.
+ * @slot tab-bar - When you provide the `sbb-tab-label` tag through the unnamed slot,
  * it will be automatically moved to this slot. You do not need to use it directly.
- * @event {CustomEvent<void>} didChange - Emits an event on selected tab change
+ * @event {CustomEvent<SbbTabChangedEventDetails>} didChange - Emits an event on selected tab change.
  */
 export declare class SbbTabGroupElement extends LitElement {
     static styles: CSSResultGroup;
@@ -39,9 +48,7 @@ export declare class SbbTabGroupElement extends LitElement {
     private _tabAttributeObserver;
     private _tabGroupResizeObserver;
     private _tabContentResizeObserver;
-    /**
-     * Size variant, either s, l or xl.
-     */
+    /** Size variant, either s, l or xl. */
     set size(value: InterfaceSbbTabGroupTab['size']);
     get size(): InterfaceSbbTabGroupTab['size'];
     private _size;
@@ -51,9 +58,7 @@ export declare class SbbTabGroupElement extends LitElement {
      */
     initialSelectedIndex: number;
     private _updateSize;
-    /**
-     * Emits an event on selected tab change
-     */
+    /** Emits an event on selected tab change. */
     private _selectedTabChanged;
     /**
      * Disables a tab by index.

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;AAYvC,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,WAAW;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;AAUD;;;;;;;;;;GAUG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,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;;OAEG;IACH,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,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAGzB;IAEF;;;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,KAAK,YAAY,GAEvB;IAEe,iBAAiB,IAAI,IAAI;cAOtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAO5C,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;IA4FlB,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":"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"}