@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/css/tokens.css

@@ -0,0 +1,452 @@
+/* css/tokens.css */
+/* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
+:root {
+  /* spencergabor.com elastic curves */
+  --mk-ease-elastic: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
+  --mk-ease-elastic-hover: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
+
+  /* Stepbro curves. The signature is a multi-point path: CSS gets Stepbro's own linear() sampling of it. */
+  --mk-ease-signature: linear(0 0%, .017 2.5%, .037 5%, .061 7.5%, .091 10%, .13 12.5%, .184 15%, .275 17.5%, .562 20%, .733 22.5%, .803 25%, .848 27.5%, .88 30%, .902 32.5%, .942 40%, .97 50%, .985 60%, .993 70%, .998 80%, 1 90%, 1 100%);
+  /* Stepbro's backdrop tint uses the same curve. */
+  --mk-ease-tint: var(--mk-ease-signature);
+  --mk-ease-flow: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --mk-ease-close: cubic-bezier(0.56, 0.27, 0, 1);
+  --mk-ease-blur-away: cubic-bezier(0.37, 0.35, 0, 1);
+  --mk-ease-nav-radius: cubic-bezier(0.38, 0.49, 0, 2);
+  --mk-ease-nav-move: cubic-bezier(0.38, 0.49, 0, 1.2);
+  --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
+  --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
+  --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Dousan Miao / Siena Film Foundation curves */
+  --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
+  --mk-ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
+  --mk-ease-siena: cubic-bezier(0.19, 1, 0.22, 1);
+  --mk-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  /* Dousan's springs (Motion 400/10 press, 260/18 success), sampled by springLinear(); a test keeps them in sync. */
+  --mk-ease-press: linear(0, 0.1957, 0.6333, 1.0817, 1.3717, 1.4412, 1.3274, 1.1249, 0.934, 0.8221, 0.808, 0.8691, 0.9612, 1.0413, 1.0833, 1.0824, 1.0513, 1.01, 0.9769, 0.9618, 0.9651, 0.9804, 0.9986, 1.0121, 1.0173, 1.0146, 1.0072, 0.9993, 0.9939, 0.9923, 0.994, 0.9974, 1.0008, 1.003, 1.0034, 1.0024, 1.0008, 0.9994, 0.9986, 0.9985, 1);
+  --mk-dur-press: 1.346s;
+  --mk-ease-success: linear(0, 0.0437, 0.1533, 0.3004, 0.4617, 0.6197, 0.7624, 0.8825, 0.9767, 1.0451, 1.0895, 1.1133, 1.1208, 1.1161, 1.1032, 1.0856, 1.0662, 1.047, 1.0296, 1.0149, 1.0034, 0.9949, 0.9894, 0.9864, 0.9854, 0.9859, 0.9874, 0.9895, 0.9919, 0.9942, 0.9963, 0.9981, 0.9995, 1.0006, 1.0012, 1.0016, 1.0018, 1.0017, 1.0015, 1.0013, 1);
+  --mk-dur-success: 0.779s;
+  --mk-dur-fast: 0.25s;
+  --mk-dur: 0.45s;
+  --mk-dur-slow: 0.7s;
+
+  /* Layered shadow */
+  --mk-shadow: 0 9px 21px rgb(0 0 0 / 0.1), 0 38px 38px rgb(0 0 0 / 0.09), 0 85px 51px rgb(0 0 0 / 0.05);
+  --mk-shadow-soft: 0 9px 21px rgb(0 0 0 / 0.05), 0 38px 38px rgb(0 0 0 / 0.045), 0 85px 51px rgb(0 0 0 / 0.025);
+
+  /* Shape: Stepbro's large capsules */
+  --mk-radius-card: 1rem;
+  --mk-radius-xs: 8px;
+  --mk-radius-sm: 12px;
+  --mk-radius-md: 16px;
+  --mk-radius-lg: 24px;
+  --mk-radius-xl: 32px;
+  --mk-radius-2xl: 40px;
+  --mk-radius-3xl: 48px;
+  --mk-radius-4xl: 64px;
+  --mk-radius-full: 999px;
+  --mk-radius-bubble: var(--mk-radius-xl);
+  --mk-radius-dialog: var(--mk-radius-2xl);
+  --mk-radius-chat: var(--mk-radius-3xl);
+  --mk-radius-dock: var(--mk-radius-4xl);
+
+  /* Spacing, 4 px steps. Stepbro's navigation breakpoint is 680px (media queries use it literally). */
+  --mk-space-1: 4px;
+  --mk-space-2: 8px;
+  --mk-space-3: 12px;
+  --mk-space-4: 16px;
+  --mk-space-5: 20px;
+  --mk-space-6: 24px;
+  --mk-space-7: 28px;
+  --mk-space-8: 32px;
+  --mk-space-9: 36px;
+  --mk-space-10: 40px;
+  --mk-space-11: 44px;
+  --mk-space-12: 48px;
+  --mk-space-13: 52px;
+  --mk-space-14: 56px;
+  --mk-space-15: 60px;
+  --mk-space-16: 64px;
+  --mk-breakpoint: 680px;
+
+  /* Type: DM Sans, Geist Mono, Material Symbols Rounded (css/fonts.css loads them). */
+  --mk-font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --mk-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  /* Material 3 type scale with Stepbro's values (its bundle writes weights as "400px"; here they are numbers). */
+  --md-sys-typescale-display-large-font: var(--mk-font);
+  --md-sys-typescale-display-large-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-weight: 400;
+  --md-sys-typescale-display-large-tracking: -0.25px;
+  --md-sys-typescale-display-medium-font: var(--mk-font);
+  --md-sys-typescale-display-medium-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-weight: 400;
+  --md-sys-typescale-display-medium-tracking: 0px;
+  --md-sys-typescale-display-small-font: var(--mk-font);
+  --md-sys-typescale-display-small-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-weight: 400;
+  --md-sys-typescale-display-small-tracking: 0px;
+  --md-sys-typescale-headline-large-font: var(--mk-font);
+  --md-sys-typescale-headline-large-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-weight: 400;
+  --md-sys-typescale-headline-large-tracking: 0px;
+  --md-sys-typescale-headline-medium-font: var(--mk-font);
+  --md-sys-typescale-headline-medium-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-medium-weight: 400;
+  --md-sys-typescale-headline-medium-tracking: 0px;
+  --md-sys-typescale-headline-small-font: var(--mk-font);
+  --md-sys-typescale-headline-small-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+  --md-sys-typescale-headline-small-weight: 400;
+  --md-sys-typescale-headline-small-tracking: 0px;
+  --md-sys-typescale-title-large-font: var(--mk-font);
+  --md-sys-typescale-title-large-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-weight: 400;
+  --md-sys-typescale-title-large-tracking: 0px;
+  --md-sys-typescale-title-medium-font: var(--mk-font);
+  --md-sys-typescale-title-medium-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-weight: 500;
+  --md-sys-typescale-title-medium-tracking: 0.15px;
+  --md-sys-typescale-title-small-font: var(--mk-font);
+  --md-sys-typescale-title-small-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-weight: 500;
+  --md-sys-typescale-title-small-tracking: 0.1px;
+  --md-sys-typescale-body-large-font: var(--mk-font);
+  --md-sys-typescale-body-large-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-large-weight: 400;
+  --md-sys-typescale-body-large-tracking: 0.5px;
+  --md-sys-typescale-body-medium-font: var(--mk-font);
+  --md-sys-typescale-body-medium-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-weight: 400;
+  --md-sys-typescale-body-medium-tracking: 0.25px;
+  --md-sys-typescale-body-small-font: var(--mk-font);
+  --md-sys-typescale-body-small-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-weight: 400;
+  --md-sys-typescale-body-small-tracking: 0.4px;
+  --md-sys-typescale-label-large-font: var(--mk-font);
+  --md-sys-typescale-label-large-size: 14px;
+  --md-sys-typescale-label-large-line-height: 20px;
+  --md-sys-typescale-label-large-weight: 500;
+  --md-sys-typescale-label-large-tracking: 0.1px;
+  --md-sys-typescale-label-medium-font: var(--mk-font);
+  --md-sys-typescale-label-medium-size: 12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-weight: 500;
+  --md-sys-typescale-label-medium-tracking: 0.5px;
+  --md-sys-typescale-label-small-font: var(--mk-font);
+  --md-sys-typescale-label-small-size: 11px;
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-weight: 500;
+  --md-sys-typescale-label-small-tracking: 0.5px;
+}
+
+/*
+ * Semantic colour layer over the Material 3 roles. Declared on every themed
+ * element too, so a nested [data-mk-theme] recomputes it from its own roles.
+ */
+:root,
+[data-mk-theme] {
+  --mk-bg: var(--md-sys-color-background);
+  --mk-surface: var(--md-sys-color-surface);
+  --mk-surface-1: var(--md-sys-color-surface-container-lowest);
+  --mk-surface-2: var(--md-sys-color-surface-container-low);
+  --mk-surface-3: var(--md-sys-color-surface-container);
+  --mk-surface-4: var(--md-sys-color-surface-container-high);
+  --mk-surface-5: var(--md-sys-color-surface-container-highest);
+  --mk-text: var(--md-sys-color-on-surface);
+  --mk-muted: var(--md-sys-color-on-surface-variant);
+  --mk-accent: var(--md-sys-color-primary);
+  --mk-on-accent: var(--md-sys-color-on-primary);
+  --mk-accent-soft: var(--md-sys-color-primary-container);
+  --mk-on-accent-soft: var(--md-sys-color-on-primary-container);
+  --mk-secondary-soft: var(--md-sys-color-secondary-container);
+  --mk-on-secondary-soft: var(--md-sys-color-on-secondary-container);
+  --mk-outline: var(--md-sys-color-outline);
+  --mk-outline-soft: var(--md-sys-color-outline-variant);
+  --mk-error: var(--md-sys-color-error);
+  --mk-on-error: var(--md-sys-color-on-error);
+  --mk-error-soft: var(--md-sys-color-error-container);
+  --mk-on-error-soft: var(--md-sys-color-on-error-container);
+  --mk-scrim: var(--md-sys-color-scrim);
+  --mk-shadow-color: var(--md-sys-color-shadow);
+}
+
+/* css/default-theme.css */
+/* Default palette (Stepbro "neogreen") with zero specificity: any [data-mk-theme] wins.
+   Generated by scripts/import-themes.mjs; do not edit. */
+:where(:root) {
+  --md-sys-color-background: #f1fded;
+  --md-sys-color-on-background: #141e14;
+  --md-sys-color-surface: #f1fded;
+  --md-sys-color-surface-dim: #d2ddce;
+  --md-sys-color-surface-bright: #f1fded;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #ebf7e7;
+  --md-sys-color-surface-container: #e6f1e1;
+  --md-sys-color-surface-container-high: #e0ecdc;
+  --md-sys-color-surface-container-highest: #dae6d6;
+  --md-sys-color-on-surface: #141e14;
+  --md-sys-color-surface-variant: #d5e8d2;
+  --md-sys-color-on-surface-variant: #3b4b3b;
+  --md-sys-color-inverse-surface: #293328;
+  --md-sys-color-inverse-on-surface: #e8f4e4;
+  --md-sys-color-outline: #6b7b69;
+  --md-sys-color-outline-variant: #b9cbb7;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #006e2c;
+  --md-sys-color-primary: #006e2c;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #4dff7e;
+  --md-sys-color-on-primary-container: #00521f;
+  --md-sys-color-inverse-primary: #00e563;
+  --md-sys-color-secondary: #006e2c;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #9afda6;
+  --md-sys-color-on-secondary-container: #005721;
+  --md-sys-color-tertiary: #006972;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #7ef1ff;
+  --md-sys-color-on-tertiary-container: #004f56;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-mk-mode="light"])) {
+    --md-sys-color-background: #0c160d;
+    --md-sys-color-on-background: #dae6d6;
+    --md-sys-color-surface: #0c160d;
+    --md-sys-color-surface-dim: #0c160d;
+    --md-sys-color-surface-bright: #313c31;
+    --md-sys-color-surface-container-lowest: #071008;
+    --md-sys-color-surface-container-low: #141e14;
+    --md-sys-color-surface-container: #182218;
+    --md-sys-color-surface-container-high: #222c22;
+    --md-sys-color-surface-container-highest: #2d372d;
+    --md-sys-color-on-surface: #dae6d6;
+    --md-sys-color-surface-variant: #3b4b3b;
+    --md-sys-color-on-surface-variant: #b9cbb7;
+    --md-sys-color-inverse-surface: #dae6d6;
+    --md-sys-color-inverse-on-surface: #293328;
+    --md-sys-color-outline: #849582;
+    --md-sys-color-outline-variant: #3b4b3b;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #00e563;
+    --md-sys-color-primary: #ffffff;
+    --md-sys-color-on-primary: #003913;
+    --md-sys-color-primary-container: #00f46b;
+    --md-sys-color-on-primary-container: #004a1b;
+    --md-sys-color-inverse-primary: #006e2c;
+    --md-sys-color-secondary: #7adb88;
+    --md-sys-color-on-secondary: #003913;
+    --md-sys-color-secondary-container: #006a2a;
+    --md-sys-color-on-secondary-container: #ffffff;
+    --md-sys-color-tertiary: #ffffff;
+    --md-sys-color-on-tertiary: #00363c;
+    --md-sys-color-tertiary-container: #4be8f9;
+    --md-sys-color-on-tertiary-container: #00474d;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+:where(:root[data-mk-mode="dark"]) {
+  --md-sys-color-background: #0c160d;
+  --md-sys-color-on-background: #dae6d6;
+  --md-sys-color-surface: #0c160d;
+  --md-sys-color-surface-dim: #0c160d;
+  --md-sys-color-surface-bright: #313c31;
+  --md-sys-color-surface-container-lowest: #071008;
+  --md-sys-color-surface-container-low: #141e14;
+  --md-sys-color-surface-container: #182218;
+  --md-sys-color-surface-container-high: #222c22;
+  --md-sys-color-surface-container-highest: #2d372d;
+  --md-sys-color-on-surface: #dae6d6;
+  --md-sys-color-surface-variant: #3b4b3b;
+  --md-sys-color-on-surface-variant: #b9cbb7;
+  --md-sys-color-inverse-surface: #dae6d6;
+  --md-sys-color-inverse-on-surface: #293328;
+  --md-sys-color-outline: #849582;
+  --md-sys-color-outline-variant: #3b4b3b;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #00e563;
+  --md-sys-color-primary: #ffffff;
+  --md-sys-color-on-primary: #003913;
+  --md-sys-color-primary-container: #00f46b;
+  --md-sys-color-on-primary-container: #004a1b;
+  --md-sys-color-inverse-primary: #006e2c;
+  --md-sys-color-secondary: #7adb88;
+  --md-sys-color-on-secondary: #003913;
+  --md-sys-color-secondary-container: #006a2a;
+  --md-sys-color-on-secondary-container: #ffffff;
+  --md-sys-color-tertiary: #ffffff;
+  --md-sys-color-on-tertiary: #00363c;
+  --md-sys-color-tertiary-container: #4be8f9;
+  --md-sys-color-on-tertiary-container: #00474d;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+
+/* css/base.css */
+/* Base helpers: visually hidden text, the type scale as classes, and an app shell. */
+.mk-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Page colours and font from the theme: put it on <body> (or any root). */
+.mk-app {
+  background: var(--mk-bg);
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+  font-size: var(--md-sys-typescale-body-large-size);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+}
+
+.mk-type-display-large {
+  font-family: var(--md-sys-typescale-display-large-font);
+  font-size: var(--md-sys-typescale-display-large-size);
+  line-height: var(--md-sys-typescale-display-large-line-height);
+  font-weight: var(--md-sys-typescale-display-large-weight);
+  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+}
+
+.mk-type-display-medium {
+  font-family: var(--md-sys-typescale-display-medium-font);
+  font-size: var(--md-sys-typescale-display-medium-size);
+  line-height: var(--md-sys-typescale-display-medium-line-height);
+  font-weight: var(--md-sys-typescale-display-medium-weight);
+  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+}
+
+.mk-type-display-small {
+  font-family: var(--md-sys-typescale-display-small-font);
+  font-size: var(--md-sys-typescale-display-small-size);
+  line-height: var(--md-sys-typescale-display-small-line-height);
+  font-weight: var(--md-sys-typescale-display-small-weight);
+  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+}
+
+.mk-type-headline-large {
+  font-family: var(--md-sys-typescale-headline-large-font);
+  font-size: var(--md-sys-typescale-headline-large-size);
+  line-height: var(--md-sys-typescale-headline-large-line-height);
+  font-weight: var(--md-sys-typescale-headline-large-weight);
+  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+}
+
+.mk-type-headline-medium {
+  font-family: var(--md-sys-typescale-headline-medium-font);
+  font-size: var(--md-sys-typescale-headline-medium-size);
+  line-height: var(--md-sys-typescale-headline-medium-line-height);
+  font-weight: var(--md-sys-typescale-headline-medium-weight);
+  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+}
+
+.mk-type-headline-small {
+  font-family: var(--md-sys-typescale-headline-small-font);
+  font-size: var(--md-sys-typescale-headline-small-size);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  font-weight: var(--md-sys-typescale-headline-small-weight);
+  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+}
+
+.mk-type-title-large {
+  font-family: var(--md-sys-typescale-title-large-font);
+  font-size: var(--md-sys-typescale-title-large-size);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  font-weight: var(--md-sys-typescale-title-large-weight);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+}
+
+.mk-type-title-medium {
+  font-family: var(--md-sys-typescale-title-medium-font);
+  font-size: var(--md-sys-typescale-title-medium-size);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  font-weight: var(--md-sys-typescale-title-medium-weight);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+}
+
+.mk-type-title-small {
+  font-family: var(--md-sys-typescale-title-small-font);
+  font-size: var(--md-sys-typescale-title-small-size);
+  line-height: var(--md-sys-typescale-title-small-line-height);
+  font-weight: var(--md-sys-typescale-title-small-weight);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+}
+
+.mk-type-body-large {
+  font-family: var(--md-sys-typescale-body-large-font);
+  font-size: var(--md-sys-typescale-body-large-size);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  font-weight: var(--md-sys-typescale-body-large-weight);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+}
+
+.mk-type-body-medium {
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  font-weight: var(--md-sys-typescale-body-medium-weight);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+}
+
+.mk-type-body-small {
+  font-family: var(--md-sys-typescale-body-small-font);
+  font-size: var(--md-sys-typescale-body-small-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  font-weight: var(--md-sys-typescale-body-small-weight);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+}
+
+.mk-type-label-large {
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+
+.mk-type-label-medium {
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  font-weight: var(--md-sys-typescale-label-medium-weight);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+}
+
+.mk-type-label-small {
+  font-family: var(--md-sys-typescale-label-small-font);
+  font-size: var(--md-sys-typescale-label-small-size);
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  font-weight: var(--md-sys-typescale-label-small-weight);
+  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+}

package/dist/elements/index.d.ts

@@ -0,0 +1,183 @@
+import { I as Instance } from '../types-BkS_raL8.js';
+import { T as ThemePickerInstance, a as ToasterInstance, C as ChatInstance, b as ChatRole, N as NavInstance, c as NavStyle, d as CursorInstance, I as IslandInstance } from '../store-Bqy_obnD.js';
+export { t as toast } from '../store-Bqy_obnD.js';
+import { D as DialogInstance, M as MenuInstance } from '../reveal-WFUWDrei.js';
+import { C as ChatBackgroundInstance, S as StepsInstance } from '../engine-CUr9QijM.js';
+import 'gsap/Flip';
+
+type OptionType = 'string' | 'number' | 'boolean' | 'list' | 'json';
+/** `HTMLElement` in the browser; an empty class during SSR so importing never throws. */
+declare const SafeHTMLElement: typeof HTMLElement;
+declare abstract class MkElement<I extends Instance = Instance> extends SafeHTMLElement {
+    /** Option name (camelCase) → how to read its attribute. */
+    static options: Record<string, OptionType>;
+    static get observedAttributes(): string[];
+    /** The live engine (null while disconnected). */
+    instance: I | null;
+    protected abstract create(options: Record<string, unknown>): I;
+    /** Options read from the attributes now. */
+    get options(): Record<string, unknown>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+}
+/** customElements.define once; later calls with the same name are ignored. */
+declare function defineElement(name: string, ctor: CustomElementConstructor): void;
+
+/**
+ * <mk-theme-picker show-hidden themes="neogreen,pink"></mk-theme-picker>
+ * Emits `mk:theme` on document when a theme is chosen (from setTheme).
+ */
+declare class MkThemePickerElement extends MkElement<ThemePickerInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ThemePickerInstance;
+    select(id: string): void;
+}
+
+/**
+ * <mk-dialog id="crear" heading="Crear proyecto" [description] [shared="id"] [variant="liquid"]
+ *   [placement="anchor|side"] [size="sm|lg|xl"] [float="key"] [no-backdrop] [persistent] [no-drag]>…</mk-dialog>
+ * Any [data-mk-open="crear"] opens it from that button. On connect its children
+ * move into a <dialog class="mk-dialog"> (with `heading`, a header with title and
+ * close button and a body are made for them); on disconnect they move back.
+ */
+declare class MkDialogElement extends MkElement<Instance> {
+    static options: Record<string, OptionType>;
+    dialog: DialogInstance | null;
+    protected create(options: Record<string, unknown>): Instance;
+    open(origin?: HTMLElement | null): void;
+    close(): void;
+    get isOpen(): boolean;
+}
+
+/**
+ * <mk-menu id="opciones" [variant="liquid"] [keep-open]>
+ *   <button data-mk-item data-mk-value="ajustes">Ajustes</button> …
+ * </mk-menu>
+ * Any [data-mk-open="opciones"] opens it from that button; choosing an option
+ * emits `mk:select` (detail.value, detail.item).
+ */
+declare class MkMenuElement extends MkElement<Instance> {
+    static options: Record<string, OptionType>;
+    menu: MenuInstance | null;
+    protected create(options: Record<string, unknown>): Instance;
+    open(origin?: HTMLElement | null): void;
+    close(): void;
+    get isOpen(): boolean;
+}
+
+/**
+ * <mk-toaster dismiss-label="Cerrar"></mk-toaster> — mount once; then call
+ * `toast('Copiado', { origin: button })` from anywhere.
+ */
+declare class MkToasterElement extends MkElement<ToasterInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): {
+        destroy: () => void;
+    };
+}
+
+/** <mk-chat-background energy="0" scale="1"></mk-chat-background> inside any positioned container. */
+declare class MkChatBackgroundElement extends MkElement<ChatBackgroundInstance> {
+    static options: Record<string, OptionType>;
+    static get observedAttributes(): string[];
+    protected create(): ChatBackgroundInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    setEnergy(energy: number): void;
+    busy(on: boolean): void;
+}
+
+/**
+ * <mk-chat placeholder="Escribe un mensaje..." [background] [mic] [animate-existing]>
+ *   (optional) your own [data-mk-part="messages"] / composer markup
+ * </mk-chat>
+ * Empty, it builds the messages list and the composer. Listen to `mk:send`
+ * (detail.text) and answer with `element.reply(text)` after `element.pending()`.
+ */
+declare class MkChatElement extends MkElement<Instance> {
+    static options: Record<string, OptionType>;
+    chat: ChatInstance | null;
+    protected create(options: Record<string, unknown>): Instance;
+    add(role: ChatRole, text: string): HTMLElement | undefined;
+    pending(): void;
+    reply(message: HTMLElement | string): HTMLElement | undefined;
+    setRecording(on: boolean): void;
+}
+
+/**
+ * <mk-nav class="mk-nav mk-nav--bonita" nav-style="bonita" [accent] [reveal] [storage-key="mi-app-nav"]>
+ *   <div class="mk-nav__buttons"><a class="mk-nav__button" href="/">…</a></div>
+ * </mk-nav>
+ * Emits `mk:navigate` (detail: index, value, item, originalEvent) on click.
+ */
+declare class MkNavElement extends MkElement<NavInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): NavInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    select(target: number | string): void;
+    setStyle(style: NavStyle): void;
+}
+
+/**
+ * <mk-steps index="0">
+ *   <mk-chat-background></mk-chat-background>
+ *   <section data-mk-step><h2 data-mk-flow-item>Hola</h2><button data-mk-flow-item data-mk-step-next>Seguir</button></section>
+ *   <section data-mk-step>…</section>
+ * </mk-steps>
+ * Emits `mk:step` (detail: index, previous, step) after each change.
+ */
+declare class MkStepsElement extends MkElement<StepsInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): StepsInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    next(): Promise<void> | undefined;
+    prev(): Promise<void> | undefined;
+    goTo(index: number): Promise<void> | undefined;
+    busy(on: boolean): void;
+}
+
+/**
+ * <mk-cursor></mk-cursor>                                   Dousan's glass chip (once per page)
+ * <mk-cursor variant="dot" text="Scroll" arrows="y"></mk-cursor>  Siena's dot, inside its parent
+ * zone="#hero" picks another zone.
+ */
+declare class MkCursorElement extends MkElement<CursorInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): CursorInstance;
+}
+
+/**
+ * <mk-island [entrance="false|manual"] [close-on-scroll="false"] [close-on-navigate="false"] [focus-on-open="false"]>
+ *   <button class="mk-island__backdrop" data-mk-island-close tabindex="-1" aria-label="Cerrar"></button>
+ *   <div class="mk-island__shell">…header with [data-mk-island-toggle="menu"]…
+ *     <div class="mk-island__content"><div><section data-mk-island-panel="menu">…</section></div></div>
+ *   </div>
+ * </mk-island>
+ * Emits `mk:island` (detail: { active }) when a panel opens or closes.
+ */
+declare class MkIslandElement extends MkElement<IslandInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): IslandInstance;
+    open(name?: string): void;
+    close(): void;
+    ready(): void;
+}
+
+/** Tag name → element class, for every component. */
+declare const ELEMENTS: {
+    readonly 'mk-theme-picker': typeof MkThemePickerElement;
+    readonly 'mk-dialog': typeof MkDialogElement;
+    readonly 'mk-menu': typeof MkMenuElement;
+    readonly 'mk-toaster': typeof MkToasterElement;
+    readonly 'mk-chat-background': typeof MkChatBackgroundElement;
+    readonly 'mk-chat': typeof MkChatElement;
+    readonly 'mk-nav': typeof MkNavElement;
+    readonly 'mk-steps': typeof MkStepsElement;
+    readonly 'mk-cursor': typeof MkCursorElement;
+    readonly 'mk-island': typeof MkIslandElement;
+};
+type ElementName = keyof typeof ELEMENTS;
+/** Register every motion-kit element (or the ones named). Safe to call more than once. */
+declare function defineElements(names?: ElementName[]): void;
+
+export { ELEMENTS, type ElementName, MkChatBackgroundElement, MkChatElement, MkCursorElement, MkDialogElement, MkElement, MkIslandElement, MkMenuElement, MkNavElement, MkStepsElement, MkThemePickerElement, MkToasterElement, type OptionType, SafeHTMLElement, defineElement, defineElements };