@noxlovette/material 0.1.0

package/dist/styles/typescale.css

@@ -0,0 +1,63 @@
+@utility md-sys-typescale-display-large {
+  @apply text-[57px] leading-[64px] tracking-[-0.25px];
+}
+
+@utility md-sys-typescale-display-medium {
+  @apply text-[45px] leading-[52px];
+}
+
+@utility md-sys-typescale-display-small {
+  @apply text-[36px] leading-[44px];
+}
+
+@utility md-sys-typescale-headline-large {
+  @apply text-[32px] leading-[40px];
+}
+
+@utility md-sys-typescale-headline-medium {
+  @apply text-[28px] leading-[36px];
+}
+
+@utility md-sys-typescale-headline-small {
+  @apply text-[24px] leading-[32px];
+}
+
+@utility md-sys-typescale-title-large {
+  @apply text-[22px] leading-[28px];
+}
+
+@utility md-sys-typescale-title-medium {
+  @apply text-[16px] leading-[24px] font-medium tracking-[0.15px];
+}
+
+@utility md-sys-typescale-title-small {
+  @apply text-[14px] leading-[20px] font-medium tracking-[0.1px];
+}
+
+@utility md-sys-typescale-label-large {
+  @apply text-[14px] leading-[20px] font-medium tracking-[0.1px];
+}
+
+@utility md-sys-typescale-label-medium {
+  @apply text-[12px] leading-[16px] font-medium tracking-[0.5px];
+}
+
+@utility md-sys-typescale-label-small {
+  @apply text-[11px] leading-[16px] font-medium tracking-[0.5px];
+}
+
+@utility md-sys-typescale-body-large {
+  @apply text-[16px] leading-[24px] tracking-[0.5px];
+}
+
+@utility md-sys-typescale-body-medium {
+  @apply text-[14px] leading-[20px] tracking-[0.25px];
+}
+
+@utility md-sys-typescale-body-small {
+  @apply text-[12px] leading-[16px] tracking-[0.4px];
+}
+
+@utility md-sys-typescale-fab-label {
+  @apply text-[16px] leading-8 tracking-[0.15px];
+}

package/dist/utils/Layer.svelte

@@ -0,0 +1,217 @@
+<script module lang="ts">
+  let initialized = false;
+
+  const activePointerRipples: (() => void)[] = [];
+  const activeKeyboardRipples: (() => void)[] = [];
+
+  const isEnabled = (node: Element): boolean => {
+    if (node instanceof HTMLButtonElement && node.disabled) return false;
+    if (node instanceof HTMLInputElement && node.disabled) return false;
+    if (node instanceof HTMLLabelElement) {
+      const control = node.control;
+      if (control instanceof HTMLInputElement && control.disabled) return false;
+    }
+    return true;
+  };
+
+  const createRippleSvg = (
+    node: Element,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ): (() => void) | null => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return null;
+
+    const size = Math.hypot(Math.max(x, width - x), Math.max(y, height - y)) * 2.5;
+    const speed = Math.max(Math.min(Math.log(size) * 50, 600), 200);
+
+    const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
+    gradient.id = `ripple-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+    for (const { offset, opacity } of [
+      { offset: '0%', opacity: '0.12' },
+      { offset: '70%', opacity: '0.12' },
+      { offset: '100%', opacity: '0' }
+    ]) {
+      const stop = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+      stop.setAttribute('offset', offset);
+      stop.setAttribute('stop-color', 'currentColor');
+      stop.setAttribute('stop-opacity', opacity);
+      gradient.appendChild(stop);
+    }
+
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('cx', `${x}`);
+    circle.setAttribute('cy', `${y}`);
+    circle.setAttribute('r', '0');
+    circle.setAttribute('fill', `url(#${gradient.id})`);
+
+    const expand = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+    expand.setAttribute('attributeName', 'r');
+    expand.setAttribute('from', '0');
+    expand.setAttribute('to', `${size / 2}`);
+    expand.setAttribute('dur', `${speed}ms`);
+    expand.setAttribute('fill', 'freeze');
+    expand.setAttribute('calcMode', 'spline');
+    expand.setAttribute('keySplines', '0.4 0, 0.2 1');
+    circle.appendChild(expand);
+
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.classList.add('m3-ripple');
+    svg.style.cssText = [
+      'position: absolute',
+      'inset: 0',
+      'width: 100%',
+      'height: 100%',
+      'overflow: hidden',
+      'border-radius: inherit',
+      'pointer-events: none'
+    ].join(';');
+    svg.appendChild(gradient);
+    svg.appendChild(circle);
+
+    const ua = navigator.userAgent;
+    const isFirefox = ua.includes('Firefox');
+    const isTrulySafari = !ua.includes('Chrome') && ua.includes('Safari');
+    if (!isFirefox && !isTrulySafari && size > 100) {
+      const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
+      filter.id = `noise-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+      const turb = document.createElementNS('http://www.w3.org/2000/svg', 'feTurbulence');
+      turb.setAttribute('type', 'fractalNoise');
+      turb.setAttribute('baseFrequency', '0.6');
+      turb.setAttribute('seed', Math.random().toString());
+
+      const disp = document.createElementNS('http://www.w3.org/2000/svg', 'feDisplacementMap');
+      disp.setAttribute('in', 'SourceGraphic');
+      disp.setAttribute('scale', `${size ** 2 * 0.0002}`);
+      disp.setAttribute('xChannelSelector', 'R');
+      disp.setAttribute('yChannelSelector', 'B');
+
+      filter.appendChild(turb);
+      filter.appendChild(disp);
+      circle.setAttribute('filter', `url(#${filter.id})`);
+      svg.appendChild(filter);
+    }
+
+    node.appendChild(svg);
+
+    return () => {
+      const fade = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+      fade.setAttribute('attributeName', 'opacity');
+      fade.setAttribute('from', '1');
+      fade.setAttribute('to', '0');
+      fade.setAttribute('dur', '800ms');
+      fade.setAttribute('fill', 'freeze');
+      fade.setAttribute('calcMode', 'spline');
+      fade.setAttribute('keySplines', '0.4 0, 0.2 1');
+      circle.appendChild(fade);
+      fade.beginElement();
+      setTimeout(() => svg.remove(), 800);
+    };
+  };
+
+  function initRipple() {
+    if (initialized || typeof document === 'undefined') return;
+    initialized = true;
+
+    document.documentElement.classList.add('js');
+
+    document.addEventListener('pointerdown', (e) => {
+      if (e.button !== 0) return;
+      const layer = (e.target as Element).closest('.m3-layer');
+      if (!layer || !isEnabled(layer)) return;
+      const rect = layer.getBoundingClientRect();
+      const cancel = createRippleSvg(
+        layer,
+        e.clientX - rect.left,
+        e.clientY - rect.top,
+        rect.width,
+        rect.height
+      );
+      if (cancel) activePointerRipples.push(cancel);
+    });
+
+    const cancelPointerRipples = () => {
+      for (const cancel of activePointerRipples) cancel();
+      activePointerRipples.length = 0;
+    };
+    document.addEventListener('pointerup', cancelPointerRipples);
+    document.addEventListener('dragend', cancelPointerRipples);
+
+    document.addEventListener('keydown', (e) => {
+      if (e.repeat) return;
+      const target = e.target as Element;
+      const layer = target.closest('.m3-layer');
+      if (!layer || !isEnabled(layer)) return;
+      const isActivate = e.key === 'Enter' || (e.key === ' ' && layer.tagName === 'BUTTON');
+      if (!isActivate) return;
+      const rect = layer.getBoundingClientRect();
+      const cancel = createRippleSvg(
+        layer,
+        rect.width / 2,
+        rect.height / 2,
+        rect.width,
+        rect.height
+      );
+      if (cancel) activeKeyboardRipples.push(cancel);
+    });
+
+    document.addEventListener('keyup', () => {
+      for (const cancel of activeKeyboardRipples) cancel();
+      activeKeyboardRipples.length = 0;
+    });
+  }
+</script>
+
+<script lang="ts">
+  let self: HTMLElement;
+
+  $effect(() => {
+    initRipple();
+    const parent = self.parentElement;
+    if (!parent) return;
+    parent.classList.add('m3-layer');
+    return () => parent.classList.remove('m3-layer');
+  });
+</script>
+
+<span bind:this={self} style="display:none" aria-hidden="true"></span>
+<div class="hitbox"></div>
+<div class="tint"></div>
+
+<style>
+  .hitbox {
+    position: absolute;
+    inset: 0;
+  }
+  .tint {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+
+    background-color: currentColor;
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-fast, 150ms)
+      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+
+    &:not(
+      :global(input:disabled + label) > .tint,
+      :global(input:disabled + .layer-container) > .tint,
+      :global(:disabled) > .tint
+    ) {
+      @media (hover: hover) {
+        &:is(:global(:hover) > .tint, :global(:active) > .tint) {
+          opacity: 0.08;
+        }
+      }
+      &:is(:global(input:focus-visible + label) > .tint),
+      &:is(:global(:focus-visible) > .tint),
+      &:is(:global(:active) > .tint) {
+        opacity: 0.12;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,3 @@
+declare const Layer: import("svelte").Component<Record<string, never>, {}, "">;
+type Layer = ReturnType<typeof Layer>;
+export default Layer;

package/dist/utils/Theme.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { generateThemeCSS, isDarkScheme, themeState, type ThemeConfig } 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
+  $effect(() => {
+    syncConfig(config);
+  });
+
+  // Calculate final dark mode state
+  let finalIsDark = $state(isDarkProp !== undefined ? isDarkProp : isDarkScheme(themeState.scheme));
+
+  $effect(() => {
+    if (themeState.scheme !== 'system') {
+      finalIsDark = themeState.scheme === 'dark';
+      return;
+    }
+
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      finalIsDark = e.matches;
+    };
+
+    finalIsDark = media.matches;
+    media.addEventListener('change', handler);
+    return () => media.removeEventListener('change', handler);
+  });
+
+  const themeStyles = $derived(generateThemeCSS(themeState, finalIsDark));
+
+  // Persistence effect
+  $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);
+  });
+
+  // Dark mode class effect
+  $effect(() => {
+    if (finalIsDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  });
+</script>
+
+<svelte:head>
+  {@html `<` + `style id="ogonek-m3-dynamic-theme">` + themeStyles + `</` + `style>`}
+</svelte:head>

package/dist/utils/icon/Icon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import clsx from 'clsx';
+  import type { IconProps } from './types.js';
+
+  const {
+    name,
+    variant = 'rounded',
+    fill = 0,
+    wght = 400,
+    grad = 0,
+    opsz = 24,
+    class: className = 'size-6 text-[24px]'
+  }: IconProps = $props();
+
+  const wrapperClass = 'inline-flex items-center justify-center leading-none';
+</script>
+
+<div class={clsx(className, wrapperClass)}>
+  <span
+    class="material-symbols-{variant}"
+    style="font-size: 1em; font-variation-settings: 'FILL' {fill}, 'wght' {wght}, 'GRAD' {grad}, 'opsz' {opsz};"
+    >{name}</span
+  >
+</div>

package/dist/utils/icon/Icon.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from './types.js';
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/utils/icon/LoadingIndicator.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { LoadingIndicatorProps } from './types.js';
+  import { loadingIndicator } from './theme.js';
+  import clsx from 'clsx';
+
+  let {
+    size = 48,
+    container = false,
+    center = true,
+    class: className
+  }: LoadingIndicatorProps = $props();
+
+  const styling = $derived(loadingIndicator({ center, container, class: clsx(className) }));
+</script>
+
+<svg width={size} height={size} class={styling} viewBox="0 0 48 48">
+  <path fill="currentColor">
+    <animate
+      attributeName="d"
+      dur="5s"
+      repeatCount="indefinite"
+      calcMode="spline"
+      keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8"
+      keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1"
+      values="m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z;m39.9 24.0 -0.3 0.8 -0.4 0.8 -0.3 0.8 -0.2 1.5 0.1 0.9 0.1 0.9 -0.1 0.9 -0.2 0.8 -0.3 0.8 -0.2 0.4 -0.3 0.4 -0.5 0.7 -0.7 0.5 -0.8 0.4 -0.8 0.4 -0.8 0.4 -1.2 1.0 -0.5 0.7 -0.5 0.8 -0.6 0.6 -0.6 0.6 -0.8 0.4 -0.4 0.2 -0.5 0.1 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.9 -0.3 -0.8 -0.1 -1.6 -0.1 -0.8 0.2 -0.9 0.3 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.5 -0.1 -0.4 -0.2 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.5 -0.8 -0.5 -0.7 -1.2 -1.0 -0.7 -0.4 -0.9 -0.4 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.3 -0.4 -0.2 -0.4 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.9 0.1 -0.9 -0.2 -1.5 -0.3 -0.8 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.7 -0.0 -0.2 0.2 -0.8 0.4 -0.8 0.5 -0.7 0.6 -0.6 0.7 -0.7 0.5 -0.6 0.6 -1.3 0.3 -0.9 0.2 -0.8 0.3 -0.8 0.5 -0.7 0.5 -0.6 0.2 -0.2 0.5 -0.4 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.9 -0.0 0.8 -0.1 1.4 -0.5 0.7 -0.4 0.7 -0.5 0.7 -0.5 0.8 -0.3 0.8 -0.2 0.9 -0.1 0.0 -0.0 0.8 0.1 0.9 0.2 0.8 0.3 0.7 0.5 0.7 0.5 0.7 0.4 1.4 0.5 0.8 0.1 0.9 0.0 0.9 0.2 0.8 0.3 0.7 0.4 0.5 0.4 0.2 0.1 0.5 0.7 0.5 0.7 0.3 0.8 0.2 0.8 0.3 0.9 0.6 1.3 0.5 0.6 0.7 0.7 0.6 0.6 0.5 0.7 0.4 0.8 0.2 0.8 0.0 0.2 0.1 0.7 -0.1 0.9 z;m38.9 24.2 -0.2 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.3 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.4 1.0 -0.4 0.8 -0.4 0.8 -0.6 0.6 -0.7 0.5 0.0 0.1 -0.7 0.4 -0.8 0.3 -0.8 0.3 -0.9 0.1 -1.1 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -1.1 -0.0 -0.9 -0.1 -0.8 -0.3 -0.8 -0.3 -0.7 -0.5 -0.1 0.0 -0.6 -0.5 -0.6 -0.7 -0.4 -0.7 -0.4 -0.8 -0.4 -1.0 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -0.8 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -1.1 -0.2 -0.9 -0.0 -0.8 0.0 -0.9 0.2 -0.8 0.1 -0.1 0.3 -0.7 0.4 -0.8 0.6 -0.6 0.6 -0.6 0.9 -0.7 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.9 -0.7 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.8 -0.0 0.1 -0.0 0.9 0.0 0.8 0.2 0.8 0.3 0.8 0.4 0.9 0.7 0.6 0.5 0.7 0.4 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.4 0.6 0.5 0.9 0.7 0.6 0.6 0.6 0.7 0.4 0.7 0.3 0.7 0.0 0.1 0.2 0.8 0.1 0.9 -0.0 0.9 -0.2 0.8 -0.3 1.1 z;m39.6 24.0 -0.1 0.8 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.3 0.8 -0.4 0.7 -0.4 0.7 -0.5 0.6 -0.4 0.6 -0.6 0.6 -0.6 0.6 -0.4 0.4 -0.6 0.6 -0.4 0.5 -0.9 0.8 -0.5 0.5 -0.6 0.6 -0.4 0.4 -0.7 0.7 -0.5 0.5 -0.6 0.4 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.7 0.3 -0.8 0.3 -0.8 0.3 -0.8 0.2 -0.8 0.1 -0.8 0.1 -0.8 0.1 -0.9 0.0 -0.8 -0.0 -0.9 -0.1 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.3 -0.8 -0.4 -0.8 -0.4 -0.7 -0.5 -0.7 -0.5 -0.7 -0.5 -0.6 -0.6 -0.1 -0.1 -0.5 -0.6 -0.6 -0.7 -0.5 -0.7 -0.5 -0.8 -0.4 -0.7 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.1 -0.9 0.0 -0.8 0.0 -0.9 0.1 -0.8 0.1 -0.8 0.1 -0.8 0.3 -0.8 0.2 -0.8 0.3 -0.7 0.4 -0.8 0.3 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.5 0.6 -0.6 0.6 -0.7 0.4 -0.4 0.6 -0.6 0.5 -0.4 0.8 -0.9 0.5 -0.5 0.6 -0.6 0.4 -0.4 0.7 -0.7 0.5 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.4 0.7 -0.4 0.7 -0.3 0.8 -0.3 0.8 -0.3 0.8 -0.2 0.8 -0.1 0.8 -0.1 0.8 -0.1 0.9 -0.0 0.8 0.0 0.9 0.1 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.4 0.8 0.3 0.8 0.4 0.7 0.5 0.7 0.5 0.7 0.5 0.6 0.7 0.1 -0.0 0.5 0.6 0.6 0.7 0.5 0.7 0.5 0.8 0.4 0.7 0.3 0.8 0.4 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.1 0.9 0.0 0.8 -0.0 0.8 -0.1 0.9 z;m40.0 24.0 -0.1 0.8 -0.5 0.8 -0.6 0.8 -0.6 0.6 -0.6 0.7 -0.5 0.6 -0.7 1.2 -0.1 0.7 -0.1 0.8 -0.0 0.9 -0.1 0.9 -0.1 0.9 -0.2 0.9 -0.5 0.7 -0.0 0.0 -0.7 0.5 -0.9 0.2 -0.9 0.1 -0.9 0.1 -0.8 0.0 -0.8 0.1 -0.8 0.1 -1.2 0.7 -0.6 0.5 -0.7 0.6 -0.6 0.6 -0.8 0.6 -0.8 0.5 -0.8 0.1 -0.0 0.0 -0.8 -0.1 -0.8 -0.5 -0.8 -0.6 -0.6 -0.6 -0.7 -0.6 -0.6 -0.5 -1.2 -0.7 -0.7 -0.1 -0.8 -0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.2 -0.7 -0.5 -0.0 0.0 -0.5 -0.7 -0.2 -0.9 -0.1 -0.9 -0.1 -0.9 -0.0 -0.8 -0.1 -0.8 -0.1 -0.8 -0.7 -1.2 -0.5 -0.6 -0.6 -0.7 -0.6 -0.6 -0.6 -0.8 -0.5 -0.8 -0.1 -0.8 -0.0 -0.0 0.1 -0.8 0.5 -0.8 0.6 -0.8 0.6 -0.6 0.6 -0.7 0.5 -0.6 0.7 -1.2 0.1 -0.7 0.1 -0.8 0.0 -0.9 0.1 -0.9 0.1 -0.9 0.2 -0.9 0.5 -0.7 -0.0 -0.0 0.7 -0.5 0.9 -0.2 0.9 -0.1 0.9 -0.1 0.8 -0.0 0.8 -0.1 0.8 -0.1 1.2 -0.7 0.6 -0.5 0.7 -0.6 0.6 -0.6 0.8 -0.6 0.8 -0.5 0.8 -0.1 0.0 -0.0 0.8 0.1 0.8 0.5 0.8 0.6 0.6 0.6 0.7 0.6 0.6 0.5 1.2 0.7 0.7 0.1 0.8 0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.2 0.7 0.5 0.0 -0.0 0.5 0.7 0.2 0.9 0.1 0.9 0.1 0.9 0.0 0.8 0.1 0.8 0.1 0.8 0.7 1.2 0.5 0.6 0.6 0.7 0.6 0.6 0.6 0.8 0.5 0.8 0.1 0.8 z;m36.9 24.6 0.1 0.7 0.2 0.8 0.2 0.7 0.4 0.9 0.4 0.9 0.2 0.9 0.1 1.0 0.1 0.9 -0.1 0.9 -0.3 0.9 -0.3 0.9 -0.4 0.8 -0.5 0.8 -0.6 0.6 -0.1 0.1 -0.6 0.6 -0.8 0.5 -0.8 0.4 -0.9 0.3 -0.9 0.3 -0.9 0.1 -0.9 -0.1 -1.0 -0.1 -0.9 -0.2 -0.9 -0.4 -0.9 -0.4 -0.7 -0.2 -0.8 -0.2 -0.7 -0.1 -1.2 0.0 -0.7 0.1 -0.8 0.2 -0.7 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -1.0 0.1 -0.9 0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.5 -0.6 -0.6 -0.1 -0.1 -0.6 -0.6 -0.5 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 0.1 -0.9 0.1 -1.0 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -0.7 0.2 -0.8 0.1 -0.7 -0.0 -1.2 -0.1 -0.7 -0.2 -0.8 -0.2 -0.7 -0.4 -0.9 -0.4 -0.9 -0.2 -0.9 -0.1 -1.0 -0.1 -0.9 0.1 -0.9 0.3 -0.9 0.3 -0.9 0.4 -0.8 0.5 -0.8 0.6 -0.6 0.1 -0.1 0.6 -0.6 0.8 -0.5 0.8 -0.4 0.9 -0.3 0.9 -0.3 0.9 -0.1 0.9 0.1 1.0 0.1 0.9 0.2 0.9 0.4 0.9 0.4 0.7 0.2 0.8 0.2 0.7 0.1 1.2 -0.0 0.7 -0.1 0.8 -0.2 0.7 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 1.0 -0.1 0.9 -0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.5 0.6 0.6 0.1 0.1 0.6 0.6 0.5 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 -0.1 0.9 -0.1 1.0 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 0.7 -0.2 0.8 -0.1 0.7 z;m37.7 24.0 -0.3 0.7 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.6 -0.3 0.5 -0.4 0.6 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.3 0.4 -0.5 0.4 -0.8 0.8 -0.4 0.5 -0.4 0.3 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.6 0.4 -0.5 0.3 -0.6 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.7 0.3 -0.7 0.2 -0.7 0.3 -0.9 0.3 -0.8 0.2 -0.8 0.1 -0.9 0.1 -1.0 0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.6 -0.7 -0.6 -0.0 0.0 -0.6 -0.7 -0.6 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 -0.1 -0.9 0.0 -0.9 0.1 -1.0 0.1 -0.9 0.1 -0.8 0.2 -0.8 0.3 -0.9 0.3 -0.7 0.2 -0.7 0.3 -0.7 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.6 0.3 -0.5 0.4 -0.6 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.3 -0.4 0.5 -0.4 0.8 -0.8 0.4 -0.5 0.4 -0.3 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.6 -0.4 0.5 -0.3 0.6 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.7 -0.3 0.7 -0.2 0.7 -0.3 0.9 -0.3 0.8 -0.2 0.8 -0.1 0.9 -0.1 1.0 -0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.6 0.7 0.6 -0.0 0.0 0.6 0.7 0.6 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 0.1 0.9 -0.0 0.9 -0.1 1.0 -0.1 0.9 -0.1 0.8 -0.2 0.8 -0.3 0.9 -0.3 0.7 z;m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z"
+    />
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      type="rotate"
+      dur="5s"
+      repeatCount="indefinite"
+      calcMode="spline"
+      keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8"
+      keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1"
+      values="0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24"
+    />
+  </path>
+</svg>

package/dist/utils/icon/LoadingIndicator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LoadingIndicatorProps } from './types.js';
+declare const LoadingIndicator: import("svelte").Component<LoadingIndicatorProps, {}, "">;
+type LoadingIndicator = ReturnType<typeof LoadingIndicator>;
+export default LoadingIndicator;

package/dist/utils/icon/MaterialSymbolsProvider.svelte

@@ -0,0 +1,38 @@
+<!--
+@component
+A helper that handles google icons. Should not be used directly.
+Use the App.svelte component instead
+-->
+<script lang="ts">
+  import { baseIcons } from './base-icons.js';
+  import type { MaterialSymbolsProviderProps } from './types.js';
+
+  const { extraIcons = [], display = 'swap' }: MaterialSymbolsProviderProps = $props();
+
+  const iconList = $derived.by(() => {
+    const combined = [...baseIcons, ...extraIcons].filter(Boolean);
+    return Array.from(new Set(combined)).sort();
+  });
+
+  const iconNamesParam = $derived.by(() => {
+    if (!iconList.length) return '';
+    return `&icon_names=${encodeURIComponent(iconList.join(','))}`;
+  });
+
+  const displayParam = $derived.by(() => {
+    if (!display) return '';
+    return `&display=${display}`;
+  });
+
+  const href = $derived.by(() => {
+    const families = ['Rounded', 'Outlined', 'Sharp'];
+    const familyParams = families
+      .map((f) => `family=Material+Symbols+${f}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`)
+      .join('&');
+    return `https://fonts.googleapis.com/css2?${familyParams}${iconNamesParam}${displayParam}`;
+  });
+</script>
+
+<svelte:head>
+  <link rel="stylesheet" {href} />
+</svelte:head>

package/dist/utils/icon/MaterialSymbolsProvider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MaterialSymbolsProviderProps } from './types.js';
+/**
+ * A helper that handles google icons. Should not be used directly.
+ * Use the App.svelte component instead
+ */
+declare const MaterialSymbolsProvider: import("svelte").Component<MaterialSymbolsProviderProps, {}, "">;
+type MaterialSymbolsProvider = ReturnType<typeof MaterialSymbolsProvider>;
+export default MaterialSymbolsProvider;

package/dist/utils/icon/base-icons.d.ts

@@ -0,0 +1 @@
+export declare const baseIcons: readonly ["arrow_drop_down", "check", "chevron_left", "chevron_right", "close", "palette", "file_upload", "home", "info", "search", "settings", "warning", "calendar_month", "schedule", "check_circle", "error", "delete", "right_panel_close", "right_panel_open", "edit", "add", "favorite", "share", "settings", "help", "menu", "menu_open"];

package/dist/utils/icon/base-icons.js

@@ -0,0 +1,29 @@
+export const baseIcons = [
+    'arrow_drop_down',
+    'check',
+    'chevron_left',
+    'chevron_right',
+    'close',
+    'palette',
+    'file_upload',
+    'home',
+    'info',
+    'search',
+    'settings',
+    'warning',
+    'calendar_month',
+    'schedule',
+    'check_circle',
+    'error',
+    'delete',
+    'right_panel_close',
+    'right_panel_open',
+    'edit',
+    'add',
+    'favorite',
+    'share',
+    'settings',
+    'help',
+    'menu',
+    'menu_open'
+];

package/dist/utils/icon/index.d.ts

@@ -0,0 +1,6 @@
+export * from './base-icons.js';
+export * from './theme.js';
+export * from './types.js';
+export { default as Icon } from './Icon.svelte';
+export { default as LoadingIndicator } from './LoadingIndicator.svelte';
+export { default as MaterialSymbolsProvider } from './MaterialSymbolsProvider.svelte';

package/dist/utils/icon/index.js

@@ -0,0 +1,6 @@
+export * from './base-icons.js';
+export * from './theme.js';
+export * from './types.js';
+export { default as Icon } from './Icon.svelte';
+export { default as LoadingIndicator } from './LoadingIndicator.svelte';
+export { default as MaterialSymbolsProvider } from './MaterialSymbolsProvider.svelte';

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

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'tailwind-variants';
+export type LoadingIndicatorVariants = VariantProps<typeof loadingIndicator>;
+export declare const loadingIndicator: import("tailwind-variants").TVReturnType<{
+    center: {
+        true: string;
+        false: string;
+    };
+    container: {
+        true: string;
+        false: string;
+    };
+}, undefined, "rounded-full", {
+    center: {
+        true: string;
+        false: string;
+    };
+    container: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    center: {
+        true: string;
+        false: string;
+    };
+    container: {
+        true: string;
+        false: string;
+    };
+}, undefined, "rounded-full", unknown, unknown, undefined>>;

package/dist/utils/icon/theme.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+export const loadingIndicator = tv({
+    base: 'rounded-full',
+    variants: {
+        center: {
+            true: 'mx-auto',
+            false: ''
+        },
+        container: {
+            true: 'text-md-sys-color-on-primary-container bg-md-sys-color-primary-container',
+            false: 'text-md-sys-color-primary'
+        }
+    }
+});

package/dist/utils/icon/types.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import Icon from './Icon.svelte';
+import type { LoadingIndicatorVariants } from './theme.js';
+export type IconMD = typeof Icon;
+export type IconVariant = 'outlined' | 'rounded' | 'sharp';
+export type IconProps = HTMLAttributes<HTMLSpanElement> & {
+    name: string;
+    variant?: IconVariant;
+    fill?: 0 | 1;
+    wght?: number;
+    grad?: number;
+    opsz?: number;
+};
+export type LoadingIndicatorProps = HTMLAttributes<SVGAElement> & LoadingIndicatorVariants & {
+    size?: number;
+    container?: boolean;
+    center?: boolean;
+};
+export type MaterialSymbolsProviderProps = {
+    icons?: string[];
+    extraIcons?: string[];
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+};

package/dist/utils/icon/types.js

@@ -0,0 +1 @@
+import Icon from './Icon.svelte';

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './icon/index.js';
+export * from './theme.svelte.js';
+export * from './types.js';
+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';

package/dist/utils/index.js

@@ -0,0 +1,6 @@
+export * from './icon/index.js';
+export * from './theme.svelte.js';
+export * from './types.js';
+export * from './ui.js';
+export { default as Layer } from './Layer.svelte';
+export { default as Theme } from './Theme.svelte';