@noxlovette/material 0.3.2 → 0.4.0

package/dist/components/toolbar/types.d.ts

@@ -1,23 +1,56 @@
-import type { IconProps } from '../../utils/index.js';
+import type { DivAttrs, IconProps } from '../../utils/index.js';
 import type { ToolbarButtonProps as BitsToolbarButtonProps, ToolbarGroupItemProps as BitsToolbarGroupItemProps, ToolbarGroupProps as BitsToolbarGroupProps, ToolbarRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { ToolbarVariants } from './theme.js';
 export type ToolbarColor = 'standard' | 'vibrant';
-export type ToolbarProps = ToolbarVariants & Omit<ToolbarRootProps, 'children' | 'child'> & {
+export type ToolbarProps = ToolbarVariants & Omit<ToolbarRootProps, 'children' | 'child' | 'orientation'> & {
     children?: Snippet;
     fab?: Snippet;
     ghost?: boolean;
+    /**
+     * Splits the toolbar into independently painted surfaces instead of one continuous
+     * pill/bar — compose `children` from `ToolbarSection` + `ToolbarSpacer` when true.
+     */
+    sections?: boolean;
     class?: string;
 };
+export type ToolbarSectionProps = DivAttrs & {
+    children?: Snippet;
+};
 export type ToolbarButtonProps = Omit<BitsToolbarButtonProps, 'children' | 'child'> & {
-    iconProps: IconProps;
+    /** Configuration for the leading icon. Omit when `avatar` is provided. */
+    iconProps?: IconProps;
+    /**
+     * Custom leading content (e.g. an avatar/image) rendered instead of `iconProps`.
+     */
+    avatar?: Snippet;
+    /**
+     * Content to display in a tooltip when hovering over the button.
+     * If omitted, no tooltip is shown.
+     */
+    tooltipContent?: string;
+    /** CSS class added to the tooltip trigger wrapper. */
+    triggerClass?: string;
     class?: string;
 };
 export type ToolbarGroupProps = Omit<BitsToolbarGroupProps, 'children' | 'child'> & {
     children?: Snippet;
     class?: string;
 };
+export type ToolbarSpacerProps = DivAttrs;
 export type ToolbarGroupItemProps = Omit<BitsToolbarGroupItemProps, 'children' | 'child'> & {
-    iconProps: IconProps;
+    /** Configuration for the leading icon. Omit when `avatar` is provided. */
+    iconProps?: IconProps;
+    /**
+     * Custom leading content (e.g. an avatar/image) rendered instead of `iconProps`.
+     */
+    avatar?: Snippet;
+    /**
+     * Content to display in a tooltip when hovering over the button.
+     * If omitted, no tooltip is shown.
+     */
+    tooltipContent?: string;
+    /** CSS class added to the tooltip trigger wrapper. */
+    triggerClass?: string;
     class?: string;
 };

package/dist/components/typography/body/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type BodyVariants = VariantProps<typeof body>;
 export declare const body: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-body-small";
+        medium: "md-sys-typescale-body-medium";
+        large: "md-sys-typescale-body-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-body-small";
+        medium: "md-sys-typescale-body-medium";
+        large: "md-sys-typescale-body-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-body-small";
+        medium: "md-sys-typescale-body-medium";
+        large: "md-sys-typescale-body-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/display/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type DisplayVariants = VariantProps<typeof display>;
 export declare const display: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-display-small";
+        medium: "md-sys-typescale-display-medium";
+        large: "md-sys-typescale-display-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-display-small";
+        medium: "md-sys-typescale-display-medium";
+        large: "md-sys-typescale-display-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-display-small";
+        medium: "md-sys-typescale-display-medium";
+        large: "md-sys-typescale-display-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/headline/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type HeadlineVariants = VariantProps<typeof headline>;
 export declare const headline: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-headline-small";
+        medium: "md-sys-typescale-headline-medium";
+        large: "md-sys-typescale-headline-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-headline-small";
+        medium: "md-sys-typescale-headline-medium";
+        large: "md-sys-typescale-headline-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-medium";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-headline-small";
+        medium: "md-sys-typescale-headline-medium";
+        large: "md-sys-typescale-headline-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/kbd/Kbd.stories.svelte

@@ -0,0 +1,41 @@
+<!--
+  `position="absolute"` anchors Kbd to the bottom-right corner of a `relative` ancestor (and is
+  hidden below the `md` breakpoint) — typically used to show a keyboard shortcut hint inside a
+  search/command input. `position="relative"` renders it inline instead.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Kbd from './Kbd.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Typography/Kbd',
+    component: Kbd,
+    argTypes: {
+      position: { control: 'select', options: ['relative', 'absolute'] }
+    },
+    args: {
+      position: 'relative'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Kbd position={args.position}>⌘K</Kbd>
+  {/snippet}
+</Story>
+
+<Story name="Inline Shortcut" asChild>
+  <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface">
+    Press <Kbd position="relative">⌘K</Kbd> to open the command palette.
+  </p>
+</Story>
+
+<Story name="Anchored in a Search Field" asChild>
+  <div
+    class="bg-md-sys-color-surface-container-high md-sys-typescale-body-large text-md-sys-color-on-surface-variant relative flex h-12 w-80 items-center rounded-full px-4"
+  >
+    Search...
+    <Kbd position="absolute">⌘K</Kbd>
+  </div>
+</Story>

package/dist/components/typography/kbd/Kbd.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Kbd from './Kbd.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Kbd: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Kbd = InstanceType<typeof Kbd>;
+export default Kbd;

package/dist/components/typography/kbd/theme.d.ts

@@ -2,17 +2,17 @@ import { type VariantProps } from 'tailwind-variants';
 export type KbdVariants = VariantProps<typeof kbd>;
 export declare const kbd: import("tailwind-variants").TVReturnType<{
     position: {
-        absolute: string;
-        relative: string;
+        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        relative: "";
     };
-}, undefined, "text-xs font-semibold text-text-tertiary", {
+}, undefined, "md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant", {
     position: {
-        absolute: string;
-        relative: string;
+        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        relative: "";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     position: {
-        absolute: string;
-        relative: string;
+        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        relative: "";
     };
-}, undefined, "text-xs font-semibold text-text-tertiary", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/kbd/theme.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const kbd = tv({
-    base: 'text-xs font-semibold text-text-tertiary',
+    base: 'md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant',
     variants: {
         position: {
-            absolute: 'right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2',
+            absolute: 'right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex',
             relative: ''
         }
     }

package/dist/components/typography/label/theme.d.ts

@@ -1,28 +1,28 @@
 export declare const label: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-label-small";
+        medium: "md-sys-typescale-label-medium";
+        large: "md-sys-typescale-label-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-label-small";
+        medium: "md-sys-typescale-label-medium";
+        large: "md-sys-typescale-label-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-label-small";
+        medium: "md-sys-typescale-label-medium";
+        large: "md-sys-typescale-label-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/typography/title/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type TitleVariants = VariantProps<typeof title>;
 export declare const title: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-title-small";
+        medium: "md-sys-typescale-title-medium";
+        large: "md-sys-typescale-title-large";
     };
 }, undefined, "", {
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-title-small";
+        medium: "md-sys-typescale-title-medium";
+        large: "md-sys-typescale-title-large";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: string;
+        true: "font-semibold";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "md-sys-typescale-title-small";
+        medium: "md-sys-typescale-title-medium";
+        large: "md-sys-typescale-title-large";
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/styles/component.css

@@ -7,9 +7,13 @@
   }
 
   .md-component-button-base {
-    @apply state-layer md-sys-state-focus-indicator disabled:bg-md-sys-color-on-surface/10 disabled:text-md-sys-color-on-surface/38 disabled:before:bg-md-sys-color-on-surface/38 relative inline-flex items-center justify-center select-none disabled:cursor-not-allowed;
+    /* `relative` is applied as a literal utility token at each call site (theme.ts), not
+     * baked in here — that lets tailwind-merge dedupe it against a caller-supplied
+     * `fixed`/`absolute`/`sticky` override. Baking it into this custom class's own compiled
+     * CSS rule would set `position` outside of anything twMerge can see or override. */
+    @apply state-layer md-sys-state-focus-indicator disabled:bg-md-sys-color-on-surface/10 disabled:text-md-sys-color-on-surface/38 disabled:before:bg-md-sys-color-on-surface/38 inline-flex items-center justify-center select-none disabled:cursor-not-allowed;
     transition: box-shadow var(--md-sys-motion-duration, 200ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
   }
 
   .md-btn-morph {
@@ -30,6 +34,124 @@
     }
   }
 
+  /*
+   * Standard button group (https://m3.material.io/components/button-groups/overview).
+   * A plain flex row/column of otherwise-untouched Button/ButtonIcon/Toggle children.
+   * `data-size` drives both the fixed gap between buttons and the padding-inline
+   * "squeeze" below — pressing one button grows its own padding and shrinks its
+   * immediate neighbors', which is the M3-specified adjacent-button interaction.
+   * `:has()` scopes the shrink to only the pressed button's direct neighbors.
+   */
+  .md-btn-group-standard {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: max-content;
+
+    &[data-orientation='vertical'] {
+      flex-direction: column;
+      align-items: stretch;
+      width: auto;
+    }
+
+    &[data-size='xs'] {
+      --btn-group-gap: 1.125rem;
+      --btn-group-base-px: 1rem;
+      --btn-group-squeeze: 0.375rem;
+    }
+    &[data-size='sm'] {
+      --btn-group-gap: 0.75rem;
+      --btn-group-base-px: 1rem;
+      --btn-group-squeeze: 0.375rem;
+    }
+    &[data-size='md'] {
+      --btn-group-gap: 0.5rem;
+      --btn-group-base-px: 1.5rem;
+      --btn-group-squeeze: 0.5rem;
+    }
+    &[data-size='lg'] {
+      --btn-group-gap: 0.5rem;
+      --btn-group-base-px: 3rem;
+      --btn-group-squeeze: 0.75rem;
+    }
+    &[data-size='xl'] {
+      --btn-group-gap: 0.5rem;
+      --btn-group-base-px: 4rem;
+      --btn-group-squeeze: 1rem;
+    }
+
+    gap: var(--btn-group-gap, 0.5rem);
+
+    > * {
+      padding-inline: var(--btn-group-base-px, 1rem);
+      transition:
+        padding-inline var(--md-sys-motion-duration-fast-spatial, 350ms)
+          var(--md-sys-motion-timing-function-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.9)),
+        border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+    }
+
+    > *:active:not(:disabled) {
+      padding-inline: calc(var(--btn-group-base-px, 1rem) + var(--btn-group-squeeze, 0.5rem));
+    }
+
+    > *:has(+ *:active:not(:disabled)),
+    > *:active:not(:disabled) + * {
+      padding-inline: max(
+        0px,
+        calc(var(--btn-group-base-px, 1rem) - var(--btn-group-squeeze, 0.5rem))
+      );
+    }
+  }
+
+  /*
+   * Connected button group item — replaces the deprecated segmented button.
+   * `--cbg-inner` (per size) is the shared radius facing a neighbor; `--cbg-outer`
+   * defaults to fully round and is only overridden (to equal --cbg-inner) for the
+   * square shape, so the position rules below become no-ops in that case.
+   * Selecting/pressing an item collapses all four of its own corners to
+   * --cbg-inner ("round to square") without touching its neighbors' shape.
+   */
+  .md-btn-connected {
+    border-radius: var(--cbg-inner, 9999px);
+    transition:
+      border-radius 250ms var(--md-sys-motion-timing-function-emphasized-accel),
+      background-color var(--md-sys-motion-duration-fast, 150ms)
+        var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1)),
+      color var(--md-sys-motion-duration-fast, 150ms)
+        var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+
+    &:only-child {
+      border-radius: var(--cbg-outer, 9999px);
+    }
+
+    &[data-orientation='horizontal']:first-child:not(:only-child) {
+      border-top-left-radius: var(--cbg-outer, 9999px);
+      border-bottom-left-radius: var(--cbg-outer, 9999px);
+    }
+    &[data-orientation='horizontal']:last-child:not(:only-child) {
+      border-top-right-radius: var(--cbg-outer, 9999px);
+      border-bottom-right-radius: var(--cbg-outer, 9999px);
+    }
+    &[data-orientation='vertical']:first-child:not(:only-child) {
+      border-top-left-radius: var(--cbg-outer, 9999px);
+      border-top-right-radius: var(--cbg-outer, 9999px);
+    }
+    &[data-orientation='vertical']:last-child:not(:only-child) {
+      border-bottom-left-radius: var(--cbg-outer, 9999px);
+      border-bottom-right-radius: var(--cbg-outer, 9999px);
+    }
+
+    &:active:not(:disabled),
+    &[data-state='on'] {
+      border-radius: var(--cbg-inner, 4px) !important;
+      transition-timing-function: var(--md-sys-motion-timing-function-emphasized-decel);
+    }
+
+    &:active:not(:disabled) {
+      transition-duration: 150ms;
+    }
+  }
+
   .md-component-button-filled-primary {
     @apply bg-md-sys-color-primary text-md-sys-color-on-primary;
   }
@@ -124,7 +246,7 @@
   .text-link {
     @apply text-md-sys-color-primary hover:text-md-sys-color-secondary underline;
     transition: color var(--md-sys-motion-duration, 200ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
   }
 
   .text-link.md-sys-typescale-label-small {
@@ -149,6 +271,6 @@
   @apply before:pointer-events-none before:absolute before:inset-0 before:content-[''];
   &::before {
     transition: background-color var(--md-sys-motion-duration-fast, 150ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
   }
 }

package/dist/styles/motion.css

@@ -15,16 +15,19 @@
   --md-sys-motion-easing-slow-spatial: var(--md-sys-motion-timing-function-slow-spatial)
     var(--md-sys-motion-duration-slow-spatial);
 
-  --md-sys-motion-timing-function-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+  /* Standard easing — md.sys.motion.easing.standard, cubic-bezier(0.2, 0, 0, 1) per
+     m3.material.io/styles/motion/easing-and-duration/tokens-specs. Same curve across all
+     three durations; only the duration changes per tier. */
+  --md-sys-motion-timing-function-fast: cubic-bezier(0.2, 0, 0, 1);
   --md-sys-motion-duration-fast: 150ms;
   --md-sys-motion-easing-fast: var(--md-sys-motion-timing-function-fast)
     var(--md-sys-motion-duration-fast);
 
-  --md-sys-motion-timing-function: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-timing-function: cubic-bezier(0.2, 0, 0, 1);
   --md-sys-motion-duration: 200ms;
   --md-sys-motion-easing: var(--md-sys-motion-timing-function) var(--md-sys-motion-duration);
 
-  --md-sys-motion-timing-function-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-timing-function-slow: cubic-bezier(0.2, 0, 0, 1);
   --md-sys-motion-duration-slow: 300ms;
   --md-sys-motion-easing-slow: var(--md-sys-motion-timing-function-slow)
     var(--md-sys-motion-duration-slow);

package/dist/utils/Layer.svelte

@@ -54,7 +54,9 @@
     expand.setAttribute('dur', `${speed}ms`);
     expand.setAttribute('fill', 'freeze');
     expand.setAttribute('calcMode', 'spline');
-    expand.setAttribute('keySplines', '0.4 0, 0.2 1');
+    // md.sys.motion.easing.standard: cubic-bezier(0.2, 0, 0, 1) — keep in sync with
+    // --md-sys-motion-timing-function in motion.css (SMIL keySplines can't reference CSS vars).
+    expand.setAttribute('keySplines', '0.2 0, 0 1');
     circle.appendChild(expand);
 
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -105,7 +107,9 @@
       fade.setAttribute('dur', '800ms');
       fade.setAttribute('fill', 'freeze');
       fade.setAttribute('calcMode', 'spline');
-      fade.setAttribute('keySplines', '0.4 0, 0.2 1');
+      // md.sys.motion.easing.standard: cubic-bezier(0.2, 0, 0, 1) — keep in sync with
+      // --md-sys-motion-timing-function in motion.css (SMIL keySplines can't reference CSS vars).
+      fade.setAttribute('keySplines', '0.2 0, 0 1');
       circle.appendChild(fade);
       fade.beginElement();
       setTimeout(() => svg.remove(), 800);
@@ -196,7 +200,7 @@
     background-color: currentColor;
     opacity: 0;
     transition: opacity var(--md-sys-motion-duration-fast, 150ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
 
     &:not(
       :global(input:disabled + label) > .tint,

package/dist/utils/Theme.svelte

@@ -1,5 +1,16 @@
 <script lang="ts">
-  import { generateThemeCSS, isDarkScheme, themeState, STORAGE_KEY } from './theme.svelte.js';
+  import { MediaQuery } from 'svelte/reactivity';
+  import { generateThemeCSS, themeState, STORAGE_KEY } from './theme.svelte.js';
+
+  /**
+   * Whether to generate and inject the M3 dynamic-color CSS custom properties
+   * derived from `themeState.sourceColor`. When `false`, this component still
+   * restores/persists `themeState.scheme` and keeps the `dark` class on
+   * `<html>` in sync with it (including system-preference changes) — it just
+   * skips generating dynamic-color CSS, for consumers supplying their own
+   * static `@noxlovette/material/theme/*` CSS.
+   */
+  let { generateCSS = true }: { generateCSS?: boolean } = $props();
 
   // Restore from localStorage on mount
   $effect(() => {
@@ -17,25 +28,12 @@
   });
 
   // Track dark mode, including system preference changes
-  let finalIsDark = $state(isDarkScheme(themeState.scheme));
-
-  $effect(() => {
-    if (themeState.scheme !== 'system') {
-      finalIsDark = themeState.scheme === 'dark';
-      return;
-    }
-
-    const media = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = (e: MediaQueryListEvent) => {
-      finalIsDark = e.matches;
-    };
-
-    finalIsDark = media.matches;
-    media.addEventListener('change', handler);
-    return () => media.removeEventListener('change', handler);
-  });
+  const systemDark = new MediaQuery('(prefers-color-scheme: dark)');
+  const finalIsDark = $derived(
+    themeState.scheme === 'system' ? systemDark.current : themeState.scheme === 'dark'
+  );
 
-  const themeStyles = $derived(generateThemeCSS(themeState, finalIsDark));
+  const themeStyles = $derived(generateCSS ? generateThemeCSS(themeState, finalIsDark) : '');
 
   // Persist to localStorage on any change
   $effect(() => {
@@ -61,5 +59,7 @@
 </script>
 
 <svelte:head>
-  {@html `<` + `style id="ogonek-m3-dynamic-theme">` + themeStyles + `</` + `style>`}
+  {#if generateCSS}
+    {@html `<` + `style id="ogonek-m3-dynamic-theme">` + themeStyles + `</` + `style>`}
+  {/if}
 </svelte:head>