@svadmin/ui 0.74.0 → 0.76.0

package/dist/app.css

@@ -5539,6 +5539,7 @@
     --leading-tight: 1.25;
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
@@ -6019,6 +6020,10 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -6045,6 +6050,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -6389,6 +6398,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -6434,6 +6447,7 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-ease: initial;
     }
   }
 }

package/dist/app.theme.css

@@ -5539,6 +5539,7 @@
     --leading-tight: 1.25;
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
@@ -6019,6 +6020,10 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -6045,6 +6050,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -6389,6 +6398,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -6434,6 +6447,7 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-ease: initial;
     }
   }
 }

package/dist/components/AdminApp.svelte

@@ -575,15 +575,15 @@
       {#key renderedRoute + (renderedParams['resource'] ?? '') + (renderedParams['id'] ?? '') + (renderedParams['variant'] ?? '') + (renderedParams['columns'] ?? '')}
       <div class="svadmin-page-enter">
       {#if renderedRoute === '/public-profile'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects' }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects' } as const} />
       {:else if renderedRoute === '/public-profile/projects/:columns'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects', columns: renderedParams['columns']?.includes('3') ? 3 : 2 }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects', columns: renderedParams['columns']?.includes('3') ? 3 : 2 } as const} />
       {:else if renderedRoute === '/public-profile/activity'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'activity' }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'activity' } as const} />
       {:else if renderedRoute === '/public-profile/teams'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'teams' }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'teams' } as const} />
       {:else if renderedRoute === '/public-profile/profiles/:variant'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: (renderedParams['variant'] === 'company' || renderedParams['variant'] === 'gamer' || renderedParams['variant'] === 'default' ? renderedParams['variant'] : 'default') as 'company' | 'gamer' | 'default', showSections: true }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: (renderedParams['variant'] === 'company' || renderedParams['variant'] === 'gamer' || renderedParams['variant'] === 'default' ? renderedParams['variant'] : 'default') as 'company' | 'gamer' | 'default', showSections: true } as const} />
       {:else if renderedRoute === '/account/get-started' || renderedRoute === '/account/home/get-started'}
         <LazyPage loader={loadGetStartedPage} props={{}} />
       {:else if renderedRoute === '/account/home/user-profile'}

package/dist/components/AppFooter.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  export interface FooterLink {
+    label: string;
+    href?: string;
+    external?: boolean;
+    onclick?: () => void;
+  }
+
+  export interface FooterColumn {
+    title: string;
+    links: FooterLink[];
+  }
+
+  interface Props {
+    /** Bottom-line copyright text. */
+    copyright?: string;
+    /** Flat links rendered in the bottom bar. */
+    links?: FooterLink[];
+    /** Link columns rendered above the bottom bar. */
+    columns?: FooterColumn[];
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    copyright,
+    links = [],
+    columns = [],
+    ariaLabel = 'Footer',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<footer class={cn('svadmin-app-footer', className)} data-slot="app-footer" aria-label={ariaLabel}>
+  {#if columns.length}
+    <div class="svadmin-app-footer__columns">
+      {#each columns as column (column.title)}
+        <nav class="svadmin-app-footer__column" aria-label={column.title}>
+          <h2 class="svadmin-app-footer__heading">{column.title}</h2>
+          <ul class="svadmin-app-footer__list">
+            {#each column.links as link (link.label)}
+              <li>
+                {#if link.href}
+                  <a
+                    class="svadmin-app-footer__link"
+                    href={link.href}
+                    rel={link.external ? 'noreferrer noopener' : undefined}
+                    target={link.external ? '_blank' : undefined}
+                  >{link.label}</a>
+                {:else}
+                  <button class="svadmin-app-footer__link" type="button" onclick={() => link.onclick?.()}>{link.label}</button>
+                {/if}
+              </li>
+            {/each}
+          </ul>
+        </nav>
+      {/each}
+    </div>
+  {/if}
+
+  {#if children}<div class="svadmin-app-footer__content">{@render children()}</div>{/if}
+
+  {#if copyright || links.length}
+    <div class="svadmin-app-footer__bar">
+      {#if copyright}<span class="svadmin-app-footer__copyright">{copyright}</span>{/if}
+      {#if links.length}
+        <ul class="svadmin-app-footer__list svadmin-app-footer__list--inline">
+          {#each links as link (link.label)}
+            <li>
+              {#if link.href}
+                <a
+                  class="svadmin-app-footer__link"
+                  href={link.href}
+                  rel={link.external ? 'noreferrer noopener' : undefined}
+                  target={link.external ? '_blank' : undefined}
+                >{link.label}</a>
+              {:else}
+                <button class="svadmin-app-footer__link" type="button" onclick={() => link.onclick?.()}>{link.label}</button>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  {/if}
+</footer>
+
+<style>
+  .svadmin-app-footer {
+    display: grid;
+    gap: 1.5rem;
+    border-block-start: 1px solid var(--border, currentColor);
+    padding: 1.5rem;
+    background: var(--card, var(--background, transparent));
+    color: var(--muted-foreground, currentColor);
+    font-size: 0.8125rem;
+  }
+
+  .svadmin-app-footer__columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    gap: 1.5rem;
+  }
+
+  .svadmin-app-footer__column { display: grid; gap: 0.625rem; }
+  .svadmin-app-footer__heading { margin: 0; color: var(--foreground, currentColor); font-size: 0.8125rem; font-weight: 600; }
+  .svadmin-app-footer__list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
+  .svadmin-app-footer__list--inline { display: flex; flex-wrap: wrap; gap: 1rem; }
+
+  .svadmin-app-footer__link {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .svadmin-app-footer__link:hover { color: var(--foreground, currentColor); text-decoration: underline; text-underline-offset: 0.2em; }
+  .svadmin-app-footer__link:focus-visible { outline: 2px solid var(--ring, currentColor); outline-offset: 2px; }
+
+  .svadmin-app-footer__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    border-block-start: 1px solid var(--border, currentColor);
+    padding-block-start: 1rem;
+    color: var(--muted-foreground, currentColor);
+  }
+</style>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+export interface FooterLink {
+    label: string;
+    href?: string;
+    external?: boolean;
+    onclick?: () => void;
+}
+export interface FooterColumn {
+    title: string;
+    links: FooterLink[];
+}
+interface Props {
+    /** Bottom-line copyright text. */
+    copyright?: string;
+    /** Flat links rendered in the bottom bar. */
+    links?: FooterLink[];
+    /** Link columns rendered above the bottom bar. */
+    columns?: FooterColumn[];
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const AppFooter: import("svelte").Component<Props, {}, "">;
+type AppFooter = ReturnType<typeof AppFooter>;
+export default AppFooter;

package/dist/components/CodeEditor.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import { onMount } from 'svelte';
+  import { cn } from '../utils.js';
+
+  /**
+   * Thin adapter over the Svelte ecosystem `svelte-codemirror-editor` package.
+   * The dependency is optional: if it cannot be loaded, an accessible
+   * `<textarea>` fallback keeps the field usable.
+   */
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    editable?: boolean;
+    lineNumbers?: boolean;
+    lineWrapping?: boolean;
+    tabSize?: number;
+    /** CodeMirror extensions supplied by the host (languages, themes, …). */
+    extensions?: readonly unknown[];
+    lang?: unknown;
+    theme?: unknown;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+    onready?: (view: unknown) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Write code…',
+    readonly = false,
+    editable = true,
+    lineNumbers = true,
+    lineWrapping = true,
+    tabSize = 2,
+    extensions,
+    lang,
+    theme,
+    ariaLabel = 'Code editor',
+    class: className = '',
+    onchange,
+    onready,
+  }: Props = $props();
+
+  let Editor = $state<Component<Record<string, unknown>> | null>(null);
+  let unavailable = $state(false);
+
+  onMount(() => {
+    let active = true;
+    import('svelte-codemirror-editor')
+      .then((module) => {
+        if (active) Editor = module.default as unknown as Component<Record<string, unknown>>;
+      })
+      .catch(() => {
+        if (active) unavailable = true;
+      });
+    return () => {
+      active = false;
+    };
+  });
+
+  const editorProps = $derived({
+    value,
+    placeholder,
+    readonly,
+    editable,
+    lineNumbers,
+    lineWrapping,
+    tabSize,
+    ...(extensions ? { extensions: [...extensions] } : {}),
+    ...(lang ? { lang } : {}),
+    ...(theme ? { theme } : {}),
+    ...(onready ? { onready } : {}),
+    onchange: (next: string) => {
+      value = next;
+      onchange?.(next);
+    },
+  });
+
+  const editorState = $derived(Editor ? 'ready' : unavailable ? 'unavailable' : 'loading');
+</script>
+
+<div
+  class={cn('svadmin-code-editor', className)}
+  data-slot="code-editor"
+  data-state={editorState}
+>
+  {#if Editor}
+    <Editor {...editorProps} />
+  {:else}
+    <textarea
+      class="svadmin-code-editor__fallback"
+      bind:value
+      {placeholder}
+      {readonly}
+      disabled={!editable || readonly}
+      aria-label={ariaLabel}
+      spellcheck="false"
+      autocapitalize="off"
+      autocomplete="off"
+      wrap={lineWrapping ? 'soft' : 'off'}
+      oninput={(event) => onchange?.((event.currentTarget as HTMLTextAreaElement).value)}
+    ></textarea>
+    {#if unavailable}
+      <p class="svadmin-code-editor__hint" role="status">
+        Install <code>svelte-codemirror-editor</code> and <code>codemirror</code> to enable syntax highlighting.
+      </p>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .svadmin-code-editor {
+    overflow: hidden;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.5rem);
+    background: var(--card, var(--background, transparent));
+    color: var(--card-foreground, var(--foreground, currentColor));
+  }
+
+  .svadmin-code-editor:focus-within { outline: 2px solid var(--ring, currentColor); outline-offset: 1px; }
+  .svadmin-code-editor__fallback {
+    display: block;
+    width: 100%;
+    min-height: 8rem;
+    border: 0;
+    padding: 0.75rem;
+    background: transparent;
+    color: inherit;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    resize: vertical;
+  }
+  .svadmin-code-editor__fallback:focus { outline: none; }
+  .svadmin-code-editor__hint {
+    margin: 0;
+    border-top: 1px solid var(--border, currentColor);
+    padding: 0.5rem 0.75rem;
+    color: var(--muted-foreground, currentColor);
+    font-size: 0.75rem;
+  }
+  .svadmin-code-editor__hint code { color: var(--foreground, currentColor); }
+</style>

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

@@ -0,0 +1,26 @@
+import type { Component } from 'svelte';
+/**
+ * Thin adapter over the Svelte ecosystem `svelte-codemirror-editor` package.
+ * The dependency is optional: if it cannot be loaded, an accessible
+ * `<textarea>` fallback keeps the field usable.
+ */
+interface Props {
+    value?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    editable?: boolean;
+    lineNumbers?: boolean;
+    lineWrapping?: boolean;
+    tabSize?: number;
+    /** CodeMirror extensions supplied by the host (languages, themes, …). */
+    extensions?: readonly unknown[];
+    lang?: unknown;
+    theme?: unknown;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+    onready?: (view: unknown) => void;
+}
+declare const CodeEditor: Component<Props, {}, "value">;
+type CodeEditor = ReturnType<typeof CodeEditor>;
+export default CodeEditor;

package/dist/components/DatePicker.svelte

@@ -4,7 +4,7 @@
 
   export type DatePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
 
-  let props: DatePickerProps = $props();
+  let { value = $bindable(null), ...props }: DatePickerProps = $props();
 </script>
 
-<DateTimeInput {...props} mode="date" />
+<DateTimeInput {...props} bind:value mode="date" />

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import DateTimeInput from './DateTimeInput.svelte';
 export type DatePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
-declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "">;
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "value">;
 type DatePicker = ReturnType<typeof DatePicker>;
 export default DatePicker;

package/dist/components/DateRangePicker.svelte

@@ -4,7 +4,7 @@
 
   export type DateRangePickerProps = Omit<ComponentProps<typeof DateRangeInput>, 'mode'>;
 
-  let props: DateRangePickerProps = $props();
+  let { value = $bindable({ start: null, end: null }), ...props }: DateRangePickerProps = $props();
 </script>
 
-<DateRangeInput {...props} mode="date" />
+<DateRangeInput {...props} bind:value mode="date" />

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import DateRangeInput from './DateRangeInput.svelte';
 export type DateRangePickerProps = Omit<ComponentProps<typeof DateRangeInput>, 'mode'>;
-declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "">;
+declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "value">;
 type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;

package/dist/components/DateTimeInput.svelte

@@ -11,24 +11,24 @@
   interface Props {
     value?: string | null;
     mode?: DateTimeInputMode;
-    min?: string;
-    max?: string;
-    minInstant?: string;
-    maxInstant?: string;
-    step?: number;
-    disabledDate?: (date: string) => boolean;
-    id?: string;
-    name?: string;
-    disabled?: boolean;
-    required?: boolean;
-    invalid?: boolean;
-    describedby?: string;
-    ariaLabel?: string;
-    class?: string;
-    onchange?: (value: string | null) => void;
-    timeZone?: string;
-    valueMode?: DateTimeValueMode;
-    disambiguation?: DateTimeDisambiguation;
+    min?: string | undefined;
+    max?: string | undefined;
+    minInstant?: string | undefined;
+    maxInstant?: string | undefined;
+    step?: number | undefined;
+    disabledDate?: ((date: string) => boolean) | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    invalid?: boolean | undefined;
+    describedby?: string | undefined;
+    ariaLabel?: string | undefined;
+    class?: string | undefined;
+    onchange?: ((value: string | null) => void) | undefined;
+    timeZone?: string | undefined;
+    valueMode?: DateTimeValueMode | undefined;
+    disambiguation?: DateTimeDisambiguation | undefined;
   }
 
   let {

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

@@ -3,24 +3,24 @@ export type DateTimeInputMode = 'date' | 'time' | 'datetime';
 interface Props {
     value?: string | null;
     mode?: DateTimeInputMode;
-    min?: string;
-    max?: string;
-    minInstant?: string;
-    maxInstant?: string;
-    step?: number;
-    disabledDate?: (date: string) => boolean;
-    id?: string;
-    name?: string;
-    disabled?: boolean;
-    required?: boolean;
-    invalid?: boolean;
-    describedby?: string;
-    ariaLabel?: string;
-    class?: string;
-    onchange?: (value: string | null) => void;
-    timeZone?: string;
-    valueMode?: DateTimeValueMode;
-    disambiguation?: DateTimeDisambiguation;
+    min?: string | undefined;
+    max?: string | undefined;
+    minInstant?: string | undefined;
+    maxInstant?: string | undefined;
+    step?: number | undefined;
+    disabledDate?: ((date: string) => boolean) | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    invalid?: boolean | undefined;
+    describedby?: string | undefined;
+    ariaLabel?: string | undefined;
+    class?: string | undefined;
+    onchange?: ((value: string | null) => void) | undefined;
+    timeZone?: string | undefined;
+    valueMode?: DateTimeValueMode | undefined;
+    disambiguation?: DateTimeDisambiguation | undefined;
 }
 declare const DateTimeInput: import("svelte").Component<Props, {}, "value">;
 type DateTimeInput = ReturnType<typeof DateTimeInput>;

package/dist/components/DateTimePicker.svelte

@@ -4,7 +4,7 @@
 
   export type DateTimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
 
-  let props: DateTimePickerProps = $props();
+  let { value = $bindable(null), ...props }: DateTimePickerProps = $props();
 </script>
 
-<DateTimeInput {...props} mode="datetime" />
+<DateTimeInput {...props} bind:value mode="datetime" />

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import DateTimeInput from './DateTimeInput.svelte';
 export type DateTimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
-declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "">;
+declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "value">;
 type DateTimePicker = ReturnType<typeof DateTimePicker>;
 export default DateTimePicker;

package/dist/components/FieldRenderer.svelte

@@ -38,6 +38,7 @@
   import { cn } from '../utils.js';
   import { numericInputValue } from '../numeric-input.js';
 
+  type FieldOption = NonNullable<FieldDefinition['options']>[number];
   const i18n = useTranslation();
 
   let { field, value, onchange, disabled, invalid = false, errorId, density = 'comfortable', children } = $props<{
@@ -59,7 +60,6 @@
   const boolVal = $derived((value as boolean) ?? false);
   const tagsVal = $derived((value as string[]) ?? []);
   const multiVal = $derived((value as (string | number)[]) ?? []);
-  type FieldOption = NonNullable<FieldDefinition['options']>[number];
   const selectToken = $derived.by(() => {
     const index = field.options?.findIndex((option: FieldOption) => option.value === value) ?? -1;
     return index < 0 ? '' : `option:${index}`;

package/dist/components/HighlightText.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { splitHighlights } from './highlight.js';
+
+  interface Props {
+    text: string;
+    /** One term or a list of terms to highlight. */
+    query?: string | readonly string[];
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+    class?: string;
+    /** Overrides the `<mark>` styling without leaving the semantic token system. */
+    highlightClass?: string;
+  }
+
+  let {
+    text,
+    query,
+    caseSensitive = false,
+    wholeWord = false,
+    class: className = '',
+    highlightClass = '',
+  }: Props = $props();
+
+  const segments = $derived(
+    splitHighlights(text, query, { caseSensitive, wholeWord }),
+  );
+</script>
+
+<span class={cn('svadmin-highlight-text', className)} data-slot="highlight-text">
+  {#each segments as segment, index (index)}{#if segment.match}<mark class={cn('svadmin-highlight-text__mark', highlightClass)}>{segment.text}</mark>{:else}{segment.text}{/if}{/each}
+</span>
+
+<style>
+  .svadmin-highlight-text {
+    color: inherit;
+    overflow-wrap: anywhere;
+  }
+
+  .svadmin-highlight-text__mark {
+    border-radius: 0.2rem;
+    padding-inline: 0.1rem;
+    background: color-mix(in oklch, var(--warning, var(--primary, currentColor)) 28%, transparent);
+    color: var(--foreground, currentColor);
+  }
+</style>