@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/stepper/stepper.js

@@ -0,0 +1,191 @@
+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 _ } 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 b = 150;
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.linear = !1, this.orientation = "horizontal", this._loaded = !1, this._abort = new _(this), this._resizeObserverTimeout = null;
+  }
+  get horizontalFrom() {
+    return this._horizontalFrom;
+  }
+  set horizontalFrom(e) {
+    this._horizontalFrom = v.includes(e) ? e : void 0, this._horizontalFrom && this._loaded && this._checkOrientation();
+  }
+  set selected(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._loaded && this._select(this.steps[e]);
+  }
+  get selectedIndex() {
+    return this.selected ? this.steps.indexOf(this.selected) : void 0;
+  }
+  /** The steps of the stepper. */
+  get steps() {
+    var e;
+    return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-step")) ?? []);
+  }
+  get _enabledSteps() {
+    return this.steps.filter((e) => {
+      var t;
+      return !((t = e.label) != null && t.hasAttribute("disabled"));
+    });
+  }
+  /** Selects the next step. */
+  next() {
+    this.selectedIndex !== void 0 && this._select(this.steps[this.selectedIndex + 1]);
+  }
+  /** Selects the previous step. */
+  previous() {
+    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() {
+    var t, s, i;
+    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());
+  }
+  _isValidStep(e) {
+    var t;
+    if (!e || !this.linear && ((t = e.label) != null && t.hasAttribute("disabled")))
+      return !1;
+    if (this.linear && !this.selected)
+      return e === this.steps[0];
+    if (this.linear && this.selectedIndex !== void 0) {
+      const s = this.steps.indexOf(e);
+      return s < this.selectedIndex || s === this.selectedIndex + 1;
+    }
+    return !0;
+  }
+  _select(e) {
+    var i, r, a;
+    if (!this._isValidStep(e))
+      return;
+    const t = {
+      currentIndex: this.selectedIndex,
+      currentStep: this.selected,
+      nextIndex: this.selectedIndex !== void 0 ? this.selectedIndex + 1 : void 0,
+      nextStep: this.selectedIndex !== void 0 ? this.steps[this.selectedIndex + 1] : void 0
+    };
+    if (this.selected && !this.selected.validate(t))
+      return;
+    const s = this.selected;
+    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());
+  }
+  _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._calculateLabelOffsetTop();
+    this.style.setProperty("--sbb-stepper-marker-size", `${e}px`);
+  }
+  _calculateLabelOffsetTop() {
+    if (this.selectedIndex === void 0)
+      return;
+    let e = 0;
+    for (const t of this.steps) {
+      if (t === this.selected)
+        break;
+      e = t.label.offsetHeight + e;
+    }
+    return e + this.selected.label.offsetHeight + parseFloat(getComputedStyle(this).getPropertyValue("--sbb-spacing-fixed-6x")) * 16 * this.selectedIndex;
+  }
+  _configure() {
+    const e = this.steps;
+    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]);
+  }
+  _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);
+    });
+  }
+  _checkOrientation() {
+    this.horizontalFrom && (this.orientation = g(this.horizontalFrom) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
+  }
+  _onStepperResize() {
+    this._checkOrientation(), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(
+      () => this.toggleAttribute("data-disable-animation", !1),
+      b
+    );
+  }
+  _configureLinearMode() {
+    this.steps.forEach((e, t) => {
+      var s;
+      (s = e.label) == null || s.toggleAttribute(
+        "disabled",
+        this.linear && t > this.selectedIndex || !this.linear && e.label.hasAttribute("data-disabled")
+      );
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    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._loaded);
+  }
+  async firstUpdated(e) {
+    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._updateLabels(), this._setMarkerSize()), e.has("linear") && this._loaded && this._configureLinearMode();
+  }
+  _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._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._configure}></slot>
+        </div>
+        <div class="sbb-stepper__steps">
+          <slot name="step" @slotchange=${this._configure}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = x;
+n([
+  l({ type: Boolean })
+], o.prototype, "linear", 2);
+n([
+  l({ attribute: "horizontal-from", reflect: !0 })
+], o.prototype, "horizontalFrom", 1);
+n([
+  l({ reflect: !0 })
+], o.prototype, "orientation", 2);
+n([
+  l({ attribute: !1 })
+], o.prototype, "selected", 1);
+n([
+  l({ attribute: "selected-index", type: Number })
+], o.prototype, "selectedIndex", 1);
+o = n([
+  f("sbb-stepper")
+], o);
+export {
+  o as SbbStepperElement
+};

package/stepper.d.ts

@@ -0,0 +1,4 @@
+export * from './stepper/step.js';
+export * from './stepper/step-label.js';
+export * from './stepper/stepper.js';
+//# sourceMappingURL=stepper.d.ts.map

package/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/elements/stepper.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}

package/stepper.js

@@ -0,0 +1,3 @@
+export * from "./stepper/step.js";
+export * from "./stepper/step-label.js";
+export * from "./stepper/stepper.js";

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

@@ -0,0 +1,94 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+
+export interface InterfaceSbbTabGroupActions {
+    activate(): void;
+    deactivate(): void;
+    enable(): void;
+    disable(): void;
+    select(): void;
+}
+export interface InterfaceSbbTabGroupTab extends HTMLElement {
+    active?: boolean;
+    disabled?: boolean;
+    relatedContent?: HTMLElement;
+    index?: number;
+    tabGroupActions?: InterfaceSbbTabGroupActions;
+    size: 's' | 'l' | 'xl';
+}
+/**
+ * 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,
+ * 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
+ */
+export declare class SbbTabGroupElement extends LitElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly didChange: "didChange";
+    };
+    private _tabs;
+    private _selectedTab?;
+    private _tabGroupElement;
+    private _tabContentElement;
+    private _abort;
+    private _tabAttributeObserver;
+    private _tabGroupResizeObserver;
+    private _tabContentResizeObserver;
+    /**
+     * Size variant, either s, l or xl.
+     */
+    set size(value: InterfaceSbbTabGroupTab['size']);
+    get size(): InterfaceSbbTabGroupTab['size'];
+    private _size;
+    /**
+     * Sets the initial tab. If it matches a disabled tab or exceeds the length of
+     * the tab group, the first enabled tab will be selected.
+     */
+    initialSelectedIndex: number;
+    private _updateSize;
+    /**
+     * Emits an event on selected tab change
+     */
+    private _selectedTabChanged;
+    /**
+     * Disables a tab by index.
+     * @param tabIndex The index of the tab you want to disable.
+     */
+    disableTab(tabIndex: number): void;
+    /**
+     * Enables a tab by index.
+     * @param tabIndex The index of the tab you want to enable.
+     */
+    enableTab(tabIndex: number): void;
+    /**
+     * Activates a tab by index.
+     * @param tabIndex The index of the tab you want to activate.
+     */
+    activateTab(tabIndex: number): void;
+    private _getTabs;
+    private get _enabledTabs();
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private _onContentSlotChange;
+    private _onTabsSlotChange;
+    private _assignId;
+    private _initSelection;
+    private _onTabAttributesChange;
+    private _onTabGroupElementResize;
+    private _onTabContentElementResize;
+    private _configure;
+    private _handleKeyDown;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-tab-group': SbbTabGroupElement;
+    }
+}
+//# sourceMappingURL=tab-group.d.ts.map

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

@@ -0,0 +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"}

package/tabs/tab-group.d.ts

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

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

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

package/tabs/tab-group.js

@@ -0,0 +1,196 @@
+import { css as h, LitElement as u, html as f } from "lit";
+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 _ } 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 && E(e, i, a), a;
+};
+const z = {
+  attributeFilter: ["active", "disabled"]
+}, G = ["article", "div", "section", "sbb-tab-group"];
+let S = 0, o = class extends u {
+  constructor() {
+    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._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._tabs = t), this._tabs.forEach((e) => e.setAttribute("data-size", this.size));
+    };
+  }
+  set size(t) {
+    this._size = t, this._updateSize();
+  }
+  get size() {
+    return this._size;
+  }
+  _updateSize() {
+    for (const t of this._tabs)
+      t.setAttribute("data-size", this.size);
+  }
+  /**
+   * Disables a tab by index.
+   * @param tabIndex The index of the tab you want to disable.
+   */
+  disableTab(t) {
+    var e, i;
+    (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.disable();
+  }
+  /**
+   * Enables a tab by index.
+   * @param tabIndex The index of the tab you want to enable.
+   */
+  enableTab(t) {
+    var e, i;
+    (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.enable();
+  }
+  /**
+   * Activates a tab by index.
+   * @param tabIndex The index of the tab you want to activate.
+   */
+  activateTab(t) {
+    var e, i;
+    (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.select();
+  }
+  _getTabs() {
+    return Array.from(this.children ?? []).filter(
+      (t) => /^sbb-tab-title$/u.test(t.localName)
+    );
+  }
+  get _enabledTabs() {
+    return this._tabs.filter((t) => !t.hasAttribute("disabled"));
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback();
+    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._tabs = this._getTabs(), this._tabs.forEach((e) => this._configure(e)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._tabAttributeObserver.disconnect(), this._tabContentResizeObserver.disconnect(), this._tabGroupResizeObserver.disconnect();
+  }
+  _assignId() {
+    return `sbb-tab-panel-${++S}`;
+  }
+  _initSelection() {
+    var t, e, i;
+    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();
+  }
+  _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._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));
+    }
+  }
+  _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._tabGroupElement.clientWidth}px`);
+    }
+  }
+  _onTabContentElementResize(t) {
+    for (const e of t) {
+      const i = Math.floor(e.contentRect.height);
+      this._tabContentElement.style.height = `${i}px`;
+    }
+  }
+  _configure(t) {
+    var e, i;
+    t.tabGroupActions = {
+      activate: () => {
+        var s;
+        t.toggleAttribute("active", !0), t.active = !0, t.tabIndex = 0, t.setAttribute("aria-selected", "true"), (s = t.relatedContent) == null || s.toggleAttribute("active", !0);
+      },
+      deactivate: () => {
+        var s;
+        t.removeAttribute("active"), t.active = !1, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (s = t.relatedContent) == null || s.removeAttribute("active");
+      },
+      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._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._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 && 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._tabAttributeObserver.observe(t, z), t.slot = "tab-bar";
+  }
+  _handleKeyDown(t) {
+    var i, s, a;
+    const e = this._enabledTabs;
+    if (!(!e || // don't trap nested handling
+    t.target !== this && t.target.parentElement !== this) && g(t)) {
+      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();
+    }
+  }
+  render() {
+    return f`
+      <div
+        class="tab-group"
+        role="tablist"
+        ${p((t) => this._tabGroupElement = t)}
+      >
+        <slot name="tab-bar" @slotchange=${this._onTabsSlotChange}></slot>
+      </div>
+
+      <div class="tab-content">
+        <slot @slotchange=${C(this._onContentSlotChange, 150)}></slot>
+      </div>
+    `;
+  }
+};
+o.styles = y;
+o.events = {
+  didChange: "didChange"
+};
+l([
+  d()
+], o.prototype, "size", 1);
+l([
+  d({ attribute: "initial-selected-index", type: Number })
+], o.prototype, "initialSelectedIndex", 2);
+o = l([
+  v("sbb-tab-group")
+], o);
+export {
+  o as SbbTabGroupElement
+};

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

@@ -0,0 +1,32 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../../title.js';
+
+declare const SbbTabTitleElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
+/**
+ * Combined with a `sbb-tab-group`, it displays a tab's title.
+ *
+ * @slot - Use the unnamed slot to add content to the tab title.
+ * @slot icon - Use this slot to display an icon to the left of the title, by providing the `sbb-icon` component.
+ * @slot amount - Provide a number to show an amount to the right of the title.
+ */
+export declare class SbbTabTitleElement extends SbbTabTitleElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The level will correspond to the heading tag generated in the title.
+     * Use this property to generate the appropriate header tag, taking SEO into consideration.
+     */
+    level: SbbTitleLevel;
+    /** Active tab state */
+    active?: boolean;
+    /** Amount displayed inside the tab. */
+    amount?: string;
+    constructor();
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-tab-title': SbbTabTitleElement;
+    }
+}
+export {};
+//# sourceMappingURL=tab-title.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-title.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-title/tab-title.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAIpD;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,uBAA8C;IACpF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,KAAK,EAAE,aAAa,CAAO;IAE9C,uBAAuB;IAC4B,MAAM,CAAC,EAAE,OAAO,CAAC;IAEpE,uCAAuC;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;;cAOjC,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/tabs/tab-title.d.ts

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

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

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

package/tabs/tab-title.js

@@ -0,0 +1,51 @@
+import { css as v, LitElement as f } from "lit";
+import { property as l, customElement as d } from "lit/decorators.js";
+import { html as m, unsafeStatic as c } from "lit/static-html.js";
+import { SbbSlotStateController as p } from "../core/controllers.js";
+import { SbbDisabledMixin as h } from "../core/mixins.js";
+import { SbbIconNameMixin as u } from "../icon.js";
+const g = v`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-title-height: var(--sbb-size-element-m);--sbb-tab-title-color: var(--sbb-color-granite);--sbb-tab-title-icon-color: var(--sbb-color-black);--sbb-tab-title-background-color: var(--sbb-color-white);--sbb-tab-title-cursor: pointer;--sbb-tab-title-pointer-events: unset;--sbb-tab-title-inset: 0;--sbb-tab-title-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-title-marker-transform: scale(0);--sbb-tab-title-text-decoration: none;--sbb-tab-title-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tab-title-animation-easing: var(--sbb-animation-easing);--sbb-tab-title-amount-color: var(--sbb-color-metal);display:inline-block;max-width:100%;pointer-events:var(--sbb-tab-title-pointer-events);-webkit-tap-highlight-color:transparent;outline:none!important}@media (forced-colors: active){:host{--sbb-tab-title-color: ButtonText;--sbb-tab-title-icon-color: ButtonText;--sbb-tab-title-amount-color: ButtonText}}:host([data-size=s]){--sbb-tab-title-height: var(--sbb-size-element-xs);--sbb-tab-title-inline-padding: var(--sbb-spacing-responsive-xxxs)}:host([disabled]){--sbb-tab-title-icon-color: var(--sbb-color-granite);--sbb-tab-title-background-color: var(--sbb-color-milk);--sbb-tab-title-cursor: unset;--sbb-tab-title-pointer-events: none;--sbb-tab-title-text-decoration: line-through}@media (forced-colors: active){:host([disabled]){--sbb-tab-title-color: GrayText;--sbb-tab-title-icon-color: GrayText;--sbb-tab-title-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-title-color: var(--sbb-color-charcoal);--sbb-tab-title-icon-color: var(--sbb-tab-title-color);--sbb-tab-title-background-color: var(--sbb-color-black);--sbb-tab-title-cursor: unset;--sbb-tab-title-pointer-events: none;--sbb-tab-title-marker-transform: scale(1)}@media (forced-colors: active){:host([active]:not([disabled])){--sbb-tab-title-color: ButtonText;--sbb-tab-title-icon-color: ButtonText;--sbb-tab-title-amount-color: ButtonText}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-tab-title-marker-transform: scale(1)}}:host(:is([data-active],:active)){--sbb-tab-title-color: var(--sbb-color-charcoal)}.sbb-tab-title__wrapper{position:relative}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tab-title__wrapper:before{content:"";position:absolute;display:block;inset:calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1);border:var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);border-radius:var(--sbb-border-radius-2x);z-index:1}.sbb-tab-title{position:relative;margin:0;min-height:var(--sbb-tab-title-height);display:flex;align-items:center;padding-inline:var(--sbb-tab-title-inline-padding);gap:var(--sbb-spacing-fixed-2x);-webkit-user-select:none;user-select:none;cursor:var(--sbb-tab-title-cursor);transition:color var(--sbb-tab-title-animation-duration) var(--sbb-tab-title-animation-easing);color:var(--sbb-tab-title-icon-color)}:host([data-has-divider]) .sbb-tab-title:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-color-cloud)}.sbb-tab-title:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:.1875rem;background-color:var(--sbb-tab-title-color);transform:var(--sbb-tab-title-marker-transform);transition-duration:var(--sbb-tab-title-animation-duration);transition-timing-function:var(--sbb-tab-title-animation-easing);transition-property:transform,background-color;z-index:1}.sbb-tab-title__icon,.sbb-tab-title__text,.sbb-tab-title__amount{text-decoration:var(--sbb-tab-title-text-decoration)}.sbb-tab-title__icon{display:flex;flex-shrink:0;color:var(--sbb-tab-title-color);transition:color var(--sbb-tab-title-animation-duration) var(--sbb-tab-title-animation-easing)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tab-title__icon{display:none}.sbb-tab-title__text{--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);font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--sbb-tab-title-color);transition:color var(--sbb-tab-title-animation-duration) var(--sbb-tab-title-animation-easing)}:host([data-size=s]) .sbb-tab-title__text{--sbb-text-font-size: var(--sbb-font-size-text-s);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}:host([data-size=xl]) .sbb-tab-title__text{--sbb-text-font-size: var(--sbb-font-size-text-xl);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}.sbb-tab-title__amount{--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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;color:var(--sbb-tab-title-amount-color);transition:color var(--sbb-tab-title-animation-duration) var(--sbb-tab-title-animation-easing)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tab-title__amount{display:none}:host([data-size=s]) .sbb-tab-title__amount{--sbb-text-font-size: var(--sbb-font-size-text-s);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)}:host([data-size=xl]) .sbb-tab-title__amount{--sbb-text-font-size: var(--sbb-font-size-text-xl);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)}`;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (o, b, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? y(b, s) : b, n = o.length - 1, r; n >= 0; n--)
+    (r = o[n]) && (t = (i ? r(b, s, t) : r(t)) || t);
+  return i && t && x(b, s, t), t;
+};
+let e = class extends h(u(f)) {
+  constructor() {
+    super(), this.level = "1", new p(this);
+  }
+  render() {
+    const o = `h${Number(this.level) < 7 ? this.level : "1"}`;
+    return m`
+      <div class="sbb-tab-title__wrapper">
+        <${c(o)} class="sbb-tab-title">
+          <span class="sbb-tab-title__icon">
+            ${this.renderIconSlot()}
+          </span>
+          <span class="sbb-tab-title__text">
+            <slot></slot>
+          </span>
+          <span class="sbb-tab-title__amount">
+            <slot name="amount">${this.amount}</slot>
+          </span>
+        </${c(o)}>
+      </div>
+    `;
+  }
+};
+e.styles = g;
+a([
+  l()
+], e.prototype, "level", 2);
+a([
+  l({ reflect: !0, type: Boolean })
+], e.prototype, "active", 2);
+a([
+  l({ reflect: !0 })
+], e.prototype, "amount", 2);
+e = a([
+  d("sbb-tab-title")
+], e);
+export {
+  e as SbbTabTitleElement
+};

package/tabs.d.ts

@@ -0,0 +1,3 @@
+export * from './tabs/tab-group.js';
+export * from './tabs/tab-title.js';
+//# sourceMappingURL=tabs.d.ts.map

package/tabs.d.ts.map

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

package/tabs.js

@@ -0,0 +1,2 @@
+export * from "./tabs/tab-group.js";
+export * from "./tabs/tab-title.js";