@base-ui/react 1.7.0 → 1.8.0

package/tabs/indicator/TabsIndicator.js

@@ -7,14 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabsIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _dom = require("@floating-ui/utils/dom");
 var _useForcedRerendering = require("@base-ui/utils/useForcedRerendering");
+var _owner = require("@base-ui/utils/owner");
 var _indicator = require("#prehydration/tabs/indicator");
+var _PrehydrationScript2 = require("../../internals/PrehydrationScript");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _getCssDimensions = require("../../utils/getCssDimensions");
-var _PrehydrationScript2 = require("../../internals/PrehydrationScript");
+var _getElementTransform = require("../../utils/getElementTransform");
 var _TabsRootContext = require("../root/TabsRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _TabsListContext = require("../list/TabsListContext");
+var TabsIndicatorCssVars = _interopRequireWildcard(require("./TabsIndicatorCssVars"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _PrehydrationScript;
 const stateAttributesMapping = {
@@ -23,6 +27,10 @@ const stateAttributesMapping = {
   activeTabSize: () => null
 };
 
+// `offsetLeft`/`offsetTop` are rounded to whole pixels and the error can compound
+// across the offset parent chain.
+const MAX_LAYOUT_ROUNDING_ERROR = 2;
+
 /**
  * A visual indicator that can be styled to match the position of the currently active tab.
  * Renders a `<span>` element.
@@ -74,15 +82,30 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
       const tabsListRect = tabsListElement.getBoundingClientRect();
       const scaleX = tabListWidth > 0 ? tabsListRect.width / tabListWidth : 1;
       const scaleY = tabListHeight > 0 ? tabsListRect.height / tabListHeight : 1;
-      const hasNonZeroScale = scaleX > Number.EPSILON && scaleY > Number.EPSILON;
-      if (hasNonZeroScale) {
-        const tabLeftDelta = tabRect.left - tabsListRect.left;
-        const tabTopDelta = tabRect.top - tabsListRect.top;
-        left = tabLeftDelta / scaleX + tabsListElement.scrollLeft - tabsListElement.clientLeft;
-        top = tabTopDelta / scaleY + tabsListElement.scrollTop - tabsListElement.clientTop;
-      } else {
-        left = activeTab.offsetLeft;
-        top = activeTab.offsetTop;
+
+      // Layout offsets are immune to transforms, but lose sub-pixel precision.
+      const layoutOffset = getLayoutOffset(activeTab, tabsListElement);
+      left = layoutOffset.left;
+      top = layoutOffset.top;
+      const rectLeft = (tabRect.left - tabsListRect.left) / scaleX + tabsListElement.scrollLeft - tabsListElement.clientLeft;
+      const rectTop = (tabRect.top - tabsListRect.top) / scaleY + tabsListElement.scrollTop - tabsListElement.clientTop;
+
+      // The rect-based offset is sub-pixel-precise but is derived from projected viewport
+      // geometry: a rotation, skew, flip, perspective, or 3D transform on the tab or any
+      // ancestor warps it beyond what the scale division can undo. When it agrees with the
+      // layout offset (up to layout rounding), no distortion is in effect and the more
+      // precise value is safe to use. A tab list scaled to zero divides by zero just above,
+      // and the resulting `NaN`/`Infinity` fails this same check, leaving the layout offset
+      // in place — so a degenerate scale needs no guard of its own.
+      //
+      // The active tab's own translation moves the rect but not the layout offset, so
+      // strip it from the comparison. This lets the indicator follow tab-local animations
+      // (e.g. `transform: translateX(12px)` on the selected tab) — the indicator is a
+      // sibling of the tab and does not inherit its transform.
+      const tabTranslation = getActiveTabTranslation(activeTab);
+      if (Math.abs(rectLeft - tabTranslation.x - left) <= MAX_LAYOUT_ROUNDING_ERROR && Math.abs(rectTop - tabTranslation.y - top) <= MAX_LAYOUT_ROUNDING_ERROR) {
+        left = rectLeft;
+        top = rectTop;
       }
       width = computedWidth;
       height = computedHeight;
@@ -101,12 +124,12 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
     height
   } : null;
   const style = isTabSelected ? {
-    '--active-tab-left': `${left}px`,
-    '--active-tab-right': `${right}px`,
-    '--active-tab-top': `${top}px`,
-    '--active-tab-bottom': `${bottom}px`,
-    '--active-tab-width': `${width}px`,
-    '--active-tab-height': `${height}px`
+    [TabsIndicatorCssVars.activeTabLeft]: `${left}px`,
+    [TabsIndicatorCssVars.activeTabRight]: `${right}px`,
+    [TabsIndicatorCssVars.activeTabTop]: `${top}px`,
+    [TabsIndicatorCssVars.activeTabBottom]: `${bottom}px`,
+    [TabsIndicatorCssVars.activeTabWidth]: `${width}px`,
+    [TabsIndicatorCssVars.activeTabHeight]: `${height}px`
   } : undefined;
   const displayIndicator = isTabSelected && width > 0 && height > 0;
   const state = {
@@ -136,4 +159,97 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
     })))]
   });
 });
-if (process.env.NODE_ENV !== "production") TabsIndicator.displayName = "TabsIndicator";
+if (process.env.NODE_ENV !== "production") TabsIndicator.displayName = "TabsIndicator";
+function getLayoutOffset(element, ancestor) {
+  const elementOffset = getCumulativeOffset(element);
+  const ancestorOffset = getCumulativeOffset(ancestor);
+  let left = elementOffset.left - ancestorOffset.left - ancestor.clientLeft;
+  let top = elementOffset.top - ancestorOffset.top - ancestor.clientTop;
+
+  // `offsetLeft`/`offsetTop` describe layout, and scrolling doesn't change layout: a scroll
+  // container between the tab and the list moves the tab on screen while its layout slot stays
+  // put. Subtract that scroll so this offset remains comparable with the rect-based one below —
+  // otherwise the difference reads as transform distortion, the rect offset is rejected, and the
+  // indicator is left behind by the full scroll amount. The list's own scroll is deliberately
+  // excluded: the indicator sits inside it and scrolls along with the tab.
+  //
+  // `getParentNode` crosses shadow boundaries (and slots), so a tab inside a shadow root still
+  // reaches the scroll containers between it and the list.
+  let node = (0, _dom.getParentNode)(element);
+  while ((0, _dom.isHTMLElement)(node) && node !== ancestor && !(0, _dom.isLastTraversableNode)(node)) {
+    left -= node.scrollLeft;
+    top -= node.scrollTop;
+    node = (0, _dom.getParentNode)(node);
+  }
+  return {
+    left,
+    top
+  };
+}
+function getCumulativeOffset(element) {
+  let left = 0;
+  let top = 0;
+  let currentElement = element;
+  while (currentElement != null) {
+    left += currentElement.offsetLeft;
+    top += currentElement.offsetTop;
+    const offsetParent = currentElement.offsetParent;
+    if (offsetParent != null) {
+      left += offsetParent.clientLeft;
+      top += offsetParent.clientTop;
+    }
+    currentElement = offsetParent;
+  }
+  return {
+    left,
+    top
+  };
+}
+
+// Returns the active tab's own 2D translation, in CSS pixels: the translation component of
+// the computed `transform` matrix plus the `translate` longhand. CSS composes the two as
+// `translate → rotate → scale → transform`, so adding them is only exact when no rotation or
+// scale is in play. That is enough here: with either of those present the caller's agreement
+// check rejects the rect-based offset regardless of the translation, and the tab's layout
+// slot is used instead.
+function getActiveTabTranslation(element) {
+  const computedStyle = (0, _owner.ownerWindow)(element).getComputedStyle(element);
+  const {
+    x,
+    y
+  } = (0, _getElementTransform.getElementTransform)(element, computedStyle);
+  let translateX = x;
+  let translateY = y;
+
+  // The `translate` longhand is a separate property and is not reflected in the
+  // computed `transform` matrix that `getElementTransform` reads. `getComputedStyle`
+  // resolves absolute and font-relative lengths to pixels but keeps percentages, which
+  // resolve against the tab's border box.
+  const {
+    translate
+  } = computedStyle;
+  if (translate && translate !== 'none') {
+    const parts = translate.split(' ');
+    translateX += resolveTranslateLength(parts[0], element.offsetWidth);
+    translateY += resolveTranslateLength(parts[1], element.offsetHeight);
+  }
+  return {
+    x: translateX,
+    y: translateY
+  };
+}
+
+// Resolves a single `translate` longhand component to pixels. Percentages resolve against
+// the given border-box size; anything that isn't a plain number or percentage (e.g.
+// `calc(...)`) is treated as no translation, so the indicator falls back to the tab's
+// layout slot rather than guessing.
+function resolveTranslateLength(value, referenceSize) {
+  if (!value) {
+    return 0;
+  }
+  const numeric = parseFloat(value);
+  if (!Number.isFinite(numeric)) {
+    return 0;
+  }
+  return value.endsWith('%') ? numeric / 100 * referenceSize : numeric;
+}

package/tabs/indicator/TabsIndicator.mjs

@@ -2,14 +2,18 @@
 
 var _PrehydrationScript;
 import * as React from 'react';
+import { getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
 import { useForcedRerendering } from '@base-ui/utils/useForcedRerendering';
+import { ownerWindow } from '@base-ui/utils/owner';
 import { script as prehydrationScript } from '#prehydration/tabs/indicator';
+import { PrehydrationScript } from "../../internals/PrehydrationScript.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { getCssDimensions } from "../../utils/getCssDimensions.mjs";
-import { PrehydrationScript } from "../../internals/PrehydrationScript.mjs";
+import { getElementTransform } from "../../utils/getElementTransform.mjs";
 import { useTabsRootContext } from "../root/TabsRootContext.mjs";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
 import { useTabsListContext } from "../list/TabsListContext.mjs";
+import * as TabsIndicatorCssVars from "./TabsIndicatorCssVars.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...tabsStateAttributesMapping,
@@ -17,6 +21,10 @@ const stateAttributesMapping = {
   activeTabSize: () => null
 };
 
+// `offsetLeft`/`offsetTop` are rounded to whole pixels and the error can compound
+// across the offset parent chain.
+const MAX_LAYOUT_ROUNDING_ERROR = 2;
+
 /**
  * A visual indicator that can be styled to match the position of the currently active tab.
  * Renders a `<span>` element.
@@ -68,15 +76,30 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabsIndicato
       const tabsListRect = tabsListElement.getBoundingClientRect();
       const scaleX = tabListWidth > 0 ? tabsListRect.width / tabListWidth : 1;
       const scaleY = tabListHeight > 0 ? tabsListRect.height / tabListHeight : 1;
-      const hasNonZeroScale = scaleX > Number.EPSILON && scaleY > Number.EPSILON;
-      if (hasNonZeroScale) {
-        const tabLeftDelta = tabRect.left - tabsListRect.left;
-        const tabTopDelta = tabRect.top - tabsListRect.top;
-        left = tabLeftDelta / scaleX + tabsListElement.scrollLeft - tabsListElement.clientLeft;
-        top = tabTopDelta / scaleY + tabsListElement.scrollTop - tabsListElement.clientTop;
-      } else {
-        left = activeTab.offsetLeft;
-        top = activeTab.offsetTop;
+
+      // Layout offsets are immune to transforms, but lose sub-pixel precision.
+      const layoutOffset = getLayoutOffset(activeTab, tabsListElement);
+      left = layoutOffset.left;
+      top = layoutOffset.top;
+      const rectLeft = (tabRect.left - tabsListRect.left) / scaleX + tabsListElement.scrollLeft - tabsListElement.clientLeft;
+      const rectTop = (tabRect.top - tabsListRect.top) / scaleY + tabsListElement.scrollTop - tabsListElement.clientTop;
+
+      // The rect-based offset is sub-pixel-precise but is derived from projected viewport
+      // geometry: a rotation, skew, flip, perspective, or 3D transform on the tab or any
+      // ancestor warps it beyond what the scale division can undo. When it agrees with the
+      // layout offset (up to layout rounding), no distortion is in effect and the more
+      // precise value is safe to use. A tab list scaled to zero divides by zero just above,
+      // and the resulting `NaN`/`Infinity` fails this same check, leaving the layout offset
+      // in place — so a degenerate scale needs no guard of its own.
+      //
+      // The active tab's own translation moves the rect but not the layout offset, so
+      // strip it from the comparison. This lets the indicator follow tab-local animations
+      // (e.g. `transform: translateX(12px)` on the selected tab) — the indicator is a
+      // sibling of the tab and does not inherit its transform.
+      const tabTranslation = getActiveTabTranslation(activeTab);
+      if (Math.abs(rectLeft - tabTranslation.x - left) <= MAX_LAYOUT_ROUNDING_ERROR && Math.abs(rectTop - tabTranslation.y - top) <= MAX_LAYOUT_ROUNDING_ERROR) {
+        left = rectLeft;
+        top = rectTop;
       }
       width = computedWidth;
       height = computedHeight;
@@ -95,12 +118,12 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabsIndicato
     height
   } : null;
   const style = isTabSelected ? {
-    '--active-tab-left': `${left}px`,
-    '--active-tab-right': `${right}px`,
-    '--active-tab-top': `${top}px`,
-    '--active-tab-bottom': `${bottom}px`,
-    '--active-tab-width': `${width}px`,
-    '--active-tab-height': `${height}px`
+    [TabsIndicatorCssVars.activeTabLeft]: `${left}px`,
+    [TabsIndicatorCssVars.activeTabRight]: `${right}px`,
+    [TabsIndicatorCssVars.activeTabTop]: `${top}px`,
+    [TabsIndicatorCssVars.activeTabBottom]: `${bottom}px`,
+    [TabsIndicatorCssVars.activeTabWidth]: `${width}px`,
+    [TabsIndicatorCssVars.activeTabHeight]: `${height}px`
   } : undefined;
   const displayIndicator = isTabSelected && width > 0 && height > 0;
   const state = {
@@ -130,4 +153,97 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabsIndicato
     })))]
   });
 });
-if (process.env.NODE_ENV !== "production") TabsIndicator.displayName = "TabsIndicator";
+if (process.env.NODE_ENV !== "production") TabsIndicator.displayName = "TabsIndicator";
+function getLayoutOffset(element, ancestor) {
+  const elementOffset = getCumulativeOffset(element);
+  const ancestorOffset = getCumulativeOffset(ancestor);
+  let left = elementOffset.left - ancestorOffset.left - ancestor.clientLeft;
+  let top = elementOffset.top - ancestorOffset.top - ancestor.clientTop;
+
+  // `offsetLeft`/`offsetTop` describe layout, and scrolling doesn't change layout: a scroll
+  // container between the tab and the list moves the tab on screen while its layout slot stays
+  // put. Subtract that scroll so this offset remains comparable with the rect-based one below —
+  // otherwise the difference reads as transform distortion, the rect offset is rejected, and the
+  // indicator is left behind by the full scroll amount. The list's own scroll is deliberately
+  // excluded: the indicator sits inside it and scrolls along with the tab.
+  //
+  // `getParentNode` crosses shadow boundaries (and slots), so a tab inside a shadow root still
+  // reaches the scroll containers between it and the list.
+  let node = getParentNode(element);
+  while (isHTMLElement(node) && node !== ancestor && !isLastTraversableNode(node)) {
+    left -= node.scrollLeft;
+    top -= node.scrollTop;
+    node = getParentNode(node);
+  }
+  return {
+    left,
+    top
+  };
+}
+function getCumulativeOffset(element) {
+  let left = 0;
+  let top = 0;
+  let currentElement = element;
+  while (currentElement != null) {
+    left += currentElement.offsetLeft;
+    top += currentElement.offsetTop;
+    const offsetParent = currentElement.offsetParent;
+    if (offsetParent != null) {
+      left += offsetParent.clientLeft;
+      top += offsetParent.clientTop;
+    }
+    currentElement = offsetParent;
+  }
+  return {
+    left,
+    top
+  };
+}
+
+// Returns the active tab's own 2D translation, in CSS pixels: the translation component of
+// the computed `transform` matrix plus the `translate` longhand. CSS composes the two as
+// `translate → rotate → scale → transform`, so adding them is only exact when no rotation or
+// scale is in play. That is enough here: with either of those present the caller's agreement
+// check rejects the rect-based offset regardless of the translation, and the tab's layout
+// slot is used instead.
+function getActiveTabTranslation(element) {
+  const computedStyle = ownerWindow(element).getComputedStyle(element);
+  const {
+    x,
+    y
+  } = getElementTransform(element, computedStyle);
+  let translateX = x;
+  let translateY = y;
+
+  // The `translate` longhand is a separate property and is not reflected in the
+  // computed `transform` matrix that `getElementTransform` reads. `getComputedStyle`
+  // resolves absolute and font-relative lengths to pixels but keeps percentages, which
+  // resolve against the tab's border box.
+  const {
+    translate
+  } = computedStyle;
+  if (translate && translate !== 'none') {
+    const parts = translate.split(' ');
+    translateX += resolveTranslateLength(parts[0], element.offsetWidth);
+    translateY += resolveTranslateLength(parts[1], element.offsetHeight);
+  }
+  return {
+    x: translateX,
+    y: translateY
+  };
+}
+
+// Resolves a single `translate` longhand component to pixels. Percentages resolve against
+// the given border-box size; anything that isn't a plain number or percentage (e.g.
+// `calc(...)`) is treated as no translation, so the indicator falls back to the tab's
+// layout slot rather than guessing.
+function resolveTranslateLength(value, referenceSize) {
+  if (!value) {
+    return 0;
+  }
+  const numeric = parseFloat(value);
+  if (!Number.isFinite(numeric)) {
+    return 0;
+  }
+  return value.endsWith('%') ? numeric / 100 * referenceSize : numeric;
+}

package/tabs/indicator/TabsIndicatorCssVars.d.mts

@@ -1,32 +1,30 @@
-export declare enum TabsIndicatorCssVars {
-  /**
-   * Indicates the distance on the left side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  activeTabLeft = "--active-tab-left",
-  /**
-   * Indicates the distance on the right side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  activeTabRight = "--active-tab-right",
-  /**
-   * Indicates the distance on the top side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  activeTabTop = "--active-tab-top",
-  /**
-   * Indicates the distance on the bottom side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  activeTabBottom = "--active-tab-bottom",
-  /**
-   * Indicates the width of the tab if it is active.
-   * @type {number}
-   */
-  activeTabWidth = "--active-tab-width",
-  /**
-   * Indicates the height of the tab if it is active.
-   * @type {number}
-   */
-  activeTabHeight = "--active-tab-height",
-}
+/**
+ * Indicates the distance on the left side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export declare const activeTabLeft = "--active-tab-left";
+/**
+ * Indicates the distance on the right side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export declare const activeTabRight = "--active-tab-right";
+/**
+ * Indicates the distance on the top side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export declare const activeTabTop = "--active-tab-top";
+/**
+ * Indicates the distance on the bottom side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export declare const activeTabBottom = "--active-tab-bottom";
+/**
+ * Indicates the width of the tab if it is active.
+ * @type {number}
+ */
+export declare const activeTabWidth = "--active-tab-width";
+/**
+ * Indicates the height of the tab if it is active.
+ * @type {number}
+ */
+export declare const activeTabHeight = "--active-tab-height";

package/tabs/indicator/TabsIndicatorCssVars.d.ts

@@ -1,32 +1,30 @@
-export declare enum TabsIndicatorCssVars {
-  /**
-   * Indicates the distance on the left side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  activeTabLeft = "--active-tab-left",
-  /**
-   * Indicates the distance on the right side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  activeTabRight = "--active-tab-right",
-  /**
-   * Indicates the distance on the top side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  activeTabTop = "--active-tab-top",
-  /**
-   * Indicates the distance on the bottom side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  activeTabBottom = "--active-tab-bottom",
-  /**
-   * Indicates the width of the tab if it is active.
-   * @type {number}
-   */
-  activeTabWidth = "--active-tab-width",
-  /**
-   * Indicates the height of the tab if it is active.
-   * @type {number}
-   */
-  activeTabHeight = "--active-tab-height",
-}
+/**
+ * Indicates the distance on the left side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export declare const activeTabLeft = "--active-tab-left";
+/**
+ * Indicates the distance on the right side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export declare const activeTabRight = "--active-tab-right";
+/**
+ * Indicates the distance on the top side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export declare const activeTabTop = "--active-tab-top";
+/**
+ * Indicates the distance on the bottom side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export declare const activeTabBottom = "--active-tab-bottom";
+/**
+ * Indicates the width of the tab if it is active.
+ * @type {number}
+ */
+export declare const activeTabWidth = "--active-tab-width";
+/**
+ * Indicates the height of the tab if it is active.
+ * @type {number}
+ */
+export declare const activeTabHeight = "--active-tab-height";

package/tabs/indicator/TabsIndicatorCssVars.js

@@ -3,37 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TabsIndicatorCssVars = void 0;
-let TabsIndicatorCssVars = exports.TabsIndicatorCssVars = /*#__PURE__*/function (TabsIndicatorCssVars) {
-  /**
-   * Indicates the distance on the left side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabLeft"] = "--active-tab-left";
-  /**
-   * Indicates the distance on the right side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabRight"] = "--active-tab-right";
-  /**
-   * Indicates the distance on the top side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabTop"] = "--active-tab-top";
-  /**
-   * Indicates the distance on the bottom side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabBottom"] = "--active-tab-bottom";
-  /**
-   * Indicates the width of the tab if it is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabWidth"] = "--active-tab-width";
-  /**
-   * Indicates the height of the tab if it is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabHeight"] = "--active-tab-height";
-  return TabsIndicatorCssVars;
-}({});
+exports.activeTabWidth = exports.activeTabTop = exports.activeTabRight = exports.activeTabLeft = exports.activeTabHeight = exports.activeTabBottom = void 0;
+/**
+ * Indicates the distance on the left side from the parent's container if the tab is active.
+ * @type {number}
+ */
+const activeTabLeft = exports.activeTabLeft = '--active-tab-left';
+/**
+ * Indicates the distance on the right side from the parent's container if the tab is active.
+ * @type {number}
+ */
+const activeTabRight = exports.activeTabRight = '--active-tab-right';
+/**
+ * Indicates the distance on the top side from the parent's container if the tab is active.
+ * @type {number}
+ */
+const activeTabTop = exports.activeTabTop = '--active-tab-top';
+/**
+ * Indicates the distance on the bottom side from the parent's container if the tab is active.
+ * @type {number}
+ */
+const activeTabBottom = exports.activeTabBottom = '--active-tab-bottom';
+/**
+ * Indicates the width of the tab if it is active.
+ * @type {number}
+ */
+const activeTabWidth = exports.activeTabWidth = '--active-tab-width';
+/**
+ * Indicates the height of the tab if it is active.
+ * @type {number}
+ */
+const activeTabHeight = exports.activeTabHeight = '--active-tab-height';

package/tabs/indicator/TabsIndicatorCssVars.mjs

@@ -1,33 +1,30 @@
-export let TabsIndicatorCssVars = /*#__PURE__*/function (TabsIndicatorCssVars) {
-  /**
-   * Indicates the distance on the left side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabLeft"] = "--active-tab-left";
-  /**
-   * Indicates the distance on the right side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabRight"] = "--active-tab-right";
-  /**
-   * Indicates the distance on the top side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabTop"] = "--active-tab-top";
-  /**
-   * Indicates the distance on the bottom side from the parent's container if the tab is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabBottom"] = "--active-tab-bottom";
-  /**
-   * Indicates the width of the tab if it is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabWidth"] = "--active-tab-width";
-  /**
-   * Indicates the height of the tab if it is active.
-   * @type {number}
-   */
-  TabsIndicatorCssVars["activeTabHeight"] = "--active-tab-height";
-  return TabsIndicatorCssVars;
-}({});
+/**
+ * Indicates the distance on the left side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export const activeTabLeft = '--active-tab-left';
+/**
+ * Indicates the distance on the right side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export const activeTabRight = '--active-tab-right';
+/**
+ * Indicates the distance on the top side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export const activeTabTop = '--active-tab-top';
+/**
+ * Indicates the distance on the bottom side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export const activeTabBottom = '--active-tab-bottom';
+/**
+ * Indicates the width of the tab if it is active.
+ * @type {number}
+ */
+export const activeTabWidth = '--active-tab-width';
+/**
+ * Indicates the height of the tab if it is active.
+ * @type {number}
+ */
+export const activeTabHeight = '--active-tab-height';