@sbb-esta/lyne-elements 0.52.2 → 1.0.0

package/tabs/tab-group.js

@@ -1,30 +1,31 @@
 import { css as h, LitElement as u, html as f } from "lit";
-import { property as d, customElement as v } from "lit/decorators.js";
+import { property as c, 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";
+import { AgnosticMutationObserver as T, AgnosticResizeObserver as d } from "../core/observers.js";
+import { SbbTabElement as x } from "./tab.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);
+var E = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? z(e, i) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (a = (s ? o(e, i, a) : o(a)) || a);
   return s && a && E(e, i, a), a;
 };
-const z = {
+const G = {
   attributeFilter: ["active", "disabled"]
-}, G = ["article", "div", "section", "sbb-tab-group"];
-let S = 0, o = class extends u {
+}, S = ["sbb-tab", "sbb-tab-group"];
+let I = 0, r = 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(
+    ), this._tabGroupResizeObserver = new d(
       (t) => this._onTabGroupElementResize(t)
-    ), this._tabContentResizeObserver = new b(
+    ), this._tabContentResizeObserver = new d(
       (t) => this._onTabContentElementResize(t)
     ), this._size = "l", this.initialSelectedIndex = 0, this._selectedTabChanged = new A(
       this,
-      o.events.didChange
+      r.events.didChange
     ), this._onContentSlotChange = () => {
       this._tabContentElement = this.shadowRoot.querySelector("div.tab-content");
       const t = this._getTabs().filter((e) => !this._tabs.includes(e));
@@ -73,7 +74,7 @@ let S = 0, o = class extends u {
   }
   _getTabs() {
     return Array.from(this.children ?? []).filter(
-      (t) => /^sbb-tab-title$/u.test(t.localName)
+      (t) => /^sbb-tab-label$/u.test(t.localName)
     );
   }
   get _enabledTabs() {
@@ -92,7 +93,7 @@ let S = 0, o = class extends u {
     super.disconnectedCallback(), this._tabAttributeObserver.disconnect(), this._tabContentResizeObserver.disconnect(), this._tabGroupResizeObserver.disconnect();
   }
   _assignId() {
-    return `sbb-tab-panel-${++S}`;
+    return `sbb-tab-panel-${++I}`;
   }
   _initSelection() {
     var t, e, i;
@@ -145,21 +146,30 @@ let S = 0, o = class extends u {
         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();
+          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);
+          const o = this._tabs;
+          this._selectedTabChanged.emit({
+            activeIndex: o.findIndex((l) => l === t),
+            activeTabLabel: t,
+            activeTab: t.relatedContent,
+            previousIndex: o.findIndex((l) => l === n),
+            previousTabLabel: n,
+            previousTab: n == null ? void 0 : n.relatedContent
+          });
         }
       }
-    }, (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", () => {
+    }, (e = t.nextElementSibling) != null && e.localName && S.includes((i = t.nextElementSibling) == null ? void 0 : i.localName) && (t.relatedContent = t.nextElementSibling, t.relatedContent.id = this._assignId(), t.relatedContent instanceof x && (t.relatedContent.tabIndex = 0, t.relatedContent.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
       var s;
       (s = t.tabGroupActions) == null || s.select();
-    }), this._tabAttributeObserver.observe(t, z), t.slot = "tab-bar";
+    }), t.relatedContent && (t.setAttribute("aria-controls", t.relatedContent.id), t.relatedContent.setAttribute("role", "tabpanel"), t.relatedContent.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t, G), 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();
+      const n = e.findIndex((l) => l.active), o = _(t, n, e.length);
+      (s = (i = e[o]) == null ? void 0 : i.tabGroupActions) == null || s.select(), (a = e[o]) == null || a.focus(), t.preventDefault();
     }
   }
   render() {
@@ -178,19 +188,19 @@ let S = 0, o = class extends u {
     `;
   }
 };
-o.styles = y;
-o.events = {
+r.styles = y;
+r.events = {
   didChange: "didChange"
 };
-l([
-  d()
-], o.prototype, "size", 1);
-l([
-  d({ attribute: "initial-selected-index", type: Number })
-], o.prototype, "initialSelectedIndex", 2);
-o = l([
+b([
+  c()
+], r.prototype, "size", 1);
+b([
+  c({ attribute: "initial-selected-index", type: Number })
+], r.prototype, "initialSelectedIndex", 2);
+r = b([
   v("sbb-tab-group")
-], o);
+], r);
 export {
-  o as SbbTabGroupElement
+  r as SbbTabGroupElement
 };

package/tabs/{tab-title/tab-title.d.ts → tab-label/tab-label.d.ts}

@@ -1,7 +1,7 @@
 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;
+declare const SbbTabLabelElement_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.
  *
@@ -9,7 +9,7 @@ declare const SbbTabTitleElement_base: import('../../core/mixins.js').AbstractCo
  * @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 {
+export declare class SbbTabLabelElement extends SbbTabLabelElement_base {
     static styles: CSSResultGroup;
     /**
      * The level will correspond to the heading tag generated in the title.
@@ -25,8 +25,8 @@ export declare class SbbTabTitleElement extends SbbTabTitleElement_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sbb-tab-title': SbbTabTitleElement;
+        'sbb-tab-label': SbbTabLabelElement;
     }
 }
 export {};
-//# sourceMappingURL=tab-title.d.ts.map
+//# sourceMappingURL=tab-label.d.ts.map

package/tabs/{tab-title/tab-title.d.ts.map → tab-label/tab-label.d.ts.map}

@@ -1 +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"}
+{"version":3,"file":"tab-label.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-label/tab-label.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-label.d.ts

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

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

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

package/tabs/tab-label.js

@@ -0,0 +1,51 @@
+import { css as v, LitElement as f } from "lit";
+import { property as r, 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-label-height: var(--sbb-size-element-m);--sbb-tab-label-color: var(--sbb-color-granite);--sbb-tab-label-icon-color: var(--sbb-color-black);--sbb-tab-label-background-color: var(--sbb-color-white);--sbb-tab-label-cursor: pointer;--sbb-tab-label-pointer-events: unset;--sbb-tab-label-inset: 0;--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-marker-transform: scale(0);--sbb-tab-label-text-decoration: none;--sbb-tab-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);display:inline-block;max-width:100%;pointer-events:var(--sbb-tab-label-pointer-events);-webkit-tap-highlight-color:transparent;outline:none!important}@media (forced-colors: active){:host{--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host([data-size=s]){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs)}:host([disabled]){--sbb-tab-label-icon-color: var(--sbb-color-granite);--sbb-tab-label-background-color: var(--sbb-color-milk);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media (forced-colors: active){:host([disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-icon-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-charcoal);--sbb-tab-label-icon-color: var(--sbb-tab-label-color);--sbb-tab-label-background-color: var(--sbb-color-black);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-transform: scale(1)}@media (forced-colors: active){:host([active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-tab-label-marker-transform: scale(1)}}:host(:is([data-active],:active)){--sbb-tab-label-color: var(--sbb-color-charcoal)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tab-label__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-label{position:relative;margin:0;min-height:var(--sbb-tab-label-height);display:flex;align-items:center;padding-inline:var(--sbb-tab-label-inline-padding);gap:var(--sbb-spacing-fixed-2x);-webkit-user-select:none;user-select:none;cursor:var(--sbb-tab-label-cursor);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);color:var(--sbb-tab-label-icon-color)}:host([data-has-divider]) .sbb-tab-label: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-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:.1875rem;background-color:var(--sbb-tab-label-color);transform:var(--sbb-tab-label-marker-transform);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:transform,background-color;z-index:1}.sbb-tab-label__icon,.sbb-tab-label__text,.sbb-tab-label__amount{text-decoration:var(--sbb-tab-label-text-decoration)}.sbb-tab-label__icon{display:flex;flex-shrink:0;color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tab-label__icon{display:none}.sbb-tab-label__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-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host([data-size=s]) .sbb-tab-label__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-label__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-label__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-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tab-label__amount{display:none}:host([data-size=s]) .sbb-tab-label__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-label__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, s = (a, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? y(e, l) : e, n = a.length - 1, i; n >= 0; n--)
+    (i = a[n]) && (t = (o ? i(e, l, t) : i(t)) || t);
+  return o && t && x(e, l, t), t;
+};
+let b = class extends h(u(f)) {
+  constructor() {
+    super(), this.level = "1", new p(this);
+  }
+  render() {
+    const a = `h${Number(this.level) < 7 ? this.level : "1"}`;
+    return m`
+      <div class="sbb-tab-label__wrapper">
+        <${c(a)} class="sbb-tab-label">
+          <span class="sbb-tab-label__icon">
+            ${this.renderIconSlot()}
+          </span>
+          <span class="sbb-tab-label__text">
+            <slot></slot>
+          </span>
+          <span class="sbb-tab-label__amount">
+            <slot name="amount">${this.amount}</slot>
+          </span>
+        </${c(a)}>
+      </div>
+    `;
+  }
+};
+b.styles = g;
+s([
+  r()
+], b.prototype, "level", 2);
+s([
+  r({ reflect: !0, type: Boolean })
+], b.prototype, "active", 2);
+s([
+  r({ reflect: !0 })
+], b.prototype, "amount", 2);
+b = s([
+  d("sbb-tab-label")
+], b);
+export {
+  b as SbbTabLabelElement
+};

package/tabs/tab.d.ts

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

package/tabs/tab.d.ts.map

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

package/tabs/tab.js

@@ -0,0 +1,41 @@
+import { css as a, LitElement as n, html as u } from "lit";
+import { customElement as m } from "lit/decorators.js";
+const p = a`*,:before,:after{box-sizing:border-box}:host{display:block}`;
+var c = Object.defineProperty, v = Object.getOwnPropertyDescriptor, _ = (e, l, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? v(l, r) : l, b = e.length - 1, i; b >= 0; b--)
+    (i = e[b]) && (t = (s ? i(l, r, t) : i(t)) || t);
+  return s && t && c(l, r, t), t;
+};
+let o = class extends n {
+  constructor() {
+    super(...arguments), this._label = null;
+  }
+  /** The `sbb-tab-label` associated with the tab. */
+  get label() {
+    return this._label;
+  }
+  _getTabLabel() {
+    let e = this.previousElementSibling;
+    for (; e && e.localName !== "sbb-tab-label"; )
+      e = e.previousElementSibling;
+    return e;
+  }
+  /** @internal */
+  configure() {
+    this._label = this._getTabLabel();
+  }
+  render() {
+    return u`
+      <div class="sbb-tab">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+o.styles = p;
+o = _([
+  m("sbb-tab")
+], o);
+export {
+  o as SbbTabElement
+};

package/tabs.d.ts

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

package/tabs.d.ts.map

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

package/tabs.js

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

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

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

package/train/train-formation.js

@@ -1,19 +1,19 @@
-import { css as c, LitElement as d, html as l } from "lit";
-import { property as f, state as p, customElement as m } from "lit/decorators.js";
-import { ref as h } from "lit/directives/ref.js";
-import { SbbConnectedAbortController as u, SbbLanguageController as g } from "../core/controllers.js";
-import { i18nSectorShort as v, i18nSector as w, i18nTrains as _ } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as k } from "../core/mixins.js";
-import { AgnosticResizeObserver as y } from "../core/observers.js";
-const x = c`*,:before,:after{box-sizing:border-box}:host{--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem;display:block}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-train-formation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
-var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (r, t, i, a) => {
-  for (var o = a > 1 ? void 0 : a ? z(t, i) : t, s = r.length - 1, b; s >= 0; s--)
+import { css as c, LitElement as d, html as e, nothing as f } from "lit";
+import { property as h, state as p, customElement as m } from "lit/decorators.js";
+import { ref as u } from "lit/directives/ref.js";
+import { SbbConnectedAbortController as g, SbbLanguageController as v } from "../core/controllers.js";
+import { i18nSectorShort as _, i18nSector as w, i18nTrains as k } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as y } from "../core/mixins.js";
+import { AgnosticResizeObserver as x } from "../core/observers.js";
+const C = c`*,:before,:after{box-sizing:border-box}:host{--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem;display:block}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-train-formation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
+var z = Object.defineProperty, L = Object.getOwnPropertyDescriptor, l = (r, t, i, a) => {
+  for (var o = a > 1 ? void 0 : a ? L(t, i) : t, s = r.length - 1, b; s >= 0; s--)
     (b = r[s]) && (o = (a ? b(t, i, o) : b(o)) || o);
-  return a && o && C(t, i, o), o;
+  return a && o && z(t, i, o), o;
 };
-let n = class extends k(d) {
+let n = class extends y(d) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this._sectors = [], this._contentResizeObserver = new y(() => this._applyCssWidth()), this._abort = new u(this), this._language = new g(this);
+    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this._sectors = [], this._contentResizeObserver = new x(() => this._applyCssWidth()), this._abort = new g(this), this._language = new v(this);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -61,41 +61,41 @@ let n = class extends k(d) {
     super.willUpdate(r), r.has("listChildren") && this._readSectors();
   }
   render() {
-    return l`
-      <div class="sbb-train-formation" ${h(this._updateFormationDiv)}>
-        <div class="sbb-train-formation__sectors" aria-hidden="true">
-          ${this._sectors.map(
-      (r) => l`<span
-                class="sbb-train-formation__sector"
-                style="
+    return e`
+      <div class="sbb-train-formation" ${u(this._updateFormationDiv)}>
+        ${this._sectors.length && this._sectors[0].label !== void 0 ? e`<div class="sbb-train-formation__sectors" aria-hidden="true">
+              ${this._sectors.map(
+      (r) => e`<span
+                    class="sbb-train-formation__sector"
+                    style="
                 --sbb-train-formation-wagon-count: ${r.wagonCount};
                 --sbb-train-formation-wagon-blocked-passage-count: ${r.blockedPassageCount}"
-              >
-                <span class="sbb-train-formation__sector-sticky-wrapper">
-                  ${`${r.wagonCount === 1 && r.label ? v[this._language.current] : w[this._language.current]} ${r.label ? r.label : ""}`}
-                </span>
-              </span>`
+                  >
+                    <span class="sbb-train-formation__sector-sticky-wrapper">
+                      ${`${r.wagonCount === 1 && r.label ? _[this._language.current] : w[this._language.current]} ${r.label ? r.label : ""}`}
+                    </span>
+                  </span>`
     )}
-        </div>
+            </div>` : f}
 
         <div class="sbb-train-formation__trains">
           ${this.renderList({
       class: "sbb-train-formation__train-list",
-      ariaLabel: _[this._language.current]
+      ariaLabel: k[this._language.current]
     })}
         </div>
       </div>
     `;
   }
 };
-n.styles = x;
-e([
-  f({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })
+n.styles = C;
+l([
+  h({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })
 ], n.prototype, "hideWagonLabel", 2);
-e([
+l([
   p()
 ], n.prototype, "_sectors", 2);
-n = e([
+n = l([
   m("sbb-train-formation")
 ], n);
 export {

package/development/selection-panel/selection-panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selection-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/selection-panel/selection-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAWvC,OAAO,eAAe,CAAC;AAEvB;;;;;;;;;;GAUG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAEtD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qDAAqD;IACQ,SAAS,UAAS;IAE/E,iDAAiD;IACE,UAAU,UAAS;IAEtE,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtC;;;OAGG;IACH,IAAW,UAAU,IAAI,OAAO,CAG/B;;IAOe,iBAAiB,IAAI,IAAI;cAStB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAuB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/development/selection-panel.d.ts

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

package/development/selection-panel.d.ts.map

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