@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/tabs/tab-group.js

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

@@ -1,23 +1,23 @@
-import { css as h, LitElement as f, isServer as b, html as u } from "lit";
+import { css as h, LitElement as u, isServer as b, html as f } from "lit";
 import { property as o, customElement as n } from "lit/decorators.js";
 import { setOrRemoveAttribute as m } from "../core/dom.js";
 import { SbbNamedSlotListMixin as y } from "../core/mixins.js";
 const g = h`*,:before,:after{box-sizing:border-box}:host{display:block}.sbb-tag-group__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}`;
-var d = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
-  for (var l = i > 1 ? void 0 : i ? A(t, s) : t, c = e.length - 1, p; c >= 0; c--)
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
+  for (var l = i > 1 ? void 0 : i ? v(t, s) : t, c = e.length - 1, p; c >= 0; c--)
     (p = e[c]) && (l = (i ? p(t, s, l) : p(l)) || l);
   return i && l && d(t, s, l), l;
 };
 let r = class extends y(
-  f
+  u
 ) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-tag", "div"], this.multiple = !1, this.size = "m", this.a = null;
+    super(...arguments), this.listChildLocalNames = ["sbb-tag", "div"], this.multiple = !1, this.size = "m", this._value = null;
   }
   set value(e) {
     const t = this.tags;
     if (b)
-      this.a = e;
+      this._value = e;
     else if (e === null)
       t.forEach((s) => s.checked = !1);
     else if (this.multiple) {
@@ -33,7 +33,7 @@ let r = class extends y(
   }
   get value() {
     var e;
-    return b ? this.a : this.multiple ? this.tags.filter((t) => t.checked).map((t) => t.value) : ((e = this.tags.find((t) => t.checked)) == null ? void 0 : e.value) ?? null;
+    return b ? this._value : this.multiple ? this.tags.filter((t) => t.checked).map((t) => t.value) : ((e = this.tags.find((t) => t.checked)) == null ? void 0 : e.value) ?? null;
   }
   /** The child instances of sbb-tag as an array. */
   get tags() {
@@ -51,7 +51,7 @@ let r = class extends y(
     );
   }
   render() {
-    return u`
+    return f`
       <div class="sbb-tag-group">
         ${this.renderList({
       class: "sbb-tag-group__list",

package/tag/tag.js

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