@tenerife.music/ui 1.0.15 → 1.1.0

package/dist/tokens/index.mjs

@@ -1,17 +1,22 @@
-// src/tokens/colors.ts
+// src/FOUNDATION/tokens/colors.ts
 var primaryColors = {
   50: "210 40% 98%",
   // Lightest blue
   100: "210 40% 96%",
   200: "217 32.6% 17.5%",
   300: "216 28% 26%",
-  400: "215 25% 27%",
-  500: "215 20% 35%",
-  // Base primary
-  600: "215 16% 47%",
-  700: "216 12% 54%",
-  800: "217 10% 62%",
-  900: "222 47.4% 11.2%",
+  400: "215 25% 30%",
+  // Adjusted for better progression
+  500: "215 20% 38%",
+  // Adjusted for better progression
+  600: "215 16% 45%",
+  // Adjusted for better progression
+  700: "216 12% 35%",
+  // Rebalanced for semantic strength (L* ~35)
+  800: "217 10% 28%",
+  // Adjusted for proper progression
+  900: "222 47.4% 18%",
+  // Adjusted for better progression
   950: "222 84% 4.9%"
   // Darkest blue
 };
@@ -21,12 +26,15 @@ var accentColors = {
   200: "280 60% 85%",
   300: "280 55% 75%",
   400: "280 50% 65%",
-  500: "280 70% 67%",
-  // Base accent (night mode primary)
-  600: "259 65% 58%",
-  700: "259 60% 50%",
-  800: "259 55% 45%",
-  900: "259 50% 40%",
+  500: "280 65% 72%",
+  // Adjusted for WCAG AA contrast (4.5:1) with dark text in night mode
+  600: "259 65% 59%",
+  // Default accent - lightened for better contrast vs secondary (L* ~59, was 52, 15 delta from secondary-600)
+  700: "259 60% 44%",
+  // Active state - rebalanced for semantic strength (L* ~44, 12 delta from secondary-700)
+  800: "259 55% 38%",
+  // Adjusted for proper progression
+  900: "259 50% 32%",
   950: "259 45% 30%"
 };
 var secondaryColors = {
@@ -35,12 +43,15 @@ var secondaryColors = {
   200: "173 100% 85%",
   300: "173 100% 70%",
   400: "173 100% 55%",
-  500: "173 100% 37%",
-  // Base secondary (Tenerife #00bfa6)
-  600: "173 100% 32%",
-  700: "173 95% 27%",
+  500: "173 100% 45%",
+  // Adjusted for better scale progression
+  600: "173 100% 44%",
+  // Default secondary - rebalanced for better contrast vs primary (L* ~44, was 38)
+  700: "173 95% 32%",
+  // Active state - rebalanced for semantic strength (L* ~32)
   800: "173 90% 22%",
-  900: "173 85% 17%",
+  // Primary variant - darkened for dominance (L* ~22, was 26)
+  900: "173 85% 20%",
   950: "173 80% 12%"
 };
 var surfaceColors = {
@@ -133,13 +144,13 @@ var chartColors = {
 var textColors = {
   day: {
     primary: "0 0% 9%",
-    // Almost black
+    // Almost black (neutral-900 equivalent)
     secondary: "0 0% 45%",
     // Medium gray
     tertiary: "0 0% 65%",
     // Light gray
-    muted: "0 0% 38%",
-    // Muted gray with stronger contrast
+    muted: "0 0% 42%",
+    // Muted gray - adjusted for WCAG AA contrast (4.5:1) on surface.elevated2
     inverse: "0 0% 100%"
     // White (for dark backgrounds)
   },
@@ -389,7 +400,7 @@ var tailwindThemeColors = {
   }
 };
 
-// src/tokens/components/alert.ts
+// src/FOUNDATION/tokens/components/alert.ts
 var ALERT_TOKENS = {
   /**
    * Padding for alert content
@@ -451,7 +462,140 @@ var ALERT_TOKENS = {
   }
 };
 
-// src/tokens/components/button.ts
+// src/FOUNDATION/tokens/components/motion.ts
+var MOTION_TOKENS = {
+  /**
+   * Transition property tokens
+   * Maps to Tailwind transition utilities
+   */
+  transition: {
+    all: "transition-all",
+    // All properties
+    colors: "transition-colors",
+    // Color properties only
+    opacity: "transition-opacity",
+    // Opacity only
+    transform: "transition-transform",
+    // Transform only
+    shadow: "transition-shadow",
+    // Box shadow only
+    none: "transition-none"
+    // No transition
+  },
+  /**
+   * Duration tokens
+   * Maps to foundation motion duration tokens via Tailwind
+   */
+  duration: {
+    instant: "duration-0",
+    // 0ms
+    fast: "duration-fast",
+    // 150ms - maps to motion.durations.fast
+    normal: "duration-normal",
+    // 300ms - maps to motion.durations.normal
+    slow: "duration-slow",
+    // 500ms - maps to motion.durations.slow
+    slower: "duration-slower",
+    // 700ms - maps to motion.durations.slower
+    slowest: "duration-slowest",
+    // 1000ms - maps to motion.durations.slowest
+    // Granular durations
+    "75": "duration-75",
+    // 75ms
+    "100": "duration-100",
+    // 100ms
+    "200": "duration-200",
+    // 200ms
+    "250": "duration-250",
+    // 250ms
+    "300": "duration-300",
+    // 300ms
+    "400": "duration-400",
+    // 400ms
+    "500": "duration-500",
+    // 500ms
+    "600": "duration-600",
+    // 600ms
+    "700": "duration-700",
+    // 700ms
+    "800": "duration-800",
+    // 800ms
+    "1000": "duration-1000"
+    // 1000ms
+  },
+  /**
+   * Easing tokens
+   * Maps to foundation motion easing tokens via Tailwind
+   */
+  easing: {
+    linear: "ease-linear",
+    // Linear easing
+    in: "ease-in",
+    // Ease in
+    out: "ease-out",
+    // Ease out (recommended for most UI)
+    "in-out": "ease-in-out",
+    // Ease in-out
+    bounce: "ease-bounce",
+    // Bounce easing
+    elastic: "ease-elastic"
+    // Elastic easing
+  },
+  /**
+   * Pre-configured transition tokens
+   * Combines duration and easing for common use cases
+   */
+  transitionPreset: {
+    fast: "transition-all duration-fast ease-out",
+    // Fast transition
+    normal: "transition-all duration-normal ease-in-out",
+    // Normal transition (default)
+    slow: "transition-all duration-slow ease-in-out",
+    // Slow transition
+    colors: "transition-colors duration-normal ease-out",
+    // Color transitions (common)
+    transform: "transition-transform duration-normal ease-out",
+    // Transform transitions
+    opacity: "transition-opacity duration-fast ease-out"
+    // Opacity transitions
+  },
+  /**
+   * Animation tokens
+   * Maps to foundation motion animation tokens via Tailwind
+   */
+  animation: {
+    none: "animate-none",
+    // No animation
+    spin: "animate-spin",
+    // Spin animation
+    pulse: "animate-pulse",
+    // Pulse animation
+    bounce: "animate-bounce",
+    // Bounce animation
+    ping: "animate-ping",
+    // Ping animation
+    shake: "animate-shake",
+    // Shake animation
+    fadeIn: "animate-fadeIn",
+    // Fade in
+    fadeOut: "animate-fadeOut",
+    // Fade out
+    slideInUp: "animate-slideInUp",
+    // Slide in from bottom
+    slideInDown: "animate-slideInDown",
+    // Slide in from top
+    slideInLeft: "animate-slideInLeft",
+    // Slide in from right
+    slideInRight: "animate-slideInRight",
+    // Slide in from left
+    scaleIn: "animate-scaleIn",
+    // Scale in
+    scaleOut: "animate-scaleOut"
+    // Scale out
+  }
+};
+
+// src/FOUNDATION/tokens/components/button.ts
 var BUTTON_TOKENS = {
   /**
    * Button heights by size
@@ -483,25 +627,48 @@ var BUTTON_TOKENS = {
     vertical: {
       sm: "py-xs",
       // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "py-sm"
+      md: "py-sm",
       // 8px (0.5rem) - maps to semanticSpacing.sm
+      lg: "py-md"
+      // 16px (1rem) - maps to semanticSpacing.md - standardized for visual distinction
     }
   },
   /**
-   * Gap between icon and text
+   * Gap between icon and text by size
+   * Scales with button size for visual consistency
    */
-  gap: "gap-sm",
-  // 8px (0.5rem) - maps to semanticSpacing.sm
+  gap: {
+    sm: "gap-xs",
+    // 4px (0.25rem) - smaller gap for small buttons
+    md: "gap-sm",
+    // 8px (0.5rem) - medium gap for medium buttons
+    lg: "gap-md"
+    // 16px (1rem) - larger gap for large buttons
+  },
   /**
    * Border radius for all button sizes
+   * Consistent radius across sizes for visual harmony
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule References componentRadius.button.md (6px / 0.375rem) from Radius Authority
+   * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
    */
   radius: "rounded-md",
-  // 6px (0.375rem) - maps to borderRadius.md
+  // References componentRadius.button.md (6px / 0.375rem) - Radius Authority compliant
   /**
-   * Icon size within buttons
+   * Icon size within buttons by button size
+   * Scales proportionally with button size for visual balance
    */
-  iconSize: "size-4",
-  // 16px (1rem) - maps to spacing[4]
+  iconSize: {
+    sm: "size-3.5",
+    // 14px (0.875rem) - smaller icon for small buttons
+    md: "size-4",
+    // 16px (1rem) - medium icon for medium buttons
+    lg: "size-5",
+    // 20px (1.25rem) - larger icon for large buttons
+    icon: "size-4"
+    // 16px (1rem) - medium icon for icon-only buttons
+  },
   /**
    * Width tokens
    */
@@ -511,15 +678,19 @@ var BUTTON_TOKENS = {
   },
   /**
    * Font sizes by button size
-   * Maps to foundation typography fontSize tokens
+   * References foundation typography fontSize tokens from Typography Authority
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule All fontSize values reference Typography Authority tokens
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
    */
   fontSize: {
     sm: "text-xs",
-    // Maps to fontSize.xs[0]
+    // References fontSize.xs[0] from Typography Authority (~12px)
     md: "text-sm",
-    // Maps to fontSize.sm[0]
-    lg: "text-sm"
-    // Maps to fontSize.sm[0]
+    // References fontSize.sm[0] from Typography Authority (~14px)
+    lg: "text-base"
+    // References fontSize.base[0] from Typography Authority (~16px)
   },
   /**
    * Shadow tokens by variant
@@ -534,50 +705,137 @@ var BUTTON_TOKENS = {
   /**
    * Color tokens for button variants
    * Uses semantic color tokens that map to CSS variables
+   *
+   * State tokens (hover, active, disabled) use CSS variables from State Matrix.
+   * All states are injected via updateStateMatrixFromTokens() and consumed via arbitrary values.
+   * States react to Color Authority changes automatically through State Matrix.
+   *
+   * Interaction Authority Rules:
+   * - Hover (Priority 4): hover: prefix - ONLY when !disabled && !loading && pointer-events:auto
+   * - Active (Priority 3): active: prefix - ONLY when !disabled && !loading && mousedown
+   * - Focus (Priority 5): focus-visible: prefix - ONLY when !disabled && keyboard navigation
+   * - Disabled (Priority 1): disabled: prefix - Blocks ALL interactions
+   * - Loading (Priority 2): loading: prefix - Blocks hover/active (when implemented)
+   * - Base (Priority 6): No prefix - Default state, pointer-events: auto
+   *
+   * @enforcement TUNG_STATE_AUTHORITY_FOUNDATION_LOCK
+   * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+   * @rule States use CSS variables, not Tailwind variants
+   * @rule All state variables follow pattern: --{component}-{variant}-{state}-{property}
+   * @rule Visual states (colors) are SEPARATE from interaction states (pointer-events)
+   * @rule Hover MUST work with real mouse cursor, NOT just DevTools force state
+   * @rule Active MUST activate only on mousedown, NOT on hover
+   * @rule Focus MUST activate only on keyboard navigation, NOT on mouse click
+   *
+   * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
    */
   variant: {
     primary: {
-      background: "bg-primary",
-      // Primary background using CSS var
+      background: "bg-[hsl(var(--button-primary-base-bg))]",
+      // Primary base background - CSS variable from State Matrix
       text: "text-primary-foreground",
       // Primary text using CSS var
-      hover: "hover:bg-primary/90"
-      // Primary hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-primary-hover-bg))]",
+      // Primary hover - CSS variable from State Matrix (Priority 4: blocked by disabled/loading)
+      active: "active:bg-[hsl(var(--button-primary-active-bg))]",
+      // Primary active - CSS variable from State Matrix (Priority 3: blocked by disabled/loading, priority over hover)
+      focus: "focus-visible:bg-[hsl(var(--button-primary-focus-bg))]",
+      // Primary focus - CSS variable from State Matrix (Priority 5: keyboard navigation only)
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-primary-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix (Priority 1: blocks all)
+        text: "disabled:text-[hsl(var(--button-primary-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      },
+      loading: "bg-[hsl(var(--button-primary-loading-bg))]"
+      // Primary loading - CSS variable from State Matrix (Priority 2: blocks hover/active, used with aria-busy/data-loading when implemented)
     },
     secondary: {
       background: "bg-secondary",
       // Secondary background using CSS var
       text: "text-secondary-foreground",
       // Secondary text using CSS var
-      hover: "hover:bg-secondary/80"
-      // Secondary hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-secondary-hover-bg))]",
+      // Secondary hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-secondary-active-bg))]",
+      // Secondary active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-secondary-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-secondary-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     },
     accent: {
       background: "bg-accent",
       // Accent background using CSS var
       text: "text-accent-foreground",
       // Accent text using CSS var
-      hover: "hover:bg-accent/90"
-      // Accent hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-accent-hover-bg))]",
+      // Accent hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-accent-active-bg))]",
+      // Accent active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-accent-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-accent-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     },
     outline: {
       border: "border border-input",
       // Input border using CSS var
       background: "bg-background",
       // Background using CSS var
+      text: "text-foreground",
+      // Foreground text using CSS var
       hover: {
-        background: "hover:bg-accent",
-        // Accent hover using CSS var
-        text: "hover:text-accent-foreground"
-        // Accent text using CSS var
+        background: "hover:bg-[hsl(var(--button-outline-hover-bg))]",
+        // Outline hover background - CSS variable from State Matrix
+        text: "hover:text-[hsl(var(--button-outline-hover-text))]",
+        // Outline hover text - CSS variable from State Matrix
+        border: "hover:border-[hsl(var(--button-outline-hover-border))]"
+        // Outline hover border - CSS variable from State Matrix
+      },
+      active: {
+        background: "active:bg-[hsl(var(--button-outline-active-bg))]",
+        // Outline active background - CSS variable from State Matrix
+        text: "active:text-[hsl(var(--button-outline-active-text))]",
+        // Outline active text - CSS variable from State Matrix
+        border: "active:border-[hsl(var(--button-outline-active-border))]"
+        // Outline active border - CSS variable from State Matrix
+      },
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-outline-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-outline-disabled-text))]",
+        // Disabled text - CSS variable from State Matrix
+        border: "disabled:border-[hsl(var(--button-outline-disabled-border))]"
+        // Disabled border - CSS variable from State Matrix
       }
     },
     ghost: {
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-foreground",
+      // Foreground text using CSS var
       hover: {
-        background: "hover:bg-accent",
-        // Accent hover using CSS var
-        text: "hover:text-accent-foreground"
-        // Accent text using CSS var
+        background: "hover:bg-[hsl(var(--button-ghost-hover-bg))]",
+        // Ghost hover background - CSS variable from State Matrix
+        text: "hover:text-[hsl(var(--button-ghost-hover-text))]"
+        // Ghost hover text - CSS variable from State Matrix
+      },
+      active: {
+        background: "active:bg-[hsl(var(--button-ghost-active-bg))]",
+        // Ghost active background - CSS variable from State Matrix
+        text: "active:text-[hsl(var(--button-ghost-active-text))]"
+        // Ghost active text - CSS variable from State Matrix
+      },
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-ghost-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-ghost-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
       }
     },
     destructive: {
@@ -585,20 +843,98 @@ var BUTTON_TOKENS = {
       // Destructive background using CSS var
       text: "text-destructive-foreground",
       // Destructive text using CSS var
-      hover: "hover:bg-destructive/90"
-      // Destructive hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-destructive-hover-bg))]",
+      // Destructive hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-destructive-active-bg))]",
+      // Destructive active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-destructive-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-destructive-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     }
   },
   /**
    * Transition tokens
+   * References Motion Authority tokens for consistent motion behavior
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule Uses MOTION_TOKENS.transitionPreset.colors from Motion Authority
+   * @rule Motion transitions MUST use canonical motion tokens only
+   * @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
    */
   transition: {
-    colors: "transition-colors"
-    // Color transition using motion tokens
+    colors: MOTION_TOKENS.transitionPreset.colors
+    // "transition-colors duration-normal ease-out" - Motion Authority compliant
+  },
+  /**
+   * Global state tokens
+   * Shared state tokens that apply across all variants
+   * Variant-specific states are defined in variant.*.active and variant.*.disabled
+   *
+   * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+   * @rule All interaction states MUST follow Interaction Authority Contract
+   * @rule State priority: disabled > loading > active > hover > focus-visible > base
+   * @rule Visual states (colors) are SEPARATE from interaction states (pointer-events, cursor)
+   * @rule All states MUST be browser-native (CSS pseudo-classes), NOT JavaScript-managed
+   */
+  state: {
+    /**
+     * Disabled state tokens
+     * Global disabled state tokens (variant-specific overrides in variant.*.disabled)
+     *
+     * Interaction Authority Rules:
+     * - Priority: 1 (Highest) - Blocks ALL interactions
+     * - MUST block hover, active, and focus states
+     * - MUST use disabled: prefix (never in base state)
+     * - Base state MUST have pointer-events: auto (default) for hover to work
+     *
+     * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+     * @enforcement TUNG_BUTTON_INTERACTION_FIX
+     * @rule Interaction Authority: pointer-events is NOT a visual token
+     * @rule pointer-events-none MUST use disabled: prefix (never in base state)
+     * @rule Base state MUST have pointer-events: auto (default) for hover to work
+     * @rule These tokens are applied in base but only activate when element is disabled
+     * @rule Hover is FORBIDDEN when disabled={true}
+     * @rule Active is FORBIDDEN when disabled={true}
+     * @rule Focus is FORBIDDEN when disabled={true} (for interactions)
+     *
+     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+     */
+    disabled: {
+      cursor: "disabled:cursor-not-allowed",
+      // Disabled cursor style (only applies when disabled)
+      pointerEvents: "disabled:pointer-events-none"
+      // Disable pointer events (only applies when disabled)
+    },
+    /**
+     * Focus state tokens
+     * Focus ring for keyboard navigation
+     *
+     * Interaction Authority Rules:
+     * - Priority: 5 - Lower than active and hover
+     * - MUST activate only on keyboard navigation (focus-visible: prefix)
+     * - MUST NOT activate on mouse click (use :focus-visible, not :focus)
+     * - MUST be blocked by disabled state
+     *
+     * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+     * @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
+     * @rule Focus MUST be blocked when disabled={true}
+     * @rule Focus MUST NOT activate on mouse click
+     *
+     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+     */
+    focus: {
+      ring: "focus-visible:ring-1 focus-visible:ring-ring",
+      // Focus ring using semantic ring color
+      outline: "focus-visible:outline-none"
+      // Remove default outline (replaced by ring)
+    }
   }
 };
 
-// src/tokens/components/card.ts
+// src/FOUNDATION/tokens/components/card.ts
 var CARD_TOKENS = {
   /**
    * Padding for card sections (CardHeader, CardContent, CardFooter)
@@ -682,7 +1018,7 @@ var CARD_TOKENS = {
   }
 };
 
-// src/tokens/components/artist.ts
+// src/FOUNDATION/tokens/components/artist.ts
 var ARTIST_TOKENS = {
   /**
    * Image container tokens
@@ -744,7 +1080,7 @@ var ARTIST_TOKENS = {
   }
 };
 
-// src/tokens/spacing.ts
+// src/FOUNDATION/tokens/spacing.ts
 var spacing = {
   // Zero spacing
   0: "0",
@@ -1004,7 +1340,7 @@ var tailwindSpacingConfig = {
   }
 };
 
-// src/tokens/components/data.ts
+// src/FOUNDATION/tokens/components/data.ts
 var DATA_TOKENS = {
   /**
    * Skeleton Component Tokens
@@ -1074,7 +1410,7 @@ var DATA_TOKENS = {
   }
 };
 
-// src/tokens/components/icon.ts
+// src/FOUNDATION/tokens/components/icon.ts
 var ICON_TOKENS = {
   /**
    * Icon sizes
@@ -1130,140 +1466,7 @@ var ICON_TOKENS = {
   }
 };
 
-// src/tokens/components/motion.ts
-var MOTION_TOKENS = {
-  /**
-   * Transition property tokens
-   * Maps to Tailwind transition utilities
-   */
-  transition: {
-    all: "transition-all",
-    // All properties
-    colors: "transition-colors",
-    // Color properties only
-    opacity: "transition-opacity",
-    // Opacity only
-    transform: "transition-transform",
-    // Transform only
-    shadow: "transition-shadow",
-    // Box shadow only
-    none: "transition-none"
-    // No transition
-  },
-  /**
-   * Duration tokens
-   * Maps to foundation motion duration tokens via Tailwind
-   */
-  duration: {
-    instant: "duration-0",
-    // 0ms
-    fast: "duration-fast",
-    // 150ms - maps to motion.durations.fast
-    normal: "duration-normal",
-    // 300ms - maps to motion.durations.normal
-    slow: "duration-slow",
-    // 500ms - maps to motion.durations.slow
-    slower: "duration-slower",
-    // 700ms - maps to motion.durations.slower
-    slowest: "duration-slowest",
-    // 1000ms - maps to motion.durations.slowest
-    // Granular durations
-    "75": "duration-75",
-    // 75ms
-    "100": "duration-100",
-    // 100ms
-    "200": "duration-200",
-    // 200ms
-    "250": "duration-250",
-    // 250ms
-    "300": "duration-300",
-    // 300ms
-    "400": "duration-400",
-    // 400ms
-    "500": "duration-500",
-    // 500ms
-    "600": "duration-600",
-    // 600ms
-    "700": "duration-700",
-    // 700ms
-    "800": "duration-800",
-    // 800ms
-    "1000": "duration-1000"
-    // 1000ms
-  },
-  /**
-   * Easing tokens
-   * Maps to foundation motion easing tokens via Tailwind
-   */
-  easing: {
-    linear: "ease-linear",
-    // Linear easing
-    in: "ease-in",
-    // Ease in
-    out: "ease-out",
-    // Ease out (recommended for most UI)
-    "in-out": "ease-in-out",
-    // Ease in-out
-    bounce: "ease-bounce",
-    // Bounce easing
-    elastic: "ease-elastic"
-    // Elastic easing
-  },
-  /**
-   * Pre-configured transition tokens
-   * Combines duration and easing for common use cases
-   */
-  transitionPreset: {
-    fast: "transition-all duration-fast ease-out",
-    // Fast transition
-    normal: "transition-all duration-normal ease-in-out",
-    // Normal transition (default)
-    slow: "transition-all duration-slow ease-in-out",
-    // Slow transition
-    colors: "transition-colors duration-normal ease-out",
-    // Color transitions (common)
-    transform: "transition-transform duration-normal ease-out",
-    // Transform transitions
-    opacity: "transition-opacity duration-fast ease-out"
-    // Opacity transitions
-  },
-  /**
-   * Animation tokens
-   * Maps to foundation motion animation tokens via Tailwind
-   */
-  animation: {
-    none: "animate-none",
-    // No animation
-    spin: "animate-spin",
-    // Spin animation
-    pulse: "animate-pulse",
-    // Pulse animation
-    bounce: "animate-bounce",
-    // Bounce animation
-    ping: "animate-ping",
-    // Ping animation
-    shake: "animate-shake",
-    // Shake animation
-    fadeIn: "animate-fadeIn",
-    // Fade in
-    fadeOut: "animate-fadeOut",
-    // Fade out
-    slideInUp: "animate-slideInUp",
-    // Slide in from bottom
-    slideInDown: "animate-slideInDown",
-    // Slide in from top
-    slideInLeft: "animate-slideInLeft",
-    // Slide in from right
-    slideInRight: "animate-slideInRight",
-    // Slide in from left
-    scaleIn: "animate-scaleIn",
-    // Scale in
-    scaleOut: "animate-scaleOut"
-    // Scale out
-  }
-};
-
-// src/tokens/components/domain.ts
+// src/FOUNDATION/tokens/components/domain.ts
 var DOMAIN_TOKENS = {
   /**
    * Surface tokens for card containers
@@ -1785,7 +1988,7 @@ var DOMAIN_TOKENS = {
   }
 };
 
-// src/tokens/components/input.ts
+// src/FOUNDATION/tokens/components/input.ts
 var INPUT_TOKENS = {
   /**
    * Input heights by size
@@ -2098,7 +2301,7 @@ var INPUT_TOKENS = {
   }
 };
 
-// src/tokens/components/checkbox.ts
+// src/FOUNDATION/tokens/components/checkbox.ts
 var CHECKBOX_TOKENS = {
   /**
    * Checkbox sizes by size variant
@@ -2309,7 +2512,7 @@ var CHECKBOX_TOKENS = {
   // Smooth transitions
 };
 
-// src/tokens/components/switch.ts
+// src/FOUNDATION/tokens/components/switch.ts
 var SWITCH_TOKENS = {
   /**
    * Track sizes by size variant
@@ -2576,7 +2779,7 @@ var SWITCH_TOKENS = {
   // 2px padding around handle
 };
 
-// src/tokens/components/radio.ts
+// src/FOUNDATION/tokens/components/radio.ts
 var RADIO_TOKENS = {
   /**
    * Radio sizes by size variant
@@ -2769,7 +2972,7 @@ var RADIO_TOKENS = {
   // Smooth transitions
 };
 
-// src/tokens/components/surface.ts
+// src/FOUNDATION/tokens/components/surface.ts
 var SURFACE_TOKENS = {
   /**
    * Padding values for surface variants
@@ -2857,7 +3060,7 @@ var SURFACE_TOKENS = {
   }
 };
 
-// src/tokens/components/text.ts
+// src/FOUNDATION/tokens/components/text.ts
 var TEXT_TOKENS = {
   /**
    * Font sizes by text size variant
@@ -2872,8 +3075,16 @@ var TEXT_TOKENS = {
     // Maps to fontSize.base[0]
     lg: "text-lg",
     // Maps to fontSize.lg[0]
-    xl: "text-xl"
+    xl: "text-xl",
     // Maps to fontSize.xl[0]
+    "2xl": "text-2xl",
+    // Maps to fontSize.2xl[0]
+    "3xl": "text-3xl",
+    // Maps to fontSize.3xl[0]
+    "4xl": "text-4xl",
+    // Maps to fontSize.4xl[0]
+    "5xl": "text-5xl"
+    // Maps to fontSize.5xl[0]
   },
   /**
    * Font weights by weight variant
@@ -2898,6 +3109,8 @@ var TEXT_TOKENS = {
     // Maps to lineHeight.none
     tight: "leading-tight",
     // Maps to lineHeight.tight
+    snug: "leading-snug",
+    // Maps to lineHeight.snug
     normal: "leading-normal",
     // Maps to lineHeight.normal
     relaxed: "leading-relaxed",
@@ -2925,7 +3138,7 @@ var TEXT_TOKENS = {
   }
 };
 
-// src/tokens/components/section.ts
+// src/FOUNDATION/tokens/components/section.ts
 var SECTION_TOKENS = {
   /**
    * Vertical padding for sections
@@ -2957,7 +3170,7 @@ var SECTION_TOKENS = {
   }
 };
 
-// src/tokens/components/overlay.ts
+// src/FOUNDATION/tokens/components/overlay.ts
 var OVERLAY_TOKENS = {
   /**
    * Backdrop tokens by variant
@@ -3242,7 +3455,7 @@ var OVERLAY_TOKENS = {
   }
 };
 
-// src/tokens/components/toast.ts
+// src/FOUNDATION/tokens/components/toast.ts
 var TOAST_TOKENS = {
   /**
    * Spacing tokens for toast layout
@@ -3421,15 +3634,15 @@ var TOAST_TOKENS = {
       // Default opacity (hidden)
       groupHover: "group-hover:opacity-100",
       // Visible on group hover
-      focus: "focus:opacity-100",
+      focus: "focus-visible:opacity-100",
       // Visible on focus
-      focusRing: "focus:outline-none focus:ring-1"
+      focusRing: "focus-visible:outline-none focus-visible:ring-1"
       // Focus ring styling
     }
   }
 };
 
-// src/tokens/components/notifications.ts
+// src/FOUNDATION/tokens/components/notifications.ts
 var NOTIFICATION_TOKENS = {
   /**
    * Spacing tokens for notification layout
@@ -3622,7 +3835,7 @@ var NOTIFICATION_TOKENS = {
   }
 };
 
-// src/tokens/components/navigation.ts
+// src/FOUNDATION/tokens/components/navigation.ts
 var NAVIGATION_TOKENS = {
   /**
    * Navigation item heights by size
@@ -3827,7 +4040,7 @@ var NAVIGATION_TOKENS = {
   }
 };
 
-// src/tokens/components/menu.ts
+// src/FOUNDATION/tokens/components/menu.ts
 var MENU_TOKENS = {
   /**
    * Menu item tokens by size
@@ -3943,7 +4156,7 @@ var MENU_TOKENS = {
   }
 };
 
-// src/tokens/components/popover.ts
+// src/FOUNDATION/tokens/components/popover.ts
 var POPOVER_TOKENS = {
   /**
    * Popover content tokens by size
@@ -4028,196 +4241,7 @@ var POPOVER_TOKENS = {
   }
 };
 
-// src/tokens/components/dropdown.ts
-var DROPDOWN_TOKENS = {
-  /**
-   * Trigger tokens by size
-   * Button element that opens/closes the dropdown
-   */
-  trigger: {
-    height: {
-      sm: "h-8",
-      // 32px
-      md: "h-9",
-      // 36px
-      lg: "h-10"
-      // 40px
-    },
-    padding: {
-      horizontal: {
-        sm: "px-sm",
-        // 8px
-        md: "px-md",
-        // 16px
-        lg: "px-lg"
-        // 24px
-      },
-      vertical: {
-        sm: "py-xs",
-        // 4px
-        md: "py-xs",
-        // 4px
-        lg: "py-sm"
-        // 8px
-      }
-    },
-    radius: {
-      sm: "rounded-md",
-      // 6px
-      md: "rounded-md",
-      // 6px
-      lg: "rounded-md"
-      // 6px
-    },
-    fontSize: {
-      sm: "text-sm",
-      // Maps to fontSize.sm
-      md: "text-base",
-      // Maps to fontSize.base
-      lg: "text-base"
-      // Maps to fontSize.base
-    },
-    shadow: "shadow-sm",
-    // Maps to elevationShadows.sm
-    /**
-     * Icon spacing for trigger
-     */
-    icon: {
-      spacing: "ml-sm"
-      // 8px - spacing between trigger text and icon
-    }
-  },
-  /**
-   * Variant-based tokens
-   * Border, background, text, and focus colors for different variants
-   */
-  variant: {
-    neutral: {
-      border: "border border-[hsl(var(--border))]",
-      // Border color using CSS var
-      background: "bg-[hsl(var(--popover))]",
-      // Background using CSS var
-      text: "text-[hsl(var(--popover-foreground))]",
-      // Text color using CSS var
-      focus: "focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2"
-      // Focus ring
-    },
-    tinted: {
-      border: "border border-[hsl(var(--border))]",
-      // Border color using CSS var
-      background: "bg-[hsl(var(--muted))]",
-      // Background using CSS var
-      text: "text-[hsl(var(--popover-foreground))]",
-      // Text color using CSS var
-      focus: "focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2"
-      // Focus ring
-    }
-  },
-  /**
-   * Menu tokens by size
-   * Container for the dropdown items
-   */
-  menu: {
-    border: {
-      default: "border border-[hsl(var(--border))]"
-      // Border color using CSS var
-    },
-    background: {
-      neutral: "bg-[hsl(var(--popover))]",
-      // Background using CSS var
-      tinted: "bg-[hsl(var(--muted))]"
-      // Background using CSS var
-    },
-    text: {
-      default: "text-[hsl(var(--popover-foreground))]"
-      // Text color using CSS var
-    },
-    padding: {
-      sm: "p-sm",
-      // 8px
-      md: "p-md",
-      // 16px
-      lg: "p-lg"
-      // 24px
-    },
-    radius: {
-      sm: "rounded-md",
-      // 6px
-      md: "rounded-lg",
-      // 8px
-      lg: "rounded-lg"
-      // 8px
-    },
-    shadow: {
-      sm: "shadow-md",
-      // Maps to elevationShadows.md
-      md: "shadow-lg",
-      // Maps to elevationShadows.lg
-      lg: "shadow-xl"
-      // Maps to elevationShadows.xl
-    },
-    minWidth: {
-      sm: "min-w-32",
-      // 128px
-      md: "min-w-48",
-      // 192px
-      lg: "min-w-64"
-      // 256px
-    }
-  },
-  /**
-   * Width tokens
-   * Common width utilities
-   */
-  width: {
-    full: "w-full"
-    // Full width (100%)
-  },
-  /**
-   * Item tokens by size
-   * Individual menu item
-   */
-  item: {
-    background: {
-      focus: "focus:bg-[hsl(var(--accent))]",
-      // Focus background using CSS var
-      selected: "bg-[hsl(var(--accent))]"
-      // Selected background using CSS var
-    },
-    text: {
-      focus: "focus:text-[hsl(var(--accent-foreground))]",
-      // Focus text using CSS var
-      selected: "text-[hsl(var(--accent-foreground))]"
-      // Selected text using CSS var
-    },
-    padding: {
-      sm: "px-sm py-xs",
-      // 8px horizontal, 4px vertical
-      md: "px-md py-xs",
-      // 16px horizontal, 4px vertical
-      lg: "px-lg py-sm"
-      // 24px horizontal, 8px vertical
-    },
-    radius: {
-      sm: "rounded-sm",
-      // 4px
-      md: "rounded-md",
-      // 6px
-      lg: "rounded-md"
-      // 6px
-    },
-    fontSize: {
-      sm: "text-sm",
-      // Maps to fontSize.sm
-      md: "text-sm",
-      // Maps to fontSize.sm
-      lg: "text-base"
-      // Maps to fontSize.base
-    }
-  }
-};
-
-// src/tokens/components/tooltip.ts
+// src/FOUNDATION/tokens/components/tooltip.ts
 var TOOLTIP_TOKENS = {
   /**
    * Tooltip content tokens
@@ -4263,7 +4287,7 @@ var TOOLTIP_TOKENS = {
   }
 };
 
-// src/tokens/components/select.ts
+// src/FOUNDATION/tokens/components/select.ts
 var SELECT_TOKENS = {
   /**
    * Select trigger heights by size
@@ -4443,9 +4467,9 @@ var SELECT_TOKENS = {
       // 8px (0.5rem) from left
     },
     focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
+      background: "focus-visible:bg-[hsl(var(--accent))]",
       // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
+      text: "focus-visible:text-[hsl(var(--accent-foreground))]"
       // Focus text using CSS var
     },
     selected: {
@@ -4768,7 +4792,7 @@ var SELECT_TOKENS = {
   }
 };
 
-// src/tokens/motion/v2.ts
+// src/FOUNDATION/tokens/motion/v2.ts
 var motionV2Durations = {
   fast: "150ms",
   // Quick interactions
@@ -4962,7 +4986,7 @@ var motionV2TailwindConfig = {
   }
 };
 
-// src/tokens/motion.ts
+// src/FOUNDATION/tokens/motion.ts
 var durations = {
   instant: "0ms",
   fast: "150ms",
@@ -5035,54 +5059,54 @@ var transitions = {
 var keyframes = {
   // Fade animations
   fadeIn: {
-    from: { opacity: 0 },
-    to: { opacity: 1 }
+    from: { opacity: "0" },
+    to: { opacity: "1" }
   },
   fadeOut: {
-    from: { opacity: 1 },
-    to: { opacity: 0 }
+    from: { opacity: "1" },
+    to: { opacity: "0" }
   },
   // Slide animations
   slideInUp: {
-    from: { transform: "translateY(100%)", opacity: 0 },
-    to: { transform: "translateY(0)", opacity: 1 }
+    from: { transform: "translateY(100%)", opacity: "0" },
+    to: { transform: "translateY(0)", opacity: "1" }
   },
   slideInDown: {
-    from: { transform: "translateY(-100%)", opacity: 0 },
-    to: { transform: "translateY(0)", opacity: 1 }
+    from: { transform: "translateY(-100%)", opacity: "0" },
+    to: { transform: "translateY(0)", opacity: "1" }
   },
   slideInLeft: {
-    from: { transform: "translateX(-100%)", opacity: 0 },
-    to: { transform: "translateX(0)", opacity: 1 }
+    from: { transform: "translateX(-100%)", opacity: "0" },
+    to: { transform: "translateX(0)", opacity: "1" }
   },
   slideInRight: {
-    from: { transform: "translateX(100%)", opacity: 0 },
-    to: { transform: "translateX(0)", opacity: 1 }
+    from: { transform: "translateX(100%)", opacity: "0" },
+    to: { transform: "translateX(0)", opacity: "1" }
   },
   slideOutUp: {
-    from: { transform: "translateY(0)", opacity: 1 },
-    to: { transform: "translateY(-100%)", opacity: 0 }
+    from: { transform: "translateY(0)", opacity: "1" },
+    to: { transform: "translateY(-100%)", opacity: "0" }
   },
   slideOutDown: {
-    from: { transform: "translateY(0)", opacity: 1 },
-    to: { transform: "translateY(100%)", opacity: 0 }
+    from: { transform: "translateY(0)", opacity: "1" },
+    to: { transform: "translateY(100%)", opacity: "0" }
   },
   slideOutLeft: {
-    from: { transform: "translateX(0)", opacity: 1 },
-    to: { transform: "translateX(-100%)", opacity: 0 }
+    from: { transform: "translateX(0)", opacity: "1" },
+    to: { transform: "translateX(-100%)", opacity: "0" }
   },
   slideOutRight: {
-    from: { transform: "translateX(0)", opacity: 1 },
-    to: { transform: "translateX(100%)", opacity: 0 }
+    from: { transform: "translateX(0)", opacity: "1" },
+    to: { transform: "translateX(100%)", opacity: "0" }
   },
   // Scale animations
   scaleIn: {
-    from: { transform: "scale(0.95)", opacity: 0 },
-    to: { transform: "scale(1)", opacity: 1 }
+    from: { transform: "scale(0.95)", opacity: "0" },
+    to: { transform: "scale(1)", opacity: "1" }
   },
   scaleOut: {
-    from: { transform: "scale(1)", opacity: 1 },
-    to: { transform: "scale(0.95)", opacity: 0 }
+    from: { transform: "scale(1)", opacity: "1" },
+    to: { transform: "scale(0.95)", opacity: "0" }
   },
   scaleUp: {
     from: { transform: "scale(1)" },
@@ -5103,8 +5127,8 @@ var keyframes = {
   },
   // Pulse and bounce
   pulse: {
-    "0%, 100%": { opacity: 1 },
-    "50%": { opacity: 0.5 }
+    "0%, 100%": { opacity: "1" },
+    "50%": { opacity: "0.5" }
   },
   bounce: {
     "0%, 100%": {
@@ -5126,7 +5150,7 @@ var keyframes = {
   ping: {
     "75%, 100%": {
       transform: "scale(2)",
-      opacity: 0
+      opacity: "0"
     }
   },
   // Accordion animations (for Radix UI)
@@ -5309,7 +5333,7 @@ var tailwindMotionConfig = {
   }
 };
 
-// src/tokens/radius.ts
+// src/FOUNDATION/tokens/radius.ts
 var borderRadius = {
   // No radius
   none: "0",
@@ -5492,7 +5516,7 @@ var tailwindRadiusConfig = {
   }
 };
 
-// src/tokens/shadows.ts
+// src/FOUNDATION/tokens/shadows.ts
 var shadowBase = {
   black: "0 0 0",
   // Black color for shadows (rgb format)
@@ -5683,7 +5707,7 @@ var tailwindShadowConfig = {
   }
 };
 
-// src/tokens/typography.ts
+// src/FOUNDATION/tokens/typography.ts
 var fontFamily = {
   // Primary font - Inter (default sans)
   sans: [
@@ -6057,7 +6081,7 @@ var fontSizeWithMd = {
   md: fontSize.base
 };
 
-// src/tokens/css-variables.ts
+// src/FOUNDATION/tokens/css-variables.ts
 var allCSSVariables = {
   ...colorCSSVariables,
   ...typographyCSSVariables,
@@ -6083,7 +6107,7 @@ var tokenSystemSummary = {
   total: Object.keys(allCSSVariables).length
 };
 
-// src/tokens/theme.ts
+// src/FOUNDATION/tokens/theme.ts
 var UI_COLORS = tailwindThemeColors;
 
-export { ALERT_TOKENS, ARTIST_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };
+export { ALERT_TOKENS, ARTIST_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };