@3fn/core 14.0.0 → 15.0.0

package/dist/browser/tokens.css

@@ -1,6 +1,6 @@
 /**
  * DesignerPunk Design System - Web Tokens
- * Generated: 2026-08-12T03:23:16.987Z
+ * Generated: 2026-10-03T02:14:57.153Z
  * Version: 1.0.0
  * Platform: Web (CSS Custom Properties)
  *
@@ -521,7 +521,7 @@
   Use these for UI development
    * ============================================ */
 
-  --color-feedback-success-text: oklch(0.66 0.18 154);
+  --color-feedback-success-text: light-dark(oklch(0.54 0.14 154), oklch(0.78 0.208 154));
   --color-feedback-success-background: oklch(0.97 0.029 154);
   --color-feedback-success-border: oklch(0.66 0.18 154);
   --color-feedback-error-text: oklch(0.55 0.203 10);
@@ -550,9 +550,9 @@
   --color-highlight: oklch(0.8 0.2 107);
   --color-tech: oklch(0.51 0.241 310);
   --color-data: oklch(0.6 0.286 310);
-  --color-text-default: oklch(0.52 0.02 260);
-  --color-text-muted: oklch(0.62 0.02 260);
-  --color-text-subtle: oklch(0.72 0.018 260);
+  --color-text-default: light-dark(oklch(0.52 0.02 260), oklch(1 0 260));
+  --color-text-muted: light-dark(oklch(0.62 0.02 260), oklch(0.9 0.01 260));
+  --color-text-subtle: light-dark(oklch(0.72 0.018 260), oklch(0.8 0.015 260));
   --color-contrast-on-light: oklch(0 0 260);
   --color-contrast-on-dark: oklch(1 0 260);
   --color-contrast-on-action: oklch(0 0 260);
@@ -998,6 +998,8 @@
   --inputradio-box-lg: var(--size-500);
 
   /* Progress Component Tokens */
+  /* Connector line thickness (1px). References borderDefault primitive for consistent border treatment across the design system. */
+  --progress-connector-thickness: var(--border-width-100);
   /* Small node base size (12px). Inactive dots in compact mobile contexts. */
   --progress-node-size-sm: var(--size-150);
   /* Medium node base size (16px). Default inactive dot size. */
@@ -1016,8 +1018,6 @@
   --progress-node-gap-md: var(--space-100);
   /* Large gap between nodes (12px = 1.5× base). Generous spacing for detailed steppers with labels in desktop contexts. */
   --progress-node-gap-lg: var(--space-150);
-  /* Connector line thickness (1px). References borderDefault primitive for consistent border treatment across the design system. */
-  --progress-connector-thickness: var(--border-width-100);
 
   /* VerticalListItem Component Tokens */
   /* Block padding at rest state (1px border). 11px padding + 1px border = 12px per side, achieving 48px total with 24px content. Uses TokenWithValue pattern as no primitive token exists for 11px. */

package/dist/build/platforms/AndroidMotionTokenFormatter.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Android Motion Token Formatter
+ *
+ * Generates the Kotlin motion-token section (Duration/Easing/Scale objects and
+ * semantic motion composites) consumed by TokenFileGenerator.generateMotionSection().
+ * Motion names use PascalCase Kotlin type/object naming (e.g. Duration.Duration250,
+ * Easing.EasingStandard) — a deliberate convention for nested Kotlin objects,
+ * distinct from the snake_case constant contract below.
+ *
+ * NOT the shipping Android constant generator. Primitive/semantic/component token
+ * constants ship via TokenFileGenerator + src/providers/AndroidFormatGenerator.ts,
+ * which enforces the governed snake_case naming contract (val space_100 = 8.dp;
+ * see rosetta-system-principles § "Naming Convention Governance").
+ *
+ * History: this class previously implemented PlatformBuilder with a full
+ * Android-library build() path (build.gradle.kts, Compose components, and a
+ * camelCase toKotlinConstantName transform that contradicted the snake_case
+ * contract). That path was never wired into any shipping pipeline and was
+ * retired 2026-08-26 (see .kiro/issues/2026-08-26-androidbuilder-camelcase-dead-path.md).
+ */
+export declare class AndroidMotionTokenFormatter {
+    /**
+     * Generate duration token Kotlin constants
+     *
+     * Generates Kotlin constants for animation duration tokens.
+     * Format: val Duration150 = 150
+     *
+     * Duration values are in milliseconds for Android.
+     *
+     * Requirements: 1.7, 6.3
+     *
+     * @param durationTokens - Duration primitive tokens from token system
+     * @returns Kotlin constant declarations
+     */
+    generateDurationTokens(durationTokens: Record<string, any>): string;
+    /**
+     * Generate easing token Kotlin constants
+     *
+     * Generates Kotlin constants for animation easing tokens using CubicBezierEasing().
+     * Format: val EasingStandard = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)
+     *
+     * Converts cubic-bezier CSS format to Kotlin CubicBezierEasing format.
+     *
+     * Requirements: 2.7, 6.3, 6.7
+     *
+     * @param easingTokens - Easing primitive tokens from token system
+     * @returns Kotlin constant declarations
+     */
+    generateEasingTokens(easingTokens: Record<string, any>): string;
+    /**
+     * Generate scale token Kotlin constants
+     *
+     * Generates Kotlin constants for transform scale tokens.
+     * Format: val Scale088 = 0.88f
+     *
+     * Scale tokens are unitless factors that should be applied to base values.
+     * When applying scale tokens to base values during token generation,
+     * use unitConverter.applyScaleWithRounding() to ensure whole pixel values.
+     *
+     * Example:
+     *   const baseSize = 16;
+     *   const scaledSize = unitConverter.applyScaleWithRounding(baseSize, 0.88);
+     *   // Result: 14 (16 × 0.88 = 14.08 → rounds to 14)
+     *
+     * In Kotlin, components should apply rounding when using scale tokens:
+     *   val scaledSize = round(baseSize * Tokens.Scale.Scale088).toInt()
+     *
+     * Requirements: 3.1, 4.2, 4.3, 6.3
+     *
+     * @param scaleTokens - Scale primitive tokens from token system
+     * @returns Kotlin constant declarations
+     */
+    generateScaleTokens(scaleTokens: Record<string, any>): string;
+    /**
+     * Generate semantic motion token Kotlin constants
+     *
+     * Generates Kotlin objects for semantic motion tokens that compose
+     * primitive duration, easing, and scale tokens.
+     *
+     * Format:
+     *   object MotionFloatLabel {
+     *     val duration = Duration.Duration250
+     *     val easing = Easing.EasingStandard
+     *   }
+     *
+     * Requirements: 5.1, 5.2, 6.7
+     *
+     * @param motionTokens - Semantic motion tokens from token system
+     * @returns Kotlin object declarations
+     */
+    generateSemanticMotionTokens(motionTokens: Record<string, any>): string;
+    /**
+     * Convert token name to Kotlin type name (PascalCase)
+     *
+     * Converts names like "motion.floatLabel" to "MotionFloatLabel"
+     * or "duration150" to "Duration150"
+     * Used for object and class names.
+     */
+    private toKotlinTypeName;
+}
+//# sourceMappingURL=AndroidMotionTokenFormatter.d.ts.map

package/dist/build/platforms/AndroidMotionTokenFormatter.js

@@ -0,0 +1,220 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AndroidMotionTokenFormatter = void 0;
+/**
+ * Android Motion Token Formatter
+ *
+ * Generates the Kotlin motion-token section (Duration/Easing/Scale objects and
+ * semantic motion composites) consumed by TokenFileGenerator.generateMotionSection().
+ * Motion names use PascalCase Kotlin type/object naming (e.g. Duration.Duration250,
+ * Easing.EasingStandard) — a deliberate convention for nested Kotlin objects,
+ * distinct from the snake_case constant contract below.
+ *
+ * NOT the shipping Android constant generator. Primitive/semantic/component token
+ * constants ship via TokenFileGenerator + src/providers/AndroidFormatGenerator.ts,
+ * which enforces the governed snake_case naming contract (val space_100 = 8.dp;
+ * see rosetta-system-principles § "Naming Convention Governance").
+ *
+ * History: this class previously implemented PlatformBuilder with a full
+ * Android-library build() path (build.gradle.kts, Compose components, and a
+ * camelCase toKotlinConstantName transform that contradicted the snake_case
+ * contract). That path was never wired into any shipping pipeline and was
+ * retired 2026-08-26 (see .kiro/issues/2026-08-26-androidbuilder-camelcase-dead-path.md).
+ */
+class AndroidMotionTokenFormatter {
+    /**
+     * Generate duration token Kotlin constants
+     *
+     * Generates Kotlin constants for animation duration tokens.
+     * Format: val Duration150 = 150
+     *
+     * Duration values are in milliseconds for Android.
+     *
+     * Requirements: 1.7, 6.3
+     *
+     * @param durationTokens - Duration primitive tokens from token system
+     * @returns Kotlin constant declarations
+     */
+    generateDurationTokens(durationTokens) {
+        const lines = [];
+        lines.push('    // MARK: Duration Tokens');
+        lines.push('    ');
+        lines.push('    /** Animation duration values in milliseconds */');
+        lines.push('    object Duration {');
+        for (const [name, token] of Object.entries(durationTokens)) {
+            const kotlinName = this.toKotlinTypeName(name);
+            const value = token.platforms.android.value; // Milliseconds
+            const comment = `        /** ${name}: ${value}ms */`;
+            lines.push(comment);
+            lines.push(`        val ${kotlinName} = ${value}`);
+        }
+        lines.push('    }');
+        lines.push('    ');
+        return lines.join('\n');
+    }
+    /**
+     * Generate easing token Kotlin constants
+     *
+     * Generates Kotlin constants for animation easing tokens using CubicBezierEasing().
+     * Format: val EasingStandard = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)
+     *
+     * Converts cubic-bezier CSS format to Kotlin CubicBezierEasing format.
+     *
+     * Requirements: 2.7, 6.3, 6.7
+     *
+     * @param easingTokens - Easing primitive tokens from token system
+     * @returns Kotlin constant declarations
+     */
+    generateEasingTokens(easingTokens) {
+        const lines = [];
+        const hasLinear = Object.values(easingTokens).some((t) => t.easingType === 'linear');
+        lines.push('    // MARK: Easing Tokens');
+        lines.push('    ');
+        if (hasLinear) {
+            lines.push('    /** Piecewise linear easing via lookup table interpolation */');
+            lines.push('    class PiecewiseLinearEasing(private val stops: List<Pair<Float, Float>>) : Easing {');
+            lines.push('        override fun transform(fraction: Float): Float {');
+            lines.push('            if (fraction <= 0f) return 0f');
+            lines.push('            if (fraction >= 1f) return 1f');
+            lines.push('            var lo = 0; var hi = stops.size - 1');
+            lines.push('            while (lo < hi - 1) { val mid = (lo + hi) / 2; if (stops[mid].first <= fraction) lo = mid else hi = mid }');
+            lines.push('            val seg = stops[lo]; val next = stops[hi]');
+            lines.push('            val frac = if (next.first > seg.first) (fraction - seg.first) / (next.first - seg.first) else 1f');
+            lines.push('            return seg.second + (next.second - seg.second) * frac');
+            lines.push('        }');
+            lines.push('    }');
+            lines.push('    ');
+        }
+        lines.push('    /** Animation easing curves */');
+        lines.push('    object Easing {');
+        for (const [name, token] of Object.entries(easingTokens)) {
+            const kotlinName = this.toKotlinTypeName(name);
+            if (token.easingType === 'linear' && token.stops) {
+                const stops = token.stops
+                    .map(([time, progress]) => `${time}f to ${progress}f`).join(', ');
+                lines.push(`        /** ${name}: piecewise linear (${token.stops.length} stops, ${token.easingDuration}ms) */`);
+                lines.push(`        val ${kotlinName} = PiecewiseLinearEasing(listOf(${stops}))`);
+            }
+            else {
+                const cubicBezier = token.platforms.android.value;
+                const match = cubicBezier.match(/cubic-bezier\(([\d.]+),\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)\)/);
+                if (match) {
+                    const [, p1, p2, p3, p4] = match;
+                    const formatFloat = (val) => {
+                        const num = parseFloat(val);
+                        return num === Math.floor(num) ? `${num}.0f` : `${val}f`;
+                    };
+                    lines.push(`        /** ${name}: ${cubicBezier} */`);
+                    lines.push(`        val ${kotlinName} = CubicBezierEasing(${formatFloat(p1)}, ${formatFloat(p2)}, ${formatFloat(p3)}, ${formatFloat(p4)})`);
+                }
+            }
+        }
+        lines.push('    }');
+        lines.push('    ');
+        return lines.join('\n');
+    }
+    /**
+     * Generate scale token Kotlin constants
+     *
+     * Generates Kotlin constants for transform scale tokens.
+     * Format: val Scale088 = 0.88f
+     *
+     * Scale tokens are unitless factors that should be applied to base values.
+     * When applying scale tokens to base values during token generation,
+     * use unitConverter.applyScaleWithRounding() to ensure whole pixel values.
+     *
+     * Example:
+     *   const baseSize = 16;
+     *   const scaledSize = unitConverter.applyScaleWithRounding(baseSize, 0.88);
+     *   // Result: 14 (16 × 0.88 = 14.08 → rounds to 14)
+     *
+     * In Kotlin, components should apply rounding when using scale tokens:
+     *   val scaledSize = round(baseSize * Tokens.Scale.Scale088).toInt()
+     *
+     * Requirements: 3.1, 4.2, 4.3, 6.3
+     *
+     * @param scaleTokens - Scale primitive tokens from token system
+     * @returns Kotlin constant declarations
+     */
+    generateScaleTokens(scaleTokens) {
+        const lines = [];
+        lines.push('    // MARK: Scale Tokens');
+        lines.push('    ');
+        lines.push('    /** Transform scale factors (unitless) */');
+        lines.push('    /** When applying to base values, use round() for whole pixels */');
+        lines.push('    object Scale {');
+        for (const [name, token] of Object.entries(scaleTokens)) {
+            const kotlinName = this.toKotlinTypeName(name);
+            const value = token.platforms.android.value;
+            // Format float values to always include .0 for whole numbers (1.0f instead of 1f)
+            const formattedValue = value === Math.floor(value) ? `${value}.0f` : `${value}f`;
+            const comment = `        /** ${name}: ${value} */`;
+            lines.push(comment);
+            lines.push(`        val ${kotlinName} = ${formattedValue}`);
+        }
+        lines.push('    }');
+        lines.push('    ');
+        return lines.join('\n');
+    }
+    /**
+     * Generate semantic motion token Kotlin constants
+     *
+     * Generates Kotlin objects for semantic motion tokens that compose
+     * primitive duration, easing, and scale tokens.
+     *
+     * Format:
+     *   object MotionFloatLabel {
+     *     val duration = Duration.Duration250
+     *     val easing = Easing.EasingStandard
+     *   }
+     *
+     * Requirements: 5.1, 5.2, 6.7
+     *
+     * @param motionTokens - Semantic motion tokens from token system
+     * @returns Kotlin object declarations
+     */
+    generateSemanticMotionTokens(motionTokens) {
+        const lines = [];
+        lines.push('    // MARK: Semantic Motion Tokens');
+        lines.push('    ');
+        lines.push('    /** Composed motion styles for specific animation contexts */');
+        for (const [name, token] of Object.entries(motionTokens)) {
+            const objectName = this.toKotlinTypeName(name);
+            const { duration, easing, scale } = token.primitiveReferences;
+            // Use context instead of description to avoid including specific values
+            const comment = token.context || token.description;
+            lines.push('    ');
+            lines.push(`    /** ${comment} */`);
+            lines.push(`    object ${objectName} {`);
+            // Generate duration reference
+            const durationKotlinName = this.toKotlinTypeName(duration);
+            lines.push(`        val duration = Duration.${durationKotlinName}`);
+            // Generate easing reference
+            const easingKotlinName = this.toKotlinTypeName(easing);
+            lines.push(`        val easing = Easing.${easingKotlinName}`);
+            // Generate scale reference if present
+            if (scale) {
+                const scaleKotlinName = this.toKotlinTypeName(scale);
+                lines.push(`        val scale = Scale.${scaleKotlinName}`);
+            }
+            lines.push('    }');
+        }
+        lines.push('    ');
+        return lines.join('\n');
+    }
+    /**
+     * Convert token name to Kotlin type name (PascalCase)
+     *
+     * Converts names like "motion.floatLabel" to "MotionFloatLabel"
+     * or "duration150" to "Duration150"
+     * Used for object and class names.
+     */
+    toKotlinTypeName(name) {
+        return name
+            .split(/[.\-]/)
+            .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+            .join('');
+    }
+}
+exports.AndroidMotionTokenFormatter = AndroidMotionTokenFormatter;
+//# sourceMappingURL=AndroidMotionTokenFormatter.js.map

package/dist/build/platforms/WebMotionTokenFormatter.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Web Motion Token Formatter
+ *
+ * Generates the CSS custom-property motion-token section (duration/easing/scale
+ * and semantic motion composites) consumed by
+ * TokenFileGenerator.generateMotionSection().
+ *
+ * NOT the shipping web token generator. Primitive/semantic/component token
+ * output ships via TokenFileGenerator + src/providers/WebFormatGenerator.ts.
+ *
+ * History: this class previously implemented PlatformBuilder with a full
+ * NPM-package build() path (package.json, Lit components, CSS/TS token files).
+ * That path was never wired into any shipping pipeline and was retired
+ * 2026-08-26 alongside AndroidBuilder's (see
+ * .kiro/issues/2026-08-26-androidbuilder-camelcase-dead-path.md).
+ */
+export declare class WebMotionTokenFormatter {
+    /**
+     * Generate duration token CSS custom properties
+     *
+     * Generates CSS custom properties for animation duration tokens.
+     * Format: --duration-150: 150ms;
+     *
+     * Requirements: 1.5, 6.1
+     *
+     * @param durationTokens - Duration primitive tokens from token system
+     * @returns CSS custom property declarations
+     */
+    generateDurationTokens(durationTokens: Record<string, any>): string;
+    /**
+     * Generate easing token CSS custom properties
+     *
+     * Generates CSS custom properties for animation easing tokens.
+     * Format: --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
+     *
+     * Requirements: 2.5, 6.1
+     *
+     * @param easingTokens - Easing primitive tokens from token system
+     * @returns CSS custom property declarations
+     */
+    generateEasingTokens(easingTokens: Record<string, any>): string;
+    /**
+     * Generate scale token CSS custom properties
+     *
+     * Generates CSS custom properties for transform scale tokens.
+     * Format: --scale-088: 0.88;
+     *
+     * Scale tokens are unitless factors that should be applied to base values.
+     * When applying scale tokens to base values during token generation,
+     * use unitConverter.applyScaleWithRounding() to ensure whole pixel values.
+     *
+     * Example:
+     *   const baseSize = 16;
+     *   const scaledSize = unitConverter.applyScaleWithRounding(baseSize, 0.88);
+     *   // Result: 14 (16 × 0.88 = 14.08 → rounds to 14)
+     *
+     * Requirements: 3.1, 4.2, 4.3, 6.1
+     *
+     * @param scaleTokens - Scale primitive tokens from token system
+     * @returns CSS custom property declarations
+     */
+    generateScaleTokens(scaleTokens: Record<string, any>): string;
+    /**
+     * Generate semantic motion token CSS custom properties
+     *
+     * Generates CSS custom properties for semantic motion tokens that compose
+     * primitive duration, easing, and scale tokens.
+     *
+     * Format:
+     *   --motion-float-label-duration: var(--duration-250);
+     *   --motion-float-label-easing: var(--easing-standard);
+     *
+     * Requirements: 5.1, 5.2, 6.4
+     *
+     * @param motionTokens - Semantic motion tokens from token system
+     * @returns CSS custom property declarations
+     */
+    generateSemanticMotionTokens(motionTokens: Record<string, any>): string;
+    /**
+     * Convert token name to CSS variable name
+     * Example: space100 -> space-100, colorBlue500 -> color-blue-500
+     */
+    private toCSSVariableName;
+}
+//# sourceMappingURL=WebMotionTokenFormatter.d.ts.map

package/dist/build/platforms/WebMotionTokenFormatter.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebMotionTokenFormatter = void 0;
+/**
+ * Web Motion Token Formatter
+ *
+ * Generates the CSS custom-property motion-token section (duration/easing/scale
+ * and semantic motion composites) consumed by
+ * TokenFileGenerator.generateMotionSection().
+ *
+ * NOT the shipping web token generator. Primitive/semantic/component token
+ * output ships via TokenFileGenerator + src/providers/WebFormatGenerator.ts.
+ *
+ * History: this class previously implemented PlatformBuilder with a full
+ * NPM-package build() path (package.json, Lit components, CSS/TS token files).
+ * That path was never wired into any shipping pipeline and was retired
+ * 2026-08-26 alongside AndroidBuilder's (see
+ * .kiro/issues/2026-08-26-androidbuilder-camelcase-dead-path.md).
+ */
+class WebMotionTokenFormatter {
+    /**
+     * Generate duration token CSS custom properties
+     *
+     * Generates CSS custom properties for animation duration tokens.
+     * Format: --duration-150: 150ms;
+     *
+     * Requirements: 1.5, 6.1
+     *
+     * @param durationTokens - Duration primitive tokens from token system
+     * @returns CSS custom property declarations
+     */
+    generateDurationTokens(durationTokens) {
+        const lines = [];
+        lines.push('  /* Duration Tokens */');
+        lines.push('  /* Animation timing values in milliseconds */');
+        lines.push('  ');
+        for (const [name, token] of Object.entries(durationTokens)) {
+            const cssName = this.toCSSVariableName(name);
+            const value = token.platforms.web.value;
+            lines.push(`  --${cssName}: ${value}ms;`);
+        }
+        lines.push('  ');
+        return lines.join('\n');
+    }
+    /**
+     * Generate easing token CSS custom properties
+     *
+     * Generates CSS custom properties for animation easing tokens.
+     * Format: --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
+     *
+     * Requirements: 2.5, 6.1
+     *
+     * @param easingTokens - Easing primitive tokens from token system
+     * @returns CSS custom property declarations
+     */
+    generateEasingTokens(easingTokens) {
+        const lines = [];
+        lines.push('  /* Easing Tokens */');
+        lines.push('  /* Animation curve definitions */');
+        lines.push('  ');
+        for (const [name, token] of Object.entries(easingTokens)) {
+            const cssName = this.toCSSVariableName(name);
+            if (token.easingType === 'linear' && token.stops) {
+                const stops = token.stops;
+                const parts = stops.map(([time, progress], i) => {
+                    if (i === 0 && time === 0)
+                        return `${progress}`;
+                    if (i === stops.length - 1 && time === 1)
+                        return `${progress}`;
+                    return `${progress} ${(time * 100).toFixed(1)}%`;
+                });
+                lines.push(`  --${cssName}: linear(${parts.join(', ')});`);
+            }
+            else {
+                lines.push(`  --${cssName}: ${token.platforms.web.value};`);
+            }
+        }
+        lines.push('  ');
+        return lines.join('\n');
+    }
+    /**
+     * Generate scale token CSS custom properties
+     *
+     * Generates CSS custom properties for transform scale tokens.
+     * Format: --scale-088: 0.88;
+     *
+     * Scale tokens are unitless factors that should be applied to base values.
+     * When applying scale tokens to base values during token generation,
+     * use unitConverter.applyScaleWithRounding() to ensure whole pixel values.
+     *
+     * Example:
+     *   const baseSize = 16;
+     *   const scaledSize = unitConverter.applyScaleWithRounding(baseSize, 0.88);
+     *   // Result: 14 (16 × 0.88 = 14.08 → rounds to 14)
+     *
+     * Requirements: 3.1, 4.2, 4.3, 6.1
+     *
+     * @param scaleTokens - Scale primitive tokens from token system
+     * @returns CSS custom property declarations
+     */
+    generateScaleTokens(scaleTokens) {
+        const lines = [];
+        lines.push('  /* Scale Tokens */');
+        lines.push('  /* Transform scale factors (unitless) */');
+        lines.push('  /* When applying to base values, use Math.round() for whole pixels */');
+        lines.push('  ');
+        for (const [name, token] of Object.entries(scaleTokens)) {
+            const cssName = this.toCSSVariableName(name);
+            const value = token.platforms.web.value;
+            lines.push(`  --${cssName}: ${value};`);
+        }
+        lines.push('  ');
+        return lines.join('\n');
+    }
+    /**
+     * Generate semantic motion token CSS custom properties
+     *
+     * Generates CSS custom properties for semantic motion tokens that compose
+     * primitive duration, easing, and scale tokens.
+     *
+     * Format:
+     *   --motion-float-label-duration: var(--duration-250);
+     *   --motion-float-label-easing: var(--easing-standard);
+     *
+     * Requirements: 5.1, 5.2, 6.4
+     *
+     * @param motionTokens - Semantic motion tokens from token system
+     * @returns CSS custom property declarations
+     */
+    generateSemanticMotionTokens(motionTokens) {
+        const lines = [];
+        lines.push('  /* Semantic Motion Tokens */');
+        lines.push('  /* Composed motion styles for specific animation contexts */');
+        lines.push('  ');
+        for (const [name, token] of Object.entries(motionTokens)) {
+            const cssName = this.toCSSVariableName(name);
+            const { duration, easing, scale } = token.primitiveReferences;
+            // Generate duration reference
+            const durationCssName = this.toCSSVariableName(duration);
+            lines.push(`  --${cssName}-duration: var(--${durationCssName});`);
+            // Generate easing reference
+            const easingCssName = this.toCSSVariableName(easing);
+            lines.push(`  --${cssName}-easing: var(--${easingCssName});`);
+            // Generate scale reference if present
+            if (scale) {
+                const scaleCssName = this.toCSSVariableName(scale);
+                lines.push(`  --${cssName}-scale: var(--${scaleCssName});`);
+            }
+            lines.push('  ');
+        }
+        return lines.join('\n');
+    }
+    /**
+     * Convert token name to CSS variable name
+     * Example: space100 -> space-100, colorBlue500 -> color-blue-500
+     */
+    toCSSVariableName(name) {
+        return name
+            .replace(/([A-Z])/g, '-$1') // Convert camelCase to kebab-case
+            .replace(/\./g, '-') // Convert dots to hyphens
+            .replace(/([a-z])(\d)/g, '$1-$2') // Insert hyphen between letter and number
+            .toLowerCase()
+            .replace(/^-/, '');
+    }
+}
+exports.WebMotionTokenFormatter = WebMotionTokenFormatter;
+//# sourceMappingURL=WebMotionTokenFormatter.js.map