@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/providers/NeoThemeSelector.svelte

@@ -2,125 +2,43 @@
   import type { NeoThemeSelectorProps } from './neo-theme-selector.model.js';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import NeoButtonGroup from '../buttons/NeoButtonGroup.svelte';
-  import IconImage from '../icons/IconImage.svelte';
-  import IconSave from '../icons/IconSave.svelte';
-  import IconSaveOff from '../icons/IconSaveOff.svelte';
-  import IconSun from '../icons/IconSun.svelte';
-  import IconSunMoon from '../icons/IconSunMoon.svelte';
+  import NeoIconSunMoon from '../icons/NeoIconSunMoon.svelte';
   import { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
-  import { NeoSource, NeoTheme } from './neo-theme-provider.model.js';
-
-  const {
-    // Snippet
-    children,
+  import { NeoTheme } from './neo-theme-provider.model.js';
 
+  let {
     // state
-    remember: showRemember,
-    sourceLabel = 'Source',
-    source: showSource = true,
-    themeLabel = 'Theme',
-    theme: showTheme = true,
-    reset: showReset,
+    label = 'Theme',
+
+    // Button props
+    ref = $bindable(),
+    hovered = $bindable(false),
+    focused = $bindable(false),
 
     // Other props
-    rememberProps,
-    sourceProps,
-    themeProps,
-    resetProps,
     ...rest
   }: NeoThemeSelectorProps = $props();
 
   const context = useNeoThemeContext();
 
-  const reset = $derived(context.reset);
   const dark = $derived(context.theme === NeoTheme.Dark);
-  const source = $derived(context.source);
-  const remember = $derived(context.remember);
-
-  const sources = Object.values(NeoSource);
-  const sourceMap = { ...sources };
-  const sourceIndexMap = Object.fromEntries(Object.entries(sourceMap).map(([k, v]) => [v, Number(k)]));
 
-  let angle = $state(sourceIndexMap[context.source] * 90);
-  const onCycleSource = () => {
-    angle += 90;
-    context.update({ source: sourceMap[(sourceIndexMap[source] + 1) % sources.length] });
-  };
-
-  const onTheme = () => context.update({ theme: dark ? NeoTheme.Light : NeoTheme.Dark });
-  const onReset = () => context.update({ reset: !reset });
-  const onRemember = () => context.update({ remember: !remember });
+  const onTheme = () => context.update({ theme: dark ? NeoTheme.Light : NeoTheme.Dark }, ref);
 </script>
 
-<NeoButtonGroup elevation="2" {...rest}>
-  {#if showSource}
-    <NeoButton
-      aria-label="Cycle light source origin"
-      title="Cycle light source origin"
-      checked
-      onclick={onCycleSource}
-      label={sourceLabel}
-      {...sourceProps}
-    >
-      {#snippet icon()}
-        <span class="neo-source-icon" style:--neo-source-rotate="{angle}deg">
-          <IconSun />
-        </span>
-      {/snippet}
-    </NeoButton>
-  {/if}
-  {#if showTheme}
-    <NeoButton
-      aria-label="Toggle {dark ? 'light' : 'dark'} theme"
-      title="Toggle {dark ? 'light' : 'dark'} theme"
-      toggle
-      checked={dark}
-      onclick={onTheme}
-      label={themeLabel}
-      {...themeProps}
-    >
-      {#snippet icon()}
-        <IconSunMoon state={dark ? 'moon' : 'sun'} />
-      {/snippet}
-    </NeoButton>
-  {/if}
-  {#if showReset}
-    <NeoButton
-      aria-label="Toggle {reset ? 'off' : 'on'} style reset"
-      title="Toggle {reset ? 'off' : 'on'} style reset"
-      toggle
-      checked={reset}
-      onclick={onReset}
-      {...resetProps}
-    >
-      {#snippet icon()}
-        <IconImage />
-      {/snippet}
-    </NeoButton>
-  {/if}
-  {#if showRemember}
-    <NeoButton aria-label="Remember theme settings" title="Remember theme settings" toggle checked={remember} onclick={onRemember} {...rememberProps}>
-      {#snippet icon()}
-        {#if remember}
-          <IconSave />
-        {:else}
-          <IconSaveOff />
-        {/if}
-      {/snippet}
-    </NeoButton>
-  {/if}
-  {@render children?.(context.state)}
-</NeoButtonGroup>
-
-<style>.neo-source-icon {
-  overflow: hidden;
-  border-radius: var(--neo-theme-selector-border-radius, var(--neo-border-radius-lg));
-  rotate: var(--neo-source-rotate, 0);
-  transition: rotate 0.5s ease;
-}
-.neo-source-icon :global(> svg) {
-  width: 1.25rem;
-  height: 1.25rem;
-  translate: -30% -30%;
-}</style>
+<NeoButton
+  bind:ref
+  bind:hovered
+  bind:focused
+  aria-label="Toggle {dark ? 'light' : 'dark'} theme"
+  title="Toggle {dark ? 'light' : 'dark'} theme"
+  toggle
+  checked={dark}
+  onclick={onTheme}
+  {label}
+  {...rest}
+>
+  {#snippet icon()}
+    <NeoIconSunMoon state={dark ? 'moon' : 'sun'} />
+  {/snippet}
+</NeoButton>

package/dist/providers/NeoThemeSelector.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoThemeSelectorProps } from './neo-theme-selector.model.js';
-declare const NeoThemeSelector: import("svelte").Component<NeoThemeSelectorProps, {}, "">;
+declare const NeoThemeSelector: import("svelte").Component<NeoThemeSelectorProps, {}, "ref" | "hovered" | "focused">;
 type NeoThemeSelector = ReturnType<typeof NeoThemeSelector>;
 export default NeoThemeSelector;

package/dist/providers/NeoThemeSelectors.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { NeoThemeSelectorsProps } from './neo-theme-selectors.model.js';
+
+  import NeoButtonGroup from '../buttons/NeoButtonGroup.svelte';
+  import { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
+  import NeoRememberSelector from './NeoRememberSelector.svelte';
+  import NeoResetSelector from './NeoResetSelector.svelte';
+  import NeoSourceSelector from './NeoSourceSelector.svelte';
+  import NeoThemeSelector from './NeoThemeSelector.svelte';
+  import NeoTransitionSelector from './NeoTransitionSelector.svelte';
+
+  const {
+    // Snippet
+    children,
+
+    // state
+    sourceLabel,
+    source: showSource,
+    themeLabel,
+    theme: showTheme = true,
+    resetLabel,
+    reset: showReset,
+    rememberLabel,
+    remember: showRemember,
+    themeTransitionLabel,
+    themeTransition: showTransition,
+
+    // Other props
+    themeTransitionProps,
+    rememberProps,
+    sourceProps,
+    themeProps,
+    resetProps,
+    ...rest
+  }: NeoThemeSelectorsProps = $props();
+
+  const context = useNeoThemeContext();
+</script>
+
+<NeoButtonGroup elevation="2" {...rest}>
+  {#if showSource}
+    <NeoSourceSelector label={sourceLabel} {...sourceProps} />
+  {/if}
+  {#if showTheme}
+    <NeoThemeSelector label={themeLabel} {...themeProps} />
+  {/if}
+  {#if showTransition}
+    <NeoTransitionSelector label={themeTransitionLabel} {...themeTransitionProps} />
+  {/if}
+  {#if showReset}
+    <NeoResetSelector label={resetLabel} {...resetProps} />
+  {/if}
+  {#if showRemember}
+    <NeoRememberSelector label={rememberLabel} {...rememberProps} />
+  {/if}
+  {@render children?.(context.state)}
+</NeoButtonGroup>

package/dist/providers/NeoThemeSelectors.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoThemeSelectorsProps } from './neo-theme-selectors.model.js';
+declare const NeoThemeSelectors: import("svelte").Component<NeoThemeSelectorsProps, {}, "">;
+type NeoThemeSelectors = ReturnType<typeof NeoThemeSelectors>;
+export default NeoThemeSelectors;

package/dist/providers/NeoTransitionSelector.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { NeoSourceSelectorProps } from './neo-source-selector.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoIconCircle from '../icons/NeoIconCircle.svelte';
+  import NeoIconCube from '../icons/NeoIconCube.svelte';
+  import NeoIconEmpty from '../icons/NeoIconEmpty.svelte';
+  import NeoIconWave from '../icons/NeoIconWave.svelte';
+  import { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
+  import { NeoTransition } from './neo-theme-provider.model.js';
+
+  const {
+    // state
+    label = 'Transition',
+
+    // Button props
+    ref = $bindable(),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+
+    // Other props
+    ...rest
+  }: NeoSourceSelectorProps = $props();
+
+  const context = useNeoThemeContext();
+
+  const transition = $derived(context.transition);
+
+  const transitions = Object.values(NeoTransition);
+  const sourceMap = { ...transitions };
+  const indexMap = Object.fromEntries(Object.entries(sourceMap).map(([k, v]) => [v, Number(k)]));
+
+  const onclick = () => {
+    context.update({ transition: sourceMap[(indexMap[transition] + 1) % transitions.length] });
+  };
+
+</script>
+
+<NeoButton
+  aria-label="Cycle theme transition"
+  title="Cycle theme transition - {transition}"
+  {onclick}
+  {label}
+  {...rest}
+>
+  {#snippet icon()}
+    {#if transition === NeoTransition.Spin}
+      <NeoIconCube />
+    {:else if transition === NeoTransition.Wave}
+      <NeoIconWave />
+    {:else if transition === NeoTransition.Circle}
+      <NeoIconCircle />
+    {:else}
+      <NeoIconEmpty />
+    {/if}
+  {/snippet}
+</NeoButton>

package/dist/providers/NeoTransitionSelector.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoSourceSelectorProps } from './neo-source-selector.model.js';
+declare const NeoTransitionSelector: import("svelte").Component<NeoSourceSelectorProps, {}, "ref" | "hovered" | "focused">;
+type NeoTransitionSelector = ReturnType<typeof NeoTransitionSelector>;
+export default NeoTransitionSelector;

package/dist/providers/index.d.ts

@@ -1,7 +1,17 @@
+export { default as NeoRememberSelector } from './NeoRememberSelector.svelte';
+export { default as NeoResetSelector } from './NeoResetSelector.svelte';
+export { default as NeoSourceSelector } from './NeoSourceSelector.svelte';
 export { default as NeoThemePicker } from './NeoThemePicker.svelte';
 export { default as NeoThemeProvider } from './NeoThemeProvider.svelte';
 export { default as NeoThemeSelector } from './NeoThemeSelector.svelte';
+export { default as NeoThemeSelectors } from './NeoThemeSelectors.svelte';
+export { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
 export { NeoSource, NeoTheme, NeoThemeRoot, NeoThemeStorageKey } from './neo-theme-provider.model.js';
+export type { NeoThemeProviderContext, NeoThemeProviderContextState } from './neo-theme-provider-context.svelte.js';
+export type * from './neo-remember-selector.model.js';
+export type * from './neo-reset-selector.model.js';
+export type * from './neo-source-selector.model.js';
 export type * from './neo-theme-picker.model.js';
 export type * from './neo-theme-provider.model.js';
 export type * from './neo-theme-selector.model.js';
+export type * from './neo-theme-selectors.model.js';

package/dist/providers/index.js

@@ -1,4 +1,9 @@
+export { default as NeoRememberSelector } from './NeoRememberSelector.svelte';
+export { default as NeoResetSelector } from './NeoResetSelector.svelte';
+export { default as NeoSourceSelector } from './NeoSourceSelector.svelte';
 export { default as NeoThemePicker } from './NeoThemePicker.svelte';
 export { default as NeoThemeProvider } from './NeoThemeProvider.svelte';
 export { default as NeoThemeSelector } from './NeoThemeSelector.svelte';
+export { default as NeoThemeSelectors } from './NeoThemeSelectors.svelte';
+export { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
 export { NeoSource, NeoTheme, NeoThemeRoot, NeoThemeStorageKey } from './neo-theme-provider.model.js';

package/dist/providers/neo-remember-selector.model.d.ts

@@ -0,0 +1,9 @@
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+export interface NeoRememberSelectorProps extends NeoButtonProps {
+    /**
+     * The label to show in the Remember selector.
+     *
+     * @default Remember
+     */
+    label?: string;
+}

package/dist/providers/neo-remember-selector.model.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/providers/neo-reset-selector.model.d.ts

@@ -0,0 +1,9 @@
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+export interface NeoResetSelectorProps extends NeoButtonProps {
+    /**
+     * The label to show in the reset selector.
+     *
+     * @default Reset
+     */
+    label?: string;
+}

package/dist/providers/neo-reset-selector.model.js

@@ -0,0 +1 @@
+export {};

package/dist/providers/neo-source-selector.model.d.ts

@@ -0,0 +1,9 @@
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+export interface NeoSourceSelectorProps extends NeoButtonProps {
+    /**
+     * The label to show in the source selector.
+     *
+     * @default Source
+     */
+    label?: string;
+}

package/dist/providers/neo-source-selector.model.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/providers/neo-theme-provider-context.svelte.d.ts

@@ -1,5 +1,12 @@
 import type { INeoThemeProviderContext } from './neo-theme-provider.model.js';
 type NeoThemeProviderRoot = INeoThemeProviderContext['root'] | (() => INeoThemeProviderContext['root']);
+export declare function computeCircleStart(element?: HTMLElement, { viewportWidth, viewportHeight }?: {
+    viewportWidth?: number | undefined;
+    viewportHeight?: number | undefined;
+}): {
+    x?: number;
+    y?: number;
+};
 export type NeoThemeProviderContextState = Partial<Omit<INeoThemeProviderContext, 'root'>> & {
     root?: NeoThemeProviderRoot;
 };
@@ -9,19 +16,23 @@ export declare class NeoThemeProviderContext implements INeoThemeProviderContext
     get theme(): import("./neo-theme-provider.model.js").NeoThemes;
     get source(): import("./neo-theme-provider.model.js").NeoSources;
     get remember(): boolean;
+    get transition(): import("./neo-theme-provider.model.js").NeoTransitions;
     get root(): HTMLElement | ShadowRoot | undefined;
+    get ready(): boolean | undefined;
     get state(): {
         reset: boolean | undefined;
         theme: import("./neo-theme-provider.model.js").NeoThemes;
         source: import("./neo-theme-provider.model.js").NeoSources;
         remember: boolean;
+        transition: import("./neo-theme-provider.model.js").NeoTransitions;
         root: HTMLElement | ShadowRoot | undefined;
     };
-    constructor({ reset, theme, source, remember, root }: NeoThemeProviderContextState);
-    update(partial: Partial<NeoThemeProviderContextState>): void;
+    constructor({ reset, theme, source, remember, transition, root }: NeoThemeProviderContextState);
+    update(partial: Partial<NeoThemeProviderContextState>, trigger?: HTMLElement): void;
     private setTheme;
     private setSource;
-    sync(): void;
+    import(target?: HTMLElement | ShadowRoot | undefined): void;
+    sync(trigger?: HTMLElement): void;
     destroy(): void;
 }
 export declare function setNeoThemeContext(context: NeoThemeProviderContextState): NeoThemeProviderContext;

package/dist/providers/neo-theme-provider-context.svelte.js

@@ -1,13 +1,58 @@
 import { wait } from '@dvcol/common-utils/common/promise';
 import { getContext, setContext, untrack } from 'svelte';
-import { getRemember, getReset, getSource, getTheme, NeoThemeRoot, NeoThemeStorageKey } from './neo-theme-provider.model.js';
+import { getRemember, getReset, getSource, getTheme, getTransition, NeoThemeRoot, NeoThemeStorageKey } from './neo-theme-provider.model.js';
 import { NeoErrorThemeContextNotFound, NeoErrorThemeInvalidTarget, NeoErrorThemeTargetNotFound } from '../utils/error.utils.js';
+import styles from './neo-theme-provider.scss?url';
+function isRootElement(root) {
+    return !!root && root instanceof HTMLElement;
+}
+export function computeCircleStart(element, { viewportWidth = window.innerWidth, viewportHeight = window.innerHeight } = {}) {
+    if (!element)
+        return {};
+    // Get button's position relative to the viewport
+    const rect = element.getBoundingClientRect();
+    // Calculate center of the button
+    const buttonCenterX = rect.left + (rect.width / 2);
+    const buttonCenterY = rect.top + (rect.height / 2);
+    // Convert to percentages
+    const xPercentage = (buttonCenterX / viewportWidth) * 100;
+    const yPercentage = (buttonCenterY / viewportHeight) * 100;
+    return {
+        x: Math.round(xPercentage),
+        y: Math.round(yPercentage),
+    };
+}
+async function transitionViewTheme(root, theme, trigger) {
+    if (trigger && isRootElement(root)) {
+        const { x, y } = computeCircleStart(trigger);
+        if (x)
+            root.style.setProperty('--neo-transition-trigger-x', `${x}%`);
+        if (y)
+            root.style.setProperty('--neo-transition-trigger-y', `${y}%`);
+    }
+    const transition = document.startViewTransition(() => {
+        if (!root)
+            throw new NeoErrorThemeTargetNotFound();
+        if (!('setAttribute' in root))
+            throw new NeoErrorThemeInvalidTarget();
+        root.setAttribute(NeoThemeStorageKey.InFlight, 'true');
+        root.setAttribute(NeoThemeStorageKey.Theme, theme);
+    });
+    await transition.finished;
+    if (!isRootElement(root))
+        return;
+    root.removeAttribute(NeoThemeStorageKey.InFlight);
+    root.style.removeProperty('--neo-transition-trigger-x');
+    root.style.removeProperty('--neo-transition-trigger-y');
+}
 export class NeoThemeProviderContext {
     #reset = $state(getReset());
     #theme = $state(getTheme());
     #source = $state(getSource());
     #remember = $state(getRemember());
+    #transition = $state(getTransition());
     #root = $state(document?.documentElement);
+    #ready = $state(false);
     get reset() {
         return this.#reset;
     }
@@ -20,27 +65,34 @@ export class NeoThemeProviderContext {
     get remember() {
         return this.#remember;
     }
+    get transition() {
+        return this.#transition;
+    }
     get root() {
         return typeof this.#root === 'function' ? this.#root() : this.#root;
     }
+    get ready() {
+        return this.#ready;
+    }
     get state() {
         return {
             reset: this.reset,
             theme: this.theme,
             source: this.source,
             remember: this.remember,
+            transition: this.transition,
             root: this.root,
         };
     }
-    constructor({ reset, theme, source, remember, root }) {
+    constructor({ reset, theme, source, remember, transition, root }) {
         this.#reset = reset ?? this.reset;
         this.#theme = theme ?? this.theme;
         this.#source = source ?? this.source;
         this.#remember = remember ?? this.remember;
+        this.#transition = transition ?? this.transition;
         this.#root = root ?? this.root;
-        this.sync();
     }
-    update(partial) {
+    update(partial, trigger) {
         untrack(() => {
             if (partial.reset !== undefined)
                 this.#reset = partial.reset;
@@ -50,22 +102,28 @@ export class NeoThemeProviderContext {
                 this.#source = partial.source;
             if (partial.remember !== undefined)
                 this.#remember = partial.remember;
+            if (partial.transition !== undefined)
+                this.#transition = partial.transition;
             if (partial.root !== undefined)
                 this.#root = partial.root;
-            this.sync();
+            this.sync(trigger);
         });
     }
-    async setTheme(theme) {
+    async setTheme(theme, trigger) {
         if (!this.root)
             throw new NeoErrorThemeTargetNotFound();
         if (!('setAttribute' in this.root))
             throw new NeoErrorThemeInvalidTarget();
-        if (this.theme === this.root.getAttribute(NeoThemeStorageKey.Theme))
-            return;
+        if (this.theme === this.root.getAttribute(NeoThemeStorageKey.Theme)) {
+            return this.root.setAttribute(NeoThemeStorageKey.Transition, this.transition);
+        }
+        if ('startViewTransition' in document && this.root.getAttribute(NeoThemeStorageKey.Transition)?.startsWith('neo')) {
+            return transitionViewTheme(this.root, theme, trigger);
+        }
         this.root.setAttribute(NeoThemeStorageKey.Transition, 'false');
         this.root.setAttribute(NeoThemeStorageKey.Theme, theme);
         await wait();
-        this.root.removeAttribute(NeoThemeStorageKey.Transition);
+        this.root.setAttribute(NeoThemeStorageKey.Transition, this.transition);
     }
     setSource(source) {
         if (!this.root)
@@ -76,13 +134,34 @@ export class NeoThemeProviderContext {
             return;
         this.root.setAttribute(NeoThemeStorageKey.Source, source);
     }
-    sync() {
+    import(target = this.root) {
+        if (!target)
+            throw new NeoErrorThemeTargetNotFound();
+        if (!('setAttribute' in target))
+            throw new NeoErrorThemeInvalidTarget();
+        if (target.parentElement?.querySelector('#neo-theme-provider'))
+            return;
+        const link = document.createElement('link');
+        link.setAttribute('type', 'text/css');
+        link.setAttribute('id', 'neo-theme-provider');
+        link.setAttribute('rel', 'stylesheet');
+        link.setAttribute('href', new URL(styles, import.meta.url).href);
+        link.addEventListener('load', () => {
+            this.#ready = true;
+        });
+        if (target === document?.documentElement)
+            document.head.appendChild(link);
+        else
+            target.after(link);
+    }
+    sync(trigger) {
         if (!this.root)
             throw new NeoErrorThemeTargetNotFound();
         if (!('setAttribute' in this.root))
             throw new NeoErrorThemeInvalidTarget();
+        this.import(this.root);
         this.root.setAttribute(NeoThemeRoot, '');
-        void this.setTheme(this.theme);
+        void this.setTheme(this.theme, trigger);
         this.setSource(this.source);
         if (this.reset)
             this.root.setAttribute(NeoThemeStorageKey.Reset, '');
@@ -95,11 +174,13 @@ export class NeoThemeProviderContext {
             localStorage.setItem(NeoThemeStorageKey.Reset, Boolean(this.reset).toString());
             localStorage.setItem(NeoThemeStorageKey.Theme, this.theme);
             localStorage.setItem(NeoThemeStorageKey.Source, this.source);
+            localStorage.setItem(NeoThemeStorageKey.Transition, this.transition);
         }
         else {
             localStorage.removeItem(NeoThemeStorageKey.Reset);
             localStorage.removeItem(NeoThemeStorageKey.Theme);
             localStorage.removeItem(NeoThemeStorageKey.Source);
+            localStorage.removeItem(NeoThemeStorageKey.Transition);
         }
     }
     destroy() {
@@ -111,6 +192,8 @@ export class NeoThemeProviderContext {
         this.root.removeAttribute(NeoThemeStorageKey.Reset);
         this.root.removeAttribute(NeoThemeStorageKey.Theme);
         this.root.removeAttribute(NeoThemeStorageKey.Source);
+        this.root.removeAttribute(NeoThemeStorageKey.Transition);
+        this.#ready = false;
     }
 }
 const NeoContextKey = Symbol('NeoThemeProviderContext');

package/dist/providers/neo-theme-provider.model.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
 /**
  * The active theme (`dark` or `light`)
  */
@@ -16,8 +17,19 @@ export declare const NeoSource: {
     readonly BottomRight: "bottom-right";
     readonly BottomLeft: "bottom-left";
 };
+export declare const NeoTransition: {
+    readonly None: "none";
+    readonly Spin: "neo-spin";
+    readonly Wave: "neo-wave";
+    readonly Circle: "neo-circle";
+};
+export type NeoTransitions = (typeof NeoTransition)[keyof typeof NeoTransition];
 export type NeoSources = (typeof NeoSource)[keyof typeof NeoSource];
 export interface INeoThemeProviderContext {
+    /**
+     * If styles have finished loading.
+     */
+    readonly ready?: boolean;
     /**
      * If a style reset is applied.
      */
@@ -34,16 +46,30 @@ export interface INeoThemeProviderContext {
      * If the reset, theme and source are stored in local-storage
      */
     readonly remember: boolean;
+    /**
+     * The theme transition to apply when changing theme.
+     */
+    readonly transition: NeoTransitions;
     /**
      * The target to which scope the theme variables
      */
     readonly root?: HTMLElement | ShadowRoot;
 }
-export interface NeoThemeProviderProps {
+export interface NeoThemeProviderProps<Tag extends keyof HTMLElementTagNameMap = 'div'> extends Omit<HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>, 'children'> {
     /**
      * Child element to wrap in the theme context.
      */
     children?: Snippet<[INeoThemeProviderContext]>;
+    /**
+     * The HTML reference to the inner element when target is `self`.
+     * @see target
+     */
+    ref?: HTMLElement;
+    /**
+     * The HTML tag to use for the container.
+     * @default 'div'
+     */
+    tag?: Tag;
     /**
      * If `true`, injects a css reset for common styling.
      */
@@ -71,10 +97,10 @@ export interface NeoThemeProviderProps {
      *
      * @default document.documentElement
      */
-    target?: HTMLElement | ShadowRoot | (() => HTMLElement | ShadowRoot);
+    target?: 'self' | HTMLElement | ShadowRoot | (() => HTMLElement | ShadowRoot);
 }
 export declare const NeoThemeRoot = "neo-theme-root";
-export declare const NeoThemeStorageKey: Record<string, `neo-${keyof INeoThemeProviderContext | 'transition'}`>;
+export declare const NeoThemeStorageKey: Record<string, `neo-${keyof INeoThemeProviderContext | 'in-flight'}`>;
 export type NeoThemeStorageKeys = (typeof NeoThemeStorageKey)[keyof typeof NeoThemeStorageKey];
 export declare const getSavedTheme: () => NeoThemes | null;
 export declare const getPreferTheme: () => NeoThemes;
@@ -85,3 +111,5 @@ export declare const getSavedReset: () => string | null;
 export declare const getReset: () => boolean;
 export declare const getSavedRemember: () => string | null;
 export declare const getRemember: () => boolean;
+export declare const getSavedTransition: () => NeoTransitions | null;
+export declare const getTransition: () => NeoTransitions;