@tenerife.music/ui 1.2.1 → 2.0.1

package/dist/index.d.ts

@@ -1,16 +1,22 @@
-import { cW as ResponsiveSelectSize, d5 as SelectVariantToken, cX as ResponsiveSelectWidth, cZ as ResponsiveSideOffset, cJ as ResponsiveAlignOffset, d3 as SelectSizeToken, d4 as SelectStateToken, d6 as SelectWidthToken, cS as ResponsiveModalSize, cT as ResponsiveModalWidth, cR as ResponsiveModalHeight, c_ as ResponsiveSpace, cI as RadiusToken, db as SurfaceToken, cA as ModalFooterAlignToken, dg as Responsive, b as INPUT_TOKENS, U as InputSize, cV as ResponsiveRadius$1, d7 as ShadowToken, cM as ResponsiveColor$1, cN as ResponsiveContainerMaxWidth, cQ as ResponsiveFlexBasis, cP as ResponsiveDelay, dh as ResponsiveContextMenuSize, di as ResponsiveContextMenuWidth, dj as ContextMenuItemToneToken, dk as ResponsiveTabsSize, dl as TabsVariantToken, dm as TabsToneToken } from './index-DXmHg8ji.js';
-export { A as ALERT_TOKENS, j as AlertVariant, b9 as Animation, B as BUTTON_TOKENS, bC as BorderRadius, dn as Breakpoint, k as ButtonFontSize, l as ButtonHeight, m as ButtonPaddingHorizontal, n as ButtonPaddingVertical, o as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, c7 as CanonicalFontSize, c8 as CanonicalFontWeight, c9 as CanonicalLetterSpacing, ca as CanonicalLineHeight, cb as CanonicalTextColor, p as CardPadding, q as CardRadius, r as CardShadow, s as CardSize, t as CardSpacingVertical, u as CheckboxSize, v as CheckboxState, w as CheckboxVariant, bI as ColoredShadow, bD as ComponentRadius, bW as ComponentSpacing, bX as ContainerSpacing, D as DATA_TOKENS, x as DataListLabelWidth, y as DataListRowPadding, ba as Duration, bb as Easing, bJ as ElevationShadow, E as EmptyStateIconSize, bK as FocusRing, cc as FontFamily, cd as FontSize, ce as FontWeight, bL as GlowEffect, bY as GridSpacing, I as ICON_TOKENS, z as IconColor, F as IconSize, G as IconStroke, H as InputFontSize, J as InputHeight, K as InputPaddingHorizontal, L as InputPaddingVertical, Q as InputRadius, bc as Keyframe, cf as LetterSpacing, cg as LineHeight, M as MENU_TOKENS, c as MOTION_TOKENS, V as MenuContentMinWidth, W as MenuContentPadding, X as MenuContentRadius, Y as MenuContentShadow, Z as MenuIndicatorOffset, _ as MenuIndicatorSize, $ as MenuItemGap, a0 as MenuItemHeight, a1 as MenuItemPadding, a2 as MenuItemRadius, a3 as MenuLabelPadding, a4 as MenuSeparatorMargin, a5 as MotionAnimation, a6 as MotionDuration, a7 as MotionEasing, a8 as MotionTransition, a9 as MotionTransitionPreset, bo as MotionV2CombinedType, bp as MotionV2Duration, bq as MotionV2Easing, br as MotionV2SlideDirection, bs as MotionV2Transition, N as NAVIGATION_TOKENS, d as NOTIFICATION_TOKENS, aa as NavigationItemPadding, ab as NavigationListGap, ac as NavigationRadius, ad as NavigationShadow, ae as NavigationSize, af as NavigationState, ag as NotificationPanelWidth, ah as NotificationTokenVariant, O as OVERLAY_TOKENS, ai as OverlayBackdropVariant, aj as OverlayModalSize, P as POPOVER_TOKENS, ak as PopoverArrowOffset, al as PopoverArrowSize, am as PopoverContentPadding, an as PopoverContentRadius, ao as PopoverContentShadow, ap as PopoverContentWidth, R as RADIO_TOKENS, aq as RadioSize, ar as RadioState, as as RadioVariant, S as SECTION_TOKENS, f as SURFACE_TOKENS, g as SWITCH_TOKENS, at as SectionGap, au as SectionPadding, bZ as SectionSpacing, b_ as SemanticSpacing, aL as SkeletonAnimation, aM as SkeletonBackground, aN as SkeletonVariant, b$ as Spacing, bd as Spring, c0 as StackSpacing, aO as SurfacePadding, aP as SurfaceRadius, aQ as SurfaceShadow, aR as SurfaceVariant, aS as SwitchSize, aT as SwitchState, aU as SwitchVariant, T as TEXT_TOKENS, h as TOAST_TOKENS, i as TOOLTIP_TOKENS, aV as TableCellPadding, aW as TableGap, aX as TableHeaderPadding, aY as TableRowHeight, aZ as TableShadow, a_ as TextFontSize, a$ as TextFontWeight, b0 as TextLetterSpacing, b1 as TextLineHeight, ch as TextStyle, b2 as ToastVariant, b3 as TooltipContentRadius, b4 as TooltipContentShadow, be as Transition, c6 as UI_COLORS, bM as accentColoredShadows, b5 as allCSSVariables, b6 as allCSSVariablesCSS, bf as animations, bE as borderRadius, bF as componentRadius, bN as componentShadowMapping, bg as durations, bh as easings, bO as elevationShadows, bP as focusRings, ci as fontFamily, cj as fontSize, ck as fontSizeWithMd, cl as fontWeight, b7 as generateCSSVariablesCSS, bQ as glowEffects, bi as keyframes, c1 as layoutSpacing, cm as letterSpacing, cn as lineHeight, bj as motionCSSVariables, bt as motionV2CSSVariables, bu as motionV2Combined, bv as motionV2Durations, bw as motionV2Easings, bx as motionV2Fade, by as motionV2Scale, bz as motionV2Slide, bA as motionV2TailwindConfig, bB as motionV2Transitions, bR as primaryColoredShadows, bG as radiusCSSVariables, bk as reducedMotion, c2 as semanticSpacing, bS as shadowBase, bT as shadowCSSVariables, bU as shadowOpacity, c3 as spacing, c4 as spacingCSSVariables, bl as springs, bm as tailwindMotionConfig, bH as tailwindRadiusConfig, bV as tailwindShadowConfig, c5 as tailwindSpacingConfig, co as tailwindTypographyConfig, cp as textStyles, b8 as tokenSystemSummary, bn as transitions, cq as typographyCSSVariables } from './index-DXmHg8ji.js';
+import { cM as ResponsiveSideOffset, cw as ResponsiveAlignOffset, cF as ResponsiveModalSize, cG as ResponsiveModalWidth, cE as ResponsiveModalHeight, cN as ResponsiveSpace, cv as RadiusToken, c_ as SurfaceToken, cn as ModalFooterAlignToken, cI as ResponsiveRadius$1, cW as ShadowToken, cz as ResponsiveColor$1, d3 as Responsive, cA as ResponsiveContainerMaxWidth, cD as ResponsiveFlexBasis, cC as ResponsiveDelay, d4 as ResponsiveContextMenuSize, d5 as ResponsiveContextMenuWidth, d6 as ContextMenuItemToneToken, d7 as ResponsiveTabsSize, d8 as TabsVariantToken, d9 as TabsToneToken, z as IconColor, G as IconStroke, E as EmptyStateIconSize } from './index-DGtRM9Db.js';
+export { A as ALERT_TOKENS, B as BUTTON_TOKENS, bp as BorderRadius, da as Breakpoint, k as ButtonFontSize, l as ButtonHeight, m as ButtonPaddingHorizontal, n as ButtonPaddingVertical, o as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, bW as CanonicalFontSize, bX as CanonicalFontWeight, bY as CanonicalLetterSpacing, bZ as CanonicalLineHeight, b_ as CanonicalTextColor, p as CardPadding, q as CardRadius, r as CardShadow, s as CardSize, t as CardSpacingVertical, u as CheckboxSize, v as CheckboxState, w as CheckboxVariant, bv as ColoredShadow, ba as ComponentMotionDuration, bb as ComponentMotionEasing, bd as ComponentMotionTransition, bq as ComponentRadius, bJ as ComponentSpacing, bK as ContainerSpacing, D as DATA_TOKENS, x as DataListLabelWidth, y as DataListRowPadding, bw as ElevationShadow, bx as FocusRing, b$ as FontFamily, c0 as FontSize, c1 as FontWeight, by as GlowEffect, bL as GridSpacing, I as ICON_TOKENS, c as INPUT_TOKENS, F as IconSize, H as InputFontSize, J as InputHeight, K as InputPaddingHorizontal, L as InputPaddingVertical, Q as InputRadius, U as InputSize, c2 as LetterSpacing, c3 as LineHeight, M as MENU_TOKENS, d as MOTION_TOKENS, V as MenuContentMinWidth, W as MenuContentPadding, X as MenuContentRadius, Y as MenuContentShadow, Z as MenuIndicatorOffset, _ as MenuIndicatorSize, $ as MenuItemGap, a0 as MenuItemHeight, a1 as MenuItemPadding, a2 as MenuItemRadius, a3 as MenuLabelPadding, a4 as MenuSeparatorMargin, a5 as MotionAnimation, b9 as MotionCombinedType, ba as MotionDuration, bb as MotionEasing, bc as MotionSlideDirection, bd as MotionTransition, a9 as MotionTransitionPreset, N as NAVIGATION_TOKENS, e as NOTIFICATION_TOKENS, aa as NavigationItemPadding, ab as NavigationListGap, ac as NavigationRadius, ad as NavigationShadow, ae as NavigationSize, af as NavigationState, ag as NotificationPanelWidth, ah as NotificationTokenVariant, O as OVERLAY_TOKENS, ai as OverlayBackdropVariant, aj as OverlayModalSize, P as POPOVER_TOKENS, ak as PopoverArrowOffset, al as PopoverArrowSize, am as PopoverContentPadding, an as PopoverContentRadius, ao as PopoverContentShadow, ap as PopoverContentWidth, R as RADIO_TOKENS, aq as RadioSize, ar as RadioState, as as RadioVariant, S as SECTION_TOKENS, g as SURFACE_TOKENS, h as SWITCH_TOKENS, at as SectionGap, au as SectionPadding, bM as SectionSpacing, bN as SemanticSpacing, aL as SkeletonAnimation, aM as SkeletonBackground, bO as Spacing, bP as StackSpacing, aO as SurfacePadding, aP as SurfaceRadius, aQ as SurfaceShadow, aR as SurfaceVariant, aS as SwitchSize, aT as SwitchState, aU as SwitchVariant, T as TEXT_TOKENS, i as TOAST_TOKENS, j as TOOLTIP_TOKENS, aV as TableCellPadding, aW as TableGap, aX as TableHeaderPadding, aY as TableRowHeight, aZ as TableShadow, a_ as TextFontSize, a$ as TextFontWeight, b0 as TextLetterSpacing, b1 as TextLineHeight, c4 as TextStyle, b2 as ToastVariant, b3 as TooltipContentRadius, b4 as TooltipContentShadow, bV as UI_COLORS, bz as accentColoredShadows, b5 as allCSSVariables, b6 as allCSSVariablesCSS, br as borderRadius, bs as componentRadius, bA as componentShadowMapping, bB as elevationShadows, bC as focusRings, c5 as fontFamily, c6 as fontSize, c7 as fontSizeWithMd, c8 as fontWeight, b7 as generateCSSVariablesCSS, bD as glowEffects, bQ as layoutSpacing, c9 as letterSpacing, ca as lineHeight, be as motionCSSVariables, bf as motionCombined, bg as motionDurations, bh as motionEasings, bi as motionFade, bj as motionReducedMotion, bk as motionScale, bl as motionSlide, bm as motionTailwindConfig, bn as motionTransitionProperty, bo as motionTransitions, bE as primaryColoredShadows, bt as radiusCSSVariables, bR as semanticSpacing, bF as shadowBase, bG as shadowCSSVariables, bH as shadowOpacity, bS as spacing, bT as spacingCSSVariables, bu as tailwindRadiusConfig, bI as tailwindShadowConfig, bU as tailwindSpacingConfig, cb as tailwindTypographyConfig, cc as textStyles, b8 as tokenSystemSummary, cd as typographyCSSVariables } from './index-DGtRM9Db.js';
 export { B as BaseColorTokens, C as ChartColors, a as ColorScale, b as ColorTokens, M as Mode, S as SemanticColors, c as SurfaceColors, T as TextColors, d as accentColors, e as baseColors, f as chartColors, g as colorCSSVariables, h as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from './colors-BrFmCQv-.js';
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
+import { L as LinkProps } from './Link-ZWr5iFB0.js';
+export { a as Link, b as LinkSize, c as LinkVariant, l as linkVariants } from './Link-ZWr5iFB0.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority from 'class-variance-authority';
+import { VariantProps } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
@@ -27,24 +33,42 @@ type ButtonVariant = "primary" | "secondary" | "accent" | "outline" | "ghost" |
 /**
  * Button Size Type
  *
- * Type-level enforcement: Only these size values are allowed.
+ * Type-level enforcement: Only GlobalSize values are allowed.
  * TypeScript will error if any other string is passed.
  *
  * @enforcement TUNG_BUTTON_CVA_ENFORCEMENT
+ * @enforcement VARIANTS_SIZE_CANON - Must use only GlobalSize values
+ *
+ * Canonical sizes: "sm" | "md" | "lg" (GlobalSize compliant)
+ * For icon-only buttons, use `iconOnly={true}` prop with any size.
  */
-type ButtonSize = "sm" | "md" | "lg" | "icon";
+type ButtonSize = "sm" | "md" | "lg";
 /**
  * Button Component Props
  *
  * @enforcement TUNG_BUTTON_CVA_ENFORCEMENT
  * @rule variant prop is restricted to ButtonVariant union type
- * @rule size prop is restricted to ButtonSize union type
+ * @rule size prop is restricted to ButtonSize union type (GlobalSize values only: "sm" | "md" | "lg")
+ * @rule iconOnly prop creates square icon-only button using size for dimensions (canonical way to create icon buttons)
  * @rule className prop cannot override color classes (tokenCVA validation in dev mode)
  * @rule Button is fully token-based - no raw Tailwind colors allowed
  */
 interface ButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /**
+     * Icon-only mode: Creates a square button (equal width and height) with icon-centered layout.
+     * When `iconOnly={true}`, the button uses the `size` prop to determine dimensions.
+     * This is the canonical way to create icon-only buttons (replaces deprecated `size="icon"`).
+     *
+     * @example
+     * ```tsx
+     * <Button iconOnly size="md" aria-label="Search">
+     *   <SearchIcon />
+     * </Button>
+     * ```
+     */
+    iconOnly?: boolean;
     asChild?: boolean;
     leftIcon?: React$1.ReactNode;
     rightIcon?: React$1.ReactNode;
@@ -74,84 +98,124 @@ interface ButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElemen
  */
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const textVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
-    muted?: boolean | null | undefined;
-    variant?: "primary" | "secondary" | "muted" | "accent" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TextProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "className" | "style">, VariantProps<typeof textVariants> {
-    /**
-     * @deprecated Use muted prop or semantic text colors instead
-     */
-    variant?: "primary" | "secondary" | "accent" | "outline" | "ghost" | "link" | "destructive" | "muted";
-}
-declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLSpanElement>>;
-type TextSize = VariantProps<typeof textVariants>["size"];
-type TextWeight = VariantProps<typeof textVariants>["weight"];
-
-declare const alertVariants: (props?: ({
-    variant?: "primary" | "secondary" | "accent" | "destructive" | "default" | "success" | "warning" | "danger" | "info" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
-}
-declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
-
 /**
- * Link variant values (internal - used for type derivation only)
+ * Text size values (internal - used for type derivation only)
  *
  * @internal
  */
-declare const _LINK_VARIANTS: readonly ["primary", "secondary", "accent", "outline", "ghost", "link", "destructive"];
+declare const _TEXT_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 /**
- * Link variant type
+ * Text size type
+ * Typography scale for Text component (separate from interactive scale)
  *
  * @public
  */
-type LinkVariant = (typeof _LINK_VARIANTS)[number];
+type TextSize = (typeof _TEXT_SIZES)[number];
 /**
- * Link size values (internal - used for type derivation only)
+ * Text weight values (internal - used for type derivation only)
  *
  * @internal
  */
-declare const _LINK_SIZES: readonly ["sm", "md", "lg"];
+declare const _TEXT_WEIGHTS: readonly ["normal", "medium", "semibold", "bold"];
 /**
- * Link size type
+ * Text weight type
+ * Font weight scale for Text component
  *
  * @public
  */
-type LinkSize = (typeof _LINK_SIZES)[number];
-declare const linkVariants: (props?: ({
-    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+type TextWeight = (typeof _TEXT_WEIGHTS)[number];
+/**
+ * Text tone values (internal - used for type derivation only)
+ *
+ * @internal
+ */
+declare const _TEXT_TONES: readonly ["default", "muted"];
+/**
+ * Text tone type
+ * Color tone variant for Text component
+ *
+ * @public
+ */
+type TextTone = (typeof _TEXT_TONES)[number];
+/**
+ * Text as element types
+ * Allowed HTML elements for polymorphic rendering
+ *
+ * @public
+ */
+type TextAsElement = "span" | "p" | "label" | "strong" | "em";
+declare const textVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
+    tone?: "muted" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface LinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "style"> {
-    /**
-     * Link variant style
-     * @default "link"
-     */
-    variant?: LinkVariant;
-    /**
-     * Link size
-     * @default "md"
-     */
-    size?: LinkSize;
-    /**
-     * Icon to display on the left side
-     */
-    leftIcon?: React$1.ReactNode;
+/**
+ * Text component props
+ *
+ * @public
+ */
+interface TextProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "className" | "style"> {
+    /** HTML element to render (span, p, label, strong, em) */
+    as?: TextAsElement;
+    /** Typography size scale (xs, sm, md, lg, xl) */
+    size?: TextSize;
+    /** Font weight (normal, medium, semibold, bold) */
+    weight?: TextWeight;
+    /** Text color tone (default, muted) */
+    tone?: TextTone;
+}
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Alert variant values
+ *
+ * @public
+ */
+declare const ALERT_VARIANTS: readonly ["default", "primary", "secondary", "accent", "destructive"];
+/**
+ * Alert variant type
+ *
+ * @public
+ */
+type AlertVariant = (typeof ALERT_VARIANTS)[number];
+declare const alertVariants: (props?: ({
+    variant?: "primary" | "secondary" | "accent" | "destructive" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Icon to display on the right side
+     * Alert variant style
+     * @default "default"
      */
-    rightIcon?: React$1.ReactNode;
+    variant?: AlertVariant;
+}
+declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * NavLink props interface
+ * Extends Link props with navigation state indicator
+ *
+ * @public
+ */
+interface NavLinkProps extends LinkProps {
     /**
-     * Whether the link is disabled
-     * When disabled, the link will not be navigable and will be removed from the tab order
+     * Whether this link represents the current page
+     * When true, aria-current='page' is applied for accessibility
+     * NavLink does not determine this state; it only reflects externally provided state
+     *
      * @default false
      */
-    disabled?: boolean;
+    current?: boolean;
 }
-declare const Link: React$1.ForwardRefExoticComponent<LinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+/**
+ * NavLink component
+ *
+ * A navigation primitive built on top of the Foundation Link component.
+ * Represents a navigational link and reflects externally provided navigation state via aria-current.
+ * NavLink does not perform routing, route matching, or state detection.
+ *
+ * @public
+ */
+declare const NavLink: React$1.ForwardRefExoticComponent<NavLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
 
 /**
  * Badge variant values
@@ -177,6 +241,99 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Chip variant values
+ * @public
+ */
+declare const CHIP_VARIANTS: readonly ["primary", "secondary", "accent", "outline", "ghost", "destructive"];
+/**
+ * Chip variant type
+ * @public
+ */
+type ChipVariant = (typeof CHIP_VARIANTS)[number];
+/**
+ * Chip radius values
+ * @public
+ */
+declare const CHIP_RADIUS_VALUES: readonly ["sm", "md", "lg", "pill"];
+/**
+ * Chip radius type
+ * @public
+ */
+type ChipRadius = (typeof CHIP_RADIUS_VALUES)[number];
+/**
+ * Chip variants using tokenCVA
+ */
+declare const chipVariants: (props?: ({
+    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | null | undefined;
+    radius?: "sm" | "md" | "lg" | "pill" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Chip props interface
+ * @public
+ */
+interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
+    /**
+     * Chip variant style
+     * @default "primary"
+     */
+    variant?: ChipVariant;
+    /**
+     * Border radius style
+     * @default "md"
+     */
+    radius?: ChipRadius;
+    /**
+     * Whether the chip can be removed (shows X button)
+     * @default false
+     */
+    removable?: boolean;
+    /**
+     * Whether the chip is selected (for selectable chips)
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the chip is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click handler for the chip (makes it interactive)
+     */
+    onClick?: (event: React$1.MouseEvent<HTMLElement>) => void;
+    /**
+     * Remove handler for removable chips
+     * Only called when removable={true} and remove button is clicked
+     */
+    onRemove?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible label for the chip
+     * Required for icon-only chips or when children is not descriptive
+     */
+    "aria-label"?: string;
+    /**
+     * ARIA pressed state for selectable chips
+     */
+    "aria-pressed"?: boolean | "true" | "false" | "mixed";
+    /**
+     * Child content of the chip
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * Chip component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (CHIP_TOKENS)
+ * - ✅ No raw values (all styling via tokens)
+ * - ✅ Motion compliance (MOTION_TOKENS.transitionPreset.colors)
+ * - ✅ Accessibility (ARIA attributes, keyboard navigation)
+ * - ✅ Focus management (focus-visible, keyboard-only)
+ * - ✅ Interaction Authority (disabled: prefix for disabled states)
+ */
+declare const Chip: React$1.ForwardRefExoticComponent<ChipProps & React$1.RefAttributes<HTMLElement>>;
+
 declare const headingVariants: (props?: ({
     level?: 1 | 2 | 4 | 6 | 3 | 5 | null | undefined;
     weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
@@ -196,17 +353,9 @@ interface SelectRootProps extends React$1.ComponentPropsWithoutRef<typeof Select
 declare const SelectRoot: React$1.FC<SelectRootProps>;
 interface SelectTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, "size" | "variant" | "width"> {
     /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveSelectSize;
-    /**
-     * Visual variant - token-based
+     * Invalid state - uses aria-invalid
      */
-    variant?: SelectVariantToken;
-    /**
-     * Width - token-based
-     */
-    width?: ResponsiveSelectWidth;
+    "aria-invalid"?: boolean;
 }
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 interface SelectValueProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> {
@@ -215,11 +364,7 @@ declare const SelectValue: React$1.ForwardRefExoticComponent<SelectValueProps &
 interface SelectIconProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Icon> {
 }
 declare const SelectIcon: React$1.ForwardRefExoticComponent<SelectIconProps & React$1.RefAttributes<HTMLSpanElement>>;
-interface SelectContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, "size" | "sideOffset" | "alignOffset"> {
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveSelectSize;
+interface SelectContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, "sideOffset" | "alignOffset"> {
     /**
      * Side offset - token-based
      */
@@ -234,10 +379,6 @@ interface SelectViewportProps extends React$1.ComponentPropsWithoutRef<typeof Se
 }
 declare const SelectViewport: React$1.ForwardRefExoticComponent<SelectViewportProps & React$1.RefAttributes<HTMLDivElement>>;
 interface SelectItemProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveSelectSize;
 }
 declare const SelectItem: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<HTMLDivElement>>;
 interface SelectItemTextProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.ItemText> {
@@ -247,20 +388,12 @@ interface SelectItemIndicatorProps extends React$1.ComponentPropsWithoutRef<type
 }
 declare const SelectItemIndicator: React$1.ForwardRefExoticComponent<SelectItemIndicatorProps & React$1.RefAttributes<HTMLSpanElement>>;
 interface SelectSeparatorProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveSelectSize;
 }
 declare const SelectSeparator: React$1.ForwardRefExoticComponent<SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
 interface SelectGroupProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {
 }
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 interface SelectLabelProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {
-    /**
-     * Size variant - token-based
-     */
-    size?: ResponsiveSelectSize;
 }
 declare const SelectLabel: React$1.ForwardRefExoticComponent<SelectLabelProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -280,23 +413,282 @@ declare const Select: {
 };
 
 /**
- * Select size token type
+ * Option type for MultiSelect
+ * @public
+ */
+interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Size union type (explicit, not CVA-derived)
+ * @public
+ */
+type MultiSelectSize = "sm" | "md" | "lg";
+/**
+ * MultiSelect props interface
+ * @public
+ */
+interface MultiSelectProps {
+    /**
+     * Selected values (controlled)
+     */
+    value?: string[];
+    /**
+     * Default selected values (uncontrolled)
+     */
+    defaultValue?: string[];
+    /**
+     * Callback when selection changes
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Options to display
+     */
+    options: MultiSelectOption[];
+    /**
+     * Placeholder text when no items selected
+     */
+    placeholder?: string;
+    /**
+     * Maximum number of tags to show in trigger
+     * @default undefined (show all tags)
+     */
+    maxTags?: number;
+    /**
+     * Size of the component
+     * @default "md"
+     */
+    size?: MultiSelectSize;
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible label for the component
+     * Required if no visible label
+     */
+    "aria-label"?: string;
+    /**
+     * ID of the element that labels this component
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Custom render function for tags
+     * @param option - The option being rendered as a tag
+     * @param onRemove - Function to call to remove this tag
+     */
+    renderTag?: (option: MultiSelectOption, onRemove: () => void) => React$1.ReactNode;
+}
+/**
+ * MultiSelect component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (INPUT_TOKENS, SELECT_TOKENS, CHECKBOX_TOKENS, CHIP_TOKENS)
+ * - ✅ Composes Foundation components (Select, Checkbox)
+ * - ✅ Motion compliance (MOTION_TOKENS.transitionPreset.colors)
+ * - ✅ A11Y compliance (aria-multiselectable, aria-checked, keyboard navigation)
+ * - ✅ Focus management (focus restore, keyboard-only indication)
+ */
+declare const MultiSelect: React$1.ForwardRefExoticComponent<MultiSelectProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Avatar Component Variants
+ *
+ * Token-driven CVA (Class Variance Authority) variants for Avatar component.
+ * All values use token-based Tailwind classes via AVATAR_TOKENS.
+ *
+ * COMPLIANCE:
+ * - ✅ Uses tokenCVA (enforces token-driven styling)
+ * - ✅ Token-based sizing (h-* w-* map to spacing tokens)
+ * - ✅ Token-based radius (rounded-full = 9999px, rounded-md = 6px)
+ * - ✅ Token-based colors (semantic color tokens)
+ * - ✅ Type constraints with satisfies Record<Type, string>
+ *
+ * @see {@link Avatar} - Main Avatar component
+ * @see {@link AvatarGroup} - Avatar group component
+ */
+/**
+ * Type exports for Avatar variants
  */
-type SelectSize = SelectSizeToken;
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type AvatarShape = "circle" | "square";
+type AvatarStatus = "online" | "offline" | "busy";
+
+interface AvatarProps {
+    /**
+     * Image source URL
+     * @optional If not provided or fails to load, fallback is shown
+     */
+    src?: string;
+    /**
+     * Alt text for image (required for accessibility)
+     * Used to extract initials if no fallback provided
+     * @required
+     * @example "John Doe" → initials "JD"
+     */
+    alt: string;
+    /**
+     * Avatar size
+     * @default "md"
+     */
+    size?: AvatarSize;
+    /**
+     * Avatar shape
+     * @default "circle"
+     */
+    shape?: AvatarShape;
+    /**
+     * Custom fallback content (overrides initials extraction)
+     * @optional Can be initials string or React element (e.g., icon)
+     */
+    fallback?: React$1.ReactNode;
+    /**
+     * Status indicator
+     * @optional Shows colored dot at bottom-right
+     */
+    status?: AvatarStatus | null;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
 /**
- * Select variant token type
+ * Avatar component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (no raw values)
+ * - ✅ Delegates behavior to Radix UI (@radix-ui/react-avatar)
+ * - ✅ Follows Extension Authority Contract
+ * - ✅ Token-based sizing (h-*, w-*)
+ * - ✅ Token-based radius (rounded-full, rounded-md)
+ * - ✅ Token-based colors (bg-muted, text-muted-foreground, bg-semantic-*)
+ * - ✅ Enhanced accessibility with computed aria-label
  */
-type SelectVariant = SelectVariantToken;
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
+
 /**
- * Select width token type
+ * AvatarGroup Component
+ *
+ * Displays multiple avatars with overlap effect.
+ * Shows a maximum number of avatars and indicates remaining count.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup
+ *   avatars={users.map(u => ({
+ *     key: u.id,  // Optional but recommended for dynamic lists
+ *     src: u.image,
+ *     alt: u.name
+ *   }))}
+ *   max={3}
+ *   size="md"
+ * />
+ * ```
  */
-type SelectWidth = SelectWidthToken;
+
+type AvatarGroupSpacing = "tight" | "normal" | "loose";
+interface AvatarGroupProps {
+    /**
+     * Array of avatar data
+     * @required Minimum 1 avatar
+     *
+     * @remarks
+     * For dynamic lists (items can be added/removed/reordered), provide a unique `key`
+     * for each avatar to ensure proper React reconciliation. If no key is provided,
+     * the component falls back to using `alt` or array index.
+     */
+    avatars: Array<{
+        /**
+         * Optional unique identifier for React key
+         * @recommended For dynamic lists to ensure proper reconciliation
+         */
+        key?: string | number;
+        src?: string;
+        alt: string;
+        fallback?: React$1.ReactNode;
+    }>;
+    /**
+     * Maximum avatars to show (remaining count shown as "+N")
+     * @default Show all avatars
+     * @optional
+     */
+    max?: number;
+    /**
+     * Size for all avatars in group
+     * @default "md"
+     */
+    size?: AvatarSize;
+    /**
+     * Shape for all avatars in group
+     * @default "circle"
+     */
+    shape?: AvatarShape;
+    /**
+     * Spacing between avatars (negative margin for overlap)
+     * @default "normal"
+     */
+    spacing?: AvatarGroupSpacing;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
 /**
- * Select state token type
+ * AvatarGroup component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (no raw values)
+ * - ✅ Composes Avatar component internally
+ * - ✅ Token-based spacing (negative margin via -space-x-*)
+ * - ✅ Follows Extension Authority Contract
+ * - ✅ Smart key management with fallback chain
+ * - ✅ Development-mode warnings for edge cases
  */
-type SelectState = SelectStateToken;
+declare const AvatarGroup: React$1.ForwardRefExoticComponent<AvatarGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
+ * ============================================================================
+ * ⏳ FOUNDATION · LEGACY · UNLOCKED_FOR_MIGRATION - Modal Component
+ * ============================================================================
+ *
+ * **STATUS:** ⏳ LEGACY UNLOCKED (Pending Canonical Migration)
+ * **UNLOCK DATE:** 2025-12-19
+ * **TASK:** TUNG_FOUNDATION_LEGACY_UNLOCK_01
+ *
+ * **UNLOCK RATIONALE:**
+ * Modal was declared as LOCKED but was implemented using legacy patterns and
+ * never passed the canonical Foundation Step Pipeline (0–13). The current lock
+ * is declarative only and blocks required migration.
+ *
+ * **MIGRATION PATH:**
+ * Modal will undergo canonical Foundation lock process (Steps 0–13) to ensure
+ * full compliance with all Authority Contracts and canonical lifecycle
+ * requirements, similar to Button/Link standards.
+ *
+ * **CONSTRAINTS DURING UNLOCK:**
+ * - ❌ No public API expansion
+ * - ❌ No new variants or sizes
+ * - ❌ No behavior changes outside canonicalization
+ * - ❌ No bypass of Authority Contracts
+ * - ✅ Refactor strictly via Foundation Step Pipeline
+ * - ✅ Canonical CVA, typing, and interaction refactor allowed
+ * - ✅ Authority Contract alignment allowed
+ *
+ * **EXIT CRITERIA:**
+ * - Component completes Steps 0–13
+ * - Foundation lock report exists
+ * - Public Type Surface is locked
+ * - Component re-marked as FOUNDATION · LOCKED
+ *
+ * **REFERENCE:**
+ * - docs/architecture/FOUNDATION_LOCK.md (Legacy Foundation Components section)
+ * - docs/workflows/foundation/COMPONENT_REFACTORING_PIPELINE.md
+ *
+ * ============================================================================
+ *
  * Modal Component
  *
  * Radix-based modal component with token-driven styling.
@@ -304,6 +696,12 @@ type SelectState = SelectStateToken;
  * Tenerife UI provides visual styling through tokens only.
  */
 
+/**
+ * Modal size union type
+ * Explicit union type for Modal size prop (sm | md | lg)
+ * Per VARIANTS_SIZE_CANON: overlay components restricted to sm | md | lg only
+ */
+type ModalSize = "sm" | "md" | "lg";
 interface ModalRootProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
 }
 /**
@@ -386,6 +784,20 @@ interface ModalContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof
      * ```
      */
     surface?: SurfaceToken;
+    /**
+     * Ref to the trigger element for focus restore on close
+     *
+     * When provided, Modal will deterministically restore focus to this element
+     * when the modal closes (via close button or Escape key).
+     *
+     * @example
+     * ```tsx
+     * const triggerRef = useRef<HTMLButtonElement>(null);
+     * <Button ref={triggerRef}>Open Modal</Button>
+     * <Modal.Content triggerRef={triggerRef}>...</Modal.Content>
+     * ```
+     */
+    triggerRef?: React$1.RefObject<HTMLElement>;
 }
 /**
  * Modal Content component
@@ -434,6 +846,12 @@ interface ModalDescriptionProps extends React$1.ComponentPropsWithoutRef<typeof
  * Wrapper around Radix Dialog Description with token-based typography
  */
 declare const ModalDescription: React$1.ForwardRefExoticComponent<ModalDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
+interface ModalBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Body content
+     */
+    children?: React$1.ReactNode;
+}
 interface ModalFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Gap between footer items - token-based
@@ -463,7 +881,7 @@ declare const ModalClose: React$1.ForwardRefExoticComponent<ModalCloseProps & Re
  * Radix Dialog-based modal component with token-driven styling.
  *
  * **Usage:**
- * ```tsx
+ * @example
  * <Modal.Root open={open} onOpenChange={setOpen}>
  *   <Modal.Trigger>Open</Modal.Trigger>
  *   <Modal.Content>
@@ -471,42 +889,372 @@ declare const ModalClose: React$1.ForwardRefExoticComponent<ModalCloseProps & Re
  *       <Modal.Title>Title</Modal.Title>
  *       <Modal.Description>Description</Modal.Description>
  *     </Modal.Header>
- *     <div>Content</div>
+ *     <Modal.Body>
+ *       {/* Scrollable content *\/}
+ *     </Modal.Body>
  *     <Modal.Footer>
  *       <Modal.Close>Close</Modal.Close>
  *     </Modal.Footer>
  *     <Modal.Close />
  *   </Modal.Content>
  * </Modal.Root>
+ *
+ * **Note:** Modal.Portal and Modal.Overlay are internal and should not be used directly.
+ * ModalContent automatically handles portal and overlay rendering.
+ * Modal.Body is optional but recommended for scrollable content.
+ */
+declare const Modal: {
+    Root: React$1.FC<ModalRootProps>;
+    Trigger: React$1.ForwardRefExoticComponent<ModalTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Overlay: React$1.ForwardRefExoticComponent<ModalOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
+    Content: React$1.ForwardRefExoticComponent<ModalContentProps & React$1.RefAttributes<HTMLDivElement>>;
+    Header: React$1.ForwardRefExoticComponent<ModalHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+    Title: React$1.ForwardRefExoticComponent<ModalTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
+    Description: React$1.ForwardRefExoticComponent<ModalDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
+    Body: React$1.ForwardRefExoticComponent<ModalBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+    Footer: React$1.ForwardRefExoticComponent<ModalFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+    Close: React$1.ForwardRefExoticComponent<ModalCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+};
+
+/**
+ * FileUpload Types
+ *
+ * Type definitions for FileUpload component.
+ * All types follow TYPING_STANDARD (explicit union types, no CVA-derived types in public API).
+ */
+/**
+ * FileUpload Size Type
+ * Explicit union type for size variants
+ */
+type FileUploadSize = "sm" | "md" | "lg";
+/**
+ * FileUpload Variant Type
+ * Explicit union type for visual variants
+ */
+type FileUploadVariant = "outline" | "filled";
+/**
+ * FileUpload Error Type
+ * Error types for validation failures
+ */
+interface FileUploadError {
+    type: "file-too-large" | "file-type-not-supported" | "too-many-files" | "unknown";
+    message: string;
+    file?: File;
+}
+/**
+ * FileUpload Props
+ * Main component props interface
+ *
+ * Extension component: className/style allowed but excluded from type definition
+ * for consistency with FormData components pattern
+ */
+interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onError"> {
+    /** Allow multiple file selection */
+    multiple?: boolean;
+    /** Accepted file types (e.g., "image/*", ".pdf,.doc") */
+    accept?: string;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Maximum number of files (for multiple mode) */
+    maxFiles?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state (upload in progress) */
+    loading?: boolean;
+    /** Controlled value (array of File objects) */
+    value?: File[];
+    /** Default value (uncontrolled mode) */
+    defaultValue?: File[];
+    /** Called when files are selected */
+    onFileSelect?: (files: File[]) => void;
+    /** Called when a file is removed */
+    onFileRemove?: (file: File) => void;
+    /** Called when validation error occurs */
+    onError?: (error: FileUploadError) => void;
+    /** Size variant */
+    size?: FileUploadSize;
+    /** Visual variant */
+    variant?: FileUploadVariant;
+    /** Accessible label for dropzone */
+    "aria-label"?: string;
+    /** ID of element describing the component */
+    "aria-describedby"?: string;
+}
+
+/**
+ * FileUpload Component
+ *
+ * Extension composite component for file upload with drag-and-drop,
+ * file preview, validation, and progress tracking.
+ *
+ * Features:
+ * - Drag-and-drop file selection
+ * - File preview with thumbnails (for images)
+ * - File validation (size, type, count)
+ * - Controlled and uncontrolled modes
+ * - Size variants (sm, md, lg)
+ * - Visual variants (outline, filled)
+ * - Error handling
+ * - ARIA compliance
+ * - Keyboard navigation
+ *
+ * @example Basic usage
+ * ```tsx
+ * <FileUpload onFileSelect={(files) => console.log(files)} />
  * ```
  *
- * **Note:** Modal.Portal and Modal.Overlay are internal and should not be used directly.
- * ModalContent automatically handles portal and overlay rendering.
+ * @example Multiple files with validation
+ * ```tsx
+ * <FileUpload
+ *   multiple
+ *   maxSize={5 * 1024 * 1024} // 5MB
+ *   accept="image/*"
+ *   maxFiles={5}
+ *   onFileSelect={handleUpload}
+ *   onError={(error) => console.error(error)}
+ * />
+ * ```
+ *
+ * @example Controlled mode with loading state
+ * ```tsx
+ * <FileUpload
+ *   value={files}
+ *   loading={isUploading}
+ *   onFileSelect={setFiles}
+ *   onFileRemove={handleRemove}
+ * />
+ * ```
+ */
+
+/**
+ * FileUpload component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (no raw values)
+ * - ✅ Composes Foundation components (Button, Text)
+ * - ✅ Follows Extension Authority Contract
+ * - ✅ Uses descriptive, intent-based naming
+ * - ✅ Does NOT duplicate Foundation functionality
+ * - ✅ Motion compliance: uses .tm-motion-fade-in for file appearance
+ * - ✅ A11Y compliance: aria-label, aria-describedby, aria-busy, aria-invalid
+ * - ✅ Focus compliance: keyboard navigation, focus-visible styles
+ */
+declare const FileUpload: React$1.ForwardRefExoticComponent<FileUploadProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type RangeSliderSize = "sm" | "md" | "lg";
+type RangeSliderVariant = "primary" | "secondary" | "outline";
+type RangeSliderOrientation = "horizontal" | "vertical";
+interface RangeSliderMark {
+    /**
+     * Value at which the mark should be placed
+     */
+    value: number;
+    /**
+     * Optional label to display at the mark
+     */
+    label?: string | React$1.ReactNode;
+}
+interface RangeSliderProps {
+    /**
+     * Current value of the range slider (controlled)
+     * Tuple of [min, max]
+     */
+    value?: [number, number];
+    /**
+     * Default value of the range slider (uncontrolled)
+     * Tuple of [min, max]
+     * @default [25, 75]
+     */
+    defaultValue?: [number, number];
+    /**
+     * Callback fired when the value changes
+     */
+    onValueChange?: (value: [number, number]) => void;
+    /**
+     * Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Visual size variant
+     * @default "md"
+     */
+    size?: RangeSliderSize;
+    /**
+     * Visual style variant
+     * @default "primary"
+     */
+    variant?: RangeSliderVariant;
+    /**
+     * Whether the range slider is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Orientation of the range slider
+     * @default "horizontal"
+     */
+    orientation?: RangeSliderOrientation;
+    /**
+     * Marks to display on the range slider
+     * Can be an array of mark objects or just an array of values
+     */
+    marks?: RangeSliderMark[] | number[];
+    /**
+     * Whether to show labels for marks
+     * @default false
+     */
+    showMarkLabels?: boolean;
+    /**
+     * Accessible label for the range slider
+     */
+    "aria-label"?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+}
+/**
+ * RangeSlider component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (no raw values)
+ * - ✅ Uses Radix UI Slider primitive with minStepsBetweenThumbs
+ * - ✅ Follows Extension Authority Contract
+ * - ✅ Interactive Size Scale Authority (sm/md/lg)
+ * - ✅ InteractiveVariant subset (primary/secondary/outline)
+ * - ✅ CVA pattern for variants and sizes
+ */
+declare const RangeSlider: React$1.ForwardRefExoticComponent<RangeSliderProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+type SliderSize = "sm" | "md" | "lg";
+type SliderVariant = "primary" | "secondary" | "outline";
+type SliderOrientation = "horizontal" | "vertical";
+interface SliderMark {
+    /**
+     * Value at which the mark should be placed
+     */
+    value: number;
+    /**
+     * Optional label to display at the mark
+     */
+    label?: string | React$1.ReactNode;
+}
+interface SliderProps {
+    /**
+     * Current value of the slider (controlled)
+     */
+    value?: number;
+    /**
+     * Default value of the slider (uncontrolled)
+     * @default 50
+     */
+    defaultValue?: number;
+    /**
+     * Callback fired when the value changes
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Visual size variant
+     * @default "md"
+     */
+    size?: SliderSize;
+    /**
+     * Visual style variant
+     * @default "primary"
+     */
+    variant?: SliderVariant;
+    /**
+     * Whether the slider is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Orientation of the slider
+     * @default "horizontal"
+     */
+    orientation?: SliderOrientation;
+    /**
+     * Marks to display on the slider
+     * Can be an array of mark objects or just an array of values
+     */
+    marks?: SliderMark[] | number[];
+    /**
+     * Whether to show labels for marks
+     * @default false
+     */
+    showMarkLabels?: boolean;
+    /**
+     * Accessible label for the slider
+     */
+    "aria-label"?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+}
+/**
+ * Slider component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (SLIDER_TOKENS, no raw values)
+ * - ✅ Uses Radix UI Slider primitive
+ * - ✅ Follows Extension Authority Contract
+ * - ✅ Interactive Size Scale Authority (sm/md/lg)
+ * - ✅ InteractiveVariant subset (primary/secondary/outline)
+ * - ✅ tokenCVA pattern for variants and sizes (Decision Matrix RULE 1 compliance)
  */
-declare const Modal: {
-    Root: React$1.FC<ModalRootProps>;
-    Trigger: React$1.ForwardRefExoticComponent<ModalTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-    Overlay: React$1.ForwardRefExoticComponent<ModalOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
-    Content: React$1.ForwardRefExoticComponent<ModalContentProps & React$1.RefAttributes<HTMLDivElement>>;
-    Header: React$1.ForwardRefExoticComponent<ModalHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
-    Title: React$1.ForwardRefExoticComponent<ModalTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
-    Description: React$1.ForwardRefExoticComponent<ModalDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
-    Footer: React$1.ForwardRefExoticComponent<ModalFooterProps & React$1.RefAttributes<HTMLDivElement>>;
-    Close: React$1.ForwardRefExoticComponent<ModalCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-};
+declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Checkbox Variant Types
+ *
+ * Explicit union types for Checkbox component.
+ * Canonical size scale for interactive components: sm | md | lg
+ */
+type CheckboxVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
+type CheckboxSize = "sm" | "md" | "lg";
+type CheckboxState = "default" | "checked" | "indeterminate" | "error" | "disabled" | "disabledChecked";
 /**
  * Checkbox Variants
  *
- * CVA-based variant system for Checkbox component.
+ * tokenCVA-based variant system for Checkbox component (token-driven axes).
  * Supports variants (primary, secondary, outline, ghost, destructive),
- * sizes (xs, sm, md, lg, xl), and states (default, checked, disabled, error, indeterminate).
+ * sizes (sm, md, lg - canonical interactive scale), and states (default, checked, disabled, error, indeterminate).
  * All styling uses token-based values with CSS variable references.
+ *
+ * NOTE: Size scale restricted to sm|md|lg per canonical interactive size scale (FOUNDATION_LOCK.md).
+ * xs and xl sizes removed to comply with Button-defined canonical scale.
  */
 declare const checkboxVariants: (props?: ({
     variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    state?: "default" | "disabled" | "error" | "checked" | "indeterminate" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "disabled" | "error" | "checked" | "indeterminate" | "disabledChecked" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 /**
@@ -514,23 +1262,26 @@ declare const checkboxVariants: (props?: ({
  *
  * Extends native button HTML attributes with variant props, checked state, and accessibility props.
  * Uses button role="checkbox" pattern for full keyboard accessibility.
+ *
+ * NOTE: Size scale restricted to sm|md|lg per canonical interactive size scale.
+ * VariantProps removed — public API uses explicit union types only.
  */
-interface CheckboxProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "onChange" | "className" | "style">, VariantProps<typeof checkboxVariants> {
+interface CheckboxProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "onChange" | "className" | "style"> {
     /**
      * Checkbox variant style
      * @default "outline"
      */
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+    variant?: CheckboxVariant;
     /**
-     * Checkbox size
+     * Checkbox size (canonical interactive scale: sm | md | lg)
      * @default "md"
      */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: CheckboxSize;
     /**
      * Checkbox state
      * @default "default"
      */
-    state?: "default" | "checked" | "indeterminate" | "error" | "disabled";
+    state?: CheckboxState;
     /**
      * Whether checkbox is checked (controlled)
      */
@@ -595,8 +1346,7 @@ interface CheckboxProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElem
  */
 declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const labelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-interface LabelProps extends Omit<React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, "className" | "style">, VariantProps<typeof labelVariants> {
+interface LabelProps extends Omit<React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, "className" | "style"> {
     /**
      * Whether the field is required (shows asterisk)
      */
@@ -606,35 +1356,83 @@ declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefA
 
 /**
  * Field Container Component
- * Provides spacing between field elements using Stack
+ *
+ * Provides vertical layout structure for form field elements with consistent spacing.
+ * Composes Label, Control wrapper, Description, and Error into a Stack layout.
+ *
+ * @example
+ * ```tsx
+ * <Field>
+ *   <Field.Label htmlFor="email">Email</Field.Label>
+ *   <Field.Control>
+ *     <Input id="email" type="email" />
+ *   </Field.Control>
+ *   <Field.Description>We'll never share your email.</Field.Description>
+ * </Field>
+ * ```
  */
 interface FieldProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefAttributes<HTMLDivElement>>;
 /**
  * Field Label Component
- * Wraps Label component with proper styling
+ *
+ * Wraps the Foundation Label component for form field labels.
+ * Delegates all behavior and styling to Label (Foundation component).
+ *
+ * @example
+ * ```tsx
+ * <Field.Label htmlFor="email">Email Address</Field.Label>
+ * ```
  */
 interface FieldLabelProps extends React$1.ComponentProps<typeof Label> {
 }
 declare const FieldLabel: React$1.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
 /**
  * Field Control Component
- * Wrapper for input/textarea/select controls
+ *
+ * Wrapper for form control elements (Input, Textarea, Select, etc.).
+ * Provides ref forwarding and className merging for control elements.
+ *
+ * @example
+ * ```tsx
+ * <Field.Control>
+ *   <Input id="email" type="email" />
+ * </Field.Control>
+ * ```
  */
 interface FieldControlProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const FieldControl: React$1.ForwardRefExoticComponent<FieldControlProps & React$1.RefAttributes<HTMLDivElement>>;
 /**
  * Field Description Component
- * Helper text displayed below the control
+ *
+ * Helper text displayed below the control to provide additional context.
+ * Uses Text component with size="sm" and muted styling by default.
+ *
+ * @example
+ * ```tsx
+ * <Field.Description>We'll never share your email with anyone else.</Field.Description>
+ * ```
  */
 interface FieldDescriptionProps extends React$1.ComponentProps<typeof Text> {
 }
 declare const FieldDescription: React$1.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 /**
  * Field Error Component
- * Error message displayed below the control
+ *
+ * Error message displayed below the control for validation feedback.
+ * Uses Text component with size="sm" wrapped in destructive color span.
+ *
+ * Note: Wrapper span with className="text-destructive" is used to apply
+ * destructive color without modifying Text component (Foundation component).
+ * This pattern allows Field (Composition component) to use className while
+ * respecting Foundation Enforcement rules for Text.
+ *
+ * @example
+ * ```tsx
+ * <Field.Error>Email is required</Field.Error>
+ * ```
  */
 interface FieldErrorProps extends React$1.ComponentProps<typeof Text> {
 }
@@ -647,121 +1445,103 @@ declare const FieldRoot: typeof Field & {
 };
 
 /**
- * Input Variants
- *
- * CVA-based variant system for Input component.
- * Supports variants (primary, secondary, outline, ghost, destructive),
- * sizes (xs, sm, md, lg, xl), and states (default, disabled, error, success).
- * All styling uses token-based values with CSS variable references.
- */
-declare const inputVariants: (props?: ({
-    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    state?: "default" | "disabled" | "success" | "error" | null | undefined;
-    fullWidth?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-
-/**
- * Input variant type derived from INPUT_TOKENS
+ * Input size type
  *
- * Available variants: "primary" | "secondary" | "outline" | "ghost" | "destructive"
+ * Available sizes: "sm" | "md" | "lg"
  *
  * @example
  * ```tsx
- * const variant: InputVariant = "outline";
+ * const size: InputSize = "md";
  * ```
  */
-type InputVariant = keyof typeof INPUT_TOKENS.variant;
-
+type InputSize = "sm" | "md" | "lg";
 /**
  * Input Component Props
  *
- * Extends native input HTML attributes with variant props, icon slots, and accessibility props.
+ * Minimal native-aligned interface for low-level form control primitive.
+ * Extends native input HTML attributes with size and invalid props.
  */
-interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "className" | "style">, Omit<VariantProps<typeof inputVariants>, "variant" | "size"> {
+interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "color" | "className" | "style"> {
     /**
-     * Input variant style
-     *
-     * Supports responsive values:
-     * - Single value: `variant="outline"`
-     * - Responsive object: `variant={{ base: "outline", md: "primary" }}`
+     * Input size
      *
-     * @default "outline"
+     * @default "md"
      *
      * @example
      * ```tsx
-     * // Single value
-     * <Input variant="outline" />
-     *
-     * // Responsive
-     * <Input variant={{ base: "outline", md: "primary" }} />
+     * <Input size="md" />
      * ```
      */
-    variant?: Responsive<InputVariant>;
+    size?: InputSize;
     /**
-     * Input size
+     * Whether the input is in an invalid state
      *
-     * Supports responsive values:
-     * - Single value: `size="md"`
-     * - Responsive object: `size={{ base: "sm", md: "lg" }}`
-     *
-     * @default "md"
+     * Maps to aria-invalid attribute for accessibility.
      *
      * @example
      * ```tsx
-     * // Single value
-     * <Input size="md" />
-     *
-     * // Responsive
-     * <Input size={{ base: "sm", md: "lg" }} />
+     * <Input invalid />
      * ```
      */
-    size?: Responsive<InputSize>;
-    /**
-     * Input state
-     * @default "default"
-     */
-    state?: "default" | "disabled" | "error" | "success";
-    /**
-     * Whether input should take full width
-     * @default true
-     */
-    fullWidth?: boolean;
-    /**
-     * Icon to display on the left side of the input
-     */
-    iconLeft?: React$1.ReactNode;
-    /**
-     * Icon to display on the right side of the input
-     */
-    iconRight?: React$1.ReactNode;
+    invalid?: boolean;
 }
 
 /**
  * Input Component
  *
- * A fully accessible, theme-aware input component with variant support,
- * icon slots, and comprehensive state management.
+ * @semantic_role FOUNDATION_PRIMITIVE_TEXT_INPUT
+ * @semantic_definition Input is a low-level form control primitive that wraps the native <input> element.
+ *                     It is responsible only for visual styling via tokens, accessibility via native and ARIA attributes,
+ *                     and forwarding all native input behavior. Input does not handle labels, errors, validation,
+ *                     helper text, or form logic. Higher-level composition is delegated to FormField or domain-level form abstractions.
+ *
+ * @status FOUNDATION LOCK (Target - 2025-12-26)
+ * @rule DO NOT modify, extend, or create alternatives (after Foundation Lock)
+ */
+
+/**
+ * Input Component
+ *
+ * A minimal, low-level form control primitive that wraps the native <input> element.
+ * Supports size variants and invalid state for accessibility.
  *
  * @example
  * ```tsx
- * <Input
- *   variant="outline"
- *   size="md"
- *   placeholder="Enter text..."
- *   iconLeft={<Icon name="search" />}
- * />
+ * <Input size="md" placeholder="Enter text..." />
+ * <Input invalid aria-describedby="error-id" />
  * ```
  */
 declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
+/**
+ * Input Variants
+ *
+ * Token-driven CVA system for Input component (size-only variant system).
+ * All styling uses token-based values with CSS variable references.
+ *
+ * Invalid state styling is handled via CSS [aria-invalid="true"] selector (see base classes).
+ */
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * Explicit union types for Radio component
+ * Required for CVA type constraints (satisfies Record<Type, string>)
+ */
+type RadioVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
+type RadioSize = "xs" | "sm" | "md" | "lg" | "xl";
+type RadioState = "default" | "checked" | "disabled" | "error";
 /**
  * Radio Variants
  *
- * CVA-based variant system for Radio component.
+ * tokenCVA-based variant system for Radio component.
  * Supports variants (primary, secondary, outline, ghost, destructive),
  * sizes (xs, sm, md, lg, xl), and states (default, checked, disabled, error).
  * All styling uses token-based values with CSS variable references.
+ *
+ * Uses tokenCVA (not cva) because component has token-driven axes (variant, size, state).
+ * Per CVA Usage Decision Matrix RULE 1: tokenCVA is REQUIRED for token-driven axes.
  */
 declare const radioVariants: (props?: ({
     variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
@@ -769,28 +1549,49 @@ declare const radioVariants: (props?: ({
     state?: "default" | "disabled" | "error" | "checked" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
+/**
+ * Radio component
+ */
+declare const Radio: React$1.ForwardRefExoticComponent<Omit<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "className" | "size" | "style" | "onChange"> & class_variance_authority.VariantProps<(props?: ({
+    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    state?: "default" | "disabled" | "error" | "checked" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    variant?: RadioVariant;
+    size?: RadioSize;
+    state?: RadioState;
+    checked?: boolean;
+    disabled?: boolean;
+    value?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    icon?: React$1.ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Radio Component Props
  *
  * Extends native button HTML attributes with variant props, checked state, and accessibility props.
  * Uses button role="radio" pattern for full keyboard accessibility.
  */
-interface RadioProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "onChange" | "className" | "style">, VariantProps<typeof radioVariants> {
+type RadioProps = Omit<React$1.ComponentPropsWithoutRef<"button">, "size" | "onChange" | "className" | "style"> & VariantProps<typeof radioVariants> & {
     /**
      * Radio variant style
      * @default "outline"
      */
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+    variant?: RadioVariant;
     /**
      * Radio size
      * @default "md"
      */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: RadioSize;
     /**
      * Radio state
      * @default "default"
      */
-    state?: "default" | "checked" | "disabled" | "error";
+    state?: RadioState;
     /**
      * Whether radio is checked (controlled)
      */
@@ -828,29 +1629,7 @@ interface RadioProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement
      * Points to the ID of the element that describes this radio
      */
     "aria-describedby"?: string;
-}
-
-/**
- * Radio Component
- *
- * A fully accessible, theme-aware radio button component with variant support,
- * keyboard navigation, and comprehensive state management.
- * Uses button role="radio" pattern for full accessibility.
- * Can be used standalone or within RadioGroup for group behavior.
- *
- * @example
- * ```tsx
- * <RadioGroup value={value} onValueChange={setValue}>
- *   <Radio value="option1" aria-label="Option 1" />
- *   <Radio value="option2" aria-label="Option 2" />
- * </RadioGroup>
- * ```
- */
-
-/**
- * Radio component
- */
-declare const Radio: React$1.ForwardRefExoticComponent<RadioProps & React$1.RefAttributes<HTMLButtonElement>>;
+};
 
 /**
  * RadioGroup Component Props
@@ -899,82 +1678,98 @@ interface RadioGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Textarea size type
+ * Limited to sm, md, lg sizes for strict primitive model
+ */
+type TextareaSize = "sm" | "md" | "lg";
 /**
  * Textarea Variants
  *
- * CVA-based variant system for Textarea component.
- * Supports variants (primary, secondary, outline, ghost, destructive),
- * sizes (xs, sm, md, lg, xl), and states (default, disabled, error, success).
+ * @enforcement Token-driven CVA system using tokenCVA
+ * @rule ALL visual properties MUST use token-based utilities
+ * @rule NO raw Tailwind color/spacing classes allowed
+ *
+ * Strict low-level primitive variant system for Textarea component.
+ * Supports only size variants (sm, md, lg) and default styling.
  * All styling uses token-based values with CSS variable references.
+ *
+ * State styling (invalid, disabled) is handled via aria-invalid and disabled attributes,
+ * not as CVA variant axis (per STATE_AUTHORITY).
  */
 declare const textareaVariants: (props?: ({
-    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    state?: "default" | "disabled" | "success" | "error" | null | undefined;
-    fullWidth?: boolean | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 /**
  * Textarea Component Props
  *
- * Extends native textarea HTML attributes with variant props, character counter, and accessibility props.
+ * Strict low-level multiline form control primitive.
+ * Thin wrapper around native <textarea> element with minimal API.
+ *
+ * Note: className and style props are excluded per Foundation Enforcement rule.
+ * State styling (invalid, disabled) is handled via native HTML attributes (disabled, aria-invalid),
+ * not as separate variant axis (per STATE_AUTHORITY).
  */
-interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "style">, VariantProps<typeof textareaVariants> {
-    /**
-     * Textarea variant style
-     * @default "outline"
-     */
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "rows" | "className" | "style"> {
     /**
      * Textarea size
+     * Limited to sm, md, lg sizes for strict primitive model
      * @default "md"
      */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
-    /**
-     * Textarea state
-     * @default "default"
-     */
-    state?: "default" | "disabled" | "error" | "success";
-    /**
-     * Whether textarea should take full width
-     * @default true
-     */
-    fullWidth?: boolean;
-    /**
-     * Maximum character length (for character counter)
-     */
-    maxLength?: number;
+    size?: TextareaSize;
     /**
-     * Show character counter
-     * Only displays when both showCharacterCount and maxLength are provided
+     * Invalid state indicator
+     * Maps to aria-invalid attribute for accessibility
      * @default false
      */
-    showCharacterCount?: boolean;
+    invalid?: boolean;
 }
 
 /**
  * Textarea Component
  *
- * A fully accessible, theme-aware textarea component with variant support,
- * character counter, and comprehensive state management.
+ * Strict low-level multiline form control primitive.
+ * Thin wrapper around native <textarea> element aligned with Input canonical model.
+ *
+ * State handling follows STATE_AUTHORITY pattern:
+ * - Invalid state: Use invalid={true} or aria-invalid={true} (native HTML attribute)
+ * - Disabled state: Use disabled={true} (native HTML attribute)
+ * - No separate "state" prop (states are derived from HTML attributes)
  *
  * @example
  * ```tsx
  * <Textarea
- *   variant="outline"
  *   size="md"
  *   placeholder="Enter text..."
- *   showCharacterCount
- *   maxLength={200}
  * />
+ *
+ * // Invalid state
+ * <Textarea
+ *   invalid={true}
+ *   aria-describedby="error-message"
+ * />
+ *
+ * // Disabled state
+ * <Textarea disabled />
  * ```
  */
 declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * Skeleton variant type
+ * Explicit union type for variant prop
+ */
+type SkeletonVariant = "text" | "inline" | "block" | "card" | "circle";
 declare const skeletonVariants: (props?: ({
     variant?: "block" | "card" | "text" | "inline" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Skeleton variant style
+     * @default "text"
+     */
+    variant?: SkeletonVariant;
     /**
      * Whether to hide from screen readers
      * @default true
@@ -991,7 +1786,182 @@ interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantP
  * <Skeleton variant="card" />
  * ```
  */
-declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Progress size variants
+ * Subset of GlobalSize scale (sm, md, lg)
+ */
+type ProgressSize = "sm" | "md" | "lg";
+/**
+ * Progress component props
+ */
+interface ProgressProps {
+    /**
+     * Progress value (0-max)
+     */
+    value: number;
+    /**
+     * Maximum progress value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Progress bar size
+     * @default "md"
+     */
+    size?: ProgressSize;
+    /**
+     * Additional CSS classes (Extension layer allows className)
+     */
+    className?: string;
+}
+/**
+ * Progress Component
+ *
+ * Displays visual feedback for operation progress from 0% to 100%.
+ * Shows a filled bar proportional to the completion percentage.
+ *
+ * @example
+ * ```tsx
+ * // Default progress bar (md size)
+ * <Progress value={45} />
+ *
+ * // Small progress bar
+ * <Progress value={75} size="sm" />
+ *
+ * // Large progress bar
+ * <Progress value={30} size="lg" />
+ *
+ * // With max value
+ * <Progress value={3} max={10} /> // 30%
+ * ```
+ */
+declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Separator Color Variant Types
+ *
+ * Explicit union types for Separator component color variants.
+ */
+type SeparatorColor = "border" | "muted" | "primary" | "secondary" | "accent";
+/**
+ * Separator Thickness Types
+ *
+ * Explicit union types for Separator component thickness variants.
+ */
+type SeparatorThickness = "1" | "2";
+/**
+ * Separator variants using tokenCVA
+ *
+ * Token-based styling for:
+ * - Orientation (horizontal/vertical)
+ * - Color variants
+ * - Thickness variants
+ */
+declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    color?: "primary" | "secondary" | "muted" | "accent" | "border" | null | undefined;
+    thickness?: "1" | "2" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SeparatorProps extends React$1.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+    /**
+     * Orientation of the separator
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Whether the separator is decorative (no semantic meaning)
+     * @default true
+     */
+    decorative?: boolean;
+    /**
+     * Color variant
+     * @default "border"
+     */
+    color?: SeparatorColor;
+    /**
+     * Thickness variant
+     * @default "1"
+     */
+    thickness?: SeparatorThickness;
+}
+/**
+ * Separator component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses @radix-ui/react-separator for behavior
+ * - ✅ Token-based styling (tokenCVA, SEPARATOR_TOKENS)
+ * - ✅ Supports horizontal and vertical orientations
+ * - ✅ Semantic (role="separator") vs decorative (role="none")
+ * - ✅ ARIA attributes handled by Radix
+ * - ✅ Follows Extension Authority Contract
+ * - ✅ Explicit union types (SeparatorColor, SeparatorThickness)
+ * - ✅ Type constraints (satisfies Record<Type, string>)
+ */
+declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * AspectRatio Component
+ *
+ * Container that maintains a fixed aspect ratio for its content.
+ * Useful for responsive images, videos, and cards.
+ *
+ * @example
+ * ```tsx
+ * // 16:9 aspect ratio (video)
+ * <AspectRatio ratio={16 / 9}>
+ *   <img src="..." alt="..." />
+ * </AspectRatio>
+ *
+ * // Square aspect ratio (1:1)
+ * <AspectRatio ratio={1}>
+ *   <img src="..." alt="..." />
+ * </AspectRatio>
+ *
+ * // Using preset
+ * <AspectRatio preset="video">
+ *   <iframe src="..." />
+ * </AspectRatio>
+ * ```
+ */
+
+/**
+ * Common aspect ratio presets
+ */
+declare const ASPECT_RATIO_PRESETS: {
+    readonly square: number;
+    readonly video: number;
+    readonly cinema: number;
+    readonly portrait: number;
+    readonly photo: number;
+    readonly golden: number;
+};
+type AspectRatioPreset = keyof typeof ASPECT_RATIO_PRESETS;
+interface AspectRatioProps extends React$1.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root> {
+    /**
+     * Aspect ratio as a number (width / height)
+     * @example 16 / 9 for 16:9 ratio
+     * @example 1 for square (1:1)
+     */
+    ratio?: number;
+    /**
+     * Preset aspect ratio
+     * Overrides `ratio` prop if provided
+     */
+    preset?: AspectRatioPreset;
+}
+/**
+ * AspectRatio component
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses @radix-ui/react-aspect-ratio for behavior
+ * - ✅ Pure layout utility (no visual tokens needed)
+ * - ✅ Supports custom ratios and common presets
+ * - ✅ Responsive by default
+ * - ✅ Follows Extension Authority Contract
+ */
+declare const AspectRatio: React$1.ForwardRefExoticComponent<AspectRatioProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Layout Primitives Shared Types
@@ -1214,14 +2184,9 @@ interface StackProps extends Omit<BoxProps, "display" | "flexDirection" | "gap">
     direction?: "vertical" | "horizontal";
     /**
      * Spacing between stack items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
-     * This is the canonical prop for spacing. Use `spacing` instead of `gap` for clarity.
+     * This is the canonical prop for spacing.
      */
     spacing?: ResponsiveSpacing;
-    /**
-     * Gap between stack items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
-     * @deprecated Use `spacing` prop instead. This prop is kept for backward compatibility.
-     */
-    gap?: ResponsiveSpacing;
     /**
      * Align items
      */
@@ -1378,6 +2343,27 @@ declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAtt
 interface GridProps extends Omit<BoxProps, "display" | "align" | "justify"> {
     /**
      * Number of columns (1-6, 12, or none)
+     *
+     * Can be a simple value, a responsive object, or combined with shorthand props (sm, md, lg, xl, 2xl).
+     * Merging behavior:
+     * - If `cols` is a simple value and shorthand props are provided, `cols` becomes the base value
+     * - If `cols` is undefined and shorthand props are provided, shorthand props are used directly
+     * - If `cols` is a responsive object and shorthand props are provided, they are merged together
+     *
+     * @example
+     * ```tsx
+     * // Simple value
+     * <Grid cols={3} />
+     *
+     * // Responsive object
+     * <Grid cols={{ base: 1, md: 2, lg: 3 }} />
+     *
+     * // Shorthand props (cols becomes base)
+     * <Grid cols={1} md={2} lg={3} />
+     *
+     * // Shorthand props only (no cols)
+     * <Grid sm={1} md={2} lg={3} />
+     * ```
      */
     cols?: ResponsiveColumns;
     /**
@@ -1451,14 +2437,19 @@ interface RowProps extends Omit<StackProps, "direction"> {
  */
 declare const Row: React$1.ForwardRefExoticComponent<RowProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Surface variant type (canonical SurfaceVariant dictionary)
+ * @see docs/architecture/VARIANTS_SIZE_CANON.md for canonical variant dictionary
+ */
+type SurfaceVariantType = "default" | "elevated" | "outlined" | "filled" | "subtle";
 declare const surfaceVariants: (props?: ({
-    variant?: "flat" | "raised" | "sunken" | "outline" | "subtle" | null | undefined;
+    variant?: "default" | "subtle" | "elevated" | "outlined" | "filled" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SurfaceProps extends Omit<BoxProps, "bg" | "shadow" | "radius" | "p">, VariantProps<typeof surfaceVariants> {
+interface SurfaceProps extends Omit<BoxProps, "bg" | "shadow" | "radius" | "p"> {
     /**
-     * Surface variant
+     * Surface variant (canonical SurfaceVariant dictionary)
      */
-    variant?: "flat" | "raised" | "sunken" | "outline" | "subtle";
+    variant?: SurfaceVariantType;
     /**
      * Padding - token-based (sm, md, lg, xl)
      * Overrides default variant padding
@@ -1557,7 +2548,7 @@ declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & Re
  * All styling uses tokens exclusively (no raw CSS values).
  */
 
-interface SectionProps extends Omit<StackProps, "py" | "gap"> {
+interface SectionProps extends Omit<StackProps, "py" | "spacing"> {
     /**
      * Vertical padding - token-based
      * Accepts spacing tokens (xs, sm, md, lg, xl, 2xl, etc.) or responsive object
@@ -1566,12 +2557,12 @@ interface SectionProps extends Omit<StackProps, "py" | "gap"> {
      */
     padding?: ResponsiveSpacing;
     /**
-     * Gap spacing for content blocks - token-based
+     * Spacing for content blocks - token-based
      * Accepts spacing tokens (xs, sm, md, lg, xl, 2xl, etc.) or responsive object
-     * @example gap="md"
-     * @example gap={{ base: "sm", lg: "xl" }}
+     * @example spacing="md"
+     * @example spacing={{ base: "sm", lg: "xl" }}
      */
-    gap?: ResponsiveSpacing;
+    spacing?: ResponsiveSpacing;
     /**
      * Render as different HTML element
      */
@@ -1702,31 +2693,51 @@ declare const Dialog: React$1.FC<DialogProps> & {
     Footer: React$1.ForwardRefExoticComponent<DialogFooterProps & React$1.RefAttributes<HTMLDivElement>>;
 };
 
-declare const toastVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "danger" | "info" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ToastActionData {
-    label: string;
-    onClick: () => void;
-}
+/**
+ * Toast variant type
+ * Represents visual intent only (no behavior changes)
+ */
+type ToastVariant = "default" | "success" | "warning" | "error";
+/**
+ * Toast data type for imperative toast creation
+ * Used by useGlobalToast and other toast management hooks
+ */
 interface ToastData {
-    id: string;
+    variant?: ToastVariant;
     title?: string;
     description?: string;
-    variant?: "default" | "success" | "info" | "warning" | "danger";
-    action?: ToastActionData;
-    /**
-     * Toast duration - token-based
-     * Uses motion duration tokens
-     * Passed to Radix Toast.Root duration prop
-     */
     duration?: ResponsiveDelay;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
 }
+/**
+ * Toast options type for toast configuration
+ */
+type ToastOptions = Partial<ToastData>;
+declare const toastVariants: (props?: ({
+    variant?: "default" | "error" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ToastRootProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>, "duration">, VariantProps<typeof toastVariants> {
     /**
-     * Toast data
+     * Controlled open state
+     * Must be provided externally - Toast does not own state
+     */
+    open: boolean;
+    /**
+     * Callback when open state changes
+     * Must be provided externally - Toast does not own state
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Visual variant (visual only, no behavior changes)
      */
-    toast: ToastData;
+    variant?: ToastVariant;
+    /**
+     * Children (use ToastTitle, ToastDescription, ToastAction, ToastClose)
+     */
+    children: React$1.ReactNode;
 }
 /**
  * Toast Action component
@@ -1742,7 +2753,7 @@ declare const ToastAction: React$1.ForwardRefExoticComponent<Omit<ToastPrimitive
  *   Rationale: Previous API used `Toast` as the main component name.
  *   This alias allows existing code to continue working without changes.
  *   Note: This is a simple alias - no legacy behavior is preserved.
- *   The component is fully Radix-based regardless of which name is used.
+ *   The component is fully stateless regardless of which name is used.
  *
  * - ToastProps: Alias for ToastRootProps
  *   Rationale: Previous API used `ToastProps` as the type name.
@@ -1754,7 +2765,21 @@ declare const ToastAction: React$1.ForwardRefExoticComponent<Omit<ToastPrimitive
  * - These legacy exports may be removed in a future major version
  */
 type ToastProps = ToastRootProps;
-declare const Toast: React$1.ForwardRefExoticComponent<ToastRootProps & React$1.RefAttributes<HTMLLIElement>>;
+declare const Toast$1: React$1.ForwardRefExoticComponent<ToastRootProps & React$1.RefAttributes<HTMLLIElement>>;
+
+interface ToastProviderProps extends React$1.ComponentPropsWithoutRef<typeof ToastPrimitives.Provider> {
+    /**
+     * Children to render
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * ToastProvider component
+ * Thin wrapper around Radix Toast.Provider with props passthrough.
+ * Radix handles all state management, auto-dismiss, and queue management.
+ * This component is stateless and does not own any state or business logic.
+ */
+declare function ToastProvider({ children, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * ToastViewport Component
@@ -1765,7 +2790,7 @@ declare const Toast: React$1.ForwardRefExoticComponent<ToastRootProps & React$1.
  * Radix Toast.Viewport handles portal rendering internally.
  * Tenerife UI provides visual styling and positioning through tokens only.
  *
- * This component is locked as a foundation component per TUI_ARCHITECTURE_LOCK.md.
+ * This component is locked as a foundation component per UI_ARCHITECTURE_LOCK.md.
  * DO NOT reimplement portal logic - Radix handles this internally.
  */
 
@@ -1783,99 +2808,69 @@ interface ToastViewportProps extends React$1.ComponentPropsWithoutRef<typeof Toa
  */
 declare const ToastViewport: React$1.ForwardRefExoticComponent<ToastViewportProps & React$1.RefAttributes<HTMLOListElement>>;
 
-interface ToastOptions {
+type ToastType = "success" | "error" | "warning" | "info";
+interface Toast {
+    id: string;
+    type: ToastType;
     title?: string;
     description?: string;
-    variant?: "default" | "success" | "info" | "warning" | "danger";
-    action?: ToastActionData;
     /**
      * Toast duration - token-based
      * Uses motion duration tokens
-     * Passed to Radix Toast.Root duration prop (Radix handles auto-dismiss)
      */
     duration?: ResponsiveDelay;
-}
-interface ToastContextType {
-    toast: (options: ToastOptions) => string;
-    dismiss: (id: string) => void;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface UseToastReturn {
+    toasts: Toast[];
+    toast: (toast: Omit<Toast, "id">) => string;
+    dismiss: (toastId: string) => void;
     dismissAll: () => void;
 }
-interface ToastProviderProps {
-    /**
-     * Children to render
-     */
-    children: React$1.ReactNode;
-    /**
-     * Position of toast viewport
-     */
-    position?: ToastPosition;
-    /**
-     * Swipe direction for toast dismissal
-     * Radix handles swipe gestures internally
-     */
-    swipeDirection?: "up" | "down" | "left" | "right";
-    /**
-     * Default duration for toasts in milliseconds
-     * Radix handles auto-dismiss based on this value
-     *
-     * NOTE: This is a behavioral prop for Radix Toast.Provider API (requires number),
-     * not a visual prop. The eslint rule is disabled for this specific case.
-     */
-    duration?: number;
-}
-/**
- * ToastProvider component
- * Wrapper around Radix Toast.Provider with convenience toast() function.
- * Radix handles all state management, auto-dismiss, and queue management.
- */
-declare function ToastProvider({ children, position, swipeDirection, duration, }: ToastProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Hook to use toast context
- */
-declare function useToast(): ToastContextType;
+declare function useLocalToast(): UseToastReturn;
 
 declare function Toaster(): react_jsx_runtime.JSX.Element;
 
 /**
  * ============================================================================
- * 🔒 FOUNDATION LOCK - ContextMenu Component
+ * ⏳ FOUNDATION · LEGACY · UNLOCKED_FOR_MIGRATION - ContextMenu Component
  * ============================================================================
  *
- * This component is LOCKED as part of the UI Foundation Layer.
- *
- * **ARCHITECTURE LOCK DOCUMENTATION:**
- * See: docs/architecture/TUI_ARCHITECTURE_LOCK.md
- *
- * This component must not be modified except for critical bug fixes.
- * All architectural decisions are final. Museum-grade quality achieved.
- *
- * LOCKED STATUS:
- * - Component: ContextMenu (Radix ContextMenu wrapper)
- * - Category: Menus (Foundation Layer)
- * - Lock Date: 2025-12-12
- * - Status: ✅ LOCKED (FOUNDATION_LOCKED)
- *
- * ALLOWED CHANGES (Minimal, approval required):
- * - Critical bug fixes only (with explicit approval)
- * - Typing improvements (TypeScript only, no runtime changes)
- * - Token wiring improvements (connecting existing tokens, no new tokens)
- * - Stories/tests fixes (test updates only, no component changes)
- * - Documentation updates (comments, docs only)
- * - Code comments explaining intentional design decisions
- *
- * FORBIDDEN CHANGES (Strictly prohibited):
- * - ❌ New foundation components or subcomponents
- * - ❌ Duplicate component implementations
- * - ❌ Custom behavior that Radix ContextMenu should handle
- * - ❌ String/number visual props (must use tokens only)
- * - ❌ Re-implementing focus/keyboard/aria/portal logic
- * - ❌ Breaking API changes
- * - ❌ Behavioral rewrites or custom logic additions
- * - ❌ Token system modifications (additions/removals)
- * - ❌ Style modifications beyond token wiring
- * - ❌ New props that change component behavior
- *
- * **If you believe changes are necessary, review TUI_ARCHITECTURE_LOCK.md first.**
+ * **STATUS:** ⏳ LEGACY UNLOCKED (Pending Canonical Migration)
+ * **UNLOCK DATE:** 2025-12-19
+ * **TASK:** TUNG_FOUNDATION_LEGACY_UNLOCK_01
+ *
+ * **UNLOCK RATIONALE:**
+ * ContextMenu was declared as LOCKED but was implemented using legacy patterns
+ * and never passed the canonical Foundation Step Pipeline (0–13). The current
+ * lock is declarative only and blocks required migration.
+ *
+ * **MIGRATION PATH:**
+ * ContextMenu will undergo canonical Foundation lock process (Steps 0–13) to
+ * ensure full compliance with all Authority Contracts and canonical lifecycle
+ * requirements, similar to Button/Link standards.
+ *
+ * **CONSTRAINTS DURING UNLOCK:**
+ * - ❌ No public API expansion
+ * - ❌ No new variants or sizes
+ * - ❌ No behavior changes outside canonicalization
+ * - ❌ No bypass of Authority Contracts
+ * - ✅ Refactor strictly via Foundation Step Pipeline
+ * - ✅ Canonical CVA, typing, and interaction refactor allowed
+ * - ✅ Authority Contract alignment allowed
+ *
+ * **EXIT CRITERIA:**
+ * - Component completes Steps 0–13
+ * - Foundation lock report exists
+ * - Public Type Surface is locked
+ * - Component re-marked as FOUNDATION · LOCKED
+ *
+ * **REFERENCE:**
+ * - docs/architecture/FOUNDATION_LOCK.md (Legacy Foundation Components section)
+ * - docs/workflows/foundation/COMPONENT_REFACTORING_PIPELINE.md
  *
  * ============================================================================
  *
@@ -2119,6 +3114,303 @@ declare const ContextMenu: {
     SubContent: React$1.ForwardRefExoticComponent<ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
 };
 
+/**
+ * Spinner Component
+ *
+ * Animated loading indicator for visual feedback during async operations.
+ * Provides multiple visual variants (circle/dots/bounce/linear/bars/pulse/wave/orbit/bars-horizontal/ripple), size variants (xs/sm/md/lg/xl/2xl/3xl),
+ * tone variants (primary/muted/subtle), and optional text label with configurable positioning.
+ *
+ * @semantic_role EXTENSION_VISUAL_FEEDBACK
+ *
+ * @semantic_definition
+ * Spinner is a visual feedback component that displays animated loading indicators in various styles.
+ * It provides visual feedback during async operations (data loading, form submission, etc.).
+ * Spinner supports multiple visual variants (circle, dots, bounce, linear, bars, pulse, wave, orbit, bars-horizontal, ripple), full size scale (xs-3xl),
+ * and tone variants for different visual contexts. Optional text label can be displayed alongside spinner
+ * with configurable positioning.
+ *
+ * **What Spinner IS:**
+ * - Visual feedback component for loading states
+ * - Multiple visual style variants (circle, dots, bounce, linear, bars, pulse, wave, orbit, bars-horizontal, ripple)
+ * - Non-interactive display component
+ * - Supports inline, page, data, and overlay loading scenarios
+ *
+ * **What Spinner IS NOT:**
+ * - NOT an interactive component (no hover/active/focus states)
+ * - NOT a progress indicator (use Progress component for progress bars)
+ * - NOT a skeleton loader (use Skeleton component for content placeholders)
+ * - NOT a Foundation component (Extension layer component)
+ *
+ * @example
+ * ```tsx
+ * // Basic spinner (circle variant, default)
+ * <Spinner />
+ *
+ * // Dots variant
+ * <Spinner variant="dots" size="md" tone="muted" />
+ *
+ * // Bounce variant
+ * <Spinner variant="bounce" size="md" />
+ *
+ * // Linear variant
+ * <Spinner variant="linear" size="sm" />
+ *
+ * // Spinner with label
+ * <Spinner label="Loading..." labelPosition="right" />
+ *
+ * // Spinner with accessibility label
+ * <Spinner aria-label="Loading data" />
+ * ```
+ */
+
+/**
+ * Spinner size type
+ * Full GlobalSize scale: xs, sm, md, lg, xl, 2xl, 3xl
+ */
+type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+/**
+ * Spinner tone type
+ * Color tone variants: primary, muted, subtle
+ */
+type SpinnerTone = "primary" | "muted" | "subtle";
+/**
+ * Spinner variant type
+ * Visual style variants: circle, dots, bounce, linear, bars, pulse, wave, orbit, bars-horizontal, ripple
+ */
+type SpinnerVariant = "circle" | "dots" | "bounce" | "linear" | "bars" | "pulse" | "wave" | "orbit" | "bars-horizontal" | "ripple";
+/**
+ * Spinner label position type
+ * Label position relative to spinner: top, right, bottom, left
+ */
+type SpinnerLabelPosition = "top" | "right" | "bottom" | "left";
+/**
+ * Spinner easing type
+ * Animation timing function: linear, ease-in, ease-out, ease-in-out
+ */
+type SpinnerEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
+/**
+ * Spinner component props
+ */
+interface SpinnerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className" | "style"> {
+    /**
+     * Visual style variant (circle/dots/bounce/linear/bars/pulse/wave/orbit/bars-horizontal/ripple)
+     * @default "circle"
+     */
+    variant?: SpinnerVariant;
+    /**
+     * Size of spinner (xs/sm/md/lg/xl/2xl/3xl)
+     * @default "md"
+     */
+    size?: SpinnerSize;
+    /**
+     * Color tone (primary/muted/subtle)
+     * @default "primary"
+     */
+    tone?: SpinnerTone;
+    /**
+     * Animation easing (linear/ease-in/ease-out/ease-in-out)
+     * Controls how animation speed changes over time
+     * @default "linear"
+     */
+    easing?: SpinnerEasing;
+    /**
+     * Optional text label displayed alongside spinner
+     */
+    label?: string;
+    /**
+     * Label position relative to spinner
+     * @default "bottom"
+     */
+    labelPosition?: SpinnerLabelPosition;
+    /**
+     * Accessibility label (required if no visual label)
+     * Provides accessible name for screen readers
+     */
+    "aria-label"?: string;
+}
+/**
+ * Spinner Component
+ *
+ * Animated loading indicator for visual feedback during async operations.
+ * Supports multiple visual variants (circle/dots/bounce/linear/bars/pulse/wave/orbit/bars-horizontal/ripple), full size scale (xs-3xl),
+ * tone variants (primary/muted/subtle), and optional text label.
+ *
+ * @example
+ * ```tsx
+ * // Basic spinner (circle variant, default)
+ * <Spinner />
+ *
+ * // Dots variant with size and tone
+ * <Spinner variant="dots" size="lg" tone="muted" />
+ *
+ * // Dots variant
+ * <Spinner variant="dots" size="md" />
+ *
+ * // Spinner with label on the right
+ * <Spinner label="Loading..." labelPosition="right" />
+ *
+ * // Spinner with accessibility label
+ * <Spinner aria-label="Loading data" />
+ * ```
+ */
+declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Accordion Component
+ *
+ * Vertically stacked set of interactive headings that reveal/hide associated content panels.
+ * Provides accessible disclosure pattern with keyboard navigation and ARIA support.
+ *
+ * @semantic_role EXTENSION_COMPOSITE_DISCLOSURE
+ *
+ * @semantic_definition
+ * Accordion is a composite disclosure component that allows users to toggle the visibility
+ * of content sections. It supports single (only one item open) and multiple (multiple items
+ * can be open) modes, semantic variants (primary/secondary/accent/neutral), and size variants
+ * (sm/md/lg). All behavior (keyboard navigation, focus management, ARIA attributes) is delegated
+ * to Radix Accordion primitives.
+ *
+ * **What Accordion IS:**
+ * - Disclosure component for collapsible content sections
+ * - Supports single and multiple open modes
+ * - Provides keyboard navigation (Arrow Up/Down, Enter/Space)
+ * - Accessible via ARIA attributes (role="region", aria-expanded, aria-labelledby)
+ *
+ * **What Accordion IS NOT:**
+ * - NOT a Foundation component (Extension layer component)
+ * - NOT a navigation component (use Tabs for navigation)
+ * - NOT a menu component (use ContextMenu or DropdownMenu for menus)
+ *
+ * @example
+ * ```tsx
+ * // Single mode (default)
+ * <Accordion.Root type="single" collapsible>
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger variant="primary" size="md">
+ *       Section 1
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       Content for section 1
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ *
+ * // Multiple mode
+ * <Accordion.Root type="multiple" defaultValue={["item-1", "item-2"]}>
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger variant="secondary" size="lg">
+ *       Section 1
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       Content for section 1
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ * ```
+ */
+
+/**
+ * Accordion variant type
+ * Semantic variants: primary, secondary, accent, neutral
+ */
+type AccordionVariant = "primary" | "secondary" | "accent" | "neutral";
+/**
+ * Accordion size type
+ * Standard interactive component sizes: sm, md, lg
+ */
+type AccordionSize = "sm" | "md" | "lg";
+type AccordionRootProps = React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Accordion>;
+interface AccordionItemProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
+    /**
+     * Unique value identifier for this item
+     */
+    value: string;
+}
+interface AccordionTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, "size" | "variant"> {
+    /**
+     * Semantic variant (primary/secondary/accent/neutral)
+     * @default "primary"
+     */
+    variant?: AccordionVariant;
+    /**
+     * Size (sm/md/lg)
+     * @default "md"
+     */
+    size?: AccordionSize;
+}
+interface AccordionContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>, "size" | "variant"> {
+    /**
+     * Size (sm/md/lg) - for padding and typography
+     * @default "md"
+     */
+    size?: AccordionSize;
+    /**
+     * Semantic variant (primary/secondary/accent/neutral) - for background and text colors
+     * @default "primary"
+     */
+    variant?: AccordionVariant;
+}
+declare const Accordion: {
+    Root: React$1.FC<AccordionRootProps>;
+    Item: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
+    Trigger: React$1.ForwardRefExoticComponent<AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Content: React$1.ForwardRefExoticComponent<AccordionContentProps & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Combobox size type - Explicit union (TYPING_STANDARD compliant)
+ * Interactive Size Scale: sm | md | lg
+ */
+type ComboboxSize = "sm" | "md" | "lg";
+/**
+ * Option type
+ */
+interface ComboboxOption {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+}
+interface ComboboxRootProps {
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    size?: ComboboxSize;
+    children: React$1.ReactNode;
+}
+/**
+ * ComboboxRoot - Context provider for Combobox state
+ */
+declare function ComboboxRoot({ value: controlledValue, defaultValue, onValueChange, multiple, open: controlledOpen, onOpenChange, size, children, }: ComboboxRootProps): react_jsx_runtime.JSX.Element;
+interface ComboboxInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
+    placeholder?: string;
+    disabled?: boolean;
+    "aria-invalid"?: boolean;
+    "aria-label"?: string;
+}
+/**
+ * ComboboxInput - Input field for typing/filtering
+ */
+declare const ComboboxInput: React$1.ForwardRefExoticComponent<ComboboxInputProps & React$1.RefAttributes<HTMLInputElement>>;
+interface ComboboxListProps {
+    options: ComboboxOption[];
+    filterable?: boolean;
+    onSearch?: (query: string) => void;
+    loading?: boolean;
+    emptyMessage?: string;
+}
+/**
+ * ComboboxList - Dropdown list of options
+ */
+declare function ComboboxList({ options, filterable, onSearch, loading, emptyMessage, }: ComboboxListProps): react_jsx_runtime.JSX.Element;
+declare const Combobox: typeof ComboboxRoot & {
+    Input: React$1.ForwardRefExoticComponent<ComboboxInputProps & React$1.RefAttributes<HTMLInputElement>>;
+    List: typeof ComboboxList;
+};
+
 /**
  * NotificationCenter.DismissAll Component
  *
@@ -2187,7 +3479,7 @@ interface NotificationData {
     description?: string;
     variant?: NotificationVariant;
     channel?: NotificationChannel;
-    action?: ToastActionData;
+    action?: ToastData["action"];
     /**
      * Notification duration - token-based
      * Uses motion duration tokens
@@ -2205,7 +3497,7 @@ interface NotificationOptions {
     description?: string;
     variant?: NotificationVariant;
     channel?: NotificationChannel;
-    action?: ToastActionData;
+    action?: ToastData["action"];
     /**
      * Notification duration - token-based
      * Uses motion duration tokens
@@ -2280,10 +3572,6 @@ interface NotificationCenterItemProps extends Omit<React$1.HTMLAttributes<HTMLLI
      * Callback when notification is clicked
      */
     onClick?: (id: string) => void;
-    /**
-     * Show expandable details
-     */
-    expandable?: boolean;
 }
 /**
  * NotificationCenter.Item component - individual notification item
@@ -2352,7 +3640,7 @@ interface NotificationCenterPanelProps {
     /**
      * Element to return focus to when panel closes
      */
-    returnFocusRef?: React$1.RefObject<HTMLElement>;
+    returnFocusRef?: React$1.RefObject<HTMLElement | null>;
 }
 /**
  * NotificationCenter.Panel component - side drawer notification panel
@@ -2442,10 +3730,24 @@ declare const NotificationCenter: {
     DismissAll: React$1.ForwardRefExoticComponent<NotificationCenterDismissAllProps & React$1.RefAttributes<HTMLButtonElement>>;
 };
 
-declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "sideOffset" | "alignOffset"> & VariantProps<(props?: ({
-    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+/**
+ * Popover variant type - Explicit union (not derived from CVA)
+ */
+type PopoverVariant = "primary" | "secondary" | "accent" | "outline" | "ghost" | "link" | "destructive";
+/**
+ * Popover size type - Explicit union (not derived from CVA)
+ * Restricted to sm, md, lg per overlay size restriction rule (VARIANTS_SIZE_CANON.md)
+ */
+type PopoverSize = "sm" | "md" | "lg";
+/**
+ * PopoverContent - Styled popover content component
+ *
+ * Use this component directly when composing custom popover implementations.
+ * For simpler use cases, prefer PopoverWrapper.
+ */
+declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "sideOffset" | "alignOffset"> & {
+    variant?: PopoverVariant;
+    size?: PopoverSize;
     sideOffset?: ResponsiveSideOffset;
     alignOffset?: ResponsiveAlignOffset;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -2458,7 +3760,15 @@ declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<Omit<Popove
  */
 
 interface HoverCardContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof PopoverContent>, "onMouseEnter" | "onMouseLeave"> {
+    /**
+     * Mouse enter handler
+     * Called when mouse enters the content area (keeps hover card open)
+     */
     onMouseEnter?: React$1.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Mouse leave handler
+     * Called when mouse leaves the content area (closes hover card)
+     */
     onMouseLeave?: React$1.MouseEventHandler<HTMLDivElement>;
 }
 /**
@@ -2489,10 +3799,12 @@ interface HoverCardRootProps {
     onOpenChange?: (open: boolean) => void;
     /**
      * Default open state (uncontrolled mode)
+     * @default false
      */
     defaultOpen?: boolean;
     /**
      * Whether the hover card is modal (blocks interaction with other elements)
+     * @default false
      */
     modal?: boolean;
     /**
@@ -2517,6 +3829,8 @@ declare namespace HoverCardRoot {
 interface HoverCardTriggerProps extends React$1.HTMLAttributes<HTMLElement> {
     /**
      * Render as child element (composition pattern)
+     * When true, the component will merge its props with its child element
+     * @default false
      */
     asChild?: boolean;
 }
@@ -2526,35 +3840,57 @@ interface HoverCardTriggerProps extends React$1.HTMLAttributes<HTMLElement> {
 declare const HoverCardTrigger: React$1.ForwardRefExoticComponent<HoverCardTriggerProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
- * DataList Root Component
+ * ============================================================================
+ * 🔒 FOUNDATION · LOCKED - Tabs Component
+ * ============================================================================
  *
- * Mobile-first data list component for displaying key-value pairs.
- * Uses Stack for vertical layout and DATA_LIST_TOKENS for spacing.
- */
-
-interface DataListRootProps extends React$1.HTMLAttributes<HTMLDListElement> {
-    /**
-     * Label width for desktop layout
-     * @default "md"
-     */
-    labelWidth?: "sm" | "md" | "lg";
-}
-/**
- * DataList Root component
+ * **STATUS:** ✅ LOCKED (Pipeline 18A Complete, 2025-12-25)
+ * **LOCK DATE:** 2025-12-25
+ * **PIPELINE:** Pipeline 18A (Steps 0-12 complete)
+ *
+ * **LOCK RATIONALE:**
+ * Tabs has completed canonical Foundation Step Pipeline (Steps 0-12) and
+ * demonstrates full compliance with all Authority Contracts and canonical
+ * lifecycle requirements.
+ *
+ * **REFERENCE:**
+ * - docs/architecture/FOUNDATION_LOCK.md
+ * - docs/workflows/foundation/COMPONENT_REFACTORING_PIPELINE.md
+ * - docs/reports/audit/TABS_BASELINE_REPORT.md
+ *
+ * ============================================================================
+ *
+ * ARCHITECTURAL INVARIANTS (MANDATORY)
+ * ============================================================================
+ *
+ * **RADIX OWNERSHIP INVARIANT:**
+ * - All runtime behavior (keyboard navigation, focus management, ARIA attributes,
+ *   state management, disabled state handling) MUST be delegated to Radix primitives.
+ * - Tabs component MUST NOT implement custom state management or interaction logic.
+ * - Tabs component MUST NOT override or extend Radix behavior beyond visual styling.
+ * - Violation: Adding useState, useEffect, useRef, or custom event handlers for behavior.
+ *
+ * **STYLING/TOKEN OWNERSHIP INVARIANT:**
+ * - All visual styling MUST use TABS_TOKENS as the single source of truth.
+ * - All spacing, typography, colors, radius, shadows MUST reference tokens, never raw values.
+ * - Tabs component owns visual styling at COMPOSITION level, Foundation tokens own token definitions.
+ * - Violation: Using raw CSS values, inline styles, or non-token Tailwind classes for styling.
+ *
+ * **VARIANT SYSTEM INVARIANT:**
+ * - Variant system (underline, pill, segmented) is FINITE and EXPLICIT.
+ * - Size system (sm, md, lg) is FINITE and EXPLICIT.
+ * - Tone system (neutral, primary) is FINITE and EXPLICIT.
+ * - Adding new variants, sizes, or tones REQUIRES Foundation Step Pipeline approval.
+ * - Violation: Adding new variant/size/tone values without pipeline approval.
+ *
+ * **PUBLIC API INVARIANT:**
+ * - Public API surface MUST remain minimal and expressive.
+ * - Custom props (size, variant, tone, icon props) MUST be token-based unions.
+ * - Radix props MUST be passed through without modification.
+ * - Violation: Adding non-token props, changing prop types, or modifying Radix prop behavior.
+ *
+ * ============================================================================
  *
- * @example
- * ```tsx
- * <DataList.Root>
- *   <DataList.Item>
- *     <DataList.Label>Name</DataList.Label>
- *     <DataList.Value>John Doe</DataList.Value>
- *   </DataList.Item>
- * </DataList.Root>
- * ```
- */
-declare const DataListRoot: React$1.ForwardRefExoticComponent<DataListRootProps & React$1.RefAttributes<HTMLDListElement>>;
-
-/**
  * Tabs Component
  *
  * Radix-based tabs component with token-driven styling.
@@ -2576,15 +3912,15 @@ interface TabsListProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Tab
 }
 interface TabsTriggerProps extends Omit<React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, "size" | "variant" | "tone"> {
     /**
-     * Size variant - token-based (inherited from context if not provided)
+     * Size variant - token-based (defaults to "md" if not provided)
      */
     size?: ResponsiveTabsSize;
     /**
-     * Visual variant - token-based (inherited from context if not provided)
+     * Visual variant - token-based (defaults to "underline" if not provided)
      */
     variant?: TabsVariantToken;
     /**
-     * Tone - token-based (inherited from context if not provided)
+     * Tone - token-based (defaults to "primary" if not provided)
      */
     tone?: TabsToneToken;
     /**
@@ -2613,6 +3949,25 @@ declare const Tabs: {
     Content: React$1.ForwardRefExoticComponent<TabsContentProps & React$1.RefAttributes<HTMLDivElement>>;
 };
 
+/**
+ * Size options for SegmentedControl
+ * @public
+ */
+type SegmentedControlSize = "sm" | "md" | "lg";
+/**
+ * Orientation options for SegmentedControl
+ * @public
+ */
+type SegmentedControlOrientation = "horizontal" | "vertical";
+/**
+ * Size Mapping Table (per SIZE_MAPPING_SPEC.md)
+ *
+ * | Size | heightToken | paddingXToken | paddingYToken | textToken | radiusToken |
+ * |------|-------------|---------------|---------------|-----------|-------------|
+ * | sm   | NAVIGATION_TOKENS.sizes.sm.height | NAVIGATION_TOKENS.sizes.sm.padding.horizontal | NAVIGATION_TOKENS.sizes.sm.padding.vertical | NAVIGATION_TOKENS.sizes.sm.fontSize | NAVIGATION_TOKENS.radius.default |
+ * | md   | NAVIGATION_TOKENS.sizes.md.height | NAVIGATION_TOKENS.sizes.md.padding.horizontal | NAVIGATION_TOKENS.sizes.md.padding.vertical | NAVIGATION_TOKENS.sizes.md.fontSize | NAVIGATION_TOKENS.radius.default |
+ * | lg   | NAVIGATION_TOKENS.sizes.lg.height | NAVIGATION_TOKENS.sizes.lg.padding.horizontal | NAVIGATION_TOKENS.sizes.lg.padding.vertical | NAVIGATION_TOKENS.sizes.lg.fontSize | NAVIGATION_TOKENS.radius.default |
+ */
 declare const segmentedControlRootVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -2621,7 +3976,7 @@ declare const segmentedControlItemVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     state?: "default" | "selected" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SegmentedControlRootProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "role">, VariantProps<typeof segmentedControlRootVariants> {
+interface SegmentedControlRootProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "role"> {
     /**
      * Controlled value
      */
@@ -2638,8 +3993,18 @@ interface SegmentedControlRootProps extends Omit<React$1.HTMLAttributes<HTMLDivE
      * Name for the radio group
      */
     name?: string;
+    /**
+     * Orientation of the segmented control
+     * @default "horizontal"
+     */
+    orientation?: SegmentedControlOrientation;
+    /**
+     * Size of the segmented control
+     * @default "md"
+     */
+    size?: SegmentedControlSize;
 }
-interface SegmentedControlItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "role">, VariantProps<typeof segmentedControlItemVariants> {
+interface SegmentedControlItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "role"> {
     /**
      * Value of this item
      */
@@ -2648,6 +4013,10 @@ interface SegmentedControlItemProps extends Omit<React$1.ButtonHTMLAttributes<HT
      * Whether this item is disabled
      */
     disabled?: boolean;
+    /**
+     * Size of this item (overrides Root size if provided)
+     */
+    size?: SegmentedControlSize;
 }
 declare const SegmentedControl: React$1.ForwardRefExoticComponent<SegmentedControlRootProps & React$1.RefAttributes<HTMLDivElement>> & {
     Root: React$1.ForwardRefExoticComponent<SegmentedControlRootProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -2685,10 +4054,6 @@ interface BreadcrumbsRootProps extends React$1.HTMLAttributes<HTMLElement> {
     ariaLabel?: string;
 }
 interface BreadcrumbsItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
-    /**
-     * Whether this is the last item (current page)
-     */
-    isLast?: boolean;
     /**
      * Whether this item is disabled
      */
@@ -2868,31 +4233,387 @@ interface StepperLabelProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Whether this is the active step
      */
-    isActive: boolean;
-}
-interface StepperContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    isActive: boolean;
+}
+interface StepperContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Step index this content belongs to
+     */
+    stepIndex: number;
+    /**
+     * Whether this content should be visible
+     */
+    isActive: boolean;
+}
+/**
+ * Stepper.Item - Individual step container
+ */
+interface StepperItemPropsInternal extends StepperItemProps {
+    orientation?: "horizontal" | "vertical";
+}
+declare const Stepper: React$1.ForwardRefExoticComponent<StepperRootProps & React$1.RefAttributes<HTMLDivElement>> & {
+    Root: React$1.ForwardRefExoticComponent<StepperRootProps & React$1.RefAttributes<HTMLDivElement>>;
+    Item: React$1.ForwardRefExoticComponent<StepperItemPropsInternal & React$1.RefAttributes<HTMLDivElement>>;
+    Indicator: React$1.ForwardRefExoticComponent<StepperIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
+    Label: React$1.ForwardRefExoticComponent<StepperLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+    Content: React$1.ForwardRefExoticComponent<StepperContentProps & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+interface NavSeparatorProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Separator content
+     * @default '/'
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Render as child element (composition pattern via Radix Slot)
+     * When true, renders children through Slot component instead of <span>
+     */
+    asChild?: boolean;
+}
+/**
+ * NavSeparator component
+ *
+ * Renders a visual separator between navigation items.
+ * This is a purely decorative element with `aria-hidden="true"`.
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (NAVIGATION_TOKENS)
+ * - ✅ Purely visual component (no logic, no state)
+ * - ✅ Follows Extension Authority Contract
+ * - ✅ Uses descriptive, intent-based naming
+ * - ✅ Does NOT duplicate Foundation functionality
+ * - ✅ aria-hidden="true" always set
+ */
+declare const NavSeparator: React$1.ForwardRefExoticComponent<NavSeparatorProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+interface NavTextProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Child content (text content for navigation)
+     */
+    children: React$1.ReactNode;
+    /**
+     * ARIA current attribute for indicating current page/location
+     * NavText MAY accept aria-current='page' for accessibility
+     * NavText does NOT determine this state; it only passes through externally provided value
+     */
+    "aria-current"?: "page";
+    /**
+     * Render as child element (composition pattern via Radix Slot)
+     * When true, renders children through Slot component instead of <span>
+     */
+    asChild?: boolean;
+}
+/**
+ * NavText component
+ *
+ * Non-interactive navigation text primitive that renders semantic text
+ * for navigation structures. This component is fully stateless and does
+ * not perform routing, route matching, or state detection.
+ *
+ * COMPLIANCE NOTES:
+ * - ✅ Uses token system exclusively (NAVIGATION_TOKENS)
+ * - ✅ Purely semantic component (no logic, no state, no routing)
+ * - ✅ Follows Extension Authority Contract
+ * - ✅ Uses descriptive, intent-based naming
+ * - ✅ Does NOT duplicate Foundation functionality
+ * - ✅ Non-interactive (not focusable, no role overrides)
+ * - ✅ Supports asChild pattern for composition
+ */
+declare const NavText: React$1.ForwardRefExoticComponent<NavTextProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+interface NavItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
+    /**
+     * Render as child element (composition pattern via Radix Slot)
+     * When true, renders children through Slot component instead of <li>
+     */
+    asChild?: boolean;
+    /**
+     * Child elements
+     */
+    children: React$1.ReactNode;
+}
+
+/**
+ * NavItem - Structural navigation item wrapper
+ *
+ * Renders a list item (`<li>`) for use inside NavList.
+ * This is a pure structural wrapper with no styling or logic.
+ *
+ * **What NavItem IS:**
+ * - Structural navigation list item
+ * - List item wrapper for navigation primitives
+ * - Pure composition container
+ *
+ * **What NavItem IS NOT:**
+ * - Link
+ * - Text renderer
+ * - Separator
+ * - Layout component
+ * - Stateful component
+ * - Logic container
+ *
+ * @example
+ * <NavList>
+ *   <NavItem>Home</NavItem>
+ *   <NavItem>About</NavItem>
+ * </NavList>
+ *
+ * @example
+ * <NavList>
+ *   <NavItem asChild>
+ *     <div>Custom item</div>
+ *   </NavItem>
+ * </NavList>
+ */
+declare const NavItem: React$1.ForwardRefExoticComponent<NavItemProps & React$1.RefAttributes<HTMLLIElement>>;
+
+/**
+ * NavRoot Component Props
+ *
+ * Pure semantic navigation boundary component.
+ * Renders a <nav> element with required aria-label for accessibility.
+ */
+interface NavRootProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * ARIA label for the navigation element (required for accessibility)
+     */
+    "aria-label": string;
+    /**
+     * Render as child element (composition pattern via Radix Slot)
+     * When true, renders children through Slot component instead of <nav>
+     */
+    asChild?: boolean;
+    /**
+     * Child content (navigation primitives like NavLink, navigation lists, etc.)
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * NavRoot Component
+ *
+ * Pure semantic navigation boundary component with zero logic.
+ * Provides a semantic <nav> wrapper that enforces accessibility (required aria-label)
+ * while remaining a pure composition wrapper with no assumptions about navigation
+ * structure or styling.
+ *
+ * **What NavRoot IS:**
+ * - Semantic navigation root
+ * - Accessibility boundary (enforces aria-label)
+ * - Composition wrapper for navigation primitives
+ *
+ * **What NavRoot IS NOT:**
+ * - Layout component
+ * - List renderer
+ * - Navigation pattern
+ * - Stateful component
+ * - Logic container
+ *
+ * @example
+ * ```tsx
+ * <NavRoot aria-label="Main navigation">
+ *   <NavLink href="/">Home</NavLink>
+ *   <NavLink href="/about">About</NavLink>
+ * </NavRoot>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <NavRoot aria-label="Footer navigation" asChild>
+ *   <footer>
+ *     <NavLink href="/">Home</NavLink>
+ *   </footer>
+ * </NavRoot>
+ * ```
+ */
+declare const NavRoot: React$1.ForwardRefExoticComponent<NavRootProps & React$1.RefAttributes<HTMLElement>>;
+
+interface NavListProps extends Omit<React$1.OlHTMLAttributes<HTMLOListElement>, "className" | "style"> {
+    /**
+     * HTML element to render
+     * @default 'ol'
+     */
+    as?: "ol" | "ul";
+    /**
+     * Render as child component (Radix pattern)
+     * When true, renders children through Slot component instead of list element
+     */
+    asChild?: boolean;
+    /**
+     * List items (NavItem components)
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * NavList - Structural list container for navigation
+ *
+ * Renders an ordered (`<ol>`) or unordered (`<ul>`) list.
+ * Default element is `<ol>` for semantic navigation lists.
+ *
+ * This component is a pure structural wrapper with no styling, layout, or logic.
+ * All visual styling should be applied through child components or external wrappers.
+ */
+declare const NavList: React$1.ForwardRefExoticComponent<NavListProps & React$1.RefAttributes<HTMLOListElement | HTMLUListElement>>;
+
+/**
+ * Icon Props Interface
+ *
+ * Shared props interface for all icon components.
+ * Ensures consistent API across all icons in the registry.
+ */
+
+/**
+ * Base props for all icon components
+ */
+interface IconProps$1 extends React$1.SVGProps<SVGSVGElement> {
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Hide icon from screen readers
+     * @default true
+     */
+    "aria-hidden"?: boolean;
+    /**
+     * Accessible label for the icon
+     */
+    "aria-label"?: string;
+}
+
+/**
+ * Arrow right icon component
+ */
+declare const IconArrowRight: React$1.FC<IconProps$1>;
+
+/**
+ * Calendar icon component
+ */
+declare const IconCalendar: React$1.FC<IconProps$1>;
+
+/**
+ * Check icon component (checkmark)
+ */
+declare const IconCheck: React$1.FC<IconProps$1>;
+
+/**
+ * Chevron down icon component
+ */
+declare const IconChevronDown: React$1.FC<IconProps$1>;
+
+/**
+ * Chevron right icon component
+ */
+declare const IconChevronRight: React$1.FC<IconProps$1>;
+
+/**
+ * Close icon component (X)
+ */
+declare const IconClose: React$1.FC<IconProps$1>;
+
+/**
+ * Error icon component (X in circle - used as fallback)
+ */
+declare const IconError: React$1.FC<IconProps$1>;
+
+/**
+ * Info icon component (information circle)
+ */
+declare const IconInfo: React$1.FC<IconProps$1>;
+
+/**
+ * Location icon component
+ */
+declare const IconLocation: React$1.FC<IconProps$1>;
+
+/**
+ * Menu icon component (hamburger menu)
+ */
+declare const IconMenu: React$1.FC<IconProps$1>;
+
+/**
+ * Search icon component
+ */
+declare const IconSearch: React$1.FC<IconProps$1>;
+
+/**
+ * Success icon component (checkmark in circle)
+ */
+declare const IconSuccess: React$1.FC<IconProps$1>;
+
+/**
+ * Warning icon component (warning triangle)
+ */
+declare const IconWarning: React$1.FC<IconProps$1>;
+
+/**
+ * Icon Registry
+ *
+ * Central registry for all icon components.
+ * Supports tree-shaking through individual named exports.
+ */
+
+/**
+ * Icons map for registry lookup
+ * Used by Icon component to resolve icon by name
+ */
+declare const ICONS_MAP: Record<string, React$1.FC<IconProps$1>>;
+/**
+ * Icon name type - union of all available icon names
+ */
+type IconName = keyof typeof ICONS_MAP;
+
+/**
+ * Icon size type
+ * Icon uses a visual size scale (sm, md, lg, xl) distinct from interactive components.
+ * Per Foundation rule: "Semi-interactive components (Icon, Badge, Avatar) MUST NOT use size as interactive scale"
+ */
+type IconSizeSubset = "sm" | "md" | "lg" | "xl";
+declare const iconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    color?: "muted" | "default" | "info" | "success" | "warning" | "danger" | null | undefined;
+    stroke?: "normal" | "bold" | "thin" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconProps extends Omit<React$1.SVGProps<SVGSVGElement>, "color" | "stroke"> {
+    /**
+     * Icon name from registry
+     */
+    name: IconName;
+    /**
+     * Icon size
+     * Icon uses a visual size scale (sm, md, lg, xl) distinct from interactive components.
+     */
+    size?: IconSizeSubset;
+    /**
+     * Icon color variant
+     */
+    color?: IconColor;
     /**
-     * Step index this content belongs to
+     * Stroke width variant
      */
-    stepIndex: number;
+    stroke?: IconStroke;
     /**
-     * Whether this content should be visible
+     * Render as child element (composition pattern)
+     * Uses Radix UI Slot for composition
      */
-    isActive: boolean;
+    asChild?: boolean;
 }
 /**
- * Stepper.Item - Individual step container
+ * Icon component
+ *
+ * Unified icon component with token-driven sizing, colors, and stroke.
+ * Supports SSR-safe rendering and tree-shakeable icon registry.
+ *
+ * Icon is a semi-interactive primitive that provides pure visual representation
+ * without interactive behavior. All interactivity (clicks, keyboard navigation)
+ * is delegated to parent components.
+ *
+ * @example
+ * ```tsx
+ * <Icon name="search" size="md" color="default" />
+ * ```
  */
-interface StepperItemPropsInternal extends StepperItemProps {
-    orientation?: "horizontal" | "vertical";
-}
-declare const Stepper: React$1.ForwardRefExoticComponent<StepperRootProps & React$1.RefAttributes<HTMLDivElement>> & {
-    Root: React$1.ForwardRefExoticComponent<StepperRootProps & React$1.RefAttributes<HTMLDivElement>>;
-    Item: React$1.ForwardRefExoticComponent<StepperItemPropsInternal & React$1.RefAttributes<HTMLDivElement>>;
-    Indicator: React$1.ForwardRefExoticComponent<StepperIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
-    Label: React$1.ForwardRefExoticComponent<StepperLabelProps & React$1.RefAttributes<HTMLDivElement>>;
-    Content: React$1.ForwardRefExoticComponent<StepperContentProps & React$1.RefAttributes<HTMLDivElement>>;
-};
+declare const Icon: React$1.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
 
 /**
  * DataList Component Types
@@ -2900,6 +4621,16 @@ declare const Stepper: React$1.ForwardRefExoticComponent<StepperRootProps & Reac
  * TypeScript interfaces and types for DataList component.
  */
 
+/**
+ * DataList Root component props
+ */
+interface DataListRootProps extends React.HTMLAttributes<HTMLDListElement> {
+    /**
+     * Label width for desktop layout
+     * @default "md"
+     */
+    labelWidth?: "sm" | "md" | "lg";
+}
 /**
  * DataList Item component props
  */
@@ -2914,6 +4645,28 @@ interface DataListItemProps$1 extends React.HTMLAttributes<HTMLDivElement> {
     padding?: ResponsiveSpacing;
 }
 
+/**
+ * DataList Root Component
+ *
+ * Mobile-first data list component for displaying key-value pairs.
+ * Uses Stack for vertical layout and DATA_LIST_TOKENS for spacing.
+ */
+
+/**
+ * DataList Root component
+ *
+ * @example
+ * ```tsx
+ * <DataList.Root labelWidth="lg">
+ *   <DataList.Item>
+ *     <DataList.Label>Name</DataList.Label>
+ *     <DataList.Value>John Doe</DataList.Value>
+ *   </DataList.Item>
+ * </DataList.Root>
+ * ```
+ */
+declare const DataListRoot: React$1.ForwardRefExoticComponent<DataListRootProps & React$1.RefAttributes<HTMLDListElement>>;
+
 /**
  * DataList Item Component
  *
@@ -2944,7 +4697,7 @@ interface DataListLabelProps extends React$1.HTMLAttributes<HTMLElement> {
 /**
  * DataList Label component
  * Mobile: full width
- * Desktop: fixed width (from tokens)
+ * Desktop: fixed width (from tokens, controlled by Root labelWidth prop)
  */
 declare const DataListLabel: React$1.ForwardRefExoticComponent<DataListLabelProps & React$1.RefAttributes<HTMLElement>>;
 
@@ -3046,7 +4799,7 @@ interface EmptyStateIconProps extends React$1.HTMLAttributes<HTMLDivElement> {
      * Icon size
      * @default "md"
      */
-    size?: "sm" | "md" | "lg";
+    size?: EmptyStateIconSize;
 }
 /**
  * EmptyState Icon component
@@ -3076,42 +4829,6 @@ declare const EmptyStateTitle: React$1.ForwardRefExoticComponent<EmptyStateTitle
  * TypeScript interfaces and types for Table component.
  */
 
-/**
- * Table column definition
- */
-interface TableColumn$1<T = Record<string, unknown>> {
-    /**
-     * Column key (must match a key in the data object)
-     */
-    key: keyof T;
-    /**
-     * Column header title
-     */
-    title: string;
-    /**
-     * Custom render function for cell content
-     */
-    render?: (value: T[keyof T], item: T, index: number) => ReactNode;
-    /**
-     * Column alignment
-     * @default "left"
-     */
-    align?: "left" | "center" | "right";
-    /**
-     * Column width (CSS value or Tailwind class)
-     */
-    width?: string;
-    /**
-     * Whether column is sortable
-     * @default false
-     */
-    sortable?: boolean;
-    /**
-     * Cell size
-     * @default "md"
-     */
-    size?: "sm" | "md" | "lg";
-}
 /**
  * Sort direction
  */
@@ -3153,60 +4870,16 @@ interface TableContextValue {
      * Whether table has expandable rows
      */
     expandable?: boolean;
-    /**
-     * Render function for expandable content
-     */
-    renderExpandableContent?: (item: unknown, index: number) => ReactNode;
 }
 /**
  * Table Root component props
  */
-interface TableRootProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLTableElement> {
-    /**
-     * Table data array
-     */
-    data: T[];
-    /**
-     * Column definitions
-     */
-    columns: TableColumn$1<T>[];
-    /**
-     * Key to use for row identification
-     */
-    rowKey: keyof T | ((item: T, index: number) => string | number);
-    /**
-     * Whether table supports sorting
-     * @default false
-     */
-    sortable?: boolean;
+interface TableRootProps extends React.HTMLAttributes<HTMLTableElement> {
     /**
      * Whether table supports expandable rows
      * @default false
      */
     expandable?: boolean;
-    /**
-     * Render function for expandable content
-     */
-    renderExpandableContent?: (item: T, index: number) => ReactNode;
-    /**
-     * Whether table is in loading state
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Empty state message (shown when data is empty)
-     */
-    emptyMessage?: string;
-    /**
-     * Whether header is sticky
-     * @default false
-     */
-    stickyHeader?: boolean;
-    /**
-     * Row size
-     * @default "md"
-     */
-    rowSize?: "sm" | "md" | "lg";
 }
 /**
  * Table Header component props
@@ -3261,10 +4934,6 @@ interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
      * @default false
      */
     expandable?: boolean;
-    /**
-     * Row key (for expansion tracking)
-     */
-    rowKey?: string | number;
     /**
      * Whether row is expanded
      * @default false
@@ -3346,28 +5015,25 @@ declare function useTableContext(): TableContextValue;
  *
  * @example
  * ```tsx
- * <Table.Root
- *   data={users}
- *   columns={columns}
- *   rowKey="id"
- *   sortable
- * >
+ * <Table expandable>
  *   <Table.Header>
  *     <Table.Row>
- *       <Table.Head>Name</Table.Head>
+ *       <Table.Head sortable columnKey="name">Name</Table.Head>
+ *       <Table.Head>Email</Table.Head>
  *     </Table.Row>
  *   </Table.Header>
  *   <Table.Body>
  *     {users.map((user) => (
- *       <Table.Row key={user.id}>
+ *       <Table.Row key={user.id} expandable expanded={expanded.has(user.id)}>
  *         <Table.Cell>{user.name}</Table.Cell>
+ *         <Table.Cell>{user.email}</Table.Cell>
  *       </Table.Row>
  *     ))}
  *   </Table.Body>
- * </Table.Root>
+ * </Table>
  * ```
  */
-declare function TableRoot<T extends Record<string, unknown>>({ data: _data, columns: _columns, rowKey: _rowKey, sortable: _sortable, expandable, renderExpandableContent, loading: _loading, emptyMessage: _emptyMessage, stickyHeader: _stickyHeader, rowSize: _rowSize, className, children, ...props }: TableRootProps<T>): react_jsx_runtime.JSX.Element;
+declare function TableRoot({ expandable, className, children, ...props }: TableRootProps): react_jsx_runtime.JSX.Element;
 declare namespace TableRoot {
     var displayName: string;
 }
@@ -3470,147 +5136,27 @@ declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$
  */
 declare const TableSortIcon: React$1.ForwardRefExoticComponent<TableSortIconProps & React$1.RefAttributes<HTMLSpanElement>>;
 
-interface TableColumn<T> {
-    key: keyof T;
-    title: string;
-    render?: (value: T[keyof T], item: T) => React__default.ReactNode;
-}
-
 /**
- * Icon Props Interface
+ * Table column configuration
  *
- * Shared props interface for all icon components.
- * Ensures consistent API across all icons in the registry.
- */
-
-/**
- * Base props for all icon components
+ * @template T - The type of data items in the table
  */
-interface IconProps$1 extends React$1.SVGProps<SVGSVGElement> {
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    /**
-     * Hide icon from screen readers
-     * @default true
-     */
-    "aria-hidden"?: boolean;
+interface TableColumn<T> {
     /**
-     * Accessible label for the icon
+     * Key of the data item property to display in this column
      */
-    "aria-label"?: string;
-}
-
-/**
- * Arrow right icon component
- */
-declare const IconArrowRight: React$1.FC<IconProps$1>;
-
-/**
- * Calendar icon component
- */
-declare const IconCalendar: React$1.FC<IconProps$1>;
-
-/**
- * Check icon component (checkmark)
- */
-declare const IconCheck: React$1.FC<IconProps$1>;
-
-/**
- * Chevron down icon component
- */
-declare const IconChevronDown: React$1.FC<IconProps$1>;
-
-/**
- * Chevron right icon component
- */
-declare const IconChevronRight: React$1.FC<IconProps$1>;
-
-/**
- * Close icon component (X)
- */
-declare const IconClose: React$1.FC<IconProps$1>;
-
-/**
- * Error icon component (X in circle - used as fallback)
- */
-declare const IconError: React$1.FC<IconProps$1>;
-
-/**
- * Info icon component (information circle)
- */
-declare const IconInfo: React$1.FC<IconProps$1>;
-
-/**
- * Location icon component
- */
-declare const IconLocation: React$1.FC<IconProps$1>;
-
-/**
- * Menu icon component (hamburger menu)
- */
-declare const IconMenu: React$1.FC<IconProps$1>;
-
-/**
- * Search icon component
- */
-declare const IconSearch: React$1.FC<IconProps$1>;
-
-/**
- * Success icon component (checkmark in circle)
- */
-declare const IconSuccess: React$1.FC<IconProps$1>;
-
-/**
- * Warning icon component (warning triangle)
- */
-declare const IconWarning: React$1.FC<IconProps$1>;
-
-/**
- * Icon Registry
- *
- * Central registry for all icon components.
- * Supports tree-shaking through individual named exports.
- */
-
-/**
- * Icons map for registry lookup
- * Used by Icon component to resolve icon by name
- */
-declare const ICONS_MAP: Record<string, React$1.FC<IconProps$1>>;
-/**
- * Icon name type - union of all available icon names
- */
-type IconName = keyof typeof ICONS_MAP;
-
-declare const iconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    color?: "muted" | "default" | "success" | "warning" | "danger" | "info" | null | undefined;
-    stroke?: "normal" | "bold" | "thin" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface IconProps extends Omit<React$1.SVGProps<SVGSVGElement>, "color" | "stroke">, VariantProps<typeof iconVariants> {
+    key: keyof T;
     /**
-     * Icon name from registry
+     * Column header title
      */
-    name: IconName;
+    title: string;
     /**
-     * Render as child element (composition pattern)
-     * Uses Radix UI Slot for composition
+     * Optional custom render function for cell content
+     * @param value - The value of the cell
+     * @param item - The entire data item
+     * @returns React node to render in the cell
      */
-    asChild?: boolean;
+    render?: (value: T[keyof T], item: T) => React__default.ReactNode;
 }
-/**
- * Icon component
- *
- * Unified icon component with token-driven sizing, colors, and stroke.
- * Supports SSR-safe rendering and tree-shakeable icon registry.
- *
- * @example
- * ```tsx
- * <Icon name="search" size="md" color="default" />
- * ```
- */
-declare const Icon: React$1.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
 
-export { Alert, type AlertProps, BADGE_VARIANTS, Backdrop, type BackdropProps, Badge, type BadgeProps, type BadgeVariant, Box, type BoxProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsRootProps, type BreadcrumbsSeparatorProps, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, Column, type StackProps as ColumnProps, Container, type ContainerProps, Surface as ContainerSurface, type SurfaceProps as ContainerSurfaceProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DataListRoot as DataList, DataListItem, type DataListItemProps, DataListLabel, type DataListLabelProps, DataListRoot, type DataListRootProps, DataListValue, type DataListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogRoot, DialogTitle, type DialogTitleProps, EmptyState, EmptyStateAction, type EmptyStateActionProps, EmptyStateDescription, type EmptyStateDescriptionProps, EmptyStateIcon, type EmptyStateIconProps, type EmptyStateProps, EmptyStateTitle, type EmptyStateTitleProps, FieldRoot as Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Flex, type FlexProps, Grid, type GridProps, type GroupByFunction, Heading, type HeadingProps, HoverCardContent, type HoverCardContentProps, HoverCardRoot, type HoverCardRootProps, HoverCardTrigger, type HoverCardTriggerProps, ICONS_MAP, INPUT_TOKENS, Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, type IconProps$1 as IconComponentProps, IconError, IconInfo, IconLocation, IconMenu, type IconName, type IconProps, IconSearch, IconSuccess, IconWarning, Input, type InputProps, InputSize, Label, type LabelProps, Link, type LinkProps, type LinkSize, type LinkVariant, Modal, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, type ModalOverlayProps, ModalRoot, type ModalRootProps, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, NotificationCenter, NotificationCenterDismissAll, type NotificationCenterDismissAllProps, NotificationCenterGroupHeader, type NotificationCenterGroupHeaderProps, NotificationCenterItem, type NotificationCenterItemProps, NotificationCenterList, type NotificationCenterListProps, NotificationCenterPanel, type NotificationCenterPanelProps, NotificationCenterProvider, type NotificationCenterProviderProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, type NotificationChannel, type NotificationContextType, type NotificationData, type NotificationOptions, type NotificationVariant, Pagination, type PaginationEllipsisProps, type PaginationItemProps, type PaginationNextProps, type PaginationPrevProps, type PaginationRootProps, Portal, type PortalProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Responsive, Row, type RowProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlRootProps, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, type SelectState, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, SelectViewport, type SelectViewportProps, type SelectWidth, Skeleton, type SkeletonProps, type SortDirection, type SortState, Stack, type StackProps, Stepper, type StepperContentProps, type StepperIndicatorProps, type StepperItemProps, type StepperLabelProps, type StepperRootProps, type StepperStep, Surface, type SurfaceProps, TableRoot as Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableColumn, type TableContextValue, TableEmpty, type TableEmptyProps, TableExpandableContent, type TableExpandableContentProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableLoadingState, type TableLoadingStateProps, TableRoot, type TableRootProps, TableRow, type TableRowProps, TableSortIcon, type TableSortIconProps, Tabs, type TabsContentProps, type TabsListProps, type TabsRootProps, type TabsTriggerProps, Text, type TextProps, type TextSize, type TextWeight, Textarea, type TextareaProps, Toast, ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, Toaster, alertVariants, badgeVariants, checkboxVariants, surfaceVariants as containerSurfaceVariants, headingVariants, iconVariants, inputVariants, labelVariants, linkVariants, radioVariants, segmentedControlItemVariants, segmentedControlRootVariants, skeletonVariants, surfaceVariants, textVariants, textareaVariants, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };
+export { ALERT_VARIANTS, ASPECT_RATIO_PRESETS, Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionRootProps, type AccordionSize, type AccordionTriggerProps, type AccordionVariant, Alert, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioPreset, type AspectRatioProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, BADGE_VARIANTS, Backdrop, type BackdropProps, Badge, type BadgeProps, type BadgeVariant, Box, type BoxProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsRootProps, type BreadcrumbsSeparatorProps, Button, type ButtonProps, CHIP_RADIUS_VALUES, CHIP_VARIANTS, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipRadius, type ChipVariant, Column, type StackProps as ColumnProps, Combobox, ComboboxInput, type ComboboxInputProps, ComboboxList, type ComboboxListProps, type ComboboxOption, ComboboxRoot, type ComboboxRootProps, type ComboboxSize, Container, type ContainerProps, Surface as ContainerSurface, type SurfaceProps as ContainerSurfaceProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DataListRoot as DataList, DataListItem, type DataListItemProps, DataListLabel, type DataListLabelProps, DataListRoot, type DataListRootProps, DataListValue, type DataListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogRoot, DialogTitle, type DialogTitleProps, EmptyState, EmptyStateAction, type EmptyStateActionProps, EmptyStateDescription, type EmptyStateDescriptionProps, EmptyStateIcon, type EmptyStateIconProps, EmptyStateIconSize, type EmptyStateProps, EmptyStateTitle, type EmptyStateTitleProps, FieldRoot as Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, FileUpload, type FileUploadError, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Flex, type FlexProps, Grid, type GridProps, type GroupByFunction, Heading, type HeadingProps, HoverCardContent, type HoverCardContentProps, HoverCardRoot, type HoverCardRootProps, HoverCardTrigger, type HoverCardTriggerProps, ICONS_MAP, Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, IconColor, type IconProps$1 as IconComponentProps, IconError, IconInfo, IconLocation, IconMenu, type IconName, type IconProps, IconSearch, IconStroke, IconSuccess, IconWarning, Input, type InputProps, Label, type LabelProps, LinkProps, Modal, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, type ModalOverlayProps, ModalRoot, type ModalRootProps, type ModalSize, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, type MultiSelectSize, NavItem, type NavItemProps, NavLink, type NavLinkProps, NavList, type NavListProps, NavRoot, type NavRootProps, NavSeparator, type NavSeparatorProps, NavText, type NavTextProps, NotificationCenter, NotificationCenterDismissAll, type NotificationCenterDismissAllProps, NotificationCenterGroupHeader, type NotificationCenterGroupHeaderProps, NotificationCenterItem, type NotificationCenterItemProps, NotificationCenterList, type NotificationCenterListProps, NotificationCenterPanel, type NotificationCenterPanelProps, NotificationCenterProvider, type NotificationCenterProviderProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, type NotificationChannel, type NotificationContextType, type NotificationData, type NotificationOptions, type NotificationVariant, Pagination, type PaginationEllipsisProps, type PaginationItemProps, type PaginationNextProps, type PaginationPrevProps, type PaginationRootProps, Portal, type PortalProps, Progress, type ProgressProps, type ProgressSize, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeSlider, type RangeSliderProps, type RangeSliderSize, type RangeSliderVariant, Responsive, Row, type RowProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlOrientation, type SegmentedControlRootProps, type SegmentedControlSize, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, SelectViewport, type SelectViewportProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, type SkeletonVariant, Slider, type SliderProps, type SliderSize, type SliderVariant, type SortDirection, type SortState, Spinner, type SpinnerEasing, type SpinnerLabelPosition, type SpinnerProps, type SpinnerSize, type SpinnerTone, type SpinnerVariant, Stack, type StackProps, Stepper, type StepperContentProps, type StepperIndicatorProps, type StepperItemProps, type StepperLabelProps, type StepperRootProps, type StepperStep, Surface, type SurfaceProps, TableRoot as Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableColumn, type TableContextValue, TableEmpty, type TableEmptyProps, TableExpandableContent, type TableExpandableContentProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableLoadingState, type TableLoadingStateProps, TableRoot, type TableRootProps, TableRow, type TableRowProps, TableSortIcon, type TableSortIconProps, Tabs, type TabsContentProps, type TabsListProps, type TabsRootProps, type TabsTriggerProps, Text, type TextProps, type TextSize, type TextWeight, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, ToastViewport, type ToastViewportProps, Toaster, alertVariants, badgeVariants, checkboxVariants, chipVariants, surfaceVariants as containerSurfaceVariants, headingVariants, iconVariants, inputVariants, radioVariants, segmentedControlItemVariants, segmentedControlRootVariants, separatorVariants, skeletonVariants, surfaceVariants, textVariants, textareaVariants, useNotificationCenter, useNotificationCenterContext, useTableContext, useLocalToast as useToast };