@sbb-esta/lyne-elements 3.9.0 → 3.11.0

package/standard-theme.css

@@ -1731,8 +1731,7 @@ sbb-menu,
 sbb-navigation,
 sbb-overlay,
 sbb-popover,
-sbb-toast,
-sbb-tooltip) {
+sbb-toast) {
   margin: 0;
   padding: 0;
   border: none;
@@ -2021,6 +2020,26 @@ sbb-status:has(sbb-title) {
   --sbb-option-white-space: nowrap;
 }
 
+sbb-mini-calendar[orientation=horizontal] sbb-mini-calendar-month {
+  --sbb-mini-calendar-grid-auto-flow: row;
+  --sbb-mini-calendar-month-height: 3rem;
+  --sbb-mini-calendar-month-grid-template-rows: none;
+  --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);
+}
+sbb-mini-calendar[orientation=horizontal] sbb-mini-calendar-month sbb-mini-calendar-day:first-child {
+  grid-column-start: var(--sbb-mini-calendar-month-offset);
+}
+
+sbb-mini-calendar[orientation=vertical] sbb-mini-calendar-month {
+  --sbb-mini-calendar-grid-auto-flow: column;
+  --sbb-mini-calendar-month-height: auto;
+  --sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);
+  --sbb-mini-calendar-month-grid-template-columns: none;
+}
+sbb-mini-calendar[orientation=vertical] sbb-mini-calendar-month sbb-mini-calendar-day:first-child {
+  grid-row-start: var(--sbb-mini-calendar-month-offset);
+}
+
 sub {
   bottom: -0.36em;
 }

package/tabs/tab/tab.component.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbTabGroupElement } from '../tab-group/tab-group.component.js';
 import { SbbTabLabelElement } from '../tab-label.js';
 declare const SbbTabElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
 /**
@@ -13,14 +14,22 @@ export declare class SbbTabElement extends SbbTabElement_base {
     static readonly events: {
         readonly active: "active";
     };
+    private _tabContentResizeObserver;
     /** The `sbb-tab-label` associated with the tab. */
     get label(): SbbTabLabelElement | null;
+    /** Get the parent `sbb-tab-group`. */
+    get group(): SbbTabGroupElement | null;
     /**
      * @internal
      * @deprecated
      */
     configure(): void;
     connectedCallback(): void;
+    /** @internal */
+    protected activate(): void;
+    /** @internal */
+    protected deactivate(): void;
+    private _onTabContentElementResize;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"tab.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab/tab.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAM1D;;;;;GAKG;AACH,qBAEM,aAAc,SAAQ,kBAAoC;IAC9D,OAAuB,IAAI,SAAc;IACzC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,mDAAmD;IACnD,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAI5C;IAED;;;OAGG;IACI,SAAS,IAAI,IAAI;IAER,iBAAiB,IAAI,IAAI;cAOtB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}
+{"version":3,"file":"tab.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab/tab.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAM1D;;;;;GAKG;AACH,qBAEM,aAAc,SAAQ,kBAAoC;IAC9D,OAAuB,IAAI,SAAc;IACzC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,yBAAyB,CAI9B;IAEH,mDAAmD;IACnD,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAI5C;IAED,sCAAsC;IACtC,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE5C;IAED;;;OAGG;IACI,SAAS,IAAI,IAAI;IAER,iBAAiB,IAAI,IAAI;IAOzC,gBAAgB;IAChB,SAAS,CAAC,QAAQ,IAAI,IAAI;IAK1B,gBAAgB;IAChB,SAAS,CAAC,UAAU,IAAI,IAAI;IAK5B,OAAO,CAAC,0BAA0B;cAIf,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

package/tabs/tab/tab.component.js

@@ -1,16 +1,28 @@
-import { __esDecorate as n, __runInitializers as o } from "tslib";
-import { css as b, LitElement as c, html as m } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { SbbElementInternalsMixin as u } from "../../core/mixins.js";
-const h = b`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}`;
-let f = 0, S = (() => {
+import { __esDecorate as l, __runInitializers as r } from "tslib";
+import { ResizeController as b } from "@lit-labs/observers/resize-controller.js";
+import { css as c, LitElement as u, html as h } from "lit";
+import { customElement as m } from "lit/decorators.js";
+import { SbbElementInternalsMixin as v } from "../../core/mixins.js";
+const d = c`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:none}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:is(:state(active),[state--active])){display:block;opacity:1;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{:host(:is(:state(active),[state--active])){opacity:0}}`;
+let f = 0, C = (() => {
   var t;
-  let r = [d("sbb-tab")], l, s = [], e, i = u(c);
-  return t = class extends i {
+  let n = [m("sbb-tab")], s, a = [], e, o = v(u);
+  return t = class extends o {
+    constructor() {
+      super(...arguments), this._tabContentResizeObserver = new b(this, {
+        target: null,
+        skipInitial: !0,
+        callback: () => this._onTabContentElementResize()
+      });
+    }
     /** The `sbb-tab-label` associated with the tab. */
     get label() {
       return this.previousElementSibling?.localName === "sbb-tab-label" ? this.previousElementSibling : null;
     }
+    /** Get the parent `sbb-tab-group`. */
+    get group() {
+      return this.closest("sbb-tab-group");
+    }
     /**
      * @internal
      * @deprecated
@@ -20,20 +32,27 @@ let f = 0, S = (() => {
     connectedCallback() {
       super.connectedCallback(), this.id ||= `sbb-tab-${f++}`, this.tabIndex = 0;
     }
+    /** @internal */
+    activate() {
+      this.toggleState("active", !0), this._tabContentResizeObserver.observe(this);
+    }
+    /** @internal */
+    deactivate() {
+      this._tabContentResizeObserver.unobserve(this), this.toggleState("active", !1);
+    }
+    _onTabContentElementResize() {
+      this.group?.setTabContentHeight(Math.floor(this.getBoundingClientRect().height));
+    }
     render() {
-      return m`
-      <div class="sbb-tab">
-        <slot></slot>
-      </div>
-    `;
+      return h`<slot></slot>`;
     }
   }, e = t, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    n(null, l = { value: e }, r, { kind: "class", name: e.name, metadata: a }, null, s), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), t.role = "tabpanel", t.styles = h, t.events = {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    l(null, s = { value: e }, n, { kind: "class", name: e.name, metadata: i }, null, a), e = s.value, i && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), t.role = "tabpanel", t.styles = d, t.events = {
     active: "active"
-  }, o(e, s), e;
+  }, r(e, a), e;
 })();
 export {
-  S as SbbTabElement
+  C as SbbTabElement
 };

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

@@ -30,7 +30,7 @@ export interface InterfaceSbbTabGroupTab extends SbbTabLabelElement {
     tabGroupActions?: InterfaceSbbTabGroupActions;
     size: 's' | 'l' | 'xl';
 }
-declare const SbbTabGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+declare const SbbTabGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
 /**
  * It displays one or more tabs, each one with a label and some content.
  *
@@ -45,7 +45,6 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
     private _tabGroupElement;
     private _tabContentElement;
     private _tabGroupResizeObserver;
-    private _tabContentResizeObserver;
     /**
      * Size variant, either s, l or xl.
      * @default 'l' / 's' (lean)
@@ -60,6 +59,8 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
     accessor initialSelectedIndex: number;
     /** Gets the slotted `sbb-tab-label`s. */
     get labels(): SbbTabLabelElement[];
+    /** Gets the slotted `sbb-tab`s. */
+    get tabs(): SbbTabElement[];
     constructor();
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
     /**
@@ -83,8 +84,11 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
     private _onLabelSlotChange;
     private _initSelection;
     private _onTabGroupElementResize;
-    private _onTabContentElementResize;
     private _handleKeyDown;
+    /**
+     * @internal
+     */
+    protected setTabContentHeight(contentHeight: number): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"tab-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI/C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,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;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAED;;;;;GAKG;AACH,qBAEM,kBAAmB,SAAQ,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH;;;OAGG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,EAGtC;IACD,IAAW,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,IAAI,CAElC;IACD,OAAO,CAAC,KAAK,CAA0C;IAEvD;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;IAEjD,yCAAyC;IACzC,IAAW,MAAM,IAAI,kBAAkB,EAAE,CAQxC;;cAOkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAG1B;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tab-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI/C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,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;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAED;;;;;GAKG;AACH,qBAEM,kBAAmB,SAAQ,uBAAuD;IACtF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,uBAAuB,CAI5B;IAEH;;;OAGG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,EAGtC;IACD,IAAW,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,IAAI,CAElC;IACD,OAAO,CAAC,KAAK,CAA0C;IAEvD;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;IAEjD,yCAAyC;IACzC,IAAW,MAAM,IAAI,kBAAkB,EAAE,CAQxC;IAED,mCAAmC;IACnC,IAAW,IAAI,IAAI,aAAa,EAAE,CAQjC;;cAOkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAG1B;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,cAAc;IAoBtB;;OAEG;IACH,SAAS,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI;cAIvC,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/tabs/tab-group/tab-group.component.js

@@ -1,35 +1,31 @@
-var v = (i) => {
+var x = (i) => {
   throw TypeError(i);
 };
-var y = (i, a, s) => a.has(i) || v("Cannot " + s);
-var x = (i, a, s) => (y(i, a, "read from private field"), s ? s.call(i) : a.get(i)), z = (i, a, s) => a.has(i) ? v("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, s), d = (i, a, s, l) => (y(i, a, "write to private field"), l ? l.call(i, s) : a.set(i, s), s);
-import { __esDecorate as h, __runInitializers as c } from "tslib";
-import { ResizeController as E } from "@lit-labs/observers/resize-controller.js";
-import { css as C, LitElement as k, html as w } from "lit";
-import { customElement as R, property as S } from "lit/decorators.js";
-import { ref as T } from "lit/directives/ref.js";
-import { isArrowKeyPressed as G, getNextElementIndex as L } from "../../core/a11y.js";
-import { forceType as $ } from "../../core/decorators.js";
-import { isLean as D } from "../../core/dom.js";
-import { throttle as O } from "../../core/eventing.js";
-import { SbbHydrationMixin as A } from "../../core/mixins.js";
-const K = C`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block}.sbb-tab-group{display:flex;flex-wrap:wrap}.sbb-tab-group-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.sbb-tab-group-content ::slotted(sbb-tab){visibility:hidden;opacity:0;height:0;overflow:hidden}.sbb-tab-group-content ::slotted(sbb-tab[data-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}.sbb-tab-group-content ::slotted(sbb-tab:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`;
-let V = (() => {
-  var r, o;
-  let i = [R("sbb-tab-group")], a, s = [], l, u = A(k), m = [], f, p, _ = [], g = [];
-  return o = class extends u {
+var S = (i, a, s) => a.has(i) || x("Cannot " + s);
+var v = (i, a, s) => (S(i, a, "read from private field"), s ? s.call(i) : a.get(i)), z = (i, a, s) => a.has(i) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, s), c = (i, a, s, l) => (S(i, a, "write to private field"), l ? l.call(i, s) : a.set(i, s), s);
+import { __esDecorate as h, __runInitializers as d } from "tslib";
+import { ResizeController as T } from "@lit-labs/observers/resize-controller.js";
+import { css as k, LitElement as C, html as w } from "lit";
+import { customElement as G, property as E } from "lit/decorators.js";
+import { ref as y } from "lit/directives/ref.js";
+import { isArrowKeyPressed as L, getNextElementIndex as $ } from "../../core/a11y.js";
+import { forceType as D } from "../../core/decorators.js";
+import { isLean as A } from "../../core/dom.js";
+import { throttle as R } from "../../core/eventing.js";
+import { SbbElementInternalsMixin as N, SbbHydrationMixin as O } from "../../core/mixins.js";
+const P = k`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-tab-group-animation-duration: 0s}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) )}.sbb-tab-group{display:flex;flex-wrap:wrap}.sbb-tab-group-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}`;
+let X = (() => {
+  var o, n;
+  let i = [G("sbb-tab-group")], a, s = [], l, m = N(O(C)), u = [], p, f, _ = [], g = [];
+  return n = class extends m {
     constructor() {
       super();
-      z(this, r);
-      this._tabGroupElement = c(this, m), this._tabGroupResizeObserver = new E(this, {
+      z(this, o);
+      this._tabGroupElement = d(this, u), this._tabGroupResizeObserver = new T(this, {
         target: null,
         skipInitial: !0,
         callback: (t) => this._onTabGroupElementResize(t)
-      }), this._tabContentResizeObserver = new E(this, {
-        target: null,
-        skipInitial: !0,
-        callback: (t) => this._onTabContentElementResize(t)
-      }), this._size = D() ? "s" : "l", d(this, r, c(this, _, 0)), this._onContentSlotChange = (c(this, g), () => {
+      }), this._size = A() ? "s" : "l", c(this, o, d(this, _, 0)), this._onContentSlotChange = (d(this, g), () => {
         this.labels.forEach((t) => t.linkToTab()), this.labels.find((t) => t.active)?.activate();
       }), this._onLabelSlotChange = () => {
         this._updateSize(), this.labels.forEach((t) => t.linkToTab());
@@ -50,17 +46,21 @@ let V = (() => {
      * the tab group, the first enabled tab will be selected.
      */
     get initialSelectedIndex() {
-      return x(this, r);
+      return v(this, o);
     }
     set initialSelectedIndex(t) {
-      d(this, r, t);
+      c(this, o, t);
     }
     /** Gets the slotted `sbb-tab-label`s. */
     get labels() {
       return Array.from(this.children ?? []).filter((t) => /^sbb-tab-label$/u.test(t.localName));
     }
+    /** Gets the slotted `sbb-tab`s. */
+    get tabs() {
+      return Array.from(this.children ?? []).filter((t) => /^sbb-tab$/u.test(t.localName));
+    }
     firstUpdated(t) {
-      super.firstUpdated(t), this.labels.forEach((e) => e.linkToTab()), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement), this._tabContentResizeObserver.observe(this._tabContentElement);
+      super.firstUpdated(t), this.labels.forEach((e) => e.linkToTab()), this._initSelection(), Promise.resolve().then(() => this.toggleState("initialized", !0)), this._tabGroupResizeObserver.observe(this._tabGroupElement);
     }
     /**
      * Disables a tab by index.
@@ -99,54 +99,53 @@ let V = (() => {
     }
     _onTabGroupElementResize(t) {
       for (const e of t) {
-        const n = e.target.firstElementChild.assignedElements();
-        for (const b of n)
-          b.toggleAttribute("data-has-divider", b === n[0] || b.offsetLeft === n[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
+        const r = e.target.firstElementChild.assignedElements();
+        for (const b of r)
+          b.toggleAttribute("data-has-divider", b === r[0] || b.offsetLeft === r[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
       }
     }
-    _onTabContentElementResize(t) {
-      if (this._tabContentElement)
-        for (const e of t) {
-          const n = Math.floor(e.contentRect.height);
-          this._tabContentElement.style.height = `${n}px`;
-        }
-    }
     _handleKeyDown(t) {
       const e = this._enabledTabs();
       if (!(!e || // don't trap nested handling
-      t.target !== this && t.target.parentElement !== this) && G(t)) {
-        const n = e.findIndex((I) => I.active), b = L(t, n, e.length);
+      t.target !== this && t.target.parentElement !== this) && L(t)) {
+        const r = e.findIndex((I) => I.active), b = $(t, r, e.length);
         e[b]?.activate(), e[b]?.focus(), t.preventDefault();
       }
     }
+    /**
+     * @internal
+     */
+    setTabContentHeight(t) {
+      this._tabContentElement.style.height = `${t}px`;
+    }
     render() {
       return w`
       <div
         class="sbb-tab-group"
         role="tablist"
-        ${T((t) => this._tabGroupElement = t)}
+        ${y((t) => this._tabGroupElement = t)}
       >
         <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
       </div>
       <div
         class="sbb-tab-group-content"
-        ${T((t) => this._tabContentElement = t)}
+        ${y((t) => this._tabContentElement = t)}
       >
-        <slot @slotchange=${O(this._onContentSlotChange, 150)}></slot>
+        <slot @slotchange=${R(this._onContentSlotChange, 150)}></slot>
       </div>
     `;
     }
-  }, r = new WeakMap(), l = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    f = [S()], p = [$(), S({ attribute: "initial-selected-index", type: Number })], h(o, null, f, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, n) => {
-      e.size = n;
-    } }, metadata: t }, null, m), h(o, null, p, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, n) => {
-      e.initialSelectedIndex = n;
+  }, o = new WeakMap(), l = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    p = [E()], f = [D(), E({ attribute: "initial-selected-index", type: Number })], h(n, null, p, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, r) => {
+      e.size = r;
+    } }, metadata: t }, null, u), h(n, null, f, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, r) => {
+      e.initialSelectedIndex = r;
     } }, metadata: t }, _, g), h(null, a = { value: l }, i, { kind: "class", name: l.name, metadata: t }, null, s), l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = K, o.events = {
+  })(), n.styles = P, n.events = {
     tabchange: "tabchange"
-  }, c(l, s), l;
+  }, d(l, s), l;
 })();
 export {
-  V as SbbTabGroupElement
+  X as SbbTabGroupElement
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tab-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-label/tab-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAA6B,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAIrF;;;;;;GAMG;AACH,qBAGM,kBAAmB,SAAQ,uBAEhC;IACC,OAAuB,IAAI,SAAS;IACpC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mCAAmC;IACnC,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACH,SAA4B,KAAK,EAAE,aAAa,CAAO;IAEvD,wBAAwB;IACxB,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,wDAAwD;IACxD,IAAW,GAAG,IAAI,aAAa,GAAG,IAAI,CAIrC;IAED,sCAAsC;IACtC,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE5C;;IAQe,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAuB5E,0BAA0B;IACnB,UAAU,IAAI,IAAI;IAMzB,+FAA+F;IACxF,QAAQ,IAAI,IAAI;IAiCvB;;OAEG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;cAYR,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tab-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-label/tab-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAA6B,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAIrF;;;;;;GAMG;AACH,qBAGM,kBAAmB,SAAQ,uBAEhC;IACC,OAAuB,IAAI,SAAS;IACpC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mCAAmC;IACnC,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACH,SAA4B,KAAK,EAAE,aAAa,CAAO;IAEvD,wBAAwB;IACxB,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,wDAAwD;IACxD,IAAW,GAAG,IAAI,aAAa,GAAG,IAAI,CAIrC;IAED,sCAAsC;IACtC,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE5C;;IAQe,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAsB5E,0BAA0B;IACnB,UAAU,IAAI,IAAI;IAOzB,+FAA+F;IACxF,QAAQ,IAAI,IAAI;IAkCvB;;OAEG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;cAYR,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/tabs/tab-label/tab-label.component.js

@@ -5,22 +5,22 @@ var S = (a, b, s) => b.has(a) || E("Cannot " + s);
 var h = (a, b, s) => (S(a, b, "read from private field"), s ? s.call(a) : b.get(a)), m = (a, b, s) => b.has(a) ? E("Cannot add the same private member more than once") : b instanceof WeakSet ? b.add(a) : b.set(a, s), n = (a, b, s, o) => (S(a, b, "write to private field"), o ? o.call(a, s) : b.set(a, s), s);
 import { __esDecorate as u, __runInitializers as r } from "tslib";
 import { css as B, LitElement as C } from "lit";
-import { customElement as A, property as f } from "lit/decorators.js";
-import { unsafeStatic as L, html as D } from "lit/static-html.js";
-import { slotState as M, forceType as $, omitEmptyConverter as N } from "../../core/decorators.js";
+import { customElement as D, property as f } from "lit/decorators.js";
+import { unsafeStatic as L, html as M } from "lit/static-html.js";
+import { slotState as N, forceType as $, omitEmptyConverter as A } from "../../core/decorators.js";
 import { SbbDisabledMixin as G, SbbElementInternalsMixin as j } from "../../core/mixins.js";
 import { SbbIconNameMixin as O } from "../../icon.js";
-const U = B`*,: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-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);--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-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);--sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));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-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-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-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-3);--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-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-3)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible) .sbb-tab-label__wrapper:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:"";position:absolute;display:block;inset:0;z-index:1;border-radius:calc(var(--sbb-border-radius-2x) - var(--sbb-focus-outline-offset))}.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)}: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-tab-label-line-color)}.sbb-tab-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:var(--sbb-border-width-3x);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{color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--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}: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}:host(:not([data-slot-names~=unnamed])) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{display:flex;color:var(--sbb-tab-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);--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)}: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)}`;
+const U = B`*,: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-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);--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-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);--sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));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-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-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-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-3);--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-amount-color: ButtonText}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-tab-label-marker-transform: scale(1)}}:host(:active){--sbb-tab-label-color: var(--sbb-color-3)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible) .sbb-tab-label__wrapper:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:"";position:absolute;display:block;inset:0;z-index:1;border-radius:calc(var(--sbb-border-radius-2x) - var(--sbb-focus-outline-offset))}.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)}: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-tab-label-line-color)}.sbb-tab-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:var(--sbb-border-width-3x);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{color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--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}: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}:host(:not([data-slot-names~=unnamed])) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{display:flex;color:var(--sbb-tab-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);--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)}: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)}`;
 let X = (() => {
   var c, v, d, i;
-  let a = [A("sbb-tab-label"), M()], b, s = [], o, p = G(O(j(C))), g, x = [], _ = [], y, z = [], w = [], k, T = [], I = [];
+  let a = [D("sbb-tab-label"), N()], b, s = [], o, p = G(O(j(C))), x, g = [], _ = [], y, z = [], w = [], k, T = [], I = [];
   return i = class extends p {
     constructor() {
       super();
       m(this, c);
       m(this, v);
       m(this, d);
-      this._selected = !1, n(this, c, r(this, x, "1")), n(this, v, (r(this, _), r(this, z, !1))), n(this, d, (r(this, w), r(this, T, ""))), r(this, I), this.addEventListener("click", () => this.activate());
+      this._selected = !1, n(this, c, r(this, g, "1")), n(this, v, (r(this, _), r(this, z, !1))), n(this, d, (r(this, w), r(this, T, ""))), r(this, I), this.addEventListener("click", () => this.activate());
     }
     /**
      * The level will correspond to the heading tag generated in the title.
@@ -58,18 +58,18 @@ let X = (() => {
       super.connectedCallback(), this.slot = "tab-bar", this.tabIndex = this.active ? 0 : -1;
     }
     willUpdate(t) {
-      super.willUpdate(t), t.has("active") && (this.internals.ariaSelected = `${this.active}`, this.tab?.toggleAttribute("data-active", this.active), this.active && !this.disabled ? this.activate() : this.deactivate()), t.has("disabled") && this.disabled && (this.tabIndex = -1, this.active && (this.deactivate(), this.group?.activateTab(0)));
+      super.willUpdate(t), t.has("active") && (this.internals.ariaSelected = `${this.active}`, this.active && !this.disabled ? this.activate() : this.deactivate()), t.has("disabled") && this.disabled && (this.tabIndex = -1, this.active && (this.deactivate(), this.group?.activateTab(0)));
     }
     /** Deactivate the tab. */
     deactivate() {
-      this.active = !1, this._selected = !1, this.tabIndex = -1;
+      this.active = !1, this.tab?.deactivate(), this._selected = !1, this.tabIndex = -1;
     }
     /** Select the tab, deactivating the current selected one, and dispatch the tabchange event. */
     activate() {
       if (this.disabled)
         return;
       const t = this.group?.labels || [], e = t.find((l) => l._selected);
-      e !== this && (e?.deactivate(), this.active = !0, this._selected = !0, this.tabIndex = 0, this.tab?.dispatchEvent(new Event("active", { bubbles: !0, composed: !0 })), this.group?.dispatchEvent(new CustomEvent("tabchange", {
+      e !== this && (e?.deactivate(), this.active = !0, this.tab?.activate(), this._selected = !0, this.tabIndex = 0, this.tab?.dispatchEvent(new Event("active", { bubbles: !0, composed: !0 })), this.group?.dispatchEvent(new CustomEvent("tabchange", {
         bubbles: !0,
         composed: !0,
         detail: {
@@ -90,7 +90,7 @@ let X = (() => {
     }
     render() {
       const t = `h${Number(this.level) < 7 ? this.level : "1"}`;
-      return D`
+      return M`
       <div class="sbb-tab-label__wrapper">
         <${L(t)} class="sbb-tab-label">
           <span class="sbb-tab-label__icon">
@@ -108,9 +108,9 @@ let X = (() => {
     }
   }, c = new WeakMap(), v = new WeakMap(), d = new WeakMap(), o = i, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    g = [f()], y = [$(), f({ reflect: !0, type: Boolean })], k = [$(), f({ reflect: !0, converter: N })], u(i, null, g, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (e) => "level" in e, get: (e) => e.level, set: (e, l) => {
+    x = [f()], y = [$(), f({ reflect: !0, type: Boolean })], k = [$(), f({ reflect: !0, converter: A })], u(i, null, x, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (e) => "level" in e, get: (e) => e.level, set: (e, l) => {
       e.level = l;
-    } }, metadata: t }, x, _), u(i, null, y, { kind: "accessor", name: "active", static: !1, private: !1, access: { has: (e) => "active" in e, get: (e) => e.active, set: (e, l) => {
+    } }, metadata: t }, g, _), u(i, null, y, { kind: "accessor", name: "active", static: !1, private: !1, access: { has: (e) => "active" in e, get: (e) => e.active, set: (e, l) => {
       e.active = l;
     } }, metadata: t }, z, w), u(i, null, k, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (e) => "amount" in e, get: (e) => e.amount, set: (e, l) => {
       e.amount = l;

package/tooltip/tooltip.component.d.ts

@@ -1,10 +1,19 @@
 import { CSSResultGroup, TemplateResult, PropertyDeclaration, PropertyValues } from 'lit';
 import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
+/**
+ * Defines the default position for the tooltip if this element is used as a trigger.
+ */
+export interface SbbTooltipDefaultPositions {
+    readonly tooltipPositions: string[];
+}
 declare const SbbTooltipElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays text content within a tooltip.
  *
  * @slot - Use the unnamed slot to add the text into the tooltip.
+ * @cssprop [--sbb-overlay-position-area=block-end] - The primary position for the tooltip.
+ * @cssprop [--sbb-overlay-position-try-fallbacks=block-end span-inline-end, block-end span-inline-start, block-start, block-start span-inline-end, block-start span-inline-start] -
+ * The list of fallback positions, separated by ',', for the tooltip
  * @cssprop [--sbb-tooltip-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
@@ -14,7 +23,7 @@ export declare class SbbTooltipElement extends SbbTooltipElement_base {
     static styles: CSSResultGroup;
     private static _tooltipOutlet;
     /**
-     * The element that will trigger the popover overlay.
+     * The element that will trigger the tooltip overlay.
      *
      * For attribute usage, provide an id reference.
      */
@@ -46,11 +55,11 @@ export declare class SbbTooltipElement extends SbbTooltipElement_base {
     set longPressCloseDelay(value: number);
     get longPressCloseDelay(): number;
     private _longPressCloseDelay?;
-    protected overlay?: HTMLDivElement;
     private _triggerElement;
     private _triggerAbortController?;
     private _openStateController;
     private _escapableOverlayController;
+    private _overlayController;
     private _openTimeout?;
     private _closeTimeout?;
     private _longPressOpenTimeout?;
@@ -73,9 +82,7 @@ export declare class SbbTooltipElement extends SbbTooltipElement_base {
     private _attach;
     private _detach;
     private _destroy;
-    private _setTooltipPosition;
     private _addTriggerEventHandlers;
-    private _attachWindowEvents;
     private _isZeroAnimationDuration;
     private _resetOpenCloseTimeout;
     protected render(): TemplateResult;

package/tooltip/tooltip.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/elements/tooltip/tooltip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;;AA6BnE;;;;;;;GAOG;AACH,qBAEM,iBAAkB,SAAQ,sBAAyC;IACvE,gBAAgC,IAAI,aAAa;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,MAAM,CAAC,cAAc,CAAU;IAUvC;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD;;;;;OAKG;IACH,IACW,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAExC;IACD,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,OAAO,CAAC,UAAU,CAAuB;IAEzC;;;;;OAKG;IACH,IACW,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAEzC;IACD,IAAW,UAAU,IAAI,MAAM,CAE9B;IACD,OAAO,CAAC,WAAW,CAAuB;IAE1C;;;;;OAKG;IACH,IACW,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAE3C;IACD,IAAW,mBAAmB,IAAI,MAAM,CAEvC;IACD,OAAO,CAAC,oBAAoB,CAAC,CAAS;IAEtC,SAAS,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC;IAEnC,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAC,CAAkB;IAClD,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,qBAAqB,CAAC,CAAgC;IAC9D,OAAO,CAAC,sBAAsB,CAAC,CAAgC;;IAwB/D,OAAO,CAAC,MAAM,CAAC,wBAAwB;IAmCvC,OAAO,CAAC,MAAM,CAAC,6BAA6B;IAM5C,OAAO,CAAC,MAAM,CAAC,qBAAqB;IA2BpB,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAM5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAWY,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAKjE,IAAI,IAAI,IAAI;IAsBZ,KAAK,IAAI,IAAI;IAgBpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,wBAAwB;IA0DhC,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,sBAAsB;cAKX,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/elements/tooltip/tooltip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAoBnE;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,EAAE,CAAC;CACrC;;AAYD;;;;;;;;;;GAUG;AACH,qBAEM,iBAAkB,SAAQ,sBAAyC;IACvE,gBAAgC,IAAI,aAAa;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,MAAM,CAAC,cAAc,CAAU;IAUvC;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD;;;;;OAKG;IACH,IACW,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAExC;IACD,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,OAAO,CAAC,UAAU,CAAuB;IAEzC;;;;;OAKG;IACH,IACW,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAEzC;IACD,IAAW,UAAU,IAAI,MAAM,CAE9B;IACD,OAAO,CAAC,WAAW,CAAuB;IAE1C;;;;;OAKG;IACH,IACW,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAE3C;IACD,IAAW,mBAAmB,IAAI,MAAM,CAEvC;IACD,OAAO,CAAC,oBAAoB,CAAC,CAAS;IAEtC,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAC,CAAkB;IAClD,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,kBAAkB,CAA0C;IACpE,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,qBAAqB,CAAC,CAAgC;IAC9D,OAAO,CAAC,sBAAsB,CAAC,CAAgC;;IA0B/D,OAAO,CAAC,MAAM,CAAC,wBAAwB;IAkCvC,OAAO,CAAC,MAAM,CAAC,6BAA6B;IAM5C,OAAO,CAAC,MAAM,CAAC,qBAAqB;IA8CpB,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAM5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAWY,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAKjE,IAAI,IAAI,IAAI;IAsBZ,KAAK,IAAI,IAAI;IAgBpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,wBAAwB;IA0DhC,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,sBAAsB;cAKX,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}