@vonage/vivid 5.15.1 → 5.16.0

package/tabs/index.js

@@ -1,321 +1,194 @@
-import { T as x, t as k } from "../bundled/definition20.js";
-import { t as T } from "../bundled/definition21.js";
-import { V as _, U as z, a as b, o as d, h as C, c as I, d as A } from "../bundled/vivid-element.js";
-import { h as $, g as S, c as L, b as E, k as P, a as O } from "../bundled/key-codes.js";
-import { u } from "../bundled/strings.js";
-import { l as R } from "../bundled/numbers.js";
-import { r as h } from "../bundled/ref.js";
-import { s as p } from "../bundled/slotted.js";
-import { c as W } from "../bundled/class-names.js";
-const D = ':host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:"";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}';
-var N = Object.defineProperty, n = (i, t, a, e) => {
-  for (var s = void 0, o = i.length - 1, c; o >= 0; o--)
-    (c = i[o]) && (s = c(t, a, s) || s);
-  return s && N(t, a, s), s;
+import { O as e, T as t, d as n, l as r, o as i, s as a, t as o } from "../bundled/vivid-element.js";
+import { t as s } from "../bundled/ref.js";
+import { t as c } from "../bundled/slotted.js";
+import "../bundled/definition2.js";
+import { t as l } from "../bundled/decorate.js";
+import { t as u } from "../bundled/class-names.js";
+import { i as d, n as f, r as p, s as m, t as h } from "../bundled/key-codes.js";
+import { n as g } from "../bundled/numbers.js";
+import { t as _ } from "../bundled/strings.js";
+import { n as v } from "../bundled/definition20.js";
+import { n as y, r as b } from "../bundled/definition21.js";
+//#region src/lib/tabs/tabs.scss?inline
+var x = ":host{display:block}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-firm:var(--vvd-tabs-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm:var(--vvd-tabs-accent-firm,var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:1fr;grid-template-columns:auto 1fr;overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto 1fr;grid-template-columns:1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}", S = "--_tabs-active-tab-inline-size", C = {
+	vertical: "vertical",
+	horizontal: "horizontal"
+}, w = (e) => e === C.horizontal ? C.vertical : C.horizontal, T = (e) => e === C.horizontal ? "gridColumn" : "gridRow", E = (e) => e === C.horizontal ? "translateX" : "translateY", D = (e) => e === C.horizontal ? "offsetLeft" : "offsetTop", O = (e) => e.getAttribute("aria-disabled") !== "true" && !e.disabled && !e.hasAttribute("hidden"), k = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), A = class extends o {
+	constructor(...e) {
+		super(...e), this.orientation = C.horizontal, this.tabs = [], this.tabpanels = [], this.scrollablePanel = !1, this._actionItemsSlottedContent = [], this.activeindicator = !0;
+	}
+	orientationChanged() {
+		this._registerTabsChange(), this.$fastController.isConnected && e.enqueue(() => this.#u(!1));
+	}
+	tabsChanged() {
+		for (let e of this.tabs) e.id ||= `tab-${_()}`, e.addEventListener("click", this.#o), e.addEventListener("keydown", this.#s);
+		this._registerTabsChange();
+	}
+	tabpanelsChanged() {
+		for (let e of this.tabpanels) e.id ||= `panel-${_()}`;
+		this._registerTabsChange();
+	}
+	#e() {
+		return k(this.tabs, this._tabsSlot.assignedNodes()) && k(this.tabpanels, this._tabPanelsSlot.assignedNodes());
+	}
+	get _pairedTabs() {
+		return this.tabs.slice(0, Math.min(this.tabs.length, this.tabpanels.length));
+	}
+	get _validTabs() {
+		return this._pairedTabs.filter(O);
+	}
+	activeidChanged() {
+		this._registerTabsChange();
+	}
+	get activetab() {
+		return this._validTabs.find((e) => e.id === this.activeid) ?? null;
+	}
+	#t(e) {
+		this.activeid = e.id, e.focus(), this.$emit("change", e);
+	}
+	#n = !1;
+	_registerTabsChange() {
+		this.#n || (this.#n = !0, window.queueMicrotask(() => {
+			this.$fastController.isConnected && this.#e() && this.#i(), this.#n = !1;
+		}));
+	}
+	#r = void 0;
+	#i() {
+		let e = this._validTabs, t = this.activeid;
+		if ((!e.length || t && !e.find((e) => e.id === t)) && (t = void 0), !t && e.length && (t = e[0].id), this.activeid !== t && (this.activeid = t, this.$emit("change", this.activetab)), this.#a(), this.activeid !== this.#r) {
+			if (this.activetab) {
+				let e = this.#r !== void 0;
+				this.#h(this.activetab, e), this.#u(e);
+			}
+			this.#r = this.activeid;
+		} else this.#u(this.#c);
+	}
+	#a() {
+		for (let [e, t] of this._pairedTabs.entries()) {
+			let n = this.tabpanels[e], r = t.id === this.activeid;
+			t instanceof b && (t.active = r), t.setAttribute("aria-controls", n.id), t.setAttribute("tabindex", r ? "0" : "-1"), r && this.connotation ? t.setAttribute("connotation", this.connotation) : t.removeAttribute("connotation"), t.classList.toggle("vertical", this.orientation === C.vertical), t.style[T(w(this.orientation))] = "", t.style[T(this.orientation)] = `${e + 1}`, n.setAttribute("aria-labelledby", t.id), n.hidden = !r;
+		}
+	}
+	#o = (e) => {
+		let t = e.currentTarget;
+		this._validTabs.includes(t) && this.#t(t);
+	};
+	#s = (e) => {
+		let t = this._validTabs, n = this.activetab;
+		if (!n) return;
+		let [r, i] = this.orientation === C.horizontal ? [f, p] : [d, h], a = {
+			[r]: () => t[(t.indexOf(n) - 1 + t.length) % t.length],
+			[i]: () => t[(t.indexOf(n) + 1) % t.length],
+			[m]: () => t[0],
+			End: () => t[t.length - 1]
+		};
+		a[e.key] && (e.preventDefault(), this.#t(a[e.key]()));
+	};
+	adjust(e) {
+		let t = this._validTabs, n = t.findIndex((e) => e.id === this.activeid);
+		if (n === -1) return;
+		let r = g(0, t.length - 1, n + e);
+		this.#t(t[r]);
+	}
+	#c = !1;
+	_onActiveIndicatorTransitionend(e) {
+		/* v8 ignore else -- @preserve */
+		e.propertyName === "transform" && (this.#c = !1);
+	}
+	#l() {
+		this.#c = !1, this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+	}
+	#u(e) {
+		let t = this._pairedTabs.findIndex((e) => e.id === this.activeid);
+		if (t === -1) return;
+		let n = this.activeIndicatorRef, r = n[D(this.orientation)];
+		n.style[T(this.orientation)] = `${t + 1}`;
+		let i = n[D(this.orientation)];
+		n.style[T(this.orientation)] = "";
+		let a = i - r, o = n.style.transform, s = `${E(this.orientation)}(${a}px)`;
+		e ? (n.classList.add("activeIndicatorTransition"), o !== s && (this.#c = !0)) : this.#l(), n.style.transform = s, n.style.setProperty(S, this.tabs[t].getBoundingClientRect().width + "px");
+	}
+	connotationChanged() {
+		this._registerTabsChange();
+	}
+	#d() {
+		this.#m.dispatchEvent(new Event("scroll"));
+	}
+	#f;
+	connectedCallback() {
+		super.connectedCallback(), this._registerTabsChange(), requestAnimationFrame(() => this.#d()), this.#f = new ResizeObserver(() => {
+			this.#u(this.#c), this.#d();
+		}), this.#f.observe(this.#m), this.#f.observe(this.tablist);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#f.disconnect();
+	}
+	get #p() {
+		return this.shadowRoot.querySelector(".tablist-wrapper");
+	}
+	get #m() {
+		return this.tablist.parentElement;
+	}
+	#h(e, t = !0) {
+		let n = this.tabs.findIndex((t) => t === e), r = 0, i = 0;
+		this.orientation === C.vertical ? (n === this.tabs.length - 1 && (i = this.#p.scrollHeight), n > 0 && n < this.tabs.length - 1 && (i = e.offsetTop - this.#p.offsetHeight / 2 + e.offsetHeight / 2)) : (n === this.tabs.length - 1 && (r = this.#p.scrollWidth), n > 0 && n < this.tabs.length - 1 && (r = e.offsetLeft - this.#p.offsetWidth / 2 + e.offsetWidth / 2)), this.#p.scrollTo({
+			top: i,
+			left: r,
+			behavior: t ? "smooth" : "instant"
+		});
+	}
 };
-const q = "--_tabs-active-tab-inline-size", l = {
-  vertical: "vertical",
-  horizontal: "horizontal"
-}, B = (i) => i === l.horizontal ? l.vertical : l.horizontal, v = (i) => i === l.horizontal ? "gridColumn" : "gridRow", H = (i) => i === l.horizontal ? "translateX" : "translateY", g = (i) => i === l.horizontal ? "offsetLeft" : "offsetTop", j = (i) => i.getAttribute("aria-disabled") !== "true" && !i.disabled && !i.hasAttribute("hidden"), m = (i, t) => i.length === t.length && i.every((a, e) => a === t[e]);
-class r extends _ {
-  constructor() {
-    super(...arguments), this.orientation = l.horizontal, this.tabs = [], this.tabpanels = [], this.#e = !1, this.#i = void 0, this.#n = (t) => {
-      const a = t.currentTarget;
-      this._validTabs.includes(a) && this.#r(a);
-    }, this.#l = (t) => {
-      const a = this._validTabs, e = this.activetab;
-      if (!e)
-        return;
-      const [s, o] = this.orientation === l.horizontal ? [$, S] : [L, E], c = {
-        [s]: () => a[(a.indexOf(e) - 1 + a.length) % a.length],
-        [o]: () => a[(a.indexOf(e) + 1) % a.length],
-        [O]: () => a[0],
-        [P]: () => a[a.length - 1]
-      };
-      c[t.key] && (t.preventDefault(), this.#r(c[t.key]()));
-    }, this.#t = !1, this.scrollablePanel = !1, this._actionItemsSlottedContent = [], this.activeindicator = !0;
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    this._registerTabsChange(), this.$fastController.isConnected && z.enqueue(() => this.#s(!1));
-  }
-  /**
-   * @internal
-   */
-  tabsChanged() {
-    for (const t of this.tabs)
-      t.id || (t.id = `tab-${u()}`), t.addEventListener("click", this.#n), t.addEventListener("keydown", this.#l);
-    this._registerTabsChange();
-  }
-  /**
-   * @internal
-   */
-  tabpanelsChanged() {
-    for (const t of this.tabpanels)
-      t.id || (t.id = `panel-${u()}`);
-    this._registerTabsChange();
-  }
-  #d() {
-    return m(this.tabs, this._tabsSlot.assignedNodes()) && m(this.tabpanels, this._tabPanelsSlot.assignedNodes());
-  }
-  /**
-   * Tabs that are paired with a tabpanel. Ignore any excess tabs or panels.
-   */
-  get _pairedTabs() {
-    return this.tabs.slice(
-      0,
-      Math.min(this.tabs.length, this.tabpanels.length)
-    );
-  }
-  /**
-   * Tabs that are eligible to become active.
-   */
-  get _validTabs() {
-    return this._pairedTabs.filter(j);
-  }
-  /**
-   * @internal
-   */
-  activeidChanged() {
-    this._registerTabsChange();
-  }
-  /**
-   * A reference to the active tab
-   * @public
-   */
-  get activetab() {
-    return this._validTabs.find((t) => t.id === this.activeid) ?? null;
-  }
-  #r(t) {
-    this.activeid = t.id, t.focus(), this.$emit("change", t);
-  }
-  #e;
-  /**
-   * Defer actual processing of changes into a microtask to wait for all DOM changes to complete. E.g. when tabs and
-   * active id are updated at the same time.
-   */
-  _registerTabsChange() {
-    this.#e || (this.#e = !0, window.queueMicrotask(() => {
-      this.$fastController.isConnected && this.#d() && this.#h(), this.#e = !1;
-    }));
-  }
-  #i;
-  #h() {
-    const t = this._validTabs;
-    let a = this.activeid;
-    if ((!t.length || a && !t.find((e) => e.id === a)) && (a = void 0), !a && t.length && (a = t[0].id), this.activeid !== a && (this.activeid = a, this.$emit("change", this.activetab)), this.#v(), this.activeid !== this.#i) {
-      if (this.activetab) {
-        const e = this.#i !== void 0;
-        this.#f(this.activetab, e), this.#s(e);
-      }
-      this.#i = this.activeid;
-    } else
-      this.#s(this.#t);
-  }
-  /**
-   * Updates the tabs and their panels according to the current state of the component.
-   */
-  #v() {
-    for (const [t, a] of this._pairedTabs.entries()) {
-      const e = this.tabpanels[t], s = a.id === this.activeid;
-      a instanceof x && (a.active = s), a.setAttribute("aria-controls", e.id), a.setAttribute("tabindex", s ? "0" : "-1"), s && this.connotation ? a.setAttribute("connotation", this.connotation) : a.removeAttribute("connotation"), a.classList.toggle(
-        "vertical",
-        this.orientation === l.vertical
-      ), a.style[v(B(this.orientation))] = "", a.style[v(this.orientation)] = `${t + 1}`, e.setAttribute("aria-labelledby", a.id), e.hidden = !s;
-    }
-  }
-  #n;
-  #l;
-  /**
-   * Adjusts the active index by numerical increments.
-   * Only enabled tabs are considered.
-   * @public
-   * @remarks
-   */
-  adjust(t) {
-    const a = this._validTabs, e = a.findIndex(
-      (o) => o.id === this.activeid
-    );
-    if (e === -1)
-      return;
-    const s = R(
-      0,
-      a.length - 1,
-      e + t
-    );
-    this.#r(a[s]);
-  }
-  #t;
-  /**
-   * @internal
-   */
-  _onActiveIndicatorTransitionend(t) {
-    t.propertyName === "transform" && (this.#t = !1);
-  }
-  #p() {
-    this.#t = !1, this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
-  }
-  #s(t) {
-    const a = this._pairedTabs.findIndex(
-      (y) => y.id === this.activeid
-    );
-    if (a === -1)
-      return;
-    const e = this.activeIndicatorRef, s = e[g(this.orientation)];
-    e.style[v(this.orientation)] = `${a + 1}`;
-    const o = e[g(this.orientation)];
-    e.style[v(this.orientation)] = "";
-    const c = o - s, w = e.style.transform, f = `${H(
-      this.orientation
-    )}(${c}px)`;
-    t ? (e.classList.add("activeIndicatorTransition"), w !== f && (this.#t = !0)) : this.#p(), e.style.transform = f, e.style.setProperty(
-      q,
-      this.tabs[a].getBoundingClientRect().width + "px"
-    );
-  }
-  /**
-   * @internal
-   */
-  connotationChanged() {
-    this._registerTabsChange();
-  }
-  #c() {
-    this.#b.dispatchEvent(new Event("scroll"));
-  }
-  #o;
-  connectedCallback() {
-    super.connectedCallback(), this._registerTabsChange(), requestAnimationFrame(() => this.#c()), this.#o = new ResizeObserver(() => {
-      this.#s(this.#t), this.#c();
-    }), this.#o.observe(this.#b), this.#o.observe(this.tablist);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#o.disconnect();
-  }
-  get #a() {
-    return this.shadowRoot.querySelector(".tablist-wrapper");
-  }
-  get #b() {
-    return this.tablist.parentElement;
-  }
-  #f(t, a = !0) {
-    const e = this.tabs.findIndex((c) => c === t);
-    let s = 0, o = 0;
-    this.orientation === l.vertical ? (e === this.tabs.length - 1 && (o = this.#a.scrollHeight), e > 0 && e < this.tabs.length - 1 && (o = t.offsetTop - this.#a.offsetHeight / 2 + t.offsetHeight / 2)) : (e === this.tabs.length - 1 && (s = this.#a.scrollWidth), e > 0 && e < this.tabs.length - 1 && (s = t.offsetLeft - this.#a.offsetWidth / 2 + t.offsetWidth / 2)), this.#a.scrollTo({
-      top: o,
-      left: s,
-      behavior: a ? "smooth" : "instant"
-    });
-  }
+l([r], A.prototype, "orientation", void 0), l([t], A.prototype, "tabs", void 0), l([t], A.prototype, "tabpanels", void 0), l([r], A.prototype, "activeid", void 0), l([t], A.prototype, "activeIndicatorRef", void 0), l([t], A.prototype, "tablist", void 0), l([r], A.prototype, "connotation", void 0), l([r], A.prototype, "gutters", void 0), l([r({
+	mode: "boolean",
+	attribute: "scrollable-panel"
+})], A.prototype, "scrollablePanel", void 0), l([r({ attribute: "tabs-layout" })], A.prototype, "tabsLayout", void 0), l([t], A.prototype, "_actionItemsSlottedContent", void 0), l([r({ mode: "boolean" })], A.prototype, "activeindicator", void 0);
+//#endregion
+//#region src/lib/tabs/tabs.template.ts
+var j = ({ connotation: e, orientation: t, gutters: n, scrollablePanel: r, tabsLayout: i, _actionItemsSlottedContent: a }) => u("base", `layout-${i ?? "align-start"}`, [`connotation-${e}`, !!e], [`orientation-${t}`, !!t], `gutters-${n ?? "small"}`, ["scroll", !!r], ["has-action-items", !!a.length]);
+function M(e, t) {
+	return t.scrollWidth <= t.clientWidth ? (e.classList.toggle("start-scroll", !1), e.classList.toggle("end-scroll", !1), !0) : !1;
 }
-n([
-  b
-], r.prototype, "orientation");
-n([
-  d
-], r.prototype, "tabs");
-n([
-  d
-], r.prototype, "tabpanels");
-n([
-  b
-], r.prototype, "activeid");
-n([
-  d
-], r.prototype, "activeIndicatorRef");
-n([
-  d
-], r.prototype, "tablist");
-n([
-  b
-], r.prototype, "connotation");
-n([
-  b
-], r.prototype, "gutters");
-n([
-  b({ mode: "boolean", attribute: "scrollable-panel" })
-], r.prototype, "scrollablePanel");
-n([
-  b({ attribute: "tabs-layout" })
-], r.prototype, "tabsLayout");
-n([
-  d
-], r.prototype, "_actionItemsSlottedContent");
-n([
-  b({ mode: "boolean" })
-], r.prototype, "activeindicator");
-const U = ({
-  connotation: i,
-  orientation: t,
-  gutters: a,
-  scrollablePanel: e,
-  tabsLayout: s,
-  _actionItemsSlottedContent: o
-}) => W(
-  "base",
-  `layout-${s ?? "align-start"}`,
-  [`connotation-${i}`, !!i],
-  [`orientation-${t}`, !!t],
-  `gutters-${a ?? "small"}`,
-  ["scroll", !!e],
-  ["has-action-items", !!o.length]
-);
-function V(i, t) {
-  return t.scrollWidth <= t.clientWidth ? (i.classList.toggle("start-scroll", !1), i.classList.toggle("end-scroll", !1), !0) : !1;
+function N(e, t) {
+	e.classList.toggle("start-scroll", t.scrollLeft > 0);
 }
-function F(i, t) {
-  i.classList.toggle("start-scroll", t.scrollLeft > 0);
+function P(e, t) {
+	e.classList.toggle("end-scroll", t.scrollLeft + 1 < t.scrollWidth - t.clientWidth);
 }
-function K(i, t) {
-  i.classList.toggle(
-    "end-scroll",
-    t.scrollLeft + 1 < t.scrollWidth - t.clientWidth
-  );
+function F(e, { event: t }) {
+	let n = t.currentTarget, r = n.parentElement;
+	M(r, n) || (N(r, n), P(r, n));
 }
-function M(i, { event: t }) {
-  const a = t.currentTarget, e = a.parentElement;
-  V(e, a) || (F(e, a), K(e, a));
-}
-const Q = C`
+//#endregion
+//#region src/lib/tabs/index.ts
+a(i("tabs", A, n`
 	<template>
-		<div class="${U}">
+		<div class="${j}">
 			<div class="tabs">
 				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${M}">
-						<div class="tablist" role="tablist" ${h("tablist")}>
-							<slot name="tab" ${h("_tabsSlot")} ${p("tabs")}></slot>
+					<div class="tablist-wrapper" @scroll="${F}">
+						<div class="tablist" role="tablist" ${s("tablist")}>
+							<slot name="tab" ${s("_tabsSlot")} ${c("tabs")}></slot>
 							<div
-								${h("activeIndicatorRef")}
+								${s("activeIndicatorRef")}
 								class="active-indicator"
-								@transitionend="${(i, t) => i._onActiveIndicatorTransitionend(
-  t.event
-)}"
+								@transitionend="${(e, t) => e._onActiveIndicatorTransitionend(t.event)}"
 							></div>
 						</div>
 					</div>
 				</div>
 				<slot
 					name="action-items"
-					${p("_actionItemsSlottedContent")}
+					${c("_actionItemsSlottedContent")}
 				></slot>
 			</div>
 			<div class="tabpanel" part="tab-panel">
 				<slot
 					name="tabpanel"
-					${h("_tabPanelsSlot")}
-					${p("tabpanels")}
+					${s("_tabPanelsSlot")}
+					${c("tabpanels")}
 				></slot>
 			</div>
 		</div>
 	</template>
-`, X = A(
-  "tabs",
-  r,
-  Q,
-  [k, T],
-  {
-    styles: D
-  }
-), Y = I(X);
-Y();
+`, [y, v], { styles: x }))();
+//#endregion