@windmorph/react 0.0.0-stage → 0.1.0

package/dist/styles/generated/tokens.css

@@ -0,0 +1,284 @@
+/* Generated by @windmorph/react from src/tokens. Do not edit by hand. */
+
+:root {
+  --md-ref-typeface-brand: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --md-ref-typeface-plain: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --md-ref-typeface-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-display-large-size: 3.5625rem;
+  --md-sys-typescale-display-large-line-height: 4rem;
+  --md-sys-typescale-display-large-tracking: -0.0125rem;
+  --md-sys-typescale-display-large-weight: 400;
+  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-display-medium-size: 2.8125rem;
+  --md-sys-typescale-display-medium-line-height: 3.25rem;
+  --md-sys-typescale-display-medium-tracking: 0rem;
+  --md-sys-typescale-display-medium-weight: 400;
+  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-display-small-size: 2.25rem;
+  --md-sys-typescale-display-small-line-height: 2.75rem;
+  --md-sys-typescale-display-small-tracking: 0rem;
+  --md-sys-typescale-display-small-weight: 400;
+  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-headline-large-size: 2rem;
+  --md-sys-typescale-headline-large-line-height: 2.5rem;
+  --md-sys-typescale-headline-large-tracking: 0rem;
+  --md-sys-typescale-headline-large-weight: 400;
+  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-headline-medium-size: 1.75rem;
+  --md-sys-typescale-headline-medium-line-height: 2.25rem;
+  --md-sys-typescale-headline-medium-tracking: 0rem;
+  --md-sys-typescale-headline-medium-weight: 400;
+  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-headline-small-size: 1.5rem;
+  --md-sys-typescale-headline-small-line-height: 2rem;
+  --md-sys-typescale-headline-small-tracking: 0rem;
+  --md-sys-typescale-headline-small-weight: 400;
+  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-title-large-size: 1.375rem;
+  --md-sys-typescale-title-large-line-height: 1.75rem;
+  --md-sys-typescale-title-large-tracking: 0rem;
+  --md-sys-typescale-title-large-weight: 400;
+  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-title-medium-size: 1rem;
+  --md-sys-typescale-title-medium-line-height: 1.5rem;
+  --md-sys-typescale-title-medium-tracking: 0.0125rem;
+  --md-sys-typescale-title-medium-weight: 500;
+  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-title-small-size: 0.875rem;
+  --md-sys-typescale-title-small-line-height: 1.25rem;
+  --md-sys-typescale-title-small-tracking: 0.00625rem;
+  --md-sys-typescale-title-small-weight: 500;
+  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-body-large-size: 1rem;
+  --md-sys-typescale-body-large-line-height: 1.5rem;
+  --md-sys-typescale-body-large-tracking: 0.03125rem;
+  --md-sys-typescale-body-large-weight: 400;
+  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-body-medium-size: 0.875rem;
+  --md-sys-typescale-body-medium-line-height: 1.25rem;
+  --md-sys-typescale-body-medium-tracking: 0.0125rem;
+  --md-sys-typescale-body-medium-weight: 400;
+  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-body-small-size: 0.75rem;
+  --md-sys-typescale-body-small-line-height: 1rem;
+  --md-sys-typescale-body-small-tracking: 0.025rem;
+  --md-sys-typescale-body-small-weight: 400;
+  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-label-large-size: 0.875rem;
+  --md-sys-typescale-label-large-line-height: 1.25rem;
+  --md-sys-typescale-label-large-tracking: 0.00625rem;
+  --md-sys-typescale-label-large-weight: 500;
+  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-label-medium-size: 0.75rem;
+  --md-sys-typescale-label-medium-line-height: 1rem;
+  --md-sys-typescale-label-medium-tracking: 0.03125rem;
+  --md-sys-typescale-label-medium-weight: 500;
+  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-label-small-size: 0.6875rem;
+  --md-sys-typescale-label-small-line-height: 1rem;
+  --md-sys-typescale-label-small-tracking: 0.03125rem;
+  --md-sys-typescale-label-small-weight: 500;
+  --md-sys-typescale-display-large-emphasized-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-display-large-emphasized-size: 3.5625rem;
+  --md-sys-typescale-display-large-emphasized-line-height: 4rem;
+  --md-sys-typescale-display-large-emphasized-tracking: 0rem;
+  --md-sys-typescale-display-large-emphasized-weight: 500;
+  --md-sys-typescale-display-medium-emphasized-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-display-medium-emphasized-size: 2.8125rem;
+  --md-sys-typescale-display-medium-emphasized-line-height: 3.25rem;
+  --md-sys-typescale-display-medium-emphasized-tracking: 0rem;
+  --md-sys-typescale-display-medium-emphasized-weight: 500;
+  --md-sys-typescale-display-small-emphasized-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-display-small-emphasized-size: 2.25rem;
+  --md-sys-typescale-display-small-emphasized-line-height: 2.75rem;
+  --md-sys-typescale-display-small-emphasized-tracking: 0rem;
+  --md-sys-typescale-display-small-emphasized-weight: 500;
+  --md-sys-typescale-headline-large-emphasized-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-headline-large-emphasized-size: 2rem;
+  --md-sys-typescale-headline-large-emphasized-line-height: 2.5rem;
+  --md-sys-typescale-headline-large-emphasized-tracking: 0rem;
+  --md-sys-typescale-headline-large-emphasized-weight: 500;
+  --md-sys-typescale-headline-medium-emphasized-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-headline-medium-emphasized-size: 1.75rem;
+  --md-sys-typescale-headline-medium-emphasized-line-height: 2.25rem;
+  --md-sys-typescale-headline-medium-emphasized-tracking: 0rem;
+  --md-sys-typescale-headline-medium-emphasized-weight: 500;
+  --md-sys-typescale-headline-small-emphasized-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-headline-small-emphasized-size: 1.5rem;
+  --md-sys-typescale-headline-small-emphasized-line-height: 2rem;
+  --md-sys-typescale-headline-small-emphasized-tracking: 0rem;
+  --md-sys-typescale-headline-small-emphasized-weight: 500;
+  --md-sys-typescale-title-large-emphasized-font: var(--md-ref-typeface-brand);
+  --md-sys-typescale-title-large-emphasized-size: 1.375rem;
+  --md-sys-typescale-title-large-emphasized-line-height: 1.75rem;
+  --md-sys-typescale-title-large-emphasized-tracking: 0rem;
+  --md-sys-typescale-title-large-emphasized-weight: 500;
+  --md-sys-typescale-title-medium-emphasized-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-title-medium-emphasized-size: 1rem;
+  --md-sys-typescale-title-medium-emphasized-line-height: 1.5rem;
+  --md-sys-typescale-title-medium-emphasized-tracking: 0.009375rem;
+  --md-sys-typescale-title-medium-emphasized-weight: 700;
+  --md-sys-typescale-title-small-emphasized-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-title-small-emphasized-size: 0.875rem;
+  --md-sys-typescale-title-small-emphasized-line-height: 1.25rem;
+  --md-sys-typescale-title-small-emphasized-tracking: 0.00625rem;
+  --md-sys-typescale-title-small-emphasized-weight: 700;
+  --md-sys-typescale-body-large-emphasized-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-body-large-emphasized-size: 1rem;
+  --md-sys-typescale-body-large-emphasized-line-height: 1.5rem;
+  --md-sys-typescale-body-large-emphasized-tracking: 0.009375rem;
+  --md-sys-typescale-body-large-emphasized-weight: 500;
+  --md-sys-typescale-body-medium-emphasized-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-body-medium-emphasized-size: 0.875rem;
+  --md-sys-typescale-body-medium-emphasized-line-height: 1.25rem;
+  --md-sys-typescale-body-medium-emphasized-tracking: 0.015625rem;
+  --md-sys-typescale-body-medium-emphasized-weight: 500;
+  --md-sys-typescale-body-small-emphasized-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-body-small-emphasized-size: 0.75rem;
+  --md-sys-typescale-body-small-emphasized-line-height: 1rem;
+  --md-sys-typescale-body-small-emphasized-tracking: 0.025rem;
+  --md-sys-typescale-body-small-emphasized-weight: 500;
+  --md-sys-typescale-label-large-emphasized-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-label-large-emphasized-size: 0.875rem;
+  --md-sys-typescale-label-large-emphasized-line-height: 1.25rem;
+  --md-sys-typescale-label-large-emphasized-tracking: 0.00625rem;
+  --md-sys-typescale-label-large-emphasized-weight: 700;
+  --md-sys-typescale-label-medium-emphasized-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-label-medium-emphasized-size: 0.75rem;
+  --md-sys-typescale-label-medium-emphasized-line-height: 1rem;
+  --md-sys-typescale-label-medium-emphasized-tracking: 0.03125rem;
+  --md-sys-typescale-label-medium-emphasized-weight: 700;
+  --md-sys-typescale-label-small-emphasized-font: var(--md-ref-typeface-plain);
+  --md-sys-typescale-label-small-emphasized-size: 0.6875rem;
+  --md-sys-typescale-label-small-emphasized-line-height: 1rem;
+  --md-sys-typescale-label-small-emphasized-tracking: 0.03125rem;
+  --md-sys-typescale-label-small-emphasized-weight: 700;
+  --md-sys-shape-corner-none: 0px;
+  --md-sys-shape-corner-extra-small: 4px;
+  --md-sys-shape-corner-small: 8px;
+  --md-sys-shape-corner-medium: 12px;
+  --md-sys-shape-corner-large: 16px;
+  --md-sys-shape-corner-large-increased: 20px;
+  --md-sys-shape-corner-extra-large: 28px;
+  --md-sys-shape-corner-extra-large-increased: 32px;
+  --md-sys-shape-corner-extra-extra-large: 48px;
+  --md-sys-shape-corner-full: 9999px;
+  --md-sys-state-hover-state-layer-opacity: 0.08;
+  --md-sys-state-focus-state-layer-opacity: 0.1;
+  --md-sys-state-pressed-state-layer-opacity: 0.1;
+  --md-sys-state-dragged-state-layer-opacity: 0.16;
+  --md-sys-state-disabled-content-opacity: 0.38;
+  --md-sys-state-disabled-container-opacity: 0.12;
+  --md-sys-focus-indicator-thickness: 3px;
+  --md-sys-focus-indicator-offset: 2px;
+  --md-sys-z-sticky: 100;
+  --md-sys-z-scrim: 1000;
+  --md-sys-z-dialog: 1100;
+  --md-sys-z-sheet: 1100;
+  --md-sys-z-menu: 1200;
+  --md-sys-z-snackbar: 1300;
+  --md-sys-z-tooltip: 1400;
+  --md-sys-motion-duration-short-1: 50ms;
+  --md-sys-motion-duration-short-2: 100ms;
+  --md-sys-motion-duration-short-3: 150ms;
+  --md-sys-motion-duration-short-4: 200ms;
+  --md-sys-motion-duration-medium-1: 250ms;
+  --md-sys-motion-duration-medium-2: 300ms;
+  --md-sys-motion-duration-medium-3: 350ms;
+  --md-sys-motion-duration-medium-4: 400ms;
+  --md-sys-motion-duration-long-1: 450ms;
+  --md-sys-motion-duration-long-2: 500ms;
+  --md-sys-motion-duration-long-3: 550ms;
+  --md-sys-motion-duration-long-4: 600ms;
+  --md-sys-motion-duration-extra-long-1: 700ms;
+  --md-sys-motion-duration-extra-long-2: 800ms;
+  --md-sys-motion-duration-extra-long-3: 900ms;
+  --md-sys-motion-duration-extra-long-4: 1000ms;
+  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
+  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+}
+
+:root,
+[data-theme] {
+  --md-sys-elevation-level-0: none;
+  --md-sys-elevation-level-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
+  --md-sys-elevation-level-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
+  --md-sys-elevation-level-3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
+  --md-sys-elevation-level-4: 0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
+  --md-sys-elevation-level-5: 0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
+}
+
+:root,
+[data-motion="expressive"] {
+  --md-sys-motion-spring-spatial-fast-easing: linear(0, 0.0292, 0.1046, 0.2099, 0.3314, 0.458, 0.5814, 0.6955, 0.7966, 0.8823, 0.952, 1.006, 1.0455, 1.072, 1.0876, 1.0942, 1.0938, 1.0883, 1.0794, 1.0684, 1.0565, 1.0446, 1.0333, 1.0232, 1.0144, 1.0072, 1.0014, 0.9971, 0.9941, 0.9922, 0.9912, 0.991, 0.9914, 0.9921, 0.9931, 0.9942, 0.9953, 0.9964, 0.9974, 0.9983, 1);
+  --md-sys-motion-spring-spatial-fast-duration: 360ms;
+  --md-sys-motion-spring-spatial-default-easing: linear(0, 0.0205, 0.073, 0.1462, 0.2313, 0.3214, 0.4117, 0.4986, 0.5797, 0.6535, 0.7193, 0.7769, 0.8264, 0.8683, 0.9031, 0.9316, 0.9544, 0.9724, 0.9862, 0.9966, 1.004, 1.0092, 1.0125, 1.0143, 1.0151, 1.0151, 1.0144, 1.0134, 1.0122, 1.0109, 1.0095, 1.0081, 1.0069, 1.0057, 1.0047, 1.0037, 1.0029, 1.0022, 1.0017, 1.0012, 1);
+  --md-sys-motion-spring-spatial-default-duration: 440ms;
+  --md-sys-motion-spring-spatial-slow-easing: linear(0, 0.0201, 0.0716, 0.1436, 0.2275, 0.3166, 0.406, 0.4923, 0.573, 0.6467, 0.7127, 0.7706, 0.8205, 0.8629, 0.8983, 0.9274, 0.9509, 0.9695, 0.9838, 0.9947, 1.0027, 1.0082, 1.0119, 1.014, 1.015, 1.0151, 1.0147, 1.0138, 1.0126, 1.0113, 1.0099, 1.0086, 1.0073, 1.0061, 1.005, 1.0041, 1.0032, 1.0025, 1.0019, 1.0014, 1);
+  --md-sys-motion-spring-spatial-slow-duration: 600ms;
+  --md-sys-motion-spring-effects-fast-easing: linear(0, 0.0229, 0.079, 0.1535, 0.2366, 0.3214, 0.4037, 0.4809, 0.5517, 0.6153, 0.6718, 0.7214, 0.7645, 0.8016, 0.8335, 0.8606, 0.8837, 0.9031, 0.9195, 0.9333, 0.9448, 0.9544, 0.9624, 0.969, 0.9745, 0.979, 0.9828, 0.9859, 0.9885, 0.9906, 0.9923, 0.9937, 0.9949, 0.9958, 0.9966, 0.9972, 0.9977, 0.9982, 0.9985, 0.9988, 1);
+  --md-sys-motion-spring-effects-fast-duration: 150ms;
+  --md-sys-motion-spring-effects-default-easing: linear(0, 0.0246, 0.0842, 0.1628, 0.2495, 0.3374, 0.4219, 0.5005, 0.5719, 0.6356, 0.6916, 0.7402, 0.7822, 0.8181, 0.8486, 0.8743, 0.896, 0.9141, 0.9292, 0.9418, 0.9523, 0.9609, 0.968, 0.9739, 0.9787, 0.9826, 0.9859, 0.9885, 0.9907, 0.9924, 0.9939, 0.995, 0.996, 0.9968, 0.9974, 0.9979, 0.9983, 0.9986, 0.9989, 0.9991, 1);
+  --md-sys-motion-spring-effects-default-duration: 240ms;
+  --md-sys-motion-spring-effects-slow-easing: linear(0, 0.0233, 0.0803, 0.1558, 0.2398, 0.3253, 0.4082, 0.4858, 0.5567, 0.6204, 0.6768, 0.7261, 0.7689, 0.8058, 0.8373, 0.8641, 0.8868, 0.906, 0.922, 0.9355, 0.9467, 0.9561, 0.9638, 0.9703, 0.9756, 0.98, 0.9836, 0.9866, 0.989, 0.9911, 0.9927, 0.9941, 0.9952, 0.9961, 0.9968, 0.9974, 0.9979, 0.9983, 0.9986, 0.9989, 1);
+  --md-sys-motion-spring-effects-slow-duration: 330ms;
+}
+
+[data-motion="standard"] {
+  --md-sys-motion-spring-spatial-fast-easing: linear(0, 0.0203, 0.0716, 0.1419, 0.2224, 0.3068, 0.3906, 0.4708, 0.5455, 0.6136, 0.6746, 0.7284, 0.7754, 0.8158, 0.8503, 0.8795, 0.9039, 0.9241, 0.9407, 0.9543, 0.9653, 0.974, 0.981, 0.9864, 0.9906, 0.9939, 0.9963, 0.9981, 0.9993, 1.0002, 1.0008, 1.0012, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.001, 1);
+  --md-sys-motion-spring-spatial-fast-duration: 230ms;
+  --md-sys-motion-spring-spatial-default-easing: linear(0, 0.0197, 0.0696, 0.1382, 0.2171, 0.3, 0.3826, 0.462, 0.5362, 0.6041, 0.6652, 0.7193, 0.7667, 0.8078, 0.843, 0.8728, 0.898, 0.9189, 0.9362, 0.9504, 0.962, 0.9713, 0.9787, 0.9845, 0.9891, 0.9927, 0.9953, 0.9973, 0.9988, 0.9999, 1.0006, 1.0011, 1.0013, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1);
+  --md-sys-motion-spring-spatial-default-duration: 320ms;
+  --md-sys-motion-spring-spatial-slow-easing: linear(0, 0.0198, 0.0699, 0.1387, 0.2178, 0.301, 0.3838, 0.4633, 0.5376, 0.6055, 0.6666, 0.7207, 0.768, 0.809, 0.8441, 0.8738, 0.8989, 0.9197, 0.9369, 0.951, 0.9625, 0.9717, 0.979, 0.9848, 0.9894, 0.9928, 0.9955, 0.9975, 0.9989, 0.9999, 1.0006, 1.0011, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1);
+  --md-sys-motion-spring-spatial-slow-duration: 490ms;
+  --md-sys-motion-spring-effects-fast-easing: linear(0, 0.0229, 0.079, 0.1535, 0.2366, 0.3214, 0.4037, 0.4809, 0.5517, 0.6153, 0.6718, 0.7214, 0.7645, 0.8016, 0.8335, 0.8606, 0.8837, 0.9031, 0.9195, 0.9333, 0.9448, 0.9544, 0.9624, 0.969, 0.9745, 0.979, 0.9828, 0.9859, 0.9885, 0.9906, 0.9923, 0.9937, 0.9949, 0.9958, 0.9966, 0.9972, 0.9977, 0.9982, 0.9985, 0.9988, 1);
+  --md-sys-motion-spring-effects-fast-duration: 150ms;
+  --md-sys-motion-spring-effects-default-easing: linear(0, 0.0246, 0.0842, 0.1628, 0.2495, 0.3374, 0.4219, 0.5005, 0.5719, 0.6356, 0.6916, 0.7402, 0.7822, 0.8181, 0.8486, 0.8743, 0.896, 0.9141, 0.9292, 0.9418, 0.9523, 0.9609, 0.968, 0.9739, 0.9787, 0.9826, 0.9859, 0.9885, 0.9907, 0.9924, 0.9939, 0.995, 0.996, 0.9968, 0.9974, 0.9979, 0.9983, 0.9986, 0.9989, 0.9991, 1);
+  --md-sys-motion-spring-effects-default-duration: 240ms;
+  --md-sys-motion-spring-effects-slow-easing: linear(0, 0.0233, 0.0803, 0.1558, 0.2398, 0.3253, 0.4082, 0.4858, 0.5567, 0.6204, 0.6768, 0.7261, 0.7689, 0.8058, 0.8373, 0.8641, 0.8868, 0.906, 0.922, 0.9355, 0.9467, 0.9561, 0.9638, 0.9703, 0.9756, 0.98, 0.9836, 0.9866, 0.989, 0.9911, 0.9927, 0.9941, 0.9952, 0.9961, 0.9968, 0.9974, 0.9979, 0.9983, 0.9986, 0.9989, 1);
+  --md-sys-motion-spring-effects-slow-duration: 330ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+:root,
+[data-motion] {
+  --md-sys-motion-spring-spatial-fast-easing: linear(0, 0.0203, 0.0716, 0.1419, 0.2224, 0.3068, 0.3906, 0.4708, 0.5455, 0.6136, 0.6746, 0.7284, 0.7754, 0.8158, 0.8503, 0.8795, 0.9039, 0.9241, 0.9407, 0.9543, 0.9653, 0.974, 0.981, 0.9864, 0.9906, 0.9939, 0.9963, 0.9981, 0.9993, 1.0002, 1.0008, 1.0012, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.001, 1);
+  --md-sys-motion-spring-spatial-fast-duration: 0ms;
+  --md-sys-motion-spring-spatial-default-easing: linear(0, 0.0197, 0.0696, 0.1382, 0.2171, 0.3, 0.3826, 0.462, 0.5362, 0.6041, 0.6652, 0.7193, 0.7667, 0.8078, 0.843, 0.8728, 0.898, 0.9189, 0.9362, 0.9504, 0.962, 0.9713, 0.9787, 0.9845, 0.9891, 0.9927, 0.9953, 0.9973, 0.9988, 0.9999, 1.0006, 1.0011, 1.0013, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1);
+  --md-sys-motion-spring-spatial-default-duration: 0ms;
+  --md-sys-motion-spring-spatial-slow-easing: linear(0, 0.0198, 0.0699, 0.1387, 0.2178, 0.301, 0.3838, 0.4633, 0.5376, 0.6055, 0.6666, 0.7207, 0.768, 0.809, 0.8441, 0.8738, 0.8989, 0.9197, 0.9369, 0.951, 0.9625, 0.9717, 0.979, 0.9848, 0.9894, 0.9928, 0.9955, 0.9975, 0.9989, 0.9999, 1.0006, 1.0011, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1);
+  --md-sys-motion-spring-spatial-slow-duration: 0ms;
+  --md-sys-motion-spring-effects-fast-easing: linear(0, 0.0229, 0.079, 0.1535, 0.2366, 0.3214, 0.4037, 0.4809, 0.5517, 0.6153, 0.6718, 0.7214, 0.7645, 0.8016, 0.8335, 0.8606, 0.8837, 0.9031, 0.9195, 0.9333, 0.9448, 0.9544, 0.9624, 0.969, 0.9745, 0.979, 0.9828, 0.9859, 0.9885, 0.9906, 0.9923, 0.9937, 0.9949, 0.9958, 0.9966, 0.9972, 0.9977, 0.9982, 0.9985, 0.9988, 1);
+  --md-sys-motion-spring-effects-fast-duration: 150ms;
+  --md-sys-motion-spring-effects-default-easing: linear(0, 0.0246, 0.0842, 0.1628, 0.2495, 0.3374, 0.4219, 0.5005, 0.5719, 0.6356, 0.6916, 0.7402, 0.7822, 0.8181, 0.8486, 0.8743, 0.896, 0.9141, 0.9292, 0.9418, 0.9523, 0.9609, 0.968, 0.9739, 0.9787, 0.9826, 0.9859, 0.9885, 0.9907, 0.9924, 0.9939, 0.995, 0.996, 0.9968, 0.9974, 0.9979, 0.9983, 0.9986, 0.9989, 0.9991, 1);
+  --md-sys-motion-spring-effects-default-duration: 240ms;
+  --md-sys-motion-spring-effects-slow-easing: linear(0, 0.0233, 0.0803, 0.1558, 0.2398, 0.3253, 0.4082, 0.4858, 0.5567, 0.6204, 0.6768, 0.7261, 0.7689, 0.8058, 0.8373, 0.8641, 0.8868, 0.906, 0.922, 0.9355, 0.9467, 0.9561, 0.9638, 0.9703, 0.9756, 0.98, 0.9836, 0.9866, 0.989, 0.9911, 0.9927, 0.9941, 0.9952, 0.9961, 0.9968, 0.9974, 0.9979, 0.9983, 0.9986, 0.9989, 1);
+  --md-sys-motion-spring-effects-slow-duration: 330ms;
+}
+}
+
+:root,
+[data-density="0"] {
+  --md-sys-density: 0;
+}
+
+[data-density="-1"] {
+  --md-sys-density: -1;
+}
+
+[data-density="-2"] {
+  --md-sys-density: -2;
+}
+
+[data-density="-3"] {
+  --md-sys-density: -3;
+}

package/dist/styles/styles.css

@@ -0,0 +1,15 @@
+/*
+ * @windmorph/react — Tailwind CSS v4 entry.
+ *
+ *   @import "tailwindcss";
+ *   @import "@windmorph/react/styles.css";
+ */
+
+@import './generated/tokens.css';
+@import './generated/themes.css';
+@import './generated/theme.css';
+@import './generated/components.css';
+@import './utilities.css';
+
+/* Scan the library's compiled components for the classes they use. */
+@source '../';

package/dist/styles/utilities.css

@@ -0,0 +1,283 @@
+/*
+ * Interaction utilities. State layers and ripples are painted as background layers
+ * on the element itself, so they follow its border-radius and never depend on the
+ * element's position, overflow or transform (architecture §10).
+ */
+
+@property --m3-state-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --m3-ripple-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --m3-ripple-radius {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+/* The ripple centre travels from the press point to the middle while it grows. */
+@property --m3-ripple-x {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 50%;
+}
+
+@property --m3-ripple-y {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 50%;
+}
+
+/*
+ * The navigation rail's collapsed width. Its icons sit on the line through the middle of
+ * the collapsed rail in both states, so the rail derives every inset from it. Registered
+ * so it inherits and resolves to px wherever it's read.
+ */
+@property --m3-rail-collapsed-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 96px;
+}
+
+/*
+ * A carousel item's mask corner. Registered so a pressed item's corners animate (the mask
+ * is clipped with `clip-path`, which reads it). At rest it takes the component token
+ * `--md-comp-carousel-item-container-shape`, so the token must be a length; anything else
+ * falls back to the initial 28px.
+ */
+@property --m3-carousel-item-corner {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 28px;
+}
+
+/*
+ * A search view's expansion, 0 (the collapsed bar's bounds) to 1 (expanded). Registered so
+ * it animates as a number on the M3 springs; the view lerps its geometry from it, as Compose
+ * lerps the search bar's layout from its state's progress.
+ */
+@property --m3-search-progress {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
+/* `dark:` follows `data-mode`, including `system`. */
+@custom-variant dark {
+  &:where([data-mode='dark'], [data-mode='dark'] *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where([data-mode='system'], [data-mode='system'] *) {
+      @slot;
+    }
+  }
+}
+
+/*
+ * `control-checked:` styles a selection control's drawing (a checkbox's box, a radio's ring, a
+ * switch's track and thumb) while its `group/control` ancestor is checked or indeterminate
+ * (`data-checked`, `data-indeterminate`). A custom variant sorts after the `group-data-*` ones,
+ * so the checked colours win over hovered, focused, pressed and invalid ones at equal
+ * specificity, and a state that must beat them is stacked with it (`group-data-disabled/control:control-checked:`).
+ */
+@custom-variant control-checked {
+  &:is(:where(.group\/control):is([data-checked], [data-indeterminate]) *) {
+    @slot;
+  }
+}
+
+/* `motion-standard:` applies under the standard motion scheme or reduced motion. */
+@custom-variant motion-standard {
+  &:where([data-motion='standard'], [data-motion='standard'] *) {
+    @slot;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    @slot;
+  }
+}
+
+/*
+ * M3 state layer + ripple. The layer colour defaults to the element's content colour
+ * (`currentColor`); override it with `--m3-state-layer-color`. Pair with
+ * `useM3Interaction`, which sets the `data-*` attributes and the ripple origin.
+ * `data-menu-open` (set by `MenuTrigger`) adds a persistent pressed layer.
+ *
+ * The ripple follows Compose's `RippleAnimation`: on press it fades in over 75ms while its
+ * radius grows from `--m3-ripple-start` (30% of the longer side) to `--m3-ripple-size` over
+ * 225ms (fast-out-slow-in) and its centre moves from the press point to the middle. It is
+ * driven by `data-rippling`, which outlasts a quick tap until the growth is done, so the
+ * ripple always reaches the edges; then it fades out over 150ms and resets unseen.
+ */
+@utility state-layer {
+  --m3-state-opacity: 0;
+  --m3-ripple-opacity: 0;
+  --m3-ripple-radius: var(--m3-ripple-start, 0px);
+  --m3-ripple-x: var(--m3-ripple-origin-x, 50%);
+  --m3-ripple-y: var(--m3-ripple-origin-y, 50%);
+  background-image:
+    radial-gradient(
+      circle at var(--m3-ripple-x) var(--m3-ripple-y),
+      color-mix(
+          in srgb,
+          var(--m3-state-layer-color, currentColor) calc(var(--m3-ripple-opacity) * 100%),
+          transparent
+        )
+        var(--m3-ripple-radius),
+      transparent var(--m3-ripple-radius)
+    ),
+    linear-gradient(
+      color-mix(
+        in srgb,
+        var(--m3-state-layer-color, currentColor)
+          calc((var(--m3-state-opacity) + var(--m3-open-opacity, 0)) * 100%),
+        transparent
+      ),
+      color-mix(
+        in srgb,
+        var(--m3-state-layer-color, currentColor)
+          calc((var(--m3-state-opacity) + var(--m3-open-opacity, 0)) * 100%),
+        transparent
+      )
+    );
+  /* After the ripple: fade it out, then reset its radius and centre once it is invisible. */
+  /* Components append their own transitions through the --m3-transition-* lists. */
+  transition-property:
+    --m3-state-opacity, --m3-ripple-opacity, --m3-ripple-radius, --m3-ripple-x, --m3-ripple-y,
+    var(--m3-transition-property, --m3-none);
+  transition-duration:
+    var(--md-sys-motion-spring-effects-fast-duration), 150ms, 0s, 0s, 0s,
+    var(--m3-transition-duration, 0s);
+  transition-delay: 0s, 0s, 150ms, 150ms, 150ms, var(--m3-transition-delay, 0s);
+  transition-timing-function:
+    var(--md-sys-motion-spring-effects-fast-easing), linear, linear, linear, linear,
+    var(--m3-transition-easing, linear);
+
+  &[data-hovered] {
+    --m3-state-opacity: var(--md-sys-state-hover-state-layer-opacity);
+  }
+  &[data-focus-visible] {
+    --m3-state-opacity: var(--md-sys-state-focus-state-layer-opacity);
+  }
+  &[data-dragged] {
+    --m3-state-opacity: var(--md-sys-state-dragged-state-layer-opacity);
+  }
+  /*
+   * M3: while its menu is open, a trigger (a button, or a menu item whose submenu is open)
+   * keeps a pressed layer, added to its hover or focus layer.
+   */
+  &[data-menu-open] {
+    --m3-open-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+  }
+  &[data-rippling] {
+    --m3-ripple-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+    --m3-ripple-radius: var(--m3-ripple-size, 0px);
+    --m3-ripple-x: var(--m3-ripple-center-x, 50%);
+    --m3-ripple-y: var(--m3-ripple-center-y, 50%);
+    transition-duration:
+      var(--md-sys-motion-spring-effects-fast-duration), 75ms, 225ms, 225ms, 225ms,
+      var(--m3-transition-duration, 0s);
+    transition-delay: 0s, 0s, 0s, 0s, 0s, var(--m3-transition-delay, 0s);
+    transition-timing-function:
+      var(--md-sys-motion-spring-effects-fast-easing), linear, cubic-bezier(0.4, 0, 0.2, 1), linear,
+      linear, var(--m3-transition-easing, linear);
+  }
+  &[data-disabled] {
+    --m3-state-opacity: 0;
+    --m3-open-opacity: 0;
+    --m3-ripple-opacity: 0;
+  }
+  /* Reduced motion: the ripple appears at full size where it ends, with no growth or travel. */
+  @media (prefers-reduced-motion: reduce) {
+    &[data-rippling] {
+      transition-duration:
+        var(--md-sys-motion-spring-effects-fast-duration), 75ms, 0s, 0s, 0s,
+        var(--m3-transition-duration, 0s);
+    }
+  }
+}
+
+/*
+ * Transitions for an interactive container: corner radius (the press / selection
+ * morph) plus colours, elevation, outline and flex-basis, appended to the state layer's own.
+ * Corners move on the fast spatial spring, which bounces in the expressive scheme: the
+ * spec drives "rounded corners" with spatial springs and all component motion with the
+ * fast speeds (2026-10-13). A press that starts while the last morph is still running
+ * (`data-rapid-press`, set by `useM3Interaction`) uses the fast effects spring instead,
+ * the web's modified curve that keeps rapid clicks from resonating. Under reduced motion the
+ * corners snap to their new shape.
+ *
+ * A component whose morph must not bounce (Compose's `DefaultEffects` "to prevent any
+ * bounce": icon buttons, non-toggle buttons, split buttons) sets `--m3-shape-spring-duration`
+ * and `--m3-shape-spring-easing` to another spring (2026-10-15); rapid presses and reduced
+ * motion still override it.
+ */
+@utility container-motion {
+  --m3-shape-duration: var(
+    --m3-shape-spring-duration,
+    var(--md-sys-motion-spring-spatial-fast-duration)
+  );
+  --m3-shape-easing: var(--m3-shape-spring-easing, var(--md-sys-motion-spring-spatial-fast-easing));
+  /* flex-basis animates a button group's press-to-expand on the fast spatial spring. */
+  --m3-transition-property:
+    border-radius, background-color, color, box-shadow, border-color, flex-basis;
+  --m3-transition-duration:
+    var(--m3-shape-duration), var(--md-sys-motion-spring-effects-fast-duration),
+    var(--md-sys-motion-spring-effects-fast-duration),
+    var(--md-sys-motion-spring-effects-fast-duration),
+    var(--md-sys-motion-spring-effects-fast-duration),
+    var(--md-sys-motion-spring-spatial-fast-duration);
+  --m3-transition-easing:
+    var(--m3-shape-easing), var(--md-sys-motion-spring-effects-fast-easing),
+    var(--md-sys-motion-spring-effects-fast-easing),
+    var(--md-sys-motion-spring-effects-fast-easing),
+    var(--md-sys-motion-spring-effects-fast-easing), var(--md-sys-motion-spring-spatial-fast-easing);
+  --m3-transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
+  &[data-rapid-press] {
+    --m3-shape-duration: var(--md-sys-motion-spring-effects-fast-duration);
+    --m3-shape-easing: var(--md-sys-motion-spring-effects-fast-easing);
+  }
+  /* Reduced motion: the corners snap; colours and elevation still fade (2026-10-13). */
+  @media (prefers-reduced-motion: reduce) {
+    &,
+    &[data-rapid-press] {
+      --m3-shape-duration: 0s;
+    }
+  }
+}
+
+/* M3 focus indicator: an outline, so clipping ancestors and `overflow-hidden` never hide it. */
+@utility focus-ring {
+  outline: none;
+  &[data-focus-visible] {
+    outline: var(--md-sys-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+    outline-offset: var(--md-sys-focus-indicator-offset);
+  }
+}
+
+/* Same indicator drawn inside the element, for full-bleed items such as list rows. */
+@utility focus-ring-inset {
+  outline: none;
+  &[data-focus-visible] {
+    outline: var(--md-sys-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+    outline-offset: calc(var(--md-sys-focus-indicator-thickness) * -1);
+  }
+}
+
+/*
+ * The outermost box of a menu or tooltip, which React Aria places with inline `position`
+ * and insets, and which takes the consumer's `className`. Unlayered, this rule beats any
+ * consumer inset utility (Tailwind's are layered), while React Aria's inline insets beat
+ * it: a consumer `bottom-4` can't combine with React Aria's `top` to stretch the box, or
+ * move the surface off its anchor (architecture §10).
+ */
+[data-overlay-placement] {
+  inset: auto;
+}