@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/core/virtual.ts

@@ -0,0 +1,79 @@
+/*
+ * Windowing (virtual-list), the pure part: the top of each row from their
+ * heights (one fixed height, or measured ones with an estimate for the rest),
+ * the total height, and which rows a scroll position shows. The running sums
+ * are filled lazily from the first changed row, and finding the row at a
+ * position is a binary search over them (about 17 steps for 100 000 rows).
+ */
+
+export interface VirtualRange {
+  /** First row drawn. */
+  start: number;
+  /** One past the last row drawn. */
+  end: number;
+}
+
+export interface VirtualSizes {
+  readonly count: number;
+  get(index: number): number;
+  /** A row's height; true when it changed. */
+  set(index: number, height: number): boolean;
+  /** The top of a row (the sum of the heights before it). */
+  offset(index: number): number;
+  total(): number;
+  /** The row at a vertical position (clamped to the list). */
+  indexAt(y: number): number;
+  /** The rows that cover y … y + height, with `overscan` more on each side. */
+  range(y: number, height: number, overscan?: number): VirtualRange;
+}
+
+export function createSizes(heights: number[]): VirtualSizes {
+  const sizes = heights.map((height) => (Number.isFinite(height) && height > 0 ? height : 0));
+  const count = sizes.length;
+  const sums = new Float64Array(count + 1);
+  // sums[0..valid] are right.
+  let valid = 0;
+  const ensure = (index: number) => {
+    for (let i = valid; i < index; i++) sums[i + 1] = sums[i]! + sizes[i]!;
+    if (index > valid) valid = index;
+  };
+  const indexAt = (y: number) => {
+    if (!count) return 0;
+    ensure(count);
+    let low = 0;
+    let high = count - 1;
+    // The last row whose top is at or above y.
+    while (low < high) {
+      const middle = (low + high + 1) >> 1;
+      if (sums[middle]! <= y) low = middle;
+      else high = middle - 1;
+    }
+    return low;
+  };
+  return {
+    count,
+    get: (index) => sizes[index] ?? 0,
+    set(index, height) {
+      if (index < 0 || index >= count || !Number.isFinite(height) || height < 0 || sizes[index] === height) return false;
+      sizes[index] = height;
+      if (valid > index) valid = index;
+      return true;
+    },
+    offset(index) {
+      const at = Math.max(0, Math.min(count, index));
+      ensure(at);
+      return sums[at]!;
+    },
+    total() {
+      ensure(count);
+      return sums[count]!;
+    },
+    indexAt,
+    range(y, height, overscan = 0) {
+      if (!count) return { start: 0, end: 0 };
+      const start = indexAt(Math.max(0, y));
+      const last = indexAt(Math.max(0, y + Math.max(0, height) - 0.5));
+      return { start: Math.max(0, start - overscan), end: Math.min(count, last + 1 + overscan) };
+    },
+  };
+}

package/src/css/tokens.css

@@ -1,182 +1,186 @@
-/* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
-:root {
-  /* 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);
-
-  /* Motion curves. The signature is a multi-point path sampled as CSS linear(). */
-  --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%);
-  /* 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);
-  /* Glass, sheet and control 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);
-  /* 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: 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. 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; font weights are unitless. */
-  --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);
-}
+/* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
+:root {
+  /* 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);
+
+  /* Motion curves. The signature is a multi-point path sampled as CSS linear(). */
+  --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%);
+  /* 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);
+  /* Glass, sheet and control 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);
+  /* 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: 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. 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; font weights are unitless. */
+  --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);
+  /* Melonmind's inverse glass (popovers, command search, chart tooltips): the text colour at 86 %, blurred, bevelled. */
+  --mk-glass-inverse: color-mix(in srgb, var(--mk-text) 86%, transparent);
+  --mk-on-glass-inverse: var(--mk-bg);
+  --mk-glass-bevel: inset 1px 1px 1px 0 color-mix(in srgb, var(--mk-bg) 30%, transparent), inset -1px -1px 1px 0 color-mix(in srgb, var(--mk-bg) 30%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--mk-shadow-color) 40%, transparent);
+}

package/src/elements/index.ts

@@ -17,6 +17,55 @@ import { MkHoverCardElement } from '../components/hover-card/element';
 import { MkInputOtpElement } from '../components/input-otp/element';
 import { MkCalendarElement } from '../components/calendar/element';
 import { MkSlotPickerElement } from '../components/slot-picker/element';
+import { MkAttachmentElement } from '../components/attachment/element';
+import { MkSkeletonElement } from '../components/skeleton/element';
+import { MkQuestionnaireElement } from '../components/questionnaire/element';
+import { MkCodeBlockElement } from '../components/code-block/element';
+import { MkContextMenuElement } from '../components/context-menu/element';
+import { MkDrawerElement } from '../components/drawer/element';
+import { MkLinkPreviewElement } from '../components/link-preview/element';
+import { MkProgressElement } from '../components/progress/element';
+import { MkRangeSliderElement } from '../components/range-slider/element';
+import { MkChartElement } from '../components/chart/element';
+import { MkCreditCardElement } from '../components/credit-card/element';
+import { MkCommandSearchElement } from '../components/command-search/element';
+import { MkHoldConfirmElement } from '../components/hold-confirm/element';
+import { MkImagePreviewElement } from '../components/image-preview/element';
+import { MkLikeButtonElement } from '../components/like-button/element';
+import { MkNotificationBellElement } from '../components/notification-bell/element';
+import { MkPasswordStrengthElement } from '../components/password-strength/element';
+import { MkScratchCardElement } from '../components/scratch-card/element';
+import { MkStarRatingElement } from '../components/star-rating/element';
+import { MkSwipeActionsElement } from '../components/swipe-actions/element';
+import { MkColorSliderElement } from '../components/color-slider/element';
+import { MkColorAreaElement } from '../components/color-area/element';
+import { MkColorFieldElement } from '../components/color-field/element';
+import { MkColorPickerElement } from '../components/color-picker/element';
+import { MkTimeFieldElement } from '../components/time-field/element';
+import { MkRangeCalendarElement } from '../components/range-calendar/element';
+import { MkDateRangePickerElement } from '../components/date-range-picker/element';
+import { MkTooltipElement } from '../components/tooltip/element';
+import { MkPopoverElement } from '../components/popover/element';
+import { MkLoadingButtonElement } from '../components/loading-button/element';
+import { MkBreadcrumbElement } from '../components/breadcrumb/element';
+import { MkEmptyStateElement } from '../components/empty-state/element';
+import { MkStatCardElement } from '../components/stat-card/element';
+import { MkChartTooltipElement } from '../components/chart-tooltip/element';
+import { MkMultiSelectElement } from '../components/multi-select/element';
+import { MkTagInputElement } from '../components/tag-input/element';
+import { MkDateTimePickerElement } from '../components/date-time-picker/element';
+import { MkFilterBuilderElement } from '../components/filter-builder/element';
+import { MkTimelineElement } from '../components/timeline/element';
+import { MkActivityFeedElement } from '../components/activity-feed/element';
+import { MkTreeViewElement } from '../components/tree-view/element';
+import { MkFileExplorerElement } from '../components/file-explorer/element';
+import { MkJsonViewerElement } from '../components/json-viewer/element';
+import { MkVirtualListElement } from '../components/virtual-list/element';
+import { MkResizablePanelElement } from '../components/resizable-panel/element';
+import { MkSplitViewElement } from '../components/split-view/element';
+import { MkDataTableElement } from '../components/data-table/element';
+import { MkEditableTableElement } from '../components/editable-table/element';
+import { MkRichTextEditorElement } from '../components/rich-text-editor/element';
 // new-component:imports (scripts/new-component.mjs inserts above this line)
 
 export { MkElement, SafeHTMLElement, defineElement, type OptionType } from './base';
@@ -39,6 +88,55 @@ export { MkStudioDockElement, defineStudioDock } from '../components/studio-dock
 export { MkTrailerElement, defineTrailer } from '../components/trailer/element';
 export { MkCalendarElement } from '../components/calendar/element';
 export { MkSlotPickerElement } from '../components/slot-picker/element';
+export { MkAttachmentElement } from '../components/attachment/element';
+export { MkSkeletonElement } from '../components/skeleton/element';
+export { MkQuestionnaireElement } from '../components/questionnaire/element';
+export { MkCodeBlockElement } from '../components/code-block/element';
+export { MkContextMenuElement } from '../components/context-menu/element';
+export { MkDrawerElement } from '../components/drawer/element';
+export { MkLinkPreviewElement } from '../components/link-preview/element';
+export { MkProgressElement } from '../components/progress/element';
+export { MkRangeSliderElement } from '../components/range-slider/element';
+export { MkChartElement } from '../components/chart/element';
+export { MkCreditCardElement } from '../components/credit-card/element';
+export { MkCommandSearchElement } from '../components/command-search/element';
+export { MkHoldConfirmElement } from '../components/hold-confirm/element';
+export { MkImagePreviewElement } from '../components/image-preview/element';
+export { MkLikeButtonElement } from '../components/like-button/element';
+export { MkNotificationBellElement } from '../components/notification-bell/element';
+export { MkPasswordStrengthElement } from '../components/password-strength/element';
+export { MkScratchCardElement } from '../components/scratch-card/element';
+export { MkStarRatingElement } from '../components/star-rating/element';
+export { MkSwipeActionsElement } from '../components/swipe-actions/element';
+export { MkColorSliderElement } from '../components/color-slider/element';
+export { MkColorAreaElement } from '../components/color-area/element';
+export { MkColorFieldElement } from '../components/color-field/element';
+export { MkColorPickerElement } from '../components/color-picker/element';
+export { MkTimeFieldElement } from '../components/time-field/element';
+export { MkRangeCalendarElement } from '../components/range-calendar/element';
+export { MkDateRangePickerElement } from '../components/date-range-picker/element';
+export { MkTooltipElement } from '../components/tooltip/element';
+export { MkPopoverElement } from '../components/popover/element';
+export { MkLoadingButtonElement } from '../components/loading-button/element';
+export { MkBreadcrumbElement } from '../components/breadcrumb/element';
+export { MkEmptyStateElement } from '../components/empty-state/element';
+export { MkStatCardElement } from '../components/stat-card/element';
+export { MkChartTooltipElement } from '../components/chart-tooltip/element';
+export { MkMultiSelectElement } from '../components/multi-select/element';
+export { MkTagInputElement } from '../components/tag-input/element';
+export { MkDateTimePickerElement } from '../components/date-time-picker/element';
+export { MkFilterBuilderElement } from '../components/filter-builder/element';
+export { MkTimelineElement } from '../components/timeline/element';
+export { MkActivityFeedElement } from '../components/activity-feed/element';
+export { MkTreeViewElement } from '../components/tree-view/element';
+export { MkFileExplorerElement } from '../components/file-explorer/element';
+export { MkJsonViewerElement } from '../components/json-viewer/element';
+export { MkVirtualListElement } from '../components/virtual-list/element';
+export { MkResizablePanelElement } from '../components/resizable-panel/element';
+export { MkSplitViewElement } from '../components/split-view/element';
+export { MkDataTableElement } from '../components/data-table/element';
+export { MkEditableTableElement } from '../components/editable-table/element';
+export { MkRichTextEditorElement } from '../components/rich-text-editor/element';
 // new-component:exports
 
 /** Tag name → element class, for every component. */
@@ -61,6 +159,55 @@ export const ELEMENTS = {
 'mk-trailer': MkTrailerElement,
   'mk-calendar': MkCalendarElement,
   'mk-slot-picker': MkSlotPickerElement,
+  'mk-attachment': MkAttachmentElement,
+  'mk-skeleton': MkSkeletonElement,
+  'mk-questionnaire': MkQuestionnaireElement,
+  'mk-code-block': MkCodeBlockElement,
+  'mk-context-menu': MkContextMenuElement,
+  'mk-drawer': MkDrawerElement,
+  'mk-link-preview': MkLinkPreviewElement,
+  'mk-progress': MkProgressElement,
+  'mk-range-slider': MkRangeSliderElement,
+  'mk-chart': MkChartElement,
+  'mk-credit-card': MkCreditCardElement,
+  'mk-command-search': MkCommandSearchElement,
+  'mk-hold-confirm': MkHoldConfirmElement,
+  'mk-image-preview': MkImagePreviewElement,
+  'mk-like-button': MkLikeButtonElement,
+  'mk-notification-bell': MkNotificationBellElement,
+  'mk-password-strength': MkPasswordStrengthElement,
+  'mk-scratch-card': MkScratchCardElement,
+  'mk-star-rating': MkStarRatingElement,
+  'mk-swipe-actions': MkSwipeActionsElement,
+  'mk-color-slider': MkColorSliderElement,
+  'mk-color-area': MkColorAreaElement,
+  'mk-color-field': MkColorFieldElement,
+  'mk-color-picker': MkColorPickerElement,
+  'mk-time-field': MkTimeFieldElement,
+  'mk-range-calendar': MkRangeCalendarElement,
+  'mk-date-range-picker': MkDateRangePickerElement,
+  'mk-tooltip': MkTooltipElement,
+  'mk-popover': MkPopoverElement,
+  'mk-loading-button': MkLoadingButtonElement,
+  'mk-breadcrumb': MkBreadcrumbElement,
+  'mk-empty-state': MkEmptyStateElement,
+  'mk-stat-card': MkStatCardElement,
+  'mk-chart-tooltip': MkChartTooltipElement,
+  'mk-multi-select': MkMultiSelectElement,
+  'mk-tag-input': MkTagInputElement,
+  'mk-date-time-picker': MkDateTimePickerElement,
+  'mk-filter-builder': MkFilterBuilderElement,
+  'mk-timeline': MkTimelineElement,
+  'mk-activity-feed': MkActivityFeedElement,
+  'mk-tree-view': MkTreeViewElement,
+  'mk-file-explorer': MkFileExplorerElement,
+  'mk-json-viewer': MkJsonViewerElement,
+  'mk-virtual-list': MkVirtualListElement,
+  'mk-resizable-panel': MkResizablePanelElement,
+  'mk-split-view': MkSplitViewElement,
+  'mk-data-table': MkDataTableElement,
+  'mk-editable-table': MkEditableTableElement,
+  'mk-rich-text-editor': MkRichTextEditorElement,
   // new-component:entries
 } as const;