@loidolt/theme-svelte 0.7.0 → 0.8.1

package/dist/components/PresetPicker.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" generics="P extends string = string">
+  import { builtInPresets } from '@loidolt/theme-tokens';
+  import type { ControlSize, Option } from '../types.js';
+  import type { Theme } from '../theme.svelte.js';
+  import Select from './Select.svelte';
+  import ToggleGroup from './ToggleGroup.svelte';
+
+  interface Props {
+    /** The store from `createTheme({ presets })`. */
+    theme: Theme<P>;
+    /**
+     * Label per preset. Defaults to the built-in presets' own labels, and to the capitalised
+     * name for any preset of your own.
+     */
+    options?: Option<P>[];
+    /** Accessible name of the control. */
+    label?: string;
+    /** `segmented` keeps every preset in view; `select` folds a longer list into a dropdown. */
+    variant?: 'segmented' | 'select';
+    size?: ControlSize;
+    class?: string;
+  }
+
+  let {
+    theme,
+    options,
+    label = 'Style',
+    variant = 'segmented',
+    size = 'sm',
+    class: className,
+  }: Props = $props();
+
+  const builtInLabels = new Map<string, string>(
+    builtInPresets.map((preset) => [preset.name, preset.label])
+  );
+
+  const items = $derived(
+    options ??
+      theme.presets.map((name) => ({
+        value: name,
+        label: builtInLabels.get(name) ?? name.charAt(0).toUpperCase() + name.slice(1),
+      }))
+  );
+
+  // Bound through the theme rather than passed down: a segmented control lets the pressed item
+  // be pressed again to clear it, and there is no "no preset". The theme ignores the empty
+  // value, and the getter hands the control the preset that is still in force.
+  const getPreset = () => theme.preset;
+  const setPreset = (next: P | P[] | '' | undefined) => {
+    if (typeof next === 'string' && next !== '') theme.preset = next;
+  };
+</script>
+
+<!--
+  The preset half of a theme switcher; ThemeToggle is the scheme half. Both drive the same
+  `createTheme()` store, so they can sit side by side in a topbar.
+-->
+{#if variant === 'select'}
+  <Select options={items} bind:value={getPreset, setPreset} {label} boxed class={className} />
+{:else}
+  <ToggleGroup options={items} bind:value={getPreset, setPreset} {label} {size} class={className} />
+{/if}

package/dist/components/PresetPicker.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { ControlSize, Option } from '../types.js';
+import type { Theme } from '../theme.svelte.js';
+declare function $$render<P extends string = string>(): {
+    props: {
+        /** The store from `createTheme({ presets })`. */
+        theme: Theme<P>;
+        /**
+         * Label per preset. Defaults to the built-in presets' own labels, and to the capitalised
+         * name for any preset of your own.
+         */
+        options?: Option<P>[];
+        /** Accessible name of the control. */
+        label?: string;
+        /** `segmented` keeps every preset in view; `select` folds a longer list into a dropdown. */
+        variant?: "segmented" | "select";
+        size?: ControlSize;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<P extends string = string> {
+    props(): ReturnType<typeof $$render<P>>['props'];
+    events(): ReturnType<typeof $$render<P>>['events'];
+    slots(): ReturnType<typeof $$render<P>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <P extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<P>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<P>['props']>, ReturnType<__sveltets_Render<P>['events']>, ReturnType<__sveltets_Render<P>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<P>['bindings']>;
+    } & ReturnType<__sveltets_Render<P>['exports']>;
+    <P extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<P>['props']> & {}): ReturnType<__sveltets_Render<P>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PresetPicker: $$IsomorphicComponent;
+type PresetPicker<P extends string = string> = InstanceType<typeof PresetPicker<P>>;
+export default PresetPicker;

package/dist/components/ToggleGroup.svelte

@@ -51,6 +51,14 @@
     value = next as T | T[];
     onValueChange?.(next as T | T[]);
   };
+
+  /*
+   * Bound rather than passed, so Bits holds no copy of its own: whatever `value` reads after a
+   * press is what shows as pressed. A parent that refuses a change — PresetPicker refusing the
+   * empty value a second press on the pressed item produces — then keeps its item pressed.
+   */
+  const single = () => (value ?? '') as string;
+  const many = () => (value ?? []) as string[];
 </script>
 
 <!--
@@ -73,8 +81,7 @@
   <ToggleGroupPrimitive.Root
     bind:ref
     type="multiple"
-    value={(value ?? []) as string[]}
-    onValueChange={change}
+    bind:value={many, change}
     {orientation}
     {disabled}
     class={classes}
@@ -92,8 +99,7 @@
   <ToggleGroupPrimitive.Root
     bind:ref
     type="single"
-    value={(value ?? '') as string}
-    onValueChange={change}
+    bind:value={single, change}
     {orientation}
     {disabled}
     class={classes}

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export { default as Pagination } from './components/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Popover } from './components/Popover.svelte';
+export { default as PresetPicker } from './components/PresetPicker.svelte';
 export { default as Progress } from './components/Progress.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as RecordStepper } from './components/RecordStepper.svelte';

package/dist/index.js

@@ -50,6 +50,7 @@ export { default as Pagination } from './components/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Popover } from './components/Popover.svelte';
+export { default as PresetPicker } from './components/PresetPicker.svelte';
 export { default as Progress } from './components/Progress.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as RecordStepper } from './components/RecordStepper.svelte';

package/dist/theme.svelte.d.ts

@@ -2,7 +2,7 @@
 export type ThemePreference = 'light' | 'dark' | 'system';
 /** What that choice resolves to right now — the value written to the DOM. */
 export type ColorScheme = 'light' | 'dark';
-export interface ThemeOptions {
+export interface ThemeOptions<P extends string = string> {
     /** `localStorage` key holding the preference. Set to `null` to keep the choice in memory. */
     storageKey?: string | null;
     /** Attribute the resolved scheme is written to. Must match the stylesheet's selector. */
@@ -18,14 +18,34 @@ export interface ThemeOptions {
      * if separate windows should be able to hold different themes.
      */
     sync?: boolean;
+    /**
+     * The style presets the app ships — the names of the preset stylesheets it imports. Setting
+     * this turns on the preset axis: the chosen preset is stored and written to `presetAttribute`
+     * alongside the colour scheme. Leave it out and the preset attribute is never touched, so a
+     * static `<html data-preset="soft">` keeps working.
+     */
+    presets?: readonly P[];
+    /** Preset before anything is stored. Defaults to the first of `presets`. */
+    defaultPreset?: NoInfer<P>;
+    /** `localStorage` key holding the preset. Set to `null` to keep the choice in memory. */
+    presetStorageKey?: string | null;
+    /** Attribute the preset is written to. Must match the preset stylesheets' selector. */
+    presetAttribute?: string;
 }
-export interface Theme {
+export interface Theme<P extends string = string> {
     /** The stored choice. Assignable: `theme.preference = 'dark'`. */
     preference: ThemePreference;
     /** The scheme in force — `preference`, or the system scheme when that is `system`. */
     readonly resolved: ColorScheme;
     /** What the system currently prefers, regardless of the choice. */
     readonly system: ColorScheme;
+    /**
+     * The style preset in force, or `undefined` when the theme was created without `presets`.
+     * Assignable: `theme.preset = 'soft'`; a name outside `presets` is ignored.
+     */
+    preset: P | undefined;
+    /** The presets this theme switches between, as given. */
+    readonly presets: readonly P[];
     /** Flips between explicit light and dark, starting from whatever is showing. */
     toggle(): void;
     /** Removes the media and storage listeners. Automatic for a component-scoped instance. */
@@ -52,8 +72,8 @@ export interface Theme {
  *
  * Pair it with {@link themeScript} in `app.html`, or the first paint of a reload is light.
  */
-export declare function createTheme(options?: ThemeOptions): Theme;
-export interface ThemeScriptOptions extends Pick<ThemeOptions, 'storageKey' | 'attribute' | 'defaultPreference' | 'defaultScheme'> {
+export declare function createTheme<const P extends string = string>(options?: ThemeOptions<P>): Theme<P>;
+export interface ThemeScriptOptions extends Pick<ThemeOptions, 'storageKey' | 'attribute' | 'defaultPreference' | 'defaultScheme' | 'presets' | 'defaultPreset' | 'presetStorageKey' | 'presetAttribute'> {
     /** Wrap the source in a `<script>` tag. Off by default, so it can go inside your own tag. */
     tag?: boolean;
 }

package/dist/theme.svelte.js

@@ -23,7 +23,11 @@ const isPreference = (value) => typeof value === 'string' && SCHEMES.includes(va
  * Pair it with {@link themeScript} in `app.html`, or the first paint of a reload is light.
  */
 export function createTheme(options = {}) {
-    const { storageKey = 'loidolt-theme', attribute = 'data-theme', element, defaultPreference = 'system', defaultScheme = 'light', sync = true, } = options;
+    const { storageKey = 'loidolt-theme', attribute = 'data-theme', element, defaultPreference = 'system', defaultScheme = 'light', sync = true, presets = [], presetStorageKey = 'loidolt-preset', presetAttribute = 'data-preset', } = options;
+    const defaultPreset = options.defaultPreset ?? presets[0];
+    if (defaultPreset !== undefined && !presets.includes(defaultPreset)) {
+        throw new Error(`defaultPreset "${defaultPreset}" is not one of presets`);
+    }
     const browser = typeof document !== 'undefined';
     const target = element ?? (browser ? document.documentElement : null);
     const read = () => {
@@ -39,7 +43,22 @@ export function createTheme(options = {}) {
             return defaultPreference;
         }
     };
+    const isPreset = (value) => typeof value === 'string' && presets.includes(value);
+    const readPreset = () => {
+        if (defaultPreset === undefined)
+            return undefined;
+        if (!browser || presetStorageKey === null)
+            return defaultPreset;
+        try {
+            const stored = localStorage.getItem(presetStorageKey);
+            return isPreset(stored) ? stored : defaultPreset;
+        }
+        catch {
+            return defaultPreset; // see `read`
+        }
+    };
     let preference = $state(read());
+    let preset = $state(readPreset());
     let system = $state(defaultScheme);
     let media;
     const onSystemChange = (event) => {
@@ -54,35 +73,57 @@ export function createTheme(options = {}) {
     const resolve = () => (preference === 'system' ? system : preference);
     function apply() {
         target?.setAttribute(attribute, resolve());
+        if (preset !== undefined)
+            target?.setAttribute(presetAttribute, preset);
     }
     const onStorage = (event) => {
-        if (event.key !== storageKey)
+        if (storageKey !== null && event.key === storageKey) {
+            // A cleared key means another tab reset to the default rather than picking a scheme.
+            preference = isPreference(event.newValue) ? event.newValue : defaultPreference;
+        }
+        else if (defaultPreset !== undefined &&
+            presetStorageKey !== null &&
+            event.key === presetStorageKey) {
+            preset = isPreset(event.newValue) ? event.newValue : defaultPreset;
+        }
+        else
             return;
-        // A cleared key means another tab reset to the default rather than picking a scheme.
-        preference = isPreference(event.newValue) ? event.newValue : defaultPreference;
         apply();
     };
-    if (browser && sync && storageKey !== null)
+    const listens = browser &&
+        sync &&
+        (storageKey !== null || (defaultPreset !== undefined && presetStorageKey !== null));
+    if (listens)
         window.addEventListener('storage', onStorage);
     // Written on creation, not in an effect: `createTheme()` is meant to be callable at module
     // scope, where there is no reactive context to own an effect.
     apply();
+    const persist = (key, value) => {
+        if (!browser || key === null)
+            return;
+        try {
+            localStorage.setItem(key, value);
+        }
+        catch {
+            /* see `read`: unavailable storage degrades to a memory-only choice */
+        }
+    };
     function set(next) {
         preference = next;
-        if (browser && storageKey !== null) {
-            try {
-                localStorage.setItem(storageKey, next);
-            }
-            catch {
-                /* see `read`: unavailable storage degrades to a memory-only choice */
-            }
-        }
+        persist(storageKey, next);
+        apply();
+    }
+    function setPreset(next) {
+        if (defaultPreset === undefined || !isPreset(next))
+            return;
+        preset = next;
+        persist(presetStorageKey, next);
         apply();
     }
     const destroy = () => {
         media?.removeEventListener('change', onSystemChange);
         media = undefined;
-        if (browser && sync && storageKey !== null)
+        if (listens)
             window.removeEventListener('storage', onStorage);
     };
     try {
@@ -104,6 +145,13 @@ export function createTheme(options = {}) {
         get system() {
             return system;
         },
+        get preset() {
+            return preset;
+        },
+        set preset(next) {
+            setPreset(next);
+        },
+        presets,
         toggle() {
             set(resolve() === 'dark' ? 'light' : 'dark');
         },
@@ -137,7 +185,7 @@ export function createTheme(options = {}) {
  * inline in an HTML `<script>` element without further escaping.
  */
 export function themeScript(options = {}) {
-    const { storageKey = 'loidolt-theme', attribute = 'data-theme', defaultPreference = 'system', defaultScheme = 'light', tag = false, } = options;
+    const { storageKey = 'loidolt-theme', attribute = 'data-theme', defaultPreference = 'system', defaultScheme = 'light', presets = [], presetStorageKey = 'loidolt-preset', presetAttribute = 'data-preset', tag = false, } = options;
     // JSON string escaping alone leaves `<` intact, including a literal `</script>` that would end
     // an inline script element. Escaping HTML-significant characters and the two JavaScript line
     // separators keeps every option inside its string literal in both source-only and tagged forms.
@@ -151,6 +199,12 @@ export function themeScript(options = {}) {
     const attr = serialize(attribute);
     const fallback = serialize(defaultPreference);
     const scheme = serialize(defaultScheme);
+    // Only emitted when the preset axis is on, so the scheme-only script stays byte-identical.
+    const preset = presets.length
+        ? `try{var q=${serialize(options.defaultPreset ?? presets[0])},l=${serialize(presets)},k=${serialize(presetStorageKey)};` +
+            `try{var w=k===null?null:localStorage.getItem(k);if(l.indexOf(w)>-1)q=w;}catch(e){}` +
+            `document.documentElement.setAttribute(${serialize(presetAttribute)},q);}catch(e){}`
+        : '';
     const source = `(function(){try{` +
         `var p=${fallback};` +
         // Storage failure must not skip system resolution and attribute application.
@@ -161,6 +215,6 @@ export function themeScript(options = {}) {
         `document.documentElement.setAttribute(${attr},p==="system"?s:p);` +
         // A theme is cosmetic; a throw here would abort a blocking head script and take the page
         // down with it. Swallow and let the stylesheet's own default stand.
-        `}catch(e){}})()`;
+        `}catch(e){}${preset}})()`;
     return tag ? `<script>${source}</script>` : source;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-svelte",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Accessible Svelte 5 components for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -31,8 +31,8 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@loidolt/theme-styles": "^0.7.0",
-    "@loidolt/theme-tokens": "^0.7.0",
+    "@loidolt/theme-styles": "^0.8.1",
+    "@loidolt/theme-tokens": "^0.8.1",
     "bits-ui": "^2.19.0"
   },
   "peerDependencies": {