@ds-mo/ui 0.1.0

package/src/components/Surface/Surface.stories.tsx

@@ -0,0 +1,213 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { Surface } from './Surface';
+import type { SurfaceIntent, SurfaceContrast, SurfaceElevation } from './Surface';
+
+const INTENTS: SurfaceIntent[]   = ['brand', 'positive', 'negative', 'warning', 'caution', 'ai', 'neutral'];
+const CONTRASTS: SurfaceContrast[] = ['faint', 'medium', 'bold', 'strong'];
+const ELEVATIONS: SurfaceElevation[] = ['none', 'depressed', 'depressed-md', 'flat', 'elevated', 'floating'];
+
+const meta: Meta<typeof Surface> = {
+  title: 'Primitives (Reviewed)/Surface',
+  component: Surface,
+  args: {
+    background: 'primary',
+    elevation: 'elevated',
+    radius: 'lg',
+    children: 'Surface content',
+  },
+  argTypes: {
+    background: { control: 'select', options: ['primary', 'secondary', 'transparent', 'translucent'] },
+    intent:     { control: 'select', options: INTENTS },
+    contrast:   { control: 'select', options: CONTRASTS },
+    elevation:  { control: 'select', options: [...ELEVATIONS, 'overlayTop', 'overlayRight', 'overlayBottom', 'overlayLeft'] },
+    radius:     { control: 'select', options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'] },
+    interactive:{ control: 'boolean' },
+    selected:   { control: 'boolean' },
+    inactive:   { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Surface>;
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const monoLabel = (text: string, minWidth = 80) => (
+  <span style={{ fontSize: 10, fontFamily: 'monospace', color: 'var(--color-foreground-tertiary)', minWidth, flexShrink: 0 }}>
+    {text}
+  </span>
+);
+
+const divider = <hr style={{ border: 'none', borderTop: '1px solid var(--color-border-tertiary)', margin: '16px 0' }} />;
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const Playground: Story = {
+  args: {
+    style: { padding: 24, minWidth: 240, minHeight: 100 },
+  },
+};
+
+export const Elevations: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    /* Secondary background provides the contrast needed to see depressed vs elevated */
+    <div style={{ background: 'var(--color-background-secondary)', padding: 40, borderRadius: 16, display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'flex-start' }}>
+      {ELEVATIONS.map(elevation => (
+        <Surface
+          key={elevation}
+          background="primary"
+          elevation={elevation}
+          radius="lg"
+          style={{ padding: '20px 24px', minWidth: 130, textAlign: 'center', fontSize: 11, fontFamily: 'monospace' }}
+        >
+          {elevation}
+        </Surface>
+      ))}
+    </div>
+  ),
+};
+
+export const PanelOverlays: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
+      {(['overlayTop', 'overlayBottom', 'overlayLeft', 'overlayRight'] as const).map(elevation => {
+        const isTop    = elevation === 'overlayTop';
+        const isBottom = elevation === 'overlayBottom';
+        const isLeft   = elevation === 'overlayLeft';
+        return (
+          <div key={elevation} style={{ position: 'relative', height: 120, overflow: 'hidden', borderRadius: 10, background: 'var(--color-background-secondary)' }}>
+            <Surface
+              background="primary"
+              elevation={elevation}
+              style={{
+                position: 'absolute',
+                textAlign: 'center',
+                fontSize: 11,
+                fontFamily: 'monospace',
+                ...(isTop    ? { top: 0, left: 0, right: 0, padding: 16 } : {}),
+                ...(isBottom ? { bottom: 0, left: 0, right: 0, padding: 16 } : {}),
+                ...(isLeft   ? { top: 0, bottom: 0, left: 0, width: 130, display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
+                ...(!isTop && !isBottom && !isLeft ? { top: 0, bottom: 0, right: 0, width: 130, display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
+              }}
+            >
+              {elevation}
+            </Surface>
+          </div>
+        );
+      })}
+    </div>
+  ),
+};
+
+export const IntentMatrix: Story = {
+  name: 'Intent × Contrast',
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      {/* Header */}
+      <div style={{ display: 'flex', gap: 8, marginBottom: 4, marginLeft: 88 }}>
+        {CONTRASTS.map(c => (
+          <span key={c} style={{ minWidth: 140, textAlign: 'center', fontSize: 10, fontFamily: 'monospace', color: 'var(--color-foreground-tertiary)' }}>{c}</span>
+        ))}
+      </div>
+      {INTENTS.map(intent => (
+        <div key={intent} style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
+          {monoLabel(intent, 88)}
+          {CONTRASTS.map(contrast => (
+            <Surface
+              key={contrast}
+              intent={intent}
+              contrast={contrast}
+              radius="md"
+              style={{ minWidth: 140, padding: '10px 16px', fontSize: 11, fontFamily: 'monospace', textAlign: 'center' }}
+            >
+              {intent} / {contrast}
+            </Surface>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Backgrounds: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ display: 'flex', gap: 16 }}>
+      {(['primary', 'secondary', 'translucent', 'transparent'] as const).map(bg => (
+        <div key={bg} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
+          <Surface
+            background={bg}
+            elevation="flat"
+            radius="lg"
+            style={{ width: 140, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace' }}
+          >
+            {bg}
+          </Surface>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+      {([
+        { label: 'default',            props: {} },
+        { label: 'interactive',        props: { interactive: true } },
+        { label: 'selected',           props: { interactive: true, selected: true } },
+        { label: 'inactive',           props: { inactive: true } },
+        { label: 'as="button"',        props: { interactive: true, as: 'button' as const } },
+      ]).map(({ label, props }) => (
+        <div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
+          <Surface
+            background="primary"
+            elevation="elevated"
+            radius="lg"
+            style={{ width: 160, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace', cursor: props.interactive ? 'pointer' : 'default' }}
+            {...props}
+          >
+            {label}
+          </Surface>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const EdgeDividers: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ display: 'flex', gap: 40, alignItems: 'flex-start' }}>
+      {/* Single edge variants */}
+      <div style={{ display: 'flex', gap: 16 }}>
+        {(['top', 'right', 'bottom', 'left'] as const).map(edge => (
+          <div key={edge} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
+            {monoLabel(edge)}
+            <Surface
+              edge={edge}
+              style={{ width: 80, height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace' }}
+            >
+              {edge}
+            </Surface>
+          </div>
+        ))}
+      </div>
+      {divider}
+      {/* Stacked sections pattern */}
+      <div>
+        {monoLabel('stacked sections')}
+        <div style={{ width: 200, marginTop: 8 }}>
+          <Surface edge="bottom" style={{ padding: '12px 16px', fontSize: 12 }}>Section 1</Surface>
+          <Surface edge="bottom" style={{ padding: '12px 16px', fontSize: 12 }}>Section 2</Surface>
+          <Surface style={{ padding: '12px 16px', fontSize: 12 }}>Section 3</Surface>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Surface/Surface.tsx

@@ -0,0 +1,219 @@
+import React, { forwardRef } from 'react';
+import styles from './Surface.module.css';
+
+/**
+ * Semantic intent for colored surfaces.
+ * Each intent has four contrast levels (faint, medium, bold, strong).
+ */
+export type SurfaceIntent =
+  | 'brand'
+  | 'positive'
+  | 'negative'
+  | 'warning'
+  | 'caution'
+  | 'ai'
+  | 'neutral'
+  | 'walkthrough'
+  | 'guide';
+
+/** Background type for non-intent surfaces. */
+export type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
+
+/** Contrast level for semantic intents. */
+export type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';
+
+/** Elevation for depth/shadow effects. Progressive: none → flat → elevated → floating. */
+export type SurfaceElevation =
+  | 'none'
+  | 'depressed'
+  | 'depressed-md'
+  | 'flat'
+  | 'elevated'
+  | 'floating'
+  | 'overlayTop'
+  | 'overlayRight'
+  | 'overlayBottom'
+  | 'overlayLeft';
+
+/** Edge divider border direction. */
+export type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';
+
+/** Corner radius presets. */
+export type SurfaceRadiusPreset = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+
+/** Corner radius — preset, CSS variable, or custom string (e.g. '12px 12px 0 0'). */
+export type SurfaceRadius = SurfaceRadiusPreset | (string & {});
+
+/** HTML elements Surface can render as. */
+export type SurfaceElement =
+  | 'div'
+  | 'section'
+  | 'aside'
+  | 'article'
+  | 'header'
+  | 'footer'
+  | 'main'
+  | 'nav'
+  | 'span'
+  | 'button'
+  | 'td'
+  | 'th';
+
+/** Props shared by both surface modes. */
+interface SurfaceBaseProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+  /** Elevation for depth/shadow effects. Defaults to 'none'. */
+  elevation?: SurfaceElevation;
+  /** Edge divider border(s). Only applies when elevation is 'none'. */
+  edge?: SurfaceEdge | SurfaceEdge[];
+  /** Corner radius — preset or CSS variable. */
+  radius?: SurfaceRadius;
+  /** Enable hover/pressed interaction overlay. */
+  interactive?: boolean;
+  /** Apply selected background state. */
+  selected?: boolean;
+  /** Dim and disable pointer events. */
+  inactive?: boolean;
+  /** HTML element to render. Defaults to 'div'. */
+  as?: SurfaceElement;
+  /** Button type — only used when as='button'. */
+  type?: 'button' | 'submit' | 'reset';
+}
+
+/** Non-intent surface — uses a basic background color. */
+interface SurfaceDefaultProps extends SurfaceBaseProps {
+  /** Background color. Defaults to 'transparent'. */
+  background?: SurfaceBackground;
+  intent?: never;
+  contrast?: never;
+}
+
+/** Intent surface — uses a semantic color with contrast level. */
+interface SurfaceIntentProps extends SurfaceBaseProps {
+  /** Semantic intent color. */
+  intent: SurfaceIntent;
+  /** Contrast level for the intent background. Defaults to 'faint'. */
+  contrast?: SurfaceContrast;
+  background?: never;
+}
+
+export type SurfaceProps = SurfaceDefaultProps | SurfaceIntentProps;
+
+const backgroundClassMap: Record<SurfaceBackground, string> = {
+  primary: styles.bgPrimary,
+  secondary: styles.bgSecondary,
+  transparent: styles.bgTransparent,
+  translucent: styles.bgTranslucent,
+};
+
+const elevationClassMap: Record<SurfaceElevation, string> = {
+  none: styles.elevationNone,
+  depressed: styles.elevationDepressed,
+  'depressed-md': styles.elevationDepressedMd,
+  flat: styles.elevationFlat,
+  elevated: styles.elevationElevated,
+  floating: styles.elevationFloating,
+  overlayTop: styles.elevationOverlayTop,
+  overlayRight: styles.elevationOverlayRight,
+  overlayBottom: styles.elevationOverlayBottom,
+  overlayLeft: styles.elevationOverlayLeft,
+};
+
+const edgeClassMap: Record<SurfaceEdge, string> = {
+  top: styles.edgeTop,
+  right: styles.edgeRight,
+  bottom: styles.edgeBottom,
+  left: styles.edgeLeft,
+};
+
+const radiusClassMap: Record<SurfaceRadiusPreset, string> = {
+  none: styles.radiusNone,
+  xs: styles.radiusXs,
+  sm: styles.radiusSm,
+  md: styles.radiusMd,
+  lg: styles.radiusLg,
+  xl: styles.radiusXl,
+  '2xl': styles.radius2xl,
+  full: styles.radiusFull,
+};
+
+const getIntentContrastClass = (intent: SurfaceIntent, contrast: SurfaceContrast): string => {
+  const intentKey = intent.charAt(0).toUpperCase() + intent.slice(1);
+  const contrastKey = contrast.charAt(0).toUpperCase() + contrast.slice(1);
+  return styles[`intent${intentKey}${contrastKey}`] || '';
+};
+
+const isPresetRadius = (radius: SurfaceRadius): radius is SurfaceRadiusPreset =>
+  radius in radiusClassMap;
+
+export const Surface = forwardRef<HTMLElement, SurfaceProps>(
+  (
+    {
+      children,
+      background = 'transparent',
+      intent,
+      contrast = 'faint',
+      elevation = 'none',
+      edge,
+      radius,
+      interactive = false,
+      selected = false,
+      inactive = false,
+      as: Component = 'div',
+      className = '',
+      style,
+      type,
+      ...rest
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.surface,
+      // Background or intent+contrast
+      intent
+        ? getIntentContrastClass(intent, contrast)
+        : backgroundClassMap[background],
+      // Elevation
+      elevationClassMap[elevation],
+      // Edge(s) — only when elevation is 'none'
+      ...(edge && elevation === 'none'
+        ? Array.isArray(edge)
+          ? edge.map(e => edgeClassMap[e])
+          : [edgeClassMap[edge]]
+        : []),
+      // Radius (preset only — custom handled via inline style)
+      radius && isPresetRadius(radius) ? radiusClassMap[radius] : '',
+      // States
+      interactive ? styles.interactive : '',
+      selected ? styles.selected : '',
+      inactive ? styles.inactive : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const computedStyle: React.CSSProperties = {
+      ...style,
+      ...(radius && !isPresetRadius(radius) ? { borderRadius: radius } : {}),
+    };
+
+    const hasStyle =
+      (radius && !isPresetRadius(radius)) || (style && Object.keys(style).length > 0);
+
+    const elementProps = {
+      ref,
+      className: classes,
+      style: hasStyle ? computedStyle : undefined,
+      disabled: Component === 'button' ? inactive : undefined,
+      type: Component === 'button' ? type || 'button' : undefined,
+      ...rest,
+    };
+
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <Component {...(elementProps as any)}>{children}</Component>
+    );
+  }
+);
+
+Surface.displayName = 'Surface';

package/src/components/Surface/index.ts

@@ -0,0 +1,12 @@
+export { Surface } from './Surface';
+export type {
+  SurfaceProps,
+  SurfaceIntent,
+  SurfaceBackground,
+  SurfaceContrast,
+  SurfaceElevation,
+  SurfaceEdge,
+  SurfaceRadius,
+  SurfaceRadiusPreset,
+  SurfaceElement,
+} from './Surface';

package/src/components/Tab/Tab.module.css

@@ -0,0 +1,66 @@
+/* ==========================================================================
+   Tab — hover/pressed via direct background-color, no pseudo-element overlay.
+   ========================================================================== */
+
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dimension-space-075);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--dimension-radius-075);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  color: var(--color-foreground-secondary);
+  position: relative;
+  will-change: color;
+  transition: color var(--effect-motion-short-2),
+              background-color var(--effect-motion-short-2);
+  flex-shrink: 0;
+  height: var(--dimension-size-400);
+  box-sizing: border-box;
+
+  /* Interaction — ghost defaults */
+  --_hover-bg: var(--color-interaction-hover);
+  --_pressed-bg: var(--color-interaction-pressed);
+}
+
+.tab:hover { background-color: var(--_hover-bg); }
+.tab:active { background-color: var(--_pressed-bg); }
+
+.tabSelected { color: var(--color-foreground-primary); }
+
+/* ==========================================================================
+   Background context — parent surface awareness
+   ========================================================================== */
+
+.onMedium {
+  --_hover-bg: var(--color-interaction-on-medium-background-hover);
+  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);
+}
+
+.onBold {
+  --_hover-bg: var(--color-interaction-on-bold-background-hover);
+  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);
+  color: var(--color-foreground-on-bold-background-secondary);
+}
+
+.onBold.tabSelected { color: var(--color-foreground-on-bold-background-primary); }
+
+.onStrong {
+  --_hover-bg: var(--color-interaction-on-strong-background-hover);
+  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);
+  color: var(--color-foreground-on-bold-background-secondary);
+}
+
+.onStrong.tabSelected { color: var(--color-foreground-on-bold-background-primary); }
+
+.onAlwaysDark {
+  --_hover-bg: var(--color-always-dark-interaction-hover);
+  --_pressed-bg: var(--color-always-dark-interaction-pressed);
+  color: var(--color-always-dark-foreground-secondary);
+}
+
+.onAlwaysDark.tabSelected { color: var(--color-always-dark-foreground-primary); }

package/src/components/Tab/Tab.stories.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tab } from './Tab';
+import type { TabBackground } from './Tab';
+import { Surface } from '@/components/Surface';
+
+const meta: Meta<typeof Tab> = {
+  title: 'Primitives/Tab',
+  component: Tab,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tab>;
+
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('overview');
+    const tabs = ['Overview', 'Activity', 'Settings', 'Members'];
+    return (
+      <div style={{ display: 'flex', gap: 0, padding: 24 }}>
+        {tabs.map(tab => (
+          <Tab
+            key={tab}
+            label={tab}
+            isSelected={selected === tab.toLowerCase()}
+            onClick={() => setSelected(tab.toLowerCase())}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+export const SingleTab: Story = {
+  args: {
+    label: 'Selected Tab',
+    isSelected: true,
+  },
+};
+
+export const UnselectedTab: Story = {
+  args: {
+    label: 'Unselected Tab',
+    isSelected: false,
+  },
+};
+
+// ─── Background Context ──────────────────────────────────────────────────────
+
+const BG_CONTEXTS: { bg: TabBackground; contrast: 'faint' | 'medium' | 'bold' | 'strong' }[] = [
+  { bg: 'faint',  contrast: 'faint'  },
+  { bg: 'medium', contrast: 'medium' },
+  { bg: 'bold',   contrast: 'bold'   },
+  { bg: 'strong', contrast: 'strong' },
+];
+
+export const BackgroundContext: Story = {
+  parameters: { layout: 'padded' },
+  render: () => {
+    const [selected, setSelected] = useState<Record<string, string>>({
+      faint: 'overview', medium: 'overview', bold: 'overview', strong: 'overview', dark: 'overview',
+    });
+    const tabs = ['Overview', 'Activity', 'Settings'];
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+        {BG_CONTEXTS.map(({ bg, contrast }) => (
+          <Surface key={bg} intent="brand" contrast={contrast} radius="md" style={{ padding: 16 }}>
+            <span style={{ fontSize: 10, fontFamily: 'monospace', opacity: 0.7, display: 'block', marginBottom: 8 }}>
+              background="{bg}"
+            </span>
+            <div style={{ display: 'flex', gap: 0 }}>
+              {tabs.map(tab => (
+                <Tab
+                  key={tab}
+                  label={tab}
+                  background={bg}
+                  isSelected={selected[bg] === tab.toLowerCase()}
+                  onClick={() => setSelected(s => ({ ...s, [bg]: tab.toLowerCase() }))}
+                />
+              ))}
+            </div>
+          </Surface>
+        ))}
+        <div style={{ background: '#1a1a2e', borderRadius: 8, padding: 16 }}>
+          <span style={{ fontSize: 10, fontFamily: 'monospace', color: 'rgba(255,255,255,0.5)', display: 'block', marginBottom: 8 }}>
+            background="always-dark"
+          </span>
+          <div style={{ display: 'flex', gap: 0 }}>
+            {tabs.map(tab => (
+              <Tab
+                key={tab}
+                label={tab}
+                background="always-dark"
+                isSelected={selected.dark === tab.toLowerCase()}
+                onClick={() => setSelected(s => ({ ...s, dark: tab.toLowerCase() }))}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Tab/Tab.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import { Text } from '@/components/Text';
+import styles from './Tab.module.css';
+
+export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+export interface TabProps {
+  id?: string;
+  label: string;
+  isSelected?: boolean;
+  /** Parent surface context. Adjusts hover tokens and fg for tabs on colored backgrounds. */
+  background?: TabBackground;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const Tab = forwardRef<HTMLButtonElement, TabProps>(
+  ({ id, label, isSelected = false, background, onClick, className }, ref) => {
+    const bgClass = background && background !== 'faint'
+      ? styles[background === 'always-dark' ? 'onAlwaysDark' : `on${background.charAt(0).toUpperCase() + background.slice(1)}`]
+      : undefined;
+    return (
+    <button
+      ref={ref}
+      id={id}
+      className={cn(styles.tab, isSelected && styles.tabSelected, bgClass, className)}
+      onClick={onClick}
+      type="button"
+      aria-selected={isSelected}
+      role="tab"
+    >
+      <Text variant={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'} as="span">
+        {label}
+      </Text>
+    </button>
+    );
+  }
+);
+
+Tab.displayName = 'Tab';

package/src/components/Tab/index.ts

@@ -0,0 +1,2 @@
+export { Tab } from './Tab';
+export type { TabProps, TabBackground } from './Tab';

package/src/components/TabGroup/TabGroup.module.css

@@ -0,0 +1,26 @@
+.tabGroup {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.tabsRow {
+  display: flex;
+  gap: var(--dimension-space-025);
+}
+
+.track {
+  height: 2px;
+  background-color: var(--color-border-secondary);
+  position: relative;
+}
+
+.indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--color-foreground-primary);
+  border-radius: 1px;
+  transition: transform var(--effect-motion-short-3), width var(--effect-motion-short-3);
+  will-change: transform, width;
+}