@noxlovette/material 0.1.11 → 0.1.13

package/dist/components/buttons/ButtonIcon.svelte

@@ -49,13 +49,13 @@ Icon buttons help people take minor actions and are often used in app bars.
 </script>
 
 <Tooltip {triggerClass} variant="snack" supportingText={tooltipContent}>
-  {#snippet trigger(triggerAttrs)}
+  {#snippet trigger({ class: triggerClass_, ...triggerAttrs })}
     {#if variation === 'toggle'}
       <Toggle.Root
         bind:pressed
         {onPressedChange}
         {disabled}
-        class={btnCls}
+        class={clsx(btnCls, triggerClass_ as string)}
         data-cy="m3-button-icon"
         {...restProps as ToggleRootProps}
         {...triggerAttrs}
@@ -71,7 +71,7 @@ Icon buttons help people take minor actions and are often used in app bars.
       <Button.Root
         {disabled}
         {formaction}
-        class={btnCls}
+        class={clsx(btnCls, triggerClass_ as string)}
         data-cy="m3-button-icon"
         {...restProps as ButtonRootProps}
         {...triggerAttrs}

package/dist/components/containers/app/App.svelte

@@ -9,20 +9,15 @@ It manages the Material 3 Dynamic Theme, dark mode, and icon providers.
   import { app } from './theme';
   import type { AppProps } from './types';
   import { ModeWatcher } from 'mode-watcher';
+  import ThemeScript from '../../../utils/ThemeScript.svelte';
 
-  let {
-    children,
-    class: className,
-    iconProviderProps = {},
-    themeConfig,
-    isDark,
-    ...restProps
-  }: AppProps = $props();
+  let { children, class: className, iconProviderProps = {}, ...restProps }: AppProps = $props();
 
-  const baseCls = $derived(app({ class: [className, isDark ? 'dark' : ''] }));
+  const baseCls = $derived(app({ class: className }));
 </script>
 
-<Theme config={themeConfig} {isDark} />
+<ThemeScript />
+<Theme />
 <MaterialSymbolsProvider {...iconProviderProps} />
 <ModeWatcher />
 <Tooltip.Provider>

package/dist/components/containers/app/types.d.ts

@@ -1,5 +1,4 @@
 import type { MaterialSymbolsProviderProps } from '../../../utils/index.js';
-import type { ThemeConfig } from '../../../utils/theme.svelte.js';
 import type { DivAttrs } from '../../../utils/types.js';
 import type { Snippet } from 'svelte';
 export type AppProps = DivAttrs & {
@@ -9,17 +8,4 @@ export type AppProps = DivAttrs & {
     class?: string;
     /** Props to pass to the material symbols provider */
     iconProviderProps?: Partial<MaterialSymbolsProviderProps>;
-    /**
-     * Optional CSS generated on the server to prevent FOUC.
-     */
-    ssrThemeCSS?: string;
-    /**
-     * Optional theme configuration passed from the server.
-     * If provided, the App component will generate the theme CSS automatically.
-     */
-    themeConfig?: ThemeConfig;
-    /**
-     * Optional dark mode state passed from the server to prevent flashing.
-     */
-    isDark?: boolean;
 };

package/dist/components/nav/rail/Rail.svelte

@@ -19,6 +19,7 @@ Navigation rails provide access to primary destinations in apps when using table
     rounded = false,
     expandable = true,
     fab,
+    railFooter,
     collapsed = $bindable(true),
     anchor = 'viewport',
     railTop = 0,
@@ -60,6 +61,12 @@ Navigation rails provide access to primary destinations in apps when using table
       {@render children?.()}
     </NavigationMenu.List>
   </NavigationMenu.Root>
+
+  {#if railFooter}
+    <div class="mt-auto flex flex-col items-center pb-2">
+      {@render railFooter()}
+    </div>
+  {/if}
 </div>
 
 <style>

package/dist/components/nav/rail/types.d.ts

@@ -35,6 +35,8 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     expandable?: boolean;
     /** An optional Floating Action Button snippet. */
     fab?: Snippet;
+    /** An optional snippet rendered at the bottom of the rail (e.g. avatar/settings). */
+    railFooter?: Snippet;
     /** Whether the rail is currently collapsed. */
     collapsed?: boolean;
     /** Where the rail should be anchored. */

package/dist/utils/Theme.svelte

@@ -1,47 +1,23 @@
 <script lang="ts">
-  import { generateThemeCSS, isDarkScheme, themeState, type ThemeConfig } from './theme.svelte.js';
+  import { generateThemeCSS, isDarkScheme, themeState, STORAGE_KEY } from './theme.svelte.js';
 
-  interface Props {
-    /**
-     * Initial configuration for the theme.
-     * Useful for SSR when reading from cookies.
-     */
-    config?: Partial<ThemeConfig>;
-    /**
-     * Optional dark mode state passed from the server to prevent flashing.
-     * If provided, it overrides the auto-detection.
-     */
-    isDark?: boolean;
-    /**
-     * Whether to persist changes to localStorage and cookies.
-     * Defaults to true.
-     */
-    persist?: boolean;
-  }
-
-  let { config, isDark: isDarkProp, persist = true }: Props = $props();
-
-  // Sync config to global state
-  // We use an effect to keep it in sync if the prop changes,
-  // but also run it during initialization for SSR.
-  function syncConfig(c?: Partial<ThemeConfig>) {
-    if (!c) return;
-    if (c.sourceColor) themeState.sourceColor = c.sourceColor;
-    if (c.scheme) themeState.scheme = c.scheme;
-    if (c.contrast) themeState.contrast = c.contrast;
-    if (c.variant) themeState.variant = c.variant;
-  }
-
-  // Run immediately for SSR
-  syncConfig(config);
-
-  // Keep in sync if prop updates on client
+  // Restore from localStorage on mount
   $effect(() => {
-    syncConfig(config);
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (!saved) return;
+    try {
+      const parsed = JSON.parse(saved);
+      if (parsed.sourceColor) themeState.sourceColor = parsed.sourceColor;
+      if (parsed.scheme) themeState.scheme = parsed.scheme;
+      if (parsed.contrast) themeState.contrast = parsed.contrast;
+      if (parsed.variant) themeState.variant = parsed.variant;
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+    }
   });
 
-  // Calculate final dark mode state
-  let finalIsDark = $state(isDarkProp !== undefined ? isDarkProp : isDarkScheme(themeState.scheme));
+  // Track dark mode, including system preference changes
+  let finalIsDark = $state(isDarkScheme(themeState.scheme));
 
   $effect(() => {
     if (themeState.scheme !== 'system') {
@@ -61,21 +37,20 @@
 
   const themeStyles = $derived(generateThemeCSS(themeState, finalIsDark));
 
-  // Persistence effect
+  // Persist to localStorage on any change
   $effect(() => {
-    if (!persist) return;
-
-    const configStr = JSON.stringify({
-      sourceColor: themeState.sourceColor,
-      scheme: themeState.scheme,
-      contrast: themeState.contrast,
-      variant: themeState.variant
-    });
-
-    localStorage.setItem('ogonek-m3-theme-config', configStr);
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        sourceColor: themeState.sourceColor,
+        scheme: themeState.scheme,
+        contrast: themeState.contrast,
+        variant: themeState.variant
+      })
+    );
   });
 
-  // Dark mode class effect
+  // Sync dark class on <html>
   $effect(() => {
     if (finalIsDark) {
       document.documentElement.classList.add('dark');

package/dist/utils/ThemeScript.svelte

@@ -0,0 +1,17 @@
+<!--
+@component
+Injects the theme initialisation script into <head> before first paint,
+preventing a flash of unstyled/wrong-scheme content.
+
+Add this to your root +layout.svelte (or any layout that wraps the whole app):
+@example
+<ThemeScript />
+<App>...</App>
+-->
+<script lang="ts">
+  import { THEME_INIT_SCRIPT } from './theme.svelte.js';
+</script>
+
+<svelte:head>
+  {@html `<script>${THEME_INIT_SCRIPT}</script>`}
+</svelte:head>

package/dist/utils/ThemeScript.svelte.d.ts

@@ -0,0 +1,27 @@
+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;
+}
+/**
+ * Injects the theme initialisation script into <head> before first paint,
+ * preventing a flash of unstyled/wrong-scheme content.
+ *
+ * Add this to your root +layout.svelte (or any layout that wraps the whole app):
+ * @example
+ * <ThemeScript />
+ * <App>...</App>
+ */
+declare const ThemeScript: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThemeScript = InstanceType<typeof ThemeScript>;
+export default ThemeScript;

package/dist/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from './ui.js';
 export type { ColorScheme, ContrastMode, ThemeConfig, ThemeVariant } from './theme.svelte.js';
 export { default as Layer } from './Layer.svelte';
 export { default as Theme } from './Theme.svelte';
+export { default as ThemeScript } from './ThemeScript.svelte';

package/dist/utils/index.js

@@ -4,3 +4,4 @@ export * from './types.js';
 export * from './ui.js';
 export { default as Layer } from './Layer.svelte';
 export { default as Theme } from './Theme.svelte';
+export { default as ThemeScript } from './ThemeScript.svelte';

package/dist/utils/theme.svelte.d.ts

@@ -8,6 +8,17 @@ export interface ThemeConfig {
     variant: ThemeVariant;
 }
 export declare const DEFAULT_CONFIG: ThemeConfig;
+export declare const STORAGE_KEY = "ogonek-m3-theme-config";
+/**
+ * Inline script that reads the saved theme from localStorage and applies the
+ * `dark` class to <html> before first paint, preventing a flash of unstyled content.
+ *
+ * Inject this into your app.html <head> (or use the <ThemeScript /> component):
+ * @example
+ * // app.html
+ * <script>{THEME_INIT_SCRIPT}</script>
+ */
+export declare const THEME_INIT_SCRIPT = "try {\n  const saved = JSON.parse(localStorage.getItem('ogonek-m3-theme-config') || '{}');\n  const scheme = saved.scheme || 'system';\n  const dark = scheme === 'dark' || (scheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);\n  if (dark) document.documentElement.classList.add('dark');\n} catch (e) {}";
 /**
  * Global reactive theme state.
  * Changes to this state will automatically update the theme if the <Theme /> component is mounted.

package/dist/utils/theme.svelte.js

@@ -13,6 +13,22 @@ const SCHEME_VARIANTS = {
     'fruit-salad': SchemeFruitSalad,
     rainbow: SchemeRainbow
 };
+export const STORAGE_KEY = 'ogonek-m3-theme-config';
+/**
+ * Inline script that reads the saved theme from localStorage and applies the
+ * `dark` class to <html> before first paint, preventing a flash of unstyled content.
+ *
+ * Inject this into your app.html <head> (or use the <ThemeScript /> component):
+ * @example
+ * // app.html
+ * <script>{THEME_INIT_SCRIPT}</script>
+ */
+export const THEME_INIT_SCRIPT = `try {
+  const saved = JSON.parse(localStorage.getItem('${STORAGE_KEY}') || '{}');
+  const scheme = saved.scheme || 'system';
+  const dark = scheme === 'dark' || (scheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  if (dark) document.documentElement.classList.add('dark');
+} catch (e) {}`;
 // --- State ---
 /**
  * Global reactive theme state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "license": "MIT",
   "repository": {