@vonage/vivid 5.15.0 → 5.16.0

package/tabs/definition.js

@@ -1,462 +1,3 @@
-import { VwcTabElement as Tab, tabDefinition } from '../tab/definition.js';
-import { tabPanelDefinition } from '../tab-panel/definition.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { Updates, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
-import { keyArrowUp, keyArrowDown, uniqueId, limit, keyEnd, keyHome, classNames } from '@microsoft/fast-web-utilities';
-import { a as keyArrowLeft, k as keyArrowRight } from '../unbundled/key-codes.js';
-
-const styles = ":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 __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
-const TabsGutters = {
-  None: "none",
-  Small: "small"
-};
-const TabsOrientation = {
-  vertical: "vertical",
-  horizontal: "horizontal"
-};
-const oppositeOrientation = (orientation) => orientation === TabsOrientation.horizontal ? TabsOrientation.vertical : TabsOrientation.horizontal;
-const gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
-const translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
-const offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
-const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.disabled && !el.hasAttribute("hidden");
-const arrayShallowEquals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
-class Tabs extends VividElement {
-  constructor() {
-    super(...arguments);
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    this.orientation = TabsOrientation.horizontal;
-    this.tabs = [];
-    this.tabpanels = [];
-    this.#isTabsChangeQueued = false;
-    this.#lastActiveId = void 0;
-    this.#onTabClick = (event) => {
-      const selectedTab = event.currentTarget;
-      if (this._validTabs.includes(selectedTab)) {
-        this.#setActiveTabDueToUserInteraction(selectedTab);
-      }
-    };
-    this.#onTabKeyDown = (event) => {
-      const tabs = this._validTabs;
-      const activeTab = this.activetab;
-      if (!activeTab) {
-        return;
-      }
-      const [arrowKeyPrev, arrowKeyNext] = this.orientation === TabsOrientation.horizontal ? [keyArrowLeft, keyArrowRight] : [keyArrowUp, keyArrowDown];
-      const keyToNextTab = {
-        [arrowKeyPrev]: () => tabs[(tabs.indexOf(activeTab) - 1 + tabs.length) % tabs.length],
-        [arrowKeyNext]: () => tabs[(tabs.indexOf(activeTab) + 1) % tabs.length],
-        [keyHome]: () => tabs[0],
-        [keyEnd]: () => tabs[tabs.length - 1]
-      };
-      if (keyToNextTab[event.key]) {
-        event.preventDefault();
-        this.#setActiveTabDueToUserInteraction(keyToNextTab[event.key]());
-      }
-    };
-    this.#isTransitioningTransform = false;
-    this.scrollablePanel = false;
-    this._actionItemsSlottedContent = [];
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    this.activeindicator = true;
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    this._registerTabsChange();
-    if (this.$fastController.isConnected) {
-      Updates.enqueue(() => this.#moveActiveIndicator(false));
-    }
-  }
-  /**
-   * @internal
-   */
-  tabsChanged() {
-    for (const tab of this.tabs) {
-      if (!tab.id) {
-        tab.id = `tab-${uniqueId()}`;
-      }
-      tab.addEventListener("click", this.#onTabClick);
-      tab.addEventListener("keydown", this.#onTabKeyDown);
-    }
-    this._registerTabsChange();
-  }
-  /**
-   * @internal
-   */
-  tabpanelsChanged() {
-    for (const panel of this.tabpanels) {
-      if (!panel.id) {
-        panel.id = `panel-${uniqueId()}`;
-      }
-    }
-    this._registerTabsChange();
-  }
-  #areSlotsSynced() {
-    return arrayShallowEquals(this.tabs, this._tabsSlot.assignedNodes()) && arrayShallowEquals(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(isFocusableElement);
-  }
-  /**
-   * @internal
-   */
-  activeidChanged() {
-    this._registerTabsChange();
-  }
-  /**
-   * A reference to the active tab
-   * @public
-   */
-  get activetab() {
-    return this._validTabs.find((tab) => tab.id === this.activeid) ?? null;
-  }
-  #setActiveTabDueToUserInteraction(tab) {
-    this.activeid = tab.id;
-    tab.focus();
-    this.$emit("change", tab);
-  }
-  #isTabsChangeQueued;
-  /**
-   * 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() {
-    if (this.#isTabsChangeQueued) {
-      return;
-    }
-    this.#isTabsChangeQueued = true;
-    window.queueMicrotask(() => {
-      if (this.$fastController.isConnected && this.#areSlotsSynced()) {
-        this.#handleTabsChange();
-      }
-      this.#isTabsChangeQueued = false;
-    });
-  }
-  #lastActiveId;
-  #handleTabsChange() {
-    const validTabs = this._validTabs;
-    let newActiveId = this.activeid;
-    if (!validTabs.length || newActiveId && !validTabs.find((t) => t.id === newActiveId)) {
-      newActiveId = void 0;
-    }
-    if (!newActiveId && validTabs.length) {
-      newActiveId = validTabs[0].id;
-    }
-    if (this.activeid !== newActiveId) {
-      this.activeid = newActiveId;
-      this.$emit("change", this.activetab);
-    }
-    this.#updateSlottedChildren();
-    if (this.activeid !== this.#lastActiveId) {
-      if (this.activetab) {
-        const shouldAnimate = this.#lastActiveId !== void 0;
-        this.#scrollToTab(this.activetab, shouldAnimate);
-        this.#moveActiveIndicator(shouldAnimate);
-      }
-      this.#lastActiveId = this.activeid;
-    } else {
-      this.#moveActiveIndicator(this.#isTransitioningTransform);
-    }
-  }
-  /**
-   * Updates the tabs and their panels according to the current state of the component.
-   */
-  #updateSlottedChildren() {
-    for (const [index, tab] of this._pairedTabs.entries()) {
-      const panel = this.tabpanels[index];
-      const isActiveTab = tab.id === this.activeid;
-      /* v8 ignore else -- @preserve */
-      if (tab instanceof Tab) {
-        tab.active = isActiveTab;
-      }
-      tab.setAttribute("aria-controls", panel.id);
-      tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
-      if (isActiveTab && this.connotation) {
-        tab.setAttribute("connotation", this.connotation);
-      } else {
-        tab.removeAttribute("connotation");
-      }
-      tab.classList.toggle(
-        "vertical",
-        this.orientation === TabsOrientation.vertical
-      );
-      tab.style[gridProperty(oppositeOrientation(this.orientation))] = "";
-      tab.style[gridProperty(this.orientation)] = `${index + 1}`;
-      panel.setAttribute("aria-labelledby", tab.id);
-      panel.hidden = !isActiveTab;
-    }
-  }
-  #onTabClick;
-  #onTabKeyDown;
-  /**
-   * Adjusts the active index by numerical increments.
-   * Only enabled tabs are considered.
-   * @public
-   * @remarks
-   */
-  adjust(adjustment) {
-    const focusableTabs = this._validTabs;
-    const currentActiveTabIndex = focusableTabs.findIndex(
-      (t) => t.id === this.activeid
-    );
-    if (currentActiveTabIndex === -1) {
-      return;
-    }
-    const nextTabIndex = limit(
-      0,
-      focusableTabs.length - 1,
-      currentActiveTabIndex + adjustment
-    );
-    this.#setActiveTabDueToUserInteraction(focusableTabs[nextTabIndex]);
-  }
-  #isTransitioningTransform;
-  /**
-   * @internal
-   */
-  _onActiveIndicatorTransitionend(event) {
-    /* v8 ignore else -- @preserve */
-    if (event.propertyName === "transform") {
-      this.#isTransitioningTransform = false;
-    }
-  }
-  #cancelAnimationIfNeeded() {
-    this.#isTransitioningTransform = false;
-    this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
-  }
-  #moveActiveIndicator(shouldAnimate) {
-    const activeTabIndex = this._pairedTabs.findIndex(
-      (tab) => tab.id === this.activeid
-    );
-    if (activeTabIndex === -1) {
-      return;
-    }
-    const indicatorEl = this.activeIndicatorRef;
-    const currentOffset = indicatorEl[offsetProperty(this.orientation)];
-    indicatorEl.style[gridProperty(this.orientation)] = `${activeTabIndex + 1}`;
-    const targetOffset = indicatorEl[offsetProperty(this.orientation)];
-    indicatorEl.style[gridProperty(this.orientation)] = "";
-    const relativeOffset = targetOffset - currentOffset;
-    const currentTransform = indicatorEl.style.transform;
-    const targetTransform = `${translateProperty(
-      this.orientation
-    )}(${relativeOffset}px)`;
-    if (shouldAnimate) {
-      indicatorEl.classList.add("activeIndicatorTransition");
-      if (currentTransform !== targetTransform) {
-        this.#isTransitioningTransform = true;
-      }
-    } else {
-      this.#cancelAnimationIfNeeded();
-    }
-    indicatorEl.style.transform = targetTransform;
-    indicatorEl.style.setProperty(
-      ACTIVE_TAB_WIDTH,
-      this.tabs[activeTabIndex].getBoundingClientRect().width + "px"
-    );
-  }
-  /**
-   * @internal
-   */
-  connotationChanged() {
-    this._registerTabsChange();
-  }
-  #updateScrollStatus() {
-    this.#tabListScrollWrapper.dispatchEvent(new Event("scroll"));
-  }
-  #resizeObserver;
-  connectedCallback() {
-    super.connectedCallback();
-    this._registerTabsChange();
-    requestAnimationFrame(() => this.#updateScrollStatus());
-    this.#resizeObserver = new ResizeObserver(() => {
-      this.#moveActiveIndicator(this.#isTransitioningTransform);
-      this.#updateScrollStatus();
-    });
-    this.#resizeObserver.observe(this.#tabListScrollWrapper);
-    this.#resizeObserver.observe(this.tablist);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#resizeObserver.disconnect();
-  }
-  get #tabListWrapper() {
-    return this.shadowRoot.querySelector(".tablist-wrapper");
-  }
-  get #tabListScrollWrapper() {
-    return this.tablist.parentElement;
-  }
-  #scrollToTab(tab, shouldAnimate = true) {
-    const index = this.tabs.findIndex((t) => t === tab);
-    let left = 0;
-    let top = 0;
-    if (this.orientation === TabsOrientation.vertical) {
-      if (index === this.tabs.length - 1) {
-        top = this.#tabListWrapper.scrollHeight;
-      }
-      if (index > 0 && index < this.tabs.length - 1) {
-        top = tab.offsetTop - this.#tabListWrapper.offsetHeight / 2 + tab.offsetHeight / 2;
-      }
-    } else {
-      if (index === this.tabs.length - 1) {
-        left = this.#tabListWrapper.scrollWidth;
-      }
-      if (index > 0 && index < this.tabs.length - 1) {
-        left = tab.offsetLeft - this.#tabListWrapper.offsetWidth / 2 + tab.offsetWidth / 2;
-      }
-    }
-    this.#tabListWrapper.scrollTo({
-      top,
-      left,
-      behavior: shouldAnimate ? "smooth" : "instant"
-    });
-  }
-}
-__decorateClass([
-  attr
-], Tabs.prototype, "orientation");
-__decorateClass([
-  observable
-], Tabs.prototype, "tabs");
-__decorateClass([
-  observable
-], Tabs.prototype, "tabpanels");
-__decorateClass([
-  attr
-], Tabs.prototype, "activeid");
-__decorateClass([
-  observable
-], Tabs.prototype, "activeIndicatorRef");
-__decorateClass([
-  observable
-], Tabs.prototype, "tablist");
-__decorateClass([
-  attr
-], Tabs.prototype, "connotation");
-__decorateClass([
-  attr
-], Tabs.prototype, "gutters");
-__decorateClass([
-  attr({ mode: "boolean", attribute: "scrollable-panel" })
-], Tabs.prototype, "scrollablePanel");
-__decorateClass([
-  attr({ attribute: "tabs-layout" })
-], Tabs.prototype, "tabsLayout");
-__decorateClass([
-  observable
-], Tabs.prototype, "_actionItemsSlottedContent");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Tabs.prototype, "activeindicator");
-
-const getClasses = ({
-  connotation,
-  orientation,
-  gutters,
-  scrollablePanel,
-  tabsLayout,
-  _actionItemsSlottedContent
-}) => classNames(
-  "base",
-  `layout-${tabsLayout ?? "align-start"}`,
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`orientation-${orientation}`, Boolean(orientation)],
-  `gutters-${gutters ?? "small"}`,
-  ["scroll", Boolean(scrollablePanel)],
-  ["has-action-items", Boolean(_actionItemsSlottedContent.length)]
-);
-function setNoScrollState(scrollShadow, scrollWrapper) {
-  if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
-    scrollShadow.classList.toggle("start-scroll", false);
-    scrollShadow.classList.toggle("end-scroll", false);
-    return true;
-  }
-  return false;
-}
-function addStartShadow(scrollShadow, scrollWrapper) {
-  scrollShadow.classList.toggle("start-scroll", scrollWrapper.scrollLeft > 0);
-}
-function addEndShadow(scrollShadow, scrollWrapper) {
-  scrollShadow.classList.toggle(
-    "end-scroll",
-    scrollWrapper.scrollLeft + 1 < scrollWrapper.scrollWidth - scrollWrapper.clientWidth
-  );
-}
-function setShadowWhenScrollTabs(_, { event }) {
-  const scrollWrapper = event.currentTarget;
-  const scrollShadow = scrollWrapper.parentElement;
-  if (setNoScrollState(scrollShadow, scrollWrapper)) {
-    return;
-  }
-  addStartShadow(scrollShadow, scrollWrapper);
-  addEndShadow(scrollShadow, scrollWrapper);
-}
-const TabsTemplate = html`
-	<template>
-		<div class="${getClasses}">
-			<div class="tabs">
-				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
-						<div class="tablist" role="tablist" ${ref("tablist")}>
-							<slot name="tab" ${ref("_tabsSlot")} ${slotted("tabs")}></slot>
-							<div
-								${ref("activeIndicatorRef")}
-								class="active-indicator"
-								@transitionend="${(x, c) => x._onActiveIndicatorTransitionend(
-  c.event
-)}"
-							></div>
-						</div>
-					</div>
-				</div>
-				<slot
-					name="action-items"
-					${slotted("_actionItemsSlottedContent")}
-				></slot>
-			</div>
-			<div class="tabpanel" part="tab-panel">
-				<slot
-					name="tabpanel"
-					${ref("_tabPanelsSlot")}
-					${slotted("tabpanels")}
-				></slot>
-			</div>
-		</div>
-	</template>
-`;
-
-const tabsDefinition = defineVividComponent(
-  "tabs",
-  Tabs,
-  TabsTemplate,
-  [tabDefinition, tabPanelDefinition],
-  {
-    styles
-  }
-);
-const registerTabs = createRegisterFunction(tabsDefinition);
-
+import "../unbundled/definition2.js";
+import { i as TabsGutters, n as tabsDefinition, r as Tabs, t as registerTabs } from "../unbundled/definition68.js";
 export { TabsGutters, Tabs as VwcTabsElement, registerTabs, tabsDefinition };

package/tabs/index.cjs

@@ -1,31 +1,31 @@
-"use strict";const w=require("../bundled/definition20.cjs"),k=require("../bundled/definition21.cjs"),o=require("../bundled/vivid-element.cjs"),d=require("../bundled/key-codes.cjs"),u=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),h=require("../bundled/ref.cjs"),p=require("../bundled/slotted.cjs"),_=require("../bundled/class-names.cjs"),z=':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 C=Object.defineProperty,l=(a,t,e,i)=>{for(var s=void 0,r=a.length-1,b;r>=0;r--)(b=a[r])&&(s=b(t,e,s)||s);return s&&C(t,e,s),s};const I="--_tabs-active-tab-inline-size",c={vertical:"vertical",horizontal:"horizontal"},$=a=>a===c.horizontal?c.vertical:c.horizontal,v=a=>a===c.horizontal?"gridColumn":"gridRow",A=a=>a===c.horizontal?"translateX":"translateY",g=a=>a===c.horizontal?"offsetLeft":"offsetTop",S=a=>a.getAttribute("aria-disabled")!=="true"&&!a.disabled&&!a.hasAttribute("hidden"),m=(a,t)=>a.length===t.length&&a.every((e,i)=>e===t[i]);class n extends o.VividElement{constructor(){super(...arguments),this.orientation=c.horizontal,this.tabs=[],this.tabpanels=[],this.#i=!1,this.#a=void 0,this.#n=t=>{const e=t.currentTarget;this._validTabs.includes(e)&&this.#r(e)},this.#l=t=>{const e=this._validTabs,i=this.activetab;if(!i)return;const[s,r]=this.orientation===c.horizontal?[d.keyArrowLeft,d.keyArrowRight]:[d.keyArrowUp,d.keyArrowDown],b={[s]:()=>e[(e.indexOf(i)-1+e.length)%e.length],[r]:()=>e[(e.indexOf(i)+1)%e.length],[d.keyHome]:()=>e[0],[d.keyEnd]:()=>e[e.length-1]};b[t.key]&&(t.preventDefault(),this.#r(b[t.key]()))},this.#t=!1,this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&o.Updates.enqueue(()=>this.#s(!1))}tabsChanged(){for(const t of this.tabs)t.id||(t.id=`tab-${u.uniqueId()}`),t.addEventListener("click",this.#n),t.addEventListener("keydown",this.#l);this._registerTabsChange()}tabpanelsChanged(){for(const t of this.tabpanels)t.id||(t.id=`panel-${u.uniqueId()}`);this._registerTabsChange()}#d(){return m(this.tabs,this._tabsSlot.assignedNodes())&&m(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(S)}activeidChanged(){this._registerTabsChange()}get activetab(){return this._validTabs.find(t=>t.id===this.activeid)??null}#r(t){this.activeid=t.id,t.focus(),this.$emit("change",t)}#i;_registerTabsChange(){this.#i||(this.#i=!0,window.queueMicrotask(()=>{this.$fastController.isConnected&&this.#d()&&this.#h(),this.#i=!1}))}#a;#h(){const t=this._validTabs;let e=this.activeid;if((!t.length||e&&!t.find(i=>i.id===e))&&(e=void 0),!e&&t.length&&(e=t[0].id),this.activeid!==e&&(this.activeid=e,this.$emit("change",this.activetab)),this.#v(),this.activeid!==this.#a){if(this.activetab){const i=this.#a!==void 0;this.#f(this.activetab,i),this.#s(i)}this.#a=this.activeid}else this.#s(this.#t)}#v(){for(const[t,e]of this._pairedTabs.entries()){const i=this.tabpanels[t],s=e.id===this.activeid;/* v8 ignore else -- @preserve */e instanceof w.Tab&&(e.active=s),e.setAttribute("aria-controls",i.id),e.setAttribute("tabindex",s?"0":"-1"),s&&this.connotation?e.setAttribute("connotation",this.connotation):e.removeAttribute("connotation"),e.classList.toggle("vertical",this.orientation===c.vertical),e.style[v($(this.orientation))]="",e.style[v(this.orientation)]=`${t+1}`,i.setAttribute("aria-labelledby",e.id),i.hidden=!s}}#n;#l;adjust(t){const e=this._validTabs,i=e.findIndex(r=>r.id===this.activeid);if(i===-1)return;const s=T.limit(0,e.length-1,i+t);this.#r(e[s])}#t;_onActiveIndicatorTransitionend(t){/* v8 ignore else -- @preserve */t.propertyName==="transform"&&(this.#t=!1)}#p(){this.#t=!1,this.activeIndicatorRef.classList.remove("activeIndicatorTransition")}#s(t){const e=this._pairedTabs.findIndex(x=>x.id===this.activeid);if(e===-1)return;const i=this.activeIndicatorRef,s=i[g(this.orientation)];i.style[v(this.orientation)]=`${e+1}`;const r=i[g(this.orientation)];i.style[v(this.orientation)]="";const b=r-s,y=i.style.transform,f=`${A(this.orientation)}(${b}px)`;t?(i.classList.add("activeIndicatorTransition"),y!==f&&(this.#t=!0)):this.#p(),i.style.transform=f,i.style.setProperty(I,this.tabs[e].getBoundingClientRect().width+"px")}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#e(){return this.shadowRoot.querySelector(".tablist-wrapper")}get#b(){return this.tablist.parentElement}#f(t,e=!0){const i=this.tabs.findIndex(b=>b===t);let s=0,r=0;this.orientation===c.vertical?(i===this.tabs.length-1&&(r=this.#e.scrollHeight),i>0&&i<this.tabs.length-1&&(r=t.offsetTop-this.#e.offsetHeight/2+t.offsetHeight/2)):(i===this.tabs.length-1&&(s=this.#e.scrollWidth),i>0&&i<this.tabs.length-1&&(s=t.offsetLeft-this.#e.offsetWidth/2+t.offsetWidth/2)),this.#e.scrollTo({top:r,left:s,behavior:e?"smooth":"instant"})}}l([o.attr],n.prototype,"orientation");l([o.observable],n.prototype,"tabs");l([o.observable],n.prototype,"tabpanels");l([o.attr],n.prototype,"activeid");l([o.observable],n.prototype,"activeIndicatorRef");l([o.observable],n.prototype,"tablist");l([o.attr],n.prototype,"connotation");l([o.attr],n.prototype,"gutters");l([o.attr({mode:"boolean",attribute:"scrollable-panel"})],n.prototype,"scrollablePanel");l([o.attr({attribute:"tabs-layout"})],n.prototype,"tabsLayout");l([o.observable],n.prototype,"_actionItemsSlottedContent");l([o.attr({mode:"boolean"})],n.prototype,"activeindicator");const L=({connotation:a,orientation:t,gutters:e,scrollablePanel:i,tabsLayout:s,_actionItemsSlottedContent:r})=>_.classNames("base",`layout-${s??"align-start"}`,[`connotation-${a}`,!!a],[`orientation-${t}`,!!t],`gutters-${e??"small"}`,["scroll",!!i],["has-action-items",!!r.length]);function q(a,t){return t.scrollWidth<=t.clientWidth?(a.classList.toggle("start-scroll",!1),a.classList.toggle("end-scroll",!1),!0):!1}function E(a,t){a.classList.toggle("start-scroll",t.scrollLeft>0)}function P(a,t){a.classList.toggle("end-scroll",t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function O(a,{event:t}){const e=t.currentTarget,i=e.parentElement;q(i,e)||(E(i,e),P(i,e))}const R=o.html`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/slotted.cjs`);require(`../bundled/definition2.cjs`);const r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/key-codes.cjs`),o=require(`../bundled/numbers.cjs`),s=require(`../bundled/strings.cjs`),c=require(`../bundled/definition20.cjs`),l=require(`../bundled/definition21.cjs`);var u=`: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}`,d=`--_tabs-active-tab-inline-size`,f={vertical:`vertical`,horizontal:`horizontal`},p=e=>e===f.horizontal?f.vertical:f.horizontal,m=e=>e===f.horizontal?`gridColumn`:`gridRow`,h=e=>e===f.horizontal?`translateX`:`translateY`,g=e=>e===f.horizontal?`offsetLeft`:`offsetTop`,_=e=>e.getAttribute(`aria-disabled`)!==`true`&&!e.disabled&&!e.hasAttribute(`hidden`),v=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),y=class extends e.t{constructor(...e){super(...e),this.orientation=f.horizontal,this.tabs=[],this.tabpanels=[],this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&e.O.enqueue(()=>this.#u(!1))}tabsChanged(){for(let e of this.tabs)e.id||=`tab-${s.t()}`,e.addEventListener(`click`,this.#o),e.addEventListener(`keydown`,this.#s);this._registerTabsChange()}tabpanelsChanged(){for(let e of this.tabpanels)e.id||=`panel-${s.t()}`;this._registerTabsChange()}#e(){return v(this.tabs,this._tabsSlot.assignedNodes())&&v(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(_)}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 l.r&&(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===f.vertical),t.style[m(p(this.orientation))]=``,t.style[m(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===f.horizontal?[a.n,a.r]:[a.i,a.t],o={[r]:()=>t[(t.indexOf(n)-1+t.length)%t.length],[i]:()=>t[(t.indexOf(n)+1)%t.length],[a.s]:()=>t[0],End:()=>t[t.length-1]};o[e.key]&&(e.preventDefault(),this.#t(o[e.key]()))};adjust(e){let t=this._validTabs,n=t.findIndex(e=>e.id===this.activeid);if(n===-1)return;let r=o.n(0,t.length-1,n+e);this.#t(t[r])}#c=!1;_onActiveIndicatorTransitionend(e){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[g(this.orientation)];n.style[m(this.orientation)]=`${t+1}`;let i=n[g(this.orientation)];n.style[m(this.orientation)]=``;let a=i-r,o=n.style.transform,s=`${h(this.orientation)}(${a}px)`;e?(n.classList.add(`activeIndicatorTransition`),o!==s&&(this.#c=!0)):this.#l(),n.style.transform=s,n.style.setProperty(d,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===f.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`})}};r.t([e.l],y.prototype,`orientation`,void 0),r.t([e.T],y.prototype,`tabs`,void 0),r.t([e.T],y.prototype,`tabpanels`,void 0),r.t([e.l],y.prototype,`activeid`,void 0),r.t([e.T],y.prototype,`activeIndicatorRef`,void 0),r.t([e.T],y.prototype,`tablist`,void 0),r.t([e.l],y.prototype,`connotation`,void 0),r.t([e.l],y.prototype,`gutters`,void 0),r.t([e.l({mode:`boolean`,attribute:`scrollable-panel`})],y.prototype,`scrollablePanel`,void 0),r.t([e.l({attribute:`tabs-layout`})],y.prototype,`tabsLayout`,void 0),r.t([e.T],y.prototype,`_actionItemsSlottedContent`,void 0),r.t([e.l({mode:`boolean`})],y.prototype,`activeindicator`,void 0);var b=({connotation:e,orientation:t,gutters:n,scrollablePanel:r,tabsLayout:a,_actionItemsSlottedContent:o})=>i.t(`base`,`layout-${a??`align-start`}`,[`connotation-${e}`,!!e],[`orientation-${t}`,!!t],`gutters-${n??`small`}`,[`scroll`,!!r],[`has-action-items`,!!o.length]);function x(e,t){return t.scrollWidth<=t.clientWidth?(e.classList.toggle(`start-scroll`,!1),e.classList.toggle(`end-scroll`,!1),!0):!1}function S(e,t){e.classList.toggle(`start-scroll`,t.scrollLeft>0)}function C(e,t){e.classList.toggle(`end-scroll`,t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function w(e,{event:t}){let n=t.currentTarget,r=n.parentElement;x(r,n)||(S(r,n),C(r,n))}var T=e.d`
 	<template>
-		<div class="${L}">
+		<div class="${b}">
 			<div class="tabs">
 				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${O}">
-						<div class="tablist" role="tablist" ${h.ref("tablist")}>
-							<slot name="tab" ${h.ref("_tabsSlot")} ${p.slotted("tabs")}></slot>
+					<div class="tablist-wrapper" @scroll="${w}">
+						<div class="tablist" role="tablist" ${t.t(`tablist`)}>
+							<slot name="tab" ${t.t(`_tabsSlot`)} ${n.t(`tabs`)}></slot>
 							<div
-								${h.ref("activeIndicatorRef")}
+								${t.t(`activeIndicatorRef`)}
 								class="active-indicator"
-								@transitionend="${(a,t)=>a._onActiveIndicatorTransitionend(t.event)}"
+								@transitionend="${(e,t)=>e._onActiveIndicatorTransitionend(t.event)}"
 							></div>
 						</div>
 					</div>
 				</div>
 				<slot
 					name="action-items"
-					${p.slotted("_actionItemsSlottedContent")}
+					${n.t(`_actionItemsSlottedContent`)}
 				></slot>
 			</div>
 			<div class="tabpanel" part="tab-panel">
 				<slot
 					name="tabpanel"
-					${h.ref("_tabPanelsSlot")}
-					${p.slotted("tabpanels")}
+					${t.t(`_tabPanelsSlot`)}
+					${n.t(`tabpanels`)}
 				></slot>
 			</div>
 		</div>
 	</template>
-`,N=o.defineVividComponent("tabs",n,R,[w.tabDefinition,k.tabPanelDefinition],{styles:z}),W=o.createRegisterFunction(N);W();
+`,E=e.o(`tabs`,y,T,[l.n,c.n],{styles:u});e.s(E)();