@loidolt/theme-svelte 0.5.0 → 0.6.0

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

@@ -0,0 +1,37 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { DataTableState } from '../data-table.svelte.js';
+declare function $$render<T>(): {
+    props: Omit<HTMLInputAttributes, "value" | "type"> & {
+        table: DataTableState<T>;
+        /** Filter one column instead of searching them all. */
+        column?: string;
+        /** Accessible name, when not wrapped in a `Field`. */
+        label?: string;
+        /** Milliseconds to wait after the last keystroke — worth raising for a server search. */
+        debounce?: number;
+        boxed?: boolean;
+        class?: string;
+        ref?: HTMLInputElement | null;
+    };
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableSearch: $$IsomorphicComponent;
+type DataTableSearch<T> = InstanceType<typeof DataTableSearch<T>>;
+export default DataTableSearch;

package/dist/components/Dialog.svelte

@@ -25,6 +25,13 @@
     triggerClass?: string;
     children: Snippet;
     footer?: Snippet;
+    /**
+     * Replaces the visible title block — for a header with media, a status badge or a custom
+     * layout. `title` is still required: it stays the dialog's accessible name, visually hidden.
+     */
+    header?: Snippet;
+    /** Controls beside the close button, e.g. an overflow menu or a "pop out" link. */
+    headerActions?: Snippet;
     /** Sets `--ldt-dialog-width` via a modifier class. Omit to inherit the CSS default. */
     size?: DialogSize;
     headingLevel?: HeadingLevel;
@@ -48,6 +55,8 @@
     triggerClass,
     children,
     footer,
+    header,
+    headerActions,
     size,
     headingLevel = 2,
     showClose = true,
@@ -87,17 +96,29 @@
       {...rest}
     >
       <div class="ldt-dialog__header">
-        <div>
-          <DialogPrimitive.Title level={headingLevel} class="ldt-dialog__title"
-            >{title}</DialogPrimitive.Title
-          >{#if description}<DialogPrimitive.Description class="ldt-dialog__description"
-              >{description}</DialogPrimitive.Description
-            >{/if}
-        </div>
-        {#if showClose}<DialogPrimitive.Close
-            class="ldt-button ldt-icon-button ldt-button--ghost"
-            aria-label={closeLabel}>×</DialogPrimitive.Close
-          >{/if}
+        {#if header}
+          <div>
+            <DialogPrimitive.Title level={headingLevel} class="ldt-sr-only"
+              >{title}</DialogPrimitive.Title
+            >{@render header()}{#if description}<DialogPrimitive.Description class="ldt-sr-only"
+                >{description}</DialogPrimitive.Description
+              >{/if}
+          </div>
+        {:else}
+          <div>
+            <DialogPrimitive.Title level={headingLevel} class="ldt-dialog__title"
+              >{title}</DialogPrimitive.Title
+            >{#if description}<DialogPrimitive.Description class="ldt-dialog__description"
+                >{description}</DialogPrimitive.Description
+              >{/if}
+          </div>
+        {/if}
+        {#if headerActions || showClose}<div class="ldt-dialog__actions">
+            {#if headerActions}{@render headerActions()}{/if}{#if showClose}<DialogPrimitive.Close
+                class="ldt-button ldt-icon-button ldt-button--ghost"
+                aria-label={closeLabel}>×</DialogPrimitive.Close
+              >{/if}
+          </div>{/if}
       </div>
       <div class="ldt-dialog__body">{@render children()}</div>
       {#if footer}<div class="ldt-dialog__footer">{@render footer()}</div>{/if}

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

@@ -15,6 +15,13 @@ type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
     triggerClass?: string;
     children: Snippet;
     footer?: Snippet;
+    /**
+     * Replaces the visible title block — for a header with media, a status badge or a custom
+     * layout. `title` is still required: it stays the dialog's accessible name, visually hidden.
+     */
+    header?: Snippet;
+    /** Controls beside the close button, e.g. an overflow menu or a "pop out" link. */
+    headerActions?: Snippet;
     /** Sets `--ldt-dialog-width` via a modifier class. Omit to inherit the CSS default. */
     size?: DialogSize;
     headingLevel?: HeadingLevel;

package/dist/components/DropdownMenu.svelte

@@ -2,7 +2,7 @@
   import { DropdownMenu as MenuPrimitive } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import type { DropdownMenuContentProps } from 'bits-ui';
-  import type { Alignment, MenuItem, Placement, TriggerChildProps } from '../types.js';
+  import type { Alignment, MenuEntry, Placement, TriggerChildProps } from '../types.js';
   import { cx } from '../utils.js';
 
   type Props = Omit<DropdownMenuContentProps, 'children' | 'class' | 'child'> & {
@@ -13,8 +13,12 @@
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
     triggerClass?: string;
-    /** Declarative rows. Ignored when `children` is provided. */
-    items?: MenuItem<T>[];
+    /**
+     * Declarative rows: plain items, plus `type: 'group' | 'checkbox' | 'radio' | 'sub'` entries
+     * for headings, toggles, one-of-many choices and nested menus. Ignored when `children` is
+     * provided.
+     */
+    items?: MenuEntry<T>[];
     /** Escape hatch: compose the menu body yourself from the re-exported primitives. */
     children?: Snippet;
     side?: Placement;
@@ -22,7 +26,12 @@
     sideOffset?: number;
     /** `class` lands on the portaled Content element. */
     class?: string;
+    /** An action row was chosen. */
     onSelect?: (value: T) => void;
+    /** A `checkbox` entry was toggled. Update its `checked` in your `items`. */
+    onCheckedChange?: (value: T, checked: boolean) => void;
+    /** A `radio` group's choice changed. Update its `value` in your `items`. */
+    onValueChange?: (name: string, value: T) => void;
     onOpenChange?: (open: boolean) => void;
     ref?: HTMLElement | null;
   };
@@ -40,36 +49,94 @@
     sideOffset = 6,
     class: className,
     onSelect,
+    onCheckedChange,
+    onValueChange,
     onOpenChange,
     ref = $bindable(null),
     ...rest
   }: Props = $props();
 </script>
 
-{#snippet rows()}
-  {#each items as item (item.value)}
-    {#if item.separatorBefore}<MenuPrimitive.Separator class="ldt-menu__separator" />{/if}
-    <MenuPrimitive.Item
-      class="ldt-menu__item"
-      disabled={item.disabled}
-      onSelect={() => onSelect?.(item.value)}
-    >
-      {#snippet child({ props })}
-        {#if item.href}
-          <a {...props} href={item.href}
-            >{#if item.icon}{@render item.icon()}{/if}<span>{item.label}</span>{#if item.hint}<span
-                class="ldt-menu__hint">{item.hint}</span
-              >{/if}</a
-          >
-        {:else}
-          <button {...props} type="button"
-            >{#if item.icon}{@render item.icon()}{/if}<span>{item.label}</span>{#if item.hint}<span
-                class="ldt-menu__hint">{item.hint}</span
-              >{/if}</button
+{#snippet label(text: string, hint?: string, icon?: Snippet)}
+  {#if icon}{@render icon()}{/if}<span>{text}</span>{#if hint}<span class="ldt-menu__hint"
+      >{hint}</span
+    >{/if}
+{/snippet}
+
+{#snippet rows(entries: MenuEntry<T>[])}
+  {#each entries as entry, index (entry.type === 'radio' ? `radio:${entry.name}` : entry.type === 'group' || entry.type === 'sub' ? `${entry.type}:${entry.label ?? index}` : entry.value)}
+    {#if entry.separatorBefore}<MenuPrimitive.Separator class="ldt-menu__separator" />{/if}
+    {#if entry.type === 'group'}
+      <MenuPrimitive.Group class="ldt-menu__group">
+        {#if entry.label}<MenuPrimitive.GroupHeading class="ldt-menu__label"
+            >{entry.label}</MenuPrimitive.GroupHeading
+          >{/if}
+        {@render rows(entry.items)}
+      </MenuPrimitive.Group>
+    {:else if entry.type === 'checkbox'}
+      <MenuPrimitive.CheckboxItem
+        class="ldt-menu__item ldt-menu__item--check"
+        checked={entry.checked}
+        disabled={entry.disabled}
+        closeOnSelect={false}
+        onCheckedChange={(checked) => onCheckedChange?.(entry.value, checked)}
+      >
+        <span class="ldt-menu__indicator" aria-hidden="true"></span>{@render label(
+          entry.label,
+          entry.hint
+        )}
+      </MenuPrimitive.CheckboxItem>
+    {:else if entry.type === 'radio'}
+      <MenuPrimitive.RadioGroup
+        class="ldt-menu__group"
+        value={entry.value}
+        onValueChange={(value) => onValueChange?.(entry.name, value as T)}
+      >
+        {#if entry.label}<MenuPrimitive.GroupHeading class="ldt-menu__label"
+            >{entry.label}</MenuPrimitive.GroupHeading
+          >{/if}
+        {#each entry.options as option (option.value)}
+          <MenuPrimitive.RadioItem
+            class="ldt-menu__item ldt-menu__item--radio"
+            value={option.value}
+            disabled={option.disabled}
+            closeOnSelect={false}
           >
-        {/if}
-      {/snippet}
-    </MenuPrimitive.Item>
+            <span class="ldt-menu__indicator" aria-hidden="true"></span><span>{option.label}</span>
+          </MenuPrimitive.RadioItem>
+        {/each}
+      </MenuPrimitive.RadioGroup>
+    {:else if entry.type === 'sub'}
+      <MenuPrimitive.Sub>
+        <MenuPrimitive.SubTrigger
+          class="ldt-menu__item ldt-menu__item--sub"
+          disabled={entry.disabled}
+          >{@render label(entry.label, undefined, entry.icon)}<span
+            class="ldt-menu__chevron"
+            aria-hidden="true"
+          ></span></MenuPrimitive.SubTrigger
+        >
+        <MenuPrimitive.SubContent class="ldt-menu" sideOffset={2}>
+          {@render rows(entry.items)}
+        </MenuPrimitive.SubContent>
+      </MenuPrimitive.Sub>
+    {:else}
+      {@const hint = entry.hint ?? entry.shortcut}
+      <MenuPrimitive.Item
+        class={cx('ldt-menu__item', entry.destructive && 'ldt-menu__item--danger')}
+        disabled={entry.disabled}
+        aria-keyshortcuts={entry.shortcut}
+        onSelect={() => onSelect?.(entry.value)}
+      >
+        {#snippet child({ props })}
+          {#if entry.href}
+            <a {...props} href={entry.href}>{@render label(entry.label, hint, entry.icon)}</a>
+          {:else}
+            <button {...props} type="button">{@render label(entry.label, hint, entry.icon)}</button>
+          {/if}
+        {/snippet}
+      </MenuPrimitive.Item>
+    {/if}
   {/each}
 {/snippet}
 
@@ -92,8 +159,8 @@
       >{#if children}{@render children()}{:else if groupLabel}<MenuPrimitive.Group
           ><MenuPrimitive.GroupHeading class="ldt-menu__label"
             >{groupLabel}</MenuPrimitive.GroupHeading
-          >{@render rows()}</MenuPrimitive.Group
-        >{:else}{@render rows()}{/if}</MenuPrimitive.Content
+          >{@render rows(items)}</MenuPrimitive.Group
+        >{:else}{@render rows(items)}{/if}</MenuPrimitive.Content
     ></MenuPrimitive.Portal
   >
 </MenuPrimitive.Root>

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

@@ -1,6 +1,6 @@
 import { DropdownMenu as MenuPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
-import type { Alignment, MenuItem, Placement, TriggerChildProps } from '../types.js';
+import type { Alignment, MenuEntry, Placement, TriggerChildProps } from '../types.js';
 declare function $$render<T extends string = string>(): {
     props: Omit<MenuPrimitive.ContentProps, "children" | "class" | "child"> & {
         open?: boolean;
@@ -10,8 +10,12 @@ declare function $$render<T extends string = string>(): {
         /** Full control of the trigger element — receives the props Bits needs on it. */
         triggerChild?: Snippet<[TriggerChildProps]>;
         triggerClass?: string;
-        /** Declarative rows. Ignored when `children` is provided. */
-        items?: MenuItem<T>[];
+        /**
+         * Declarative rows: plain items, plus `type: 'group' | 'checkbox' | 'radio' | 'sub'` entries
+         * for headings, toggles, one-of-many choices and nested menus. Ignored when `children` is
+         * provided.
+         */
+        items?: MenuEntry<T>[];
         /** Escape hatch: compose the menu body yourself from the re-exported primitives. */
         children?: Snippet;
         side?: Placement;
@@ -19,7 +23,12 @@ declare function $$render<T extends string = string>(): {
         sideOffset?: number;
         /** `class` lands on the portaled Content element. */
         class?: string;
+        /** An action row was chosen. */
         onSelect?: (value: T) => void;
+        /** A `checkbox` entry was toggled. Update its `checked` in your `items`. */
+        onCheckedChange?: (value: T, checked: boolean) => void;
+        /** A `radio` group's choice changed. Update its `value` in your `items`. */
+        onValueChange?: (name: string, value: T) => void;
         onOpenChange?: (open: boolean) => void;
         ref?: HTMLElement | null;
     };

package/dist/components/Field.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
-  import { cx } from '../utils.js';
+  import { cx, describedBy as describedByIds } from '../utils.js';
 
   // `children` is omitted from the base: this snippet takes the field's wiring as an argument.
   interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -37,8 +37,7 @@
   }: Props = $props();
 
   const describedBy = $derived(
-    [description && `${id}-description`, error && `${id}-error`].filter(Boolean).join(' ') ||
-      undefined
+    describedByIds(description && `${id}-description`, error && `${id}-error`)
   );
 </script>
 

package/dist/components/Fieldset.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { HTMLFieldsetAttributes } from 'svelte/elements';
-  import { cx } from '../utils.js';
+  import { cx, describedBy as describedByIds } from '../utils.js';
 
   interface Props extends HTMLFieldsetAttributes {
     /** Defaults to an SSR-stable generated id, used to wire the description and error. */
@@ -34,8 +34,7 @@
   }: Props = $props();
 
   const describedBy = $derived(
-    [description && `${id}-description`, error && `${id}-error`].filter(Boolean).join(' ') ||
-      undefined
+    describedByIds(description && `${id}-description`, error && `${id}-error`)
   );
 </script>
 

package/dist/components/Filmstrip.svelte

@@ -34,10 +34,17 @@
 
   let buttons = $state<Record<string, HTMLButtonElement | null>>({});
 
+  // Keep the selected item in view by scrolling the strip itself. `scrollIntoView` would also
+  // scroll every ancestor — the page included — so a strip that changes selection on its own
+  // (a rotating carousel) would drag the whole document along with it.
   $effect(() => {
-    if (selectedId) {
-      buttons[selectedId]?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-    }
+    const button = selectedId ? buttons[selectedId] : null;
+    if (!button || !ref) return;
+    const [item, strip] = [button.getBoundingClientRect(), ref.getBoundingClientRect()];
+    if (item.left < strip.left) ref.scrollLeft -= strip.left - item.left;
+    else if (item.right > strip.right) ref.scrollLeft += item.right - strip.right;
+    if (item.top < strip.top) ref.scrollTop -= strip.top - item.top;
+    else if (item.bottom > strip.bottom) ref.scrollTop += item.bottom - strip.bottom;
   });
 
   function select(id: string) {

package/dist/components/FilterPanel.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+  import Button from './Button.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the panel is expanded. The toggle is yours — a `Button` with
+     * `aria-expanded={open}` and `aria-controls` set to this panel's `id`.
+     */
+    open?: boolean;
+    /** Accessible name of the region. */
+    label?: string;
+    /** How many filters are set; shows "Clear all" when above zero and `onClear` is given. */
+    activeCount?: number;
+    onClear?: () => void;
+    clearLabel?: string;
+    /** The filter controls, laid out on an auto-fit grid (`--ldt-min` sets the column width). */
+    children: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  const generatedId = $props.id();
+
+  let {
+    open = $bindable(false),
+    id = generatedId,
+    label = 'Filters',
+    activeCount = 0,
+    onClear,
+    clearLabel = 'Clear all',
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!--
+  Collapsed with `inert`, not `display: none`, so the height can animate; `inert` still takes the
+  hidden controls out of the tab order and the accessibility tree.
+-->
+<div
+  bind:this={ref}
+  {id}
+  class={cx('ldt-filter-panel', className)}
+  data-state={open ? 'open' : 'closed'}
+  role="region"
+  aria-label={label}
+  {...rest}
+>
+  <div class="ldt-filter-panel__clip" inert={!open}>
+    <div class="ldt-filter-panel__body">
+      <div class="ldt-filter-panel__grid">{@render children()}</div>
+      {#if onClear && activeCount > 0}<div class="ldt-filter-panel__footer">
+          <Button variant="text" size="sm" onclick={onClear}>{clearLabel}</Button>
+        </div>{/if}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the panel is expanded. The toggle is yours — a `Button` with
+     * `aria-expanded={open}` and `aria-controls` set to this panel's `id`.
+     */
+    open?: boolean;
+    /** Accessible name of the region. */
+    label?: string;
+    /** How many filters are set; shows "Clear all" when above zero and `onClear` is given. */
+    activeCount?: number;
+    onClear?: () => void;
+    clearLabel?: string;
+    /** The filter controls, laid out on an auto-fit grid (`--ldt-min` sets the column width). */
+    children: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const FilterPanel: import("svelte").Component<Props, {}, "ref" | "open">;
+type FilterPanel = ReturnType<typeof FilterPanel>;
+export default FilterPanel;