@loidolt/theme-svelte 0.3.0 → 0.4.0

package/dist/components/SwatchGroup.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" generics="T extends string = string">
+  import type { HTMLFieldsetAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface SwatchOption<V extends string = string> {
+    value: V;
+    /** Accessible name of the swatch. Falls back to the color value. */
+    label?: string;
+    /** Any CSS color. */
+    color: string;
+    disabled?: boolean;
+  }
+
+  interface Props extends HTMLFieldsetAttributes {
+    options: SwatchOption<T>[];
+    value?: T;
+    onValueChange?: (value: T) => void;
+    size?: 'sm' | 'md';
+    /** Visible group label, rendered as a `<legend>`. */
+    label?: string;
+    /** Shared `name` for the radios. Defaults to an SSR-stable generated id. */
+    name?: string;
+    disabled?: boolean;
+    class?: string;
+    ref?: HTMLFieldSetElement | null;
+  }
+
+  const generatedName = $props.id();
+
+  let {
+    options,
+    value = $bindable(),
+    onValueChange,
+    size = 'md',
+    label,
+    name = generatedName,
+    disabled = false,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<fieldset bind:this={ref} class={cx('ldt-fieldset', className)} {disabled} {...rest}>
+  {#if label}<legend class="ldt-legend">{label}</legend>{/if}
+  <div class={cx('ldt-swatch-group', size === 'sm' && 'ldt-swatch-group--sm')}>
+    {#each options as option (option.value)}
+      <label
+        class="ldt-swatch-group__swatch"
+        style={`--ldt-swatch: ${option.color};`}
+        title={option.label ?? option.color}
+      >
+        <input
+          class="ldt-sr-only"
+          type="radio"
+          {name}
+          value={option.value}
+          checked={value === option.value}
+          disabled={option.disabled}
+          onchange={() => {
+            value = option.value;
+            onValueChange?.(option.value);
+          }}
+        />
+        <span class="ldt-sr-only">{option.label ?? option.color}</span>
+      </label>
+    {/each}
+  </div>
+</fieldset>

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

@@ -0,0 +1,44 @@
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+declare function $$render<T extends string = string>(): {
+    props: HTMLFieldsetAttributes & {
+        options: {
+            value: T;
+            /** Accessible name of the swatch. Falls back to the color value. */
+            label?: string;
+            /** Any CSS color. */
+            color: string;
+            disabled?: boolean;
+        }[];
+        value?: T;
+        onValueChange?: (value: T) => void;
+        size?: "sm" | "md";
+        /** Visible group label, rendered as a `<legend>`. */
+        label?: string;
+        /** Shared `name` for the radios. Defaults to an SSR-stable generated id. */
+        name?: string;
+        disabled?: boolean;
+        class?: string;
+        ref?: HTMLFieldSetElement | null;
+    };
+    exports: {};
+    bindings: "value" | "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SwatchGroup: $$IsomorphicComponent;
+type SwatchGroup<T extends string = string> = InstanceType<typeof SwatchGroup<T>>;
+export default SwatchGroup;

package/dist/components/Switch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLButtonAttributes } from 'svelte/elements';
   import { cx } from '../utils.js';
@@ -20,6 +21,7 @@
     checked = $bindable(false),
     disabled = false,
     name,
+    form,
     value = 'on',
     onCheckedChange,
     onclick,
@@ -29,6 +31,20 @@
     ...rest
   }: Props = $props();
 
+  let input = $state<HTMLInputElement | null>(null);
+  const initialChecked = checked;
+
+  onMount(() => {
+    const owner = input?.form;
+    if (!owner) return;
+    const reset = () => {
+      checked = initialChecked;
+      onCheckedChange?.(checked);
+    };
+    owner.addEventListener('reset', reset);
+    return () => owner.removeEventListener('reset', reset);
+  });
+
   function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
     if (disabled) return;
     checked = !checked;
@@ -43,6 +59,7 @@
   role="switch"
   aria-checked={checked}
   {disabled}
+  {form}
   class={cx('ldt-switch', className)}
   {...rest}
   onclick={handleClick}
@@ -51,11 +68,13 @@
   {#if children}<span>{@render children()}</span>{/if}
 </button>
 {#if name}<input
+    bind:this={input}
     type="checkbox"
     class="ldt-sr-only"
     tabindex="-1"
     aria-hidden="true"
     {name}
+    {form}
     {value}
     {checked}
     {disabled}

package/dist/components/Tabs.svelte

@@ -44,6 +44,16 @@
   const active = $derived(
     value !== undefined && tabs.some((tab) => tab.value === value) ? value : tabs[0]?.value
   );
+
+  // Keep the public binding honest when a dynamic collection removes the selected tab. Effects
+  // do not run during SSR, so the server render remains side-effect free while the client and its
+  // parent converge on the fallback that is already being displayed.
+  $effect(() => {
+    if (active !== undefined && value !== active) {
+      value = active;
+      onValueChange?.(active);
+    }
+  });
 </script>
 
 <TabsPrimitive.Root

package/dist/components/ThemeToggle.svelte

@@ -1,27 +1,22 @@
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import type { ControlSize, Option } from '../types.js';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { ControlSize } from '../types.js';
   import type { Theme, ThemePreference } from '../theme.svelte.js';
-  import ToggleGroup from './ToggleGroup.svelte';
+  import { cx } from '../utils.js';
 
-  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  interface Props extends Omit<HTMLButtonAttributes, 'children' | 'aria-label'> {
     /** The store from `createTheme()`. */
     theme: Theme;
-    /** Narrowed from the DOM attribute: the group this spreads onto rejects `null`. */
-    id?: string;
-    /** Accessible name of the group. */
+    /** Accessible name for the preference represented by the icon. */
     label?: string;
     lightLabel?: string;
     darkLabel?: string;
     systemLabel?: string;
-    /**
-     * Offers "system" alongside the two schemes. Worth keeping: without it a user who has not
-     * chosen is silently locked to whichever scheme they happened to land on.
-     */
+    /** Include "system" in the cycle. */
     showSystem?: boolean;
     size?: ControlSize;
     class?: string;
-    ref?: HTMLDivElement | null;
+    ref?: HTMLButtonElement | null;
   }
 
   let {
@@ -33,30 +28,106 @@
     showSystem = true,
     size = 'sm',
     class: className,
+    disabled = false,
+    type = 'button',
+    title,
+    onclick,
     ref = $bindable(null),
     ...rest
   }: Props = $props();
 
-  const options = $derived<Option<ThemePreference>[]>([
-    { value: 'light', label: lightLabel },
-    { value: 'dark', label: darkLabel },
-    ...(showSystem ? [{ value: 'system' as const, label: systemLabel }] : []),
-  ]);
+  const preferences = $derived<ThemePreference[]>(
+    showSystem ? ['light', 'dark', 'system'] : ['light', 'dark']
+  );
+
+  // If the system option is hidden, represent the scheme that is actually showing and toggle
+  // away from it on the first press.
+  const activePreference = $derived<ThemePreference>(
+    !showSystem && theme.preference === 'system' ? theme.resolved : theme.preference
+  );
+  const currentIndex = $derived(preferences.indexOf(activePreference));
+  const nextPreference = $derived(preferences[(currentIndex + 1) % preferences.length]);
+
+  const preferenceLabel = (preference: ThemePreference) => {
+    if (preference === 'light') return lightLabel;
+    if (preference === 'dark') return darkLabel;
+    return systemLabel;
+  };
+
+  const currentLabel = $derived(preferenceLabel(activePreference));
+  const nextLabel = $derived(preferenceLabel(nextPreference));
+  const buttonLabel = $derived(`${label}: ${currentLabel}`);
+  const buttonTitle = $derived(title ?? `${buttonLabel} → ${nextLabel}`);
 </script>
 
-<!--
-  A segmented scheme picker wired to `createTheme()`. Pressing the pressed option is ignored: a
-  toggle group deselects on a second press, and "no colour scheme" is not a state a page can be in.
--->
-<ToggleGroup
-  bind:ref
-  {options}
-  {label}
-  {size}
-  value={theme.preference}
-  onValueChange={(next) => {
-    if (next) theme.preference = next as ThemePreference;
+<!-- A native button gives the three-state cycle standard keyboard behavior in one compact target. -->
+<button
+  bind:this={ref}
+  {type}
+  {disabled}
+  aria-label={buttonLabel}
+  title={buttonTitle}
+  class={cx(
+    'ldt-button ldt-icon-button ldt-button--ghost',
+    size !== 'md' && `ldt-button--${size}`,
+    className
+  )}
+  data-theme-preference={activePreference}
+  onclick={(event) => {
+    theme.preference = nextPreference;
+    onclick?.(event);
   }}
-  class={className}
   {...rest}
-/>
+>
+  {#if activePreference === 'light'}
+    <svg
+      data-theme-icon="light"
+      aria-hidden="true"
+      focusable="false"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="square"
+    >
+      <circle cx="12" cy="12" r="3.5" />
+      <path
+        d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42"
+      />
+    </svg>
+  {:else if activePreference === 'dark'}
+    <svg
+      data-theme-icon="dark"
+      aria-hidden="true"
+      focusable="false"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linejoin="miter"
+    >
+      <path d="M20.4 15.4A8.5 8.5 0 0 1 8.6 3.6 8.5 8.5 0 1 0 20.4 15.4Z" />
+    </svg>
+  {:else}
+    <svg
+      data-theme-icon="system"
+      aria-hidden="true"
+      focusable="false"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+    >
+      <rect x="3" y="4" width="18" height="13" />
+      <path d="M9 21h6M12 17v4" />
+    </svg>
+  {/if}
+</button>

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

@@ -1,24 +1,19 @@
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { ControlSize } from '../types.js';
 import type { Theme } from '../theme.svelte.js';
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+interface Props extends Omit<HTMLButtonAttributes, 'children' | 'aria-label'> {
     /** The store from `createTheme()`. */
     theme: Theme;
-    /** Narrowed from the DOM attribute: the group this spreads onto rejects `null`. */
-    id?: string;
-    /** Accessible name of the group. */
+    /** Accessible name for the preference represented by the icon. */
     label?: string;
     lightLabel?: string;
     darkLabel?: string;
     systemLabel?: string;
-    /**
-     * Offers "system" alongside the two schemes. Worth keeping: without it a user who has not
-     * chosen is silently locked to whichever scheme they happened to land on.
-     */
+    /** Include "system" in the cycle. */
     showSystem?: boolean;
     size?: ControlSize;
     class?: string;
-    ref?: HTMLDivElement | null;
+    ref?: HTMLButtonElement | null;
 }
 declare const ThemeToggle: import("svelte").Component<Props, {}, "ref">;
 type ThemeToggle = ReturnType<typeof ThemeToggle>;

package/dist/components/Thumbnail.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    src?: string;
+    /** Required whenever `src` is set — decorative images should say so with `alt=""`. */
+    alt?: string;
+    /** CSS aspect-ratio value: `'4/3'`, `'1/1'`, or a number. */
+    ratio?: string | number;
+    fit?: 'contain' | 'cover';
+    /** `sunken` recesses into the page; `paper` stays white in every theme for artwork. */
+    surface?: 'sunken' | 'paper';
+    /** Alternative to `src` — inline SVG, canvas, anything that fills the frame. */
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    src,
+    alt = '',
+    ratio = '4/3',
+    fit = 'contain',
+    surface = 'sunken',
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<figure
+  bind:this={ref}
+  class={cx(
+    'ldt-thumbnail',
+    surface === 'paper' && 'ldt-thumbnail--paper',
+    fit === 'cover' && 'ldt-thumbnail--cover',
+    className
+  )}
+  style={`--ldt-thumbnail-ratio: ${ratio};`}
+  {...rest}
+>
+  {#if children}{@render children()}{:else if src}<img
+      class="ldt-thumbnail__image"
+      {src}
+      {alt}
+      loading="lazy"
+    />{/if}
+</figure>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    src?: string;
+    /** Required whenever `src` is set — decorative images should say so with `alt=""`. */
+    alt?: string;
+    /** CSS aspect-ratio value: `'4/3'`, `'1/1'`, or a number. */
+    ratio?: string | number;
+    fit?: 'contain' | 'cover';
+    /** `sunken` recesses into the page; `paper` stays white in every theme for artwork. */
+    surface?: 'sunken' | 'paper';
+    /** Alternative to `src` — inline SVG, canvas, anything that fills the frame. */
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Thumbnail: import("svelte").Component<Props, {}, "ref">;
+type Thumbnail = ReturnType<typeof Thumbnail>;
+export default Thumbnail;

package/dist/components/Workspace.svelte

@@ -4,6 +4,8 @@
   import { cx } from '../utils.js';
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Full-width row above the panes — a ContextBar or toolbar. */
+    header?: Snippet;
     sidebar?: Snippet;
     children: Snippet;
     inspector?: Snippet;
@@ -16,16 +18,20 @@
     /** The same for the inspector column. */
     inspectorOpen?: boolean;
     class?: string;
+    /** Extra classes for the main pane, replacing consumer reach-ins on `__main`. */
+    mainClass?: string;
     ref?: HTMLDivElement | null;
   }
 
   let {
+    header,
     sidebar,
     children,
     inspector,
     sidebarOpen = true,
     inspectorOpen = true,
     class: className,
+    mainClass,
     ref = $bindable(null),
     ...rest
   }: Props = $props();
@@ -39,13 +45,15 @@
   bind:this={ref}
   class={cx(
     'ldt-workspace',
+    header && 'ldt-workspace--header',
     showSidebar && 'ldt-workspace--sidebar',
     showInspector && 'ldt-workspace--inspector',
     className
   )}
   {...rest}
 >
+  {#if header}<div class="ldt-workspace__header">{@render header()}</div>{/if}
   {#if showSidebar}{@render sidebar!()}{/if}
-  <div class="ldt-workspace__main">{@render children()}</div>
+  <div class={cx('ldt-workspace__main', mainClass)}>{@render children()}</div>
   {#if showInspector}{@render inspector!()}{/if}
 </div>

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Full-width row above the panes — a ContextBar or toolbar. */
+    header?: Snippet;
     sidebar?: Snippet;
     children: Snippet;
     inspector?: Snippet;
@@ -13,6 +15,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     /** The same for the inspector column. */
     inspectorOpen?: boolean;
     class?: string;
+    /** Extra classes for the main pane, replacing consumer reach-ins on `__main`. */
+    mainClass?: string;
     ref?: HTMLDivElement | null;
 }
 declare const Workspace: import("svelte").Component<Props, {}, "ref">;

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as CodeBlock } from './components/CodeBlock.svelte';
+export { default as CommentList } from './components/CommentList.svelte';
 export { default as ContextBar } from './components/ContextBar.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Drawer } from './components/Drawer.svelte';
@@ -15,9 +17,14 @@ export { default as DropdownMenu } from './components/DropdownMenu.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as Field } from './components/Field.svelte';
 export { default as Fieldset } from './components/Fieldset.svelte';
+export { default as FileInput } from './components/FileInput.svelte';
+export { default as Filmstrip } from './components/Filmstrip.svelte';
+export { default as FloatingBar } from './components/FloatingBar.svelte';
 export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as ListRow } from './components/ListRow.svelte';
+export { default as Marker } from './components/Marker.svelte';
 export { default as NavMenu } from './components/NavMenu.svelte';
 export { default as NumberField } from './components/NumberField.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
@@ -26,18 +33,24 @@ export { default as Panel } from './components/Panel.svelte';
 export { default as Popover } from './components/Popover.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';
 export { default as Section } from './components/Section.svelte';
+export { default as SegmentedNav } from './components/SegmentedNav.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Separator } from './components/Separator.svelte';
 export { default as Sidebar } from './components/Sidebar.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
 export { default as Spinner } from './components/Spinner.svelte';
+export { default as Stat } from './components/Stat.svelte';
+export { default as StatusDot } from './components/StatusDot.svelte';
+export { default as SwatchGroup } from './components/SwatchGroup.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Table } from './components/Table.svelte';
 export { default as TableHeader } from './components/TableHeader.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as ThemeToggle } from './components/ThemeToggle.svelte';
+export { default as Thumbnail } from './components/Thumbnail.svelte';
 export { default as Toast } from './components/Toast.svelte';
 export { default as ToastViewport } from './components/ToastViewport.svelte';
 export { default as ToggleGroup } from './components/ToggleGroup.svelte';

package/dist/index.js

@@ -8,6 +8,8 @@ export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as CodeBlock } from './components/CodeBlock.svelte';
+export { default as CommentList } from './components/CommentList.svelte';
 export { default as ContextBar } from './components/ContextBar.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Drawer } from './components/Drawer.svelte';
@@ -15,9 +17,14 @@ export { default as DropdownMenu } from './components/DropdownMenu.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as Field } from './components/Field.svelte';
 export { default as Fieldset } from './components/Fieldset.svelte';
+export { default as FileInput } from './components/FileInput.svelte';
+export { default as Filmstrip } from './components/Filmstrip.svelte';
+export { default as FloatingBar } from './components/FloatingBar.svelte';
 export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as ListRow } from './components/ListRow.svelte';
+export { default as Marker } from './components/Marker.svelte';
 export { default as NavMenu } from './components/NavMenu.svelte';
 export { default as NumberField } from './components/NumberField.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
@@ -26,18 +33,24 @@ export { default as Panel } from './components/Panel.svelte';
 export { default as Popover } from './components/Popover.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';
 export { default as Section } from './components/Section.svelte';
+export { default as SegmentedNav } from './components/SegmentedNav.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Separator } from './components/Separator.svelte';
 export { default as Sidebar } from './components/Sidebar.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
 export { default as Spinner } from './components/Spinner.svelte';
+export { default as Stat } from './components/Stat.svelte';
+export { default as StatusDot } from './components/StatusDot.svelte';
+export { default as SwatchGroup } from './components/SwatchGroup.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Table } from './components/Table.svelte';
 export { default as TableHeader } from './components/TableHeader.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as ThemeToggle } from './components/ThemeToggle.svelte';
+export { default as Thumbnail } from './components/Thumbnail.svelte';
 export { default as Toast } from './components/Toast.svelte';
 export { default as ToastViewport } from './components/ToastViewport.svelte';
 export { default as ToggleGroup } from './components/ToggleGroup.svelte';

package/dist/theme.svelte.js

@@ -138,14 +138,24 @@ export function createTheme(options = {}) {
  */
 export function themeScript(options = {}) {
     const { storageKey = 'loidolt-theme', attribute = 'data-theme', defaultPreference = 'system', defaultScheme = 'light', tag = false, } = options;
-    // JSON.stringify keeps a caller-supplied key or attribute from breaking out of its literal.
-    const key = JSON.stringify(storageKey);
-    const attr = JSON.stringify(attribute);
-    const fallback = JSON.stringify(defaultPreference);
-    const scheme = JSON.stringify(defaultScheme);
+    // 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.
+    const serialize = (value) => JSON.stringify(value)
+        .replaceAll('<', '\\u003c')
+        .replaceAll('>', '\\u003e')
+        .replaceAll('&', '\\u0026')
+        .replaceAll('\u2028', '\\u2028')
+        .replaceAll('\u2029', '\\u2029');
+    const key = serialize(storageKey);
+    const attr = serialize(attribute);
+    const fallback = serialize(defaultPreference);
+    const scheme = serialize(defaultScheme);
     const source = `(function(){try{` +
-        `var p=${key}===null?null:localStorage.getItem(${key});` +
-        `if(p!=="light"&&p!=="dark"&&p!=="system")p=${fallback};` +
+        `var p=${fallback};` +
+        // Storage failure must not skip system resolution and attribute application.
+        `try{var v=${key}===null?null:localStorage.getItem(${key});` +
+        `if(v==="light"||v==="dark"||v==="system")p=v;}catch(e){}` +
         `var s=${scheme};` +
         `if(typeof matchMedia==="function")s=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";` +
         `document.documentElement.setAttribute(${attr},p==="system"?s:p);` +

package/dist/toaster.svelte.d.ts

@@ -26,6 +26,8 @@ export interface Toaster {
     pause(): void;
     /** Resumes with the time each toast had left — call on pointer leave / focus out. */
     resume(): void;
+    /** Clears the queue and every timer. Automatic for a component-scoped instance. */
+    destroy(): void;
 }
 /**
  * Queue behind `Toast` / `ToastViewport`: auto-dismiss with the remaining time preserved