@ttoss/fsl-ui 0.2.4

package/dist/components/Switch/Switch.mjs

@@ -0,0 +1,175 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Switch } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Switch/Switch.tsx
+/** Formal semantic identity — Switch root (Selection entity, toggle.binary). */
+var switchMeta = {
+  displayName: "Switch",
+  entity: "Selection",
+  structure: "root"
+};
+var TRACK_W = "2.5rem";
+var TRACK_H = "1.5rem";
+var THUMB_SIZE = "1.125rem";
+var THUMB_OFFSET = "0.1875rem";
+var TRACK_STYLE_STATIC = {
+  boxSizing: "border-box",
+  position: "relative",
+  flexShrink: 0,
+  display: "inline-block",
+  width: TRACK_W,
+  height: TRACK_H,
+  borderRadius: vars.radii.round,
+  borderWidth: vars.border.outline.control.width,
+  borderStyle: vars.border.outline.control.style,
+  transitionProperty: "background-color, border-color",
+  transitionDuration: vars.motion.feedback.duration,
+  transitionTimingFunction: vars.motion.feedback.easing,
+  outlineOffset: "2px"
+};
+/** Sliding-track style (state-dependent background/border + focus ring). */
+var buildTrackStyle = ({
+  c,
+  isDisabled,
+  isSelected,
+  isHovered,
+  isPressed,
+  isFocusVisible
+}) => {
+  return {
+    ...TRACK_STYLE_STATIC,
+    backgroundColor: resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isSelected,
+      isHovered,
+      isPressed
+    }),
+    borderColor: resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isSelected,
+      isFocusVisible
+    }),
+    outline: focusRingOutline(isFocusVisible)
+  };
+};
+/**
+* Thumb color:
+*   ON  → text.checked (typically neutral.0 = white on brand track)
+*   OFF → border.default (typically neutral.300 = visible on light track)
+*/
+var resolveThumbColor = ({
+  c,
+  isSelected
+}) => {
+  const text = c?.text;
+  return isSelected ? text?.checked ?? text?.default : c?.border?.default;
+};
+/** Label color — disabled dominates default (Selection has no evaluation). */
+var resolveLabelColor = ({
+  c,
+  isDisabled
+}) => {
+  const text = c?.text;
+  return isDisabled ? text?.disabled : text?.default;
+};
+/**
+* A semantic on/off toggle built on React Aria's Switch.
+*
+* Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
+* (pill track + circular thumb), border: `outline.control`,
+* sizing: `hit.base`, motion: `feedback`.
+*
+* @example
+* ```tsx
+* <Switch>Enable notifications</Switch>
+* <Switch defaultSelected>Dark mode</Switch>
+* ```
+*/
+var Switch$1 = ({
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(Switch, {
+    ...props,
+    "data-scope": "switch",
+    "data-part": "root",
+    style: ({
+      isDisabled
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: vars.spacing.gap.inline.sm,
+        minHeight: vars.sizing.hit.base,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? vars.opacity.disabled : void 0,
+        ...vars.text.label.md,
+        color: isDisabled ? c?.text?.disabled : c?.text?.default
+      };
+    },
+    children: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected
+    }) => {
+      const thumbInsetInlineStart = isSelected ? `calc(${TRACK_W} - ${THUMB_SIZE} - ${THUMB_OFFSET})` : THUMB_OFFSET;
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx("span", {
+          "data-scope": "switch",
+          "data-part": "control",
+          "aria-hidden": true,
+          style: buildTrackStyle({
+            c,
+            isDisabled,
+            isSelected,
+            isHovered,
+            isPressed,
+            isFocusVisible
+          }),
+          children: /* @__PURE__ */jsx("span", {
+            "data-scope": "switch",
+            "data-part": "indicator",
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              insetBlockStart: THUMB_OFFSET,
+              insetInlineStart: thumbInsetInlineStart,
+              width: THUMB_SIZE,
+              height: THUMB_SIZE,
+              borderRadius: vars.radii.round,
+              backgroundColor: resolveThumbColor({
+                c,
+                isSelected
+              }),
+              transitionProperty: "inset-inline-start, background-color",
+              transitionDuration: vars.motion.feedback.duration,
+              transitionTimingFunction: vars.motion.feedback.easing
+            }
+          })
+        }), children != null && /* @__PURE__ */jsx("span", {
+          "data-scope": "switch",
+          "data-part": "label",
+          style: {
+            color: resolveLabelColor({
+              c,
+              isDisabled
+            })
+          },
+          children
+        })]
+      });
+    }
+  });
+};
+Switch$1.displayName = switchMeta.displayName;
+
+//#endregion
+export { Switch$1 as Switch, switchMeta };

package/dist/components/Tabs/Tabs.cjs

@@ -0,0 +1,180 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Tabs/Tabs.tsx
+/** Formal semantic identity — Tabs root (Navigation entity). */
+var tabsMeta = {
+  displayName: "Tabs",
+  entity: "Navigation",
+  structure: "root"
+};
+/** Formal semantic identity — TabList (Navigation entity, control strip). */
+var tabListMeta = {
+  displayName: "TabList",
+  entity: "Navigation",
+  structure: "control"
+};
+/** Formal semantic identity — Tab (Navigation entity, item). */
+var tabMeta = {
+  displayName: "Tab",
+  entity: "Navigation",
+  structure: "item"
+};
+/** Formal semantic identity — TabPanel (Structure entity, content surface). */
+var tabPanelMeta = {
+  displayName: "TabPanel",
+  entity: "Structure",
+  structure: "content"
+};
+/**
+* A tabbed navigation widget (Navigation entity). Compose with `TabList` +
+* `Tab` for the switcher and `TabPanel` for each view. React Aria manages
+* selection, arrow-key navigation, and panel association.
+*
+* @example
+* ```tsx
+* <Tabs>
+*   <TabList aria-label="Sections">
+*     <Tab id="a">Overview</Tab>
+*     <Tab id="b">Details</Tab>
+*   </TabList>
+*   <TabPanel id="a">Overview content</TabPanel>
+*   <TabPanel id="b">Details content</TabPanel>
+* </Tabs>
+* ```
+*/
+var Tabs = ({
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Tabs, {
+    ...props,
+    orientation,
+    "data-scope": "tabs",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: orientation === "vertical" ? "row" : "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm
+    }
+  });
+};
+Tabs.displayName = tabsMeta.displayName;
+/**
+* The strip of tabs. Renders the `tablist` and lays the `Tab`s out in a row
+* (or column when the parent `Tabs` is vertical).
+*/
+var TabList = props => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.TabList, {
+    ...props,
+    "data-scope": "tabs",
+    "data-part": "control",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+      borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+      borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+      borderBlockEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.muted?.border?.default ?? "transparent"
+    }
+  });
+};
+TabList.displayName = tabListMeta.displayName;
+/**
+* A single selectable tab. The selected tab reads the navigation `current`
+* color and shows an underline indicator; others use hover/default.
+*/
+var Tab = props => {
+  const colors = _ttoss_fsl_theme_vars.vars.colors.navigation.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Tab, {
+    ...props,
+    "data-scope": "tabs",
+    "data-part": "item",
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected
+    }) => {
+      const selectedColor = colors?.text?.current ?? colors?.text?.default;
+      return {
+        boxSizing: "border-box",
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+        transitionProperty: "color",
+        color: isSelected ? selectedColor : require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }),
+        outline: require_focusRing.focusRingOutline(isFocusVisible)
+      };
+    },
+    children: ({
+      isSelected
+    }) => {
+      return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+        children: [props.children, isSelected && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+          "data-scope": "tabs",
+          "data-part": "indicator",
+          "aria-hidden": true,
+          style: {
+            position: "absolute",
+            insetInlineStart: 0,
+            insetInlineEnd: 0,
+            insetBlockEnd: 0,
+            borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.outline.selected.width,
+            borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+            borderBlockEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.current ?? _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.default
+          }
+        })]
+      });
+    }
+  });
+};
+Tab.displayName = tabMeta.displayName;
+/**
+* The content region for one tab. Associated with its `Tab` by matching `id`.
+*/
+var TabPanel = props => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.TabPanel, {
+    ...props,
+    "data-scope": "tabs",
+    "data-part": "content",
+    style: ({
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.sm,
+        ..._ttoss_fsl_theme_vars.vars.text.body.md,
+        color: _ttoss_fsl_theme_vars.vars.colors.informational.primary?.text?.default,
+        outline: require_focusRing.focusRingOutline(isFocusVisible)
+      };
+    }
+  });
+};
+TabPanel.displayName = tabPanelMeta.displayName;
+
+//#endregion
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
+exports.tabListMeta = tabListMeta;
+exports.tabMeta = tabMeta;
+exports.tabPanelMeta = tabPanelMeta;
+exports.tabsMeta = tabsMeta;

package/dist/components/Tabs/Tabs.d.cts

@@ -0,0 +1,85 @@
+
+import { TabListProps, TabPanelProps, TabProps, TabsProps } from "react-aria-components";
+
+//#region src/components/Tabs/Tabs.d.ts
+/** Formal semantic identity — Tabs root (Navigation entity). */
+declare const tabsMeta: {
+  readonly displayName: "Tabs";
+  readonly entity: "Navigation";
+  readonly structure: "root";
+};
+/** Formal semantic identity — TabList (Navigation entity, control strip). */
+declare const tabListMeta: {
+  readonly displayName: "TabList";
+  readonly entity: "Navigation";
+  readonly structure: "control";
+};
+/** Formal semantic identity — Tab (Navigation entity, item). */
+declare const tabMeta: {
+  readonly displayName: "Tab";
+  readonly entity: "Navigation";
+  readonly structure: "item";
+};
+/** Formal semantic identity — TabPanel (Structure entity, content surface). */
+declare const tabPanelMeta: {
+  readonly displayName: "TabPanel";
+  readonly entity: "Structure";
+  readonly structure: "content";
+};
+/** Props for the Tabs root. */
+type TabsProps$1 = Omit<TabsProps, 'style'>;
+/**
+ * A tabbed navigation widget (Navigation entity). Compose with `TabList` +
+ * `Tab` for the switcher and `TabPanel` for each view. React Aria manages
+ * selection, arrow-key navigation, and panel association.
+ *
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList aria-label="Sections">
+ *     <Tab id="a">Overview</Tab>
+ *     <Tab id="b">Details</Tab>
+ *   </TabList>
+ *   <TabPanel id="a">Overview content</TabPanel>
+ *   <TabPanel id="b">Details content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: {
+  ({
+    orientation,
+    ...props
+  }: TabsProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Tabs";
+};
+/** Props for the TabList control strip. */
+type TabListProps$1<T extends object = object> = Omit<TabListProps<T>, 'style'>;
+/**
+ * The strip of tabs. Renders the `tablist` and lays the `Tab`s out in a row
+ * (or column when the parent `Tabs` is vertical).
+ */
+declare const TabList: {
+  <T extends object = object>(props: TabListProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "TabList";
+};
+/** Props for a single Tab. */
+type TabProps$1 = Omit<TabProps, 'style'>;
+/**
+ * A single selectable tab. The selected tab reads the navigation `current`
+ * color and shows an underline indicator; others use hover/default.
+ */
+declare const Tab: {
+  (props: TabProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Tab";
+};
+/** Props for a TabPanel. */
+type TabPanelProps$1 = Omit<TabPanelProps, 'style'>;
+/**
+ * The content region for one tab. Associated with its `Tab` by matching `id`.
+ */
+declare const TabPanel: {
+  (props: TabPanelProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "TabPanel";
+};
+//#endregion
+export { Tab, TabList, TabListProps$1 as TabListProps, TabPanel, TabPanelProps$1 as TabPanelProps, TabProps$1 as TabProps, Tabs, TabsProps$1 as TabsProps, tabListMeta, tabMeta, tabPanelMeta, tabsMeta };

package/dist/components/Tabs/Tabs.d.mts

@@ -0,0 +1,85 @@
+
+import { TabListProps, TabPanelProps, TabProps, TabsProps } from "react-aria-components";
+
+//#region src/components/Tabs/Tabs.d.ts
+/** Formal semantic identity — Tabs root (Navigation entity). */
+declare const tabsMeta: {
+  readonly displayName: "Tabs";
+  readonly entity: "Navigation";
+  readonly structure: "root";
+};
+/** Formal semantic identity — TabList (Navigation entity, control strip). */
+declare const tabListMeta: {
+  readonly displayName: "TabList";
+  readonly entity: "Navigation";
+  readonly structure: "control";
+};
+/** Formal semantic identity — Tab (Navigation entity, item). */
+declare const tabMeta: {
+  readonly displayName: "Tab";
+  readonly entity: "Navigation";
+  readonly structure: "item";
+};
+/** Formal semantic identity — TabPanel (Structure entity, content surface). */
+declare const tabPanelMeta: {
+  readonly displayName: "TabPanel";
+  readonly entity: "Structure";
+  readonly structure: "content";
+};
+/** Props for the Tabs root. */
+type TabsProps$1 = Omit<TabsProps, 'style'>;
+/**
+ * A tabbed navigation widget (Navigation entity). Compose with `TabList` +
+ * `Tab` for the switcher and `TabPanel` for each view. React Aria manages
+ * selection, arrow-key navigation, and panel association.
+ *
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList aria-label="Sections">
+ *     <Tab id="a">Overview</Tab>
+ *     <Tab id="b">Details</Tab>
+ *   </TabList>
+ *   <TabPanel id="a">Overview content</TabPanel>
+ *   <TabPanel id="b">Details content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs$1: {
+  ({
+    orientation,
+    ...props
+  }: TabsProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Tabs";
+};
+/** Props for the TabList control strip. */
+type TabListProps$1<T extends object = object> = Omit<TabListProps<T>, 'style'>;
+/**
+ * The strip of tabs. Renders the `tablist` and lays the `Tab`s out in a row
+ * (or column when the parent `Tabs` is vertical).
+ */
+declare const TabList$1: {
+  <T extends object = object>(props: TabListProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "TabList";
+};
+/** Props for a single Tab. */
+type TabProps$1 = Omit<TabProps, 'style'>;
+/**
+ * A single selectable tab. The selected tab reads the navigation `current`
+ * color and shows an underline indicator; others use hover/default.
+ */
+declare const Tab$1: {
+  (props: TabProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Tab";
+};
+/** Props for a TabPanel. */
+type TabPanelProps$1 = Omit<TabPanelProps, 'style'>;
+/**
+ * The content region for one tab. Associated with its `Tab` by matching `id`.
+ */
+declare const TabPanel$1: {
+  (props: TabPanelProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "TabPanel";
+};
+//#endregion
+export { Tab$1 as Tab, TabList$1 as TabList, TabListProps$1 as TabListProps, TabPanel$1 as TabPanel, TabPanelProps$1 as TabPanelProps, TabProps$1 as TabProps, Tabs$1 as Tabs, TabsProps$1 as TabsProps, tabListMeta, tabMeta, tabPanelMeta, tabsMeta };

package/dist/components/Tabs/Tabs.mjs

@@ -0,0 +1,173 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Tabs/Tabs.tsx
+/** Formal semantic identity — Tabs root (Navigation entity). */
+var tabsMeta = {
+  displayName: "Tabs",
+  entity: "Navigation",
+  structure: "root"
+};
+/** Formal semantic identity — TabList (Navigation entity, control strip). */
+var tabListMeta = {
+  displayName: "TabList",
+  entity: "Navigation",
+  structure: "control"
+};
+/** Formal semantic identity — Tab (Navigation entity, item). */
+var tabMeta = {
+  displayName: "Tab",
+  entity: "Navigation",
+  structure: "item"
+};
+/** Formal semantic identity — TabPanel (Structure entity, content surface). */
+var tabPanelMeta = {
+  displayName: "TabPanel",
+  entity: "Structure",
+  structure: "content"
+};
+/**
+* A tabbed navigation widget (Navigation entity). Compose with `TabList` +
+* `Tab` for the switcher and `TabPanel` for each view. React Aria manages
+* selection, arrow-key navigation, and panel association.
+*
+* @example
+* ```tsx
+* <Tabs>
+*   <TabList aria-label="Sections">
+*     <Tab id="a">Overview</Tab>
+*     <Tab id="b">Details</Tab>
+*   </TabList>
+*   <TabPanel id="a">Overview content</TabPanel>
+*   <TabPanel id="b">Details content</TabPanel>
+* </Tabs>
+* ```
+*/
+var Tabs$1 = ({
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(Tabs, {
+    ...props,
+    orientation,
+    "data-scope": "tabs",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: orientation === "vertical" ? "row" : "column",
+      gap: vars.spacing.gap.stack.sm
+    }
+  });
+};
+Tabs$1.displayName = tabsMeta.displayName;
+/**
+* The strip of tabs. Renders the `tablist` and lays the `Tab`s out in a row
+* (or column when the parent `Tabs` is vertical).
+*/
+var TabList$1 = props => {
+  return /* @__PURE__ */jsx(TabList, {
+    ...props,
+    "data-scope": "tabs",
+    "data-part": "control",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      gap: vars.spacing.gap.inline.sm,
+      borderBlockEndWidth: vars.border.divider.width,
+      borderBlockEndStyle: vars.border.divider.style,
+      borderBlockEndColor: vars.colors.navigation.muted?.border?.default ?? "transparent"
+    }
+  });
+};
+TabList$1.displayName = tabListMeta.displayName;
+/**
+* A single selectable tab. The selected tab reads the navigation `current`
+* color and shows an underline indicator; others use hover/default.
+*/
+var Tab$1 = props => {
+  const colors = vars.colors.navigation.primary;
+  return /* @__PURE__ */jsx(Tab, {
+    ...props,
+    "data-scope": "tabs",
+    "data-part": "item",
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected
+    }) => {
+      const selectedColor = colors?.text?.current ?? colors?.text?.default;
+      return {
+        boxSizing: "border-box",
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.md,
+        ...vars.text.label.md,
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        transitionProperty: "color",
+        color: isSelected ? selectedColor : resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }),
+        outline: focusRingOutline(isFocusVisible)
+      };
+    },
+    children: ({
+      isSelected
+    }) => {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [props.children, isSelected && /* @__PURE__ */jsx("span", {
+          "data-scope": "tabs",
+          "data-part": "indicator",
+          "aria-hidden": true,
+          style: {
+            position: "absolute",
+            insetInlineStart: 0,
+            insetInlineEnd: 0,
+            insetBlockEnd: 0,
+            borderBlockEndWidth: vars.border.outline.selected.width,
+            borderBlockEndStyle: vars.border.outline.control.style,
+            borderBlockEndColor: vars.colors.navigation.primary?.border?.current ?? vars.colors.navigation.primary?.border?.default
+          }
+        })]
+      });
+    }
+  });
+};
+Tab$1.displayName = tabMeta.displayName;
+/**
+* The content region for one tab. Associated with its `Tab` by matching `id`.
+*/
+var TabPanel$1 = props => {
+  return /* @__PURE__ */jsx(TabPanel, {
+    ...props,
+    "data-scope": "tabs",
+    "data-part": "content",
+    style: ({
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        paddingBlock: vars.spacing.inset.surface.sm,
+        ...vars.text.body.md,
+        color: vars.colors.informational.primary?.text?.default,
+        outline: focusRingOutline(isFocusVisible)
+      };
+    }
+  });
+};
+TabPanel$1.displayName = tabPanelMeta.displayName;
+
+//#endregion
+export { Tab$1 as Tab, TabList$1 as TabList, TabPanel$1 as TabPanel, Tabs$1 as Tabs, tabListMeta, tabMeta, tabPanelMeta, tabsMeta };