npm - @spaethtech/svelte-ui - Versions diffs - 0.4.1-dev.14.d54aa31 → 0.4.1-dev.17.75f0491 - Mend

@spaethtech/svelte-ui 0.4.1-dev.14.d54aa31 → 0.4.1-dev.17.75f0491

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/.claude/skills/svelte-ui/SKILL.md +2 -1
package/dist/components/ThemeSelector.svelte +7 -42
package/dist/components/ThemeToggle.svelte +57 -0
package/dist/components/ThemeToggle.svelte.d.ts +10 -0
package/dist/components/theme.d.ts +23 -0
package/dist/components/theme.js +49 -0
package/dist/index.d.ts +1 -0
package/dist/index.js +1 -0
package/docs/components.md +12 -1
package/docs/usage.md +6 -2
package/package.json +1 -1

package/.claude/skills/svelte-ui/SKILL.md CHANGED Viewed

@@ -108,7 +108,8 @@ examples):
 - **Navigation:** `TabStrip` `SideBarMenu`
 - **Feedback:** `Alert` `Banner` `Badge` `Toaster` + `toast`
 - **Layout:** `Card` `CardHeader` `CardBody` `CardFooter`
-- **Display / theme:** `NotesEditor` `ThemeSelector`
+- **Display / theme:** `NotesEditor` · `ThemeSelector` (Auto/Light/Dark Select) · `ThemeToggle`
+  (compact ☀/☾ icon button, same persisted state)
 - **Types / utils:** `Variant` `Size` `TabDefinition` (types), `responsiveClasses` / `resolveScalar`,
   `BREAKPOINT_PX`.

package/dist/components/ThemeSelector.svelte CHANGED Viewed

@@ -3,6 +3,7 @@
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import type { Variant } from "../types/variants.js";
+  import { applyTheme, readStoredTheme, type ThemeValue } from "./theme.js";
   // Shared axes, forwarded to the underlying Select (and the label text tracks size).
   let { size = "md", variant }: { size?: Responsive<Size>; variant?: Variant } = $props();
@@ -15,54 +16,18 @@
     { label: "Dark", value: "dark" },
   ];
-  const themeClasses = {
-    light: "theme-light",
-    dark: "theme-dark",
-  };
+  // Shared theme state (localStorage-backed, applied to <html>) — see ./theme.ts. Kept as a plain
+  // string for the Select `bind:value`; the values are constrained to the options above.
   let selectedTheme = $state("auto");
-  // Load saved theme on mount
+  // Load the saved theme on mount (defaults to "auto" when nothing is stored).
   $effect(() => {
-    if (typeof window !== "undefined") {
-      const savedTheme = localStorage.getItem("svelte-ui-theme");
-      if (savedTheme && options.some((opt) => opt.value === savedTheme)) {
-        selectedTheme = savedTheme;
-      }
-    }
+    selectedTheme = readStoredTheme();
   });
-  // Apply theme to <html> (documentElement) — NOT <body>.
-  // The theme tokens (incl. --ui-color-hover/active) are defined at :root, and app.html's pre-hydration
-  // script forces the class onto <html>. If we applied it to <body> instead, <html> would stay on the
-  // system @media(prefers-color-scheme) path, so tokens that reference other tokens (--ui-color-hover =
-  // color-mix(var(--ui-color-text)…)) would resolve against the WRONG theme at :root and inherit down
-  // stale (e.g. a white hover-tint on a light page → invisible hover). Keep the class on :root.
-  function applyTheme(themeValue: string) {
-    const body = document.body;
-    const html = document.documentElement;
-    // Remove all existing theme classes from both body and html (clear any stray body class too)
-    Object.values(themeClasses).forEach((className) => {
-      body.classList.remove(className);
-      html.classList.remove(className);
-    });
-    // Add the selected theme class to <html>
-    const themeClass = themeClasses[themeValue as keyof typeof themeClasses];
-    if (themeClass) {
-      html.classList.add(themeClass);
-    }
-    // Save theme to localStorage
-    if (typeof window !== "undefined") {
-      localStorage.setItem("svelte-ui-theme", themeValue);
-    }
-  }
-  // Apply theme when selection changes
+  // Apply (and persist) whenever the selection changes.
   $effect(() => {
-    applyTheme(selectedTheme);
+    applyTheme(selectedTheme as ThemeValue);
   });
 </script>

package/dist/components/ThemeToggle.svelte ADDED Viewed

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * ThemeToggle — an icon button that flips between light and dark, sibling to `ThemeSelector`.
+   * Shares the same persisted state (`svelte-ui-theme` in localStorage, applied to `<html>`), so the
+   * two stay in sync. When nothing is stored it follows the system preference; the icon reflects the
+   * effective theme (☀ light / ☾ dark), and a click sets the explicit opposite.
+   */
+  import Button from "./Button.svelte";
+  import type { Size } from "../types/sizes.js";
+  import type { Variant } from "../types/variants.js";
+  import type { Responsive } from "../types/responsive.js";
+  import { applyTheme, readStoredTheme, resolveTheme, type ThemeValue } from "./theme.js";
+  import IconSun from "~icons/mdi/weather-sunny";
+  import IconMoon from "~icons/mdi/weather-night";
+  // Shared axes, forwarded to the underlying Button. Icon-only, so it defaults to the chromeless ghost.
+  let { size = "md", variant = "ghost" }: { size?: Responsive<Size>; variant?: Variant } = $props();
+  // The stored value ("auto" until the user picks) and the tracked system preference.
+  let theme = $state<ThemeValue>("auto");
+  let system = $state<"light" | "dark">("light");
+  // The theme actually showing — "auto" resolved against the system preference.
+  const effective = $derived(theme === "auto" ? system : theme);
+  // Load stored theme + track the system preference (so the icon stays right in "auto" mode).
+  $effect(() => {
+    theme = readStoredTheme();
+    system = resolveTheme("auto");
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = (e: MediaQueryListEvent) => (system = e.matches ? "dark" : "light");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  });
+  // Apply (and persist) whenever the theme changes.
+  $effect(() => {
+    applyTheme(theme);
+  });
+  // Flip to the explicit opposite of whatever is currently in effect.
+  function toggle() {
+    theme = effective === "dark" ? "light" : "dark";
+  }
+</script>
+<Button
+  {size}
+  {variant}
+  onclick={toggle}
+  aria-pressed={effective === "dark"}
+  title={effective === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+>
+  {#snippet icon()}
+    {#if effective === "dark"}<IconMoon />{:else}<IconSun />{/if}
+  {/snippet}
+</Button>

package/dist/components/ThemeToggle.svelte.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { Size } from "../types/sizes.js";
+import type { Variant } from "../types/variants.js";
+import type { Responsive } from "../types/responsive.js";
+type $$ComponentProps = {
+    size?: Responsive<Size>;
+    variant?: Variant;
+};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/theme.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * Shared theme state — single source for the persisted theme, used by `ThemeSelector` and
+ * `ThemeToggle` so the localStorage key, the `<html>` class application, and system detection can't
+ * drift between them.
+ */
+export declare const THEME_STORAGE_KEY = "svelte-ui-theme";
+export type ThemeValue = "auto" | "light" | "dark";
+/** The saved theme, or `"auto"` when nothing valid is stored (or on the server). */
+export declare function readStoredTheme(): ThemeValue;
+/** The OS/browser preference, used to resolve `"auto"` to a concrete light/dark. */
+export declare function systemTheme(): "light" | "dark";
+/** The concrete theme in effect — `"auto"` resolved against the system preference. */
+export declare function resolveTheme(value: ThemeValue): "light" | "dark";
+/**
+ * Apply a theme to `<html>` (documentElement) — NOT `<body>` — and persist it.
+ * The tokens (incl. --ui-color-hover/active, which color-mix from other tokens) are defined at
+ * `:root`; app.html's pre-hydration script forces the class onto `<html>`. Applying it to `<body>`
+ * instead would leave `<html>` on the system `@media(prefers-color-scheme)` path, so token-references
+ * would resolve against the WRONG theme at `:root` and inherit down stale (e.g. a white hover-tint on
+ * a light page → invisible hover). Keep the class on `:root`. `"auto"` clears both classes so the
+ * `@media` path takes over.
+ */
+export declare function applyTheme(value: ThemeValue): void;

package/dist/components/theme.js ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * Shared theme state — single source for the persisted theme, used by `ThemeSelector` and
+ * `ThemeToggle` so the localStorage key, the `<html>` class application, and system detection can't
+ * drift between them.
+ */
+export const THEME_STORAGE_KEY = "svelte-ui-theme";
+const THEME_CLASSES = {
+    light: "theme-light",
+    dark: "theme-dark",
+};
+/** The saved theme, or `"auto"` when nothing valid is stored (or on the server). */
+export function readStoredTheme() {
+    if (typeof window === "undefined")
+        return "auto";
+    const v = localStorage.getItem(THEME_STORAGE_KEY);
+    return v === "light" || v === "dark" || v === "auto" ? v : "auto";
+}
+/** The OS/browser preference, used to resolve `"auto"` to a concrete light/dark. */
+export function systemTheme() {
+    if (typeof window === "undefined")
+        return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+/** The concrete theme in effect — `"auto"` resolved against the system preference. */
+export function resolveTheme(value) {
+    return value === "auto" ? systemTheme() : value;
+}
+/**
+ * Apply a theme to `<html>` (documentElement) — NOT `<body>` — and persist it.
+ * The tokens (incl. --ui-color-hover/active, which color-mix from other tokens) are defined at
+ * `:root`; app.html's pre-hydration script forces the class onto `<html>`. Applying it to `<body>`
+ * instead would leave `<html>` on the system `@media(prefers-color-scheme)` path, so token-references
+ * would resolve against the WRONG theme at `:root` and inherit down stale (e.g. a white hover-tint on
+ * a light page → invisible hover). Keep the class on `:root`. `"auto"` clears both classes so the
+ * `@media` path takes over.
+ */
+export function applyTheme(value) {
+    if (typeof document === "undefined")
+        return;
+    const { body, documentElement: html } = document;
+    Object.values(THEME_CLASSES).forEach((className) => {
+        body.classList.remove(className);
+        html.classList.remove(className);
+    });
+    if (value === "light" || value === "dark")
+        html.classList.add(THEME_CLASSES[value]);
+    if (typeof window !== "undefined")
+        localStorage.setItem(THEME_STORAGE_KEY, value);
+}

package/dist/index.d.ts CHANGED Viewed

@@ -28,6 +28,7 @@ export { default as TimeSpinner } from "./components/TimeSpinner.svelte";
 export { default as TimePicker } from "./components/TimePicker.svelte";
 export { default as TimeRangeInput } from "./components/TimeRangeInput.svelte";
 export { default as ThemeSelector } from "./components/ThemeSelector.svelte";
+export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
 export { default as Popup } from "./components/Popup.svelte";
 export { default as Menu } from "./components/Menu.svelte";
 export { default as Checkbox } from "./components/Checkbox.svelte";

package/dist/index.js CHANGED Viewed

@@ -32,6 +32,7 @@ export { default as TimePicker } from "./components/TimePicker.svelte";
 export { default as TimeRangeInput } from "./components/TimeRangeInput.svelte";
 // Theme Components
 export { default as ThemeSelector } from "./components/ThemeSelector.svelte";
+export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
 // Utility Components
 export { default as Popup } from "./components/Popup.svelte";
 export { default as Menu } from "./components/Menu.svelte";

package/docs/components.md CHANGED Viewed

@@ -231,9 +231,20 @@ Status indicator / label.
 Theme switcher (Auto / Light / Dark), built on `Select`.
 - **Location**: `src/lib/components/ThemeSelector.svelte`
-- **Features**: applies `.theme-light` / `.theme-dark` to `<html>`/`<body>`, `auto` follows the
+- **Axes**: `size`, `variant` (forwarded to the Select)
+- **Features**: applies `.theme-light` / `.theme-dark` to `<html>`, `auto` follows the
   system preference, persists to `localStorage` (`svelte-ui-theme`)
+### ThemeToggle
+Compact icon-button sibling of `ThemeSelector` — flips light ⇄ dark (☀ / ☾), built on `Button`.
+- **Location**: `src/lib/components/ThemeToggle.svelte`
+- **Axes**: `size`, `variant` (default `ghost`)
+- **Features**: shares `ThemeSelector`'s state (same `localStorage` key + `<html>` application, via
+  `src/lib/components/theme.ts`), follows the system preference until first toggled, icon reflects the
+  effective theme
 ## Import Pattern
 ```typescript

package/docs/usage.md CHANGED Viewed

@@ -454,12 +454,16 @@ See the live demo for the full DataTable + Query walkthrough — http://localhos
 </style>
 ```
-### Theme Selector
+### Theme Selector / Toggle
 ```svelte
 <script>
-  import { ThemeSelector } from "@spaethtech/svelte-ui";
+  import { ThemeSelector, ThemeToggle } from "@spaethtech/svelte-ui";
 </script>
+<!-- Full Auto/Light/Dark dropdown -->
 <ThemeSelector />
+<!-- Compact ☀/☾ icon toggle (light ⇄ dark) — same persisted state, follows system until toggled -->
+<ThemeToggle />
 ```

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.4.1-dev.14.d54aa31",
+  "version": "0.4.1-dev.17.75f0491",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"