@loidolt/theme-svelte 0.2.0

package/dist/components/DropdownMenu.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" generics="T extends string = string">
+  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 { cx } from '../utils.js';
+
+  type Props = Omit<DropdownMenuContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    /** Heading rendered above `items`, associated with them via a menu group. */
+    groupLabel?: string;
+    trigger?: Snippet;
+    /** 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>[];
+    /** Escape hatch: compose the menu body yourself from the re-exported primitives. */
+    children?: Snippet;
+    side?: Placement;
+    align?: Alignment;
+    sideOffset?: number;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    onSelect?: (value: T) => void;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    open = $bindable(false),
+    groupLabel,
+    trigger,
+    triggerChild,
+    triggerClass = 'ldt-button ldt-button--quiet',
+    items = [],
+    children,
+    side = 'bottom',
+    align = 'start',
+    sideOffset = 6,
+    class: className,
+    onSelect,
+    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
+                aria-hidden="true">{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
+                aria-hidden="true">{item.hint}</span
+              >{/if}</button
+          >
+        {/if}
+      {/snippet}
+    </MenuPrimitive.Item>
+  {/each}
+{/snippet}
+
+<MenuPrimitive.Root bind:open {onOpenChange}>
+  {#if triggerChild}<MenuPrimitive.Trigger
+      >{#snippet child(childProps)}{@render triggerChild(
+          childProps
+        )}{/snippet}</MenuPrimitive.Trigger
+    >{:else if trigger}<MenuPrimitive.Trigger class={triggerClass}
+      >{@render trigger()}</MenuPrimitive.Trigger
+    >{/if}
+  <MenuPrimitive.Portal
+    ><MenuPrimitive.Content
+      bind:ref
+      {side}
+      {align}
+      {sideOffset}
+      class={cx('ldt-menu', className)}
+      {...rest}
+      >{#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
+    ></MenuPrimitive.Portal
+  >
+</MenuPrimitive.Root>

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

@@ -0,0 +1,47 @@
+import { DropdownMenu as MenuPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { Alignment, MenuItem, Placement, TriggerChildProps } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: Omit<MenuPrimitive.ContentProps, "class" | "children" | "child"> & {
+        open?: boolean;
+        /** Heading rendered above `items`, associated with them via a menu group. */
+        groupLabel?: string;
+        trigger?: Snippet;
+        /** 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>[];
+        /** Escape hatch: compose the menu body yourself from the re-exported primitives. */
+        children?: Snippet;
+        side?: Placement;
+        align?: Alignment;
+        sideOffset?: number;
+        /** `class` lands on the portaled Content element. */
+        class?: string;
+        onSelect?: (value: T) => void;
+        onOpenChange?: (open: boolean) => void;
+        ref?: HTMLElement | null;
+    };
+    exports: {};
+    bindings: "ref" | "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DropdownMenu: $$IsomorphicComponent;
+type DropdownMenu<T extends string = string> = InstanceType<typeof DropdownMenu<T>>;
+export default DropdownMenu;

package/dist/components/Field.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } 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'> {
+    /** Defaults to an SSR-stable generated id shared by the label and the control. */
+    id?: string;
+    /** Visible label text. */
+    label: string;
+    description?: string;
+    error?: string;
+    optional?: boolean;
+    /** Text of the "optional" marker, for localisation. */
+    optionalText?: string;
+    class?: string;
+    /** Receives the wiring the control needs: `id`, `aria-describedby`, and validity. */
+    children: Snippet<[{ id: string; describedBy?: string; invalid: boolean }]>;
+    ref?: HTMLDivElement | null;
+  }
+
+  // `$props.id()` is stable across SSR and hydration; `Math.random()` was not.
+  const generatedId = $props.id();
+
+  let {
+    id = generatedId,
+    label,
+    description,
+    error,
+    optional = false,
+    optionalText = 'Optional',
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const describedBy = $derived(
+    [description && `${id}-description`, error && `${id}-error`].filter(Boolean).join(' ') ||
+      undefined
+  );
+</script>
+
+<div bind:this={ref} class={cx('ldt-field', className)} {...rest}>
+  <label class="ldt-field__label" for={id}
+    ><span>{label}</span>{#if optional}<small>{optionalText}</small>{/if}</label
+  >
+  {@render children({ id, describedBy, invalid: Boolean(error) })}
+  {#if description}<p class="ldt-field__description" id={`${id}-description`}>{description}</p>{/if}
+  {#if error}<p class="ldt-field__error" id={`${id}-error`} role="alert">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Defaults to an SSR-stable generated id shared by the label and the control. */
+    id?: string;
+    /** Visible label text. */
+    label: string;
+    description?: string;
+    error?: string;
+    optional?: boolean;
+    /** Text of the "optional" marker, for localisation. */
+    optionalText?: string;
+    class?: string;
+    /** Receives the wiring the control needs: `id`, `aria-describedby`, and validity. */
+    children: Snippet<[{
+        id: string;
+        describedBy?: string;
+        invalid: boolean;
+    }]>;
+    ref?: HTMLDivElement | null;
+}
+declare const Field: import("svelte").Component<Props, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/IconButton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { ActionVariant, ControlSize } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLButtonAttributes {
+    /** Accessible name for the icon-only control. Required — there is no visible text. */
+    label: string;
+    variant?: ActionVariant;
+    size?: ControlSize;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLButtonElement | null;
+  }
+
+  let {
+    label,
+    variant = 'ghost',
+    size = 'md',
+    disabled = false,
+    type = 'button',
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<button
+  bind:this={ref}
+  {type}
+  {disabled}
+  class={cx(
+    'ldt-button ldt-icon-button',
+    `ldt-button--${variant}`,
+    size !== 'md' && `ldt-button--${size}`,
+    className
+  )}
+  aria-label={label}
+  {...rest}>{@render children()}</button
+>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ActionVariant, ControlSize } from '../types.js';
+interface Props extends HTMLButtonAttributes {
+    /** Accessible name for the icon-only control. Required — there is no visible text. */
+    label: string;
+    variant?: ActionVariant;
+    size?: ControlSize;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLButtonElement | null;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "ref">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/Input.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLInputAttributes, 'value'> {
+    value?: string;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLInputElement | null;
+  }
+
+  let {
+    value = $bindable(''),
+    boxed = false,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<input
+  bind:this={ref}
+  bind:value
+  class={cx('ldt-input', boxed && 'ldt-input--boxed', className)}
+  {...rest}
+/>

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

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'value'> {
+    value?: string;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLInputElement | null;
+}
+declare const Input: import("svelte").Component<Props, {}, "ref" | "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/Label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLLabelAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLLabelAttributes {
+    for?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLLabelElement | null;
+  }
+
+  let {
+    for: htmlFor,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<label bind:this={ref} for={htmlFor} class={cx('ldt-label', className)} {...rest}
+  >{@render children()}</label
+>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+interface Props extends HTMLLabelAttributes {
+    for?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLLabelElement | null;
+}
+declare const Label: import("svelte").Component<Props, {}, "ref">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/NavMenu.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" generics="T extends string = string">
+  import type { Snippet } from 'svelte';
+  import DropdownMenu from './DropdownMenu.svelte';
+  import type { Alignment, MenuItem, Placement } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props {
+    open?: boolean;
+    /** Trigger text. */
+    label: string;
+    /** Heading above the items inside the popup. */
+    groupLabel?: string;
+    items?: MenuItem<T>[];
+    children?: Snippet;
+    /** Marks this entry as the current section: styles the trigger and sets `aria-current`. */
+    active?: boolean;
+    side?: Placement;
+    align?: Alignment;
+    /** `class` lands on the trigger; use `menuClass` for the popup. */
+    class?: string;
+    menuClass?: string;
+    onSelect?: (value: T) => void;
+    onOpenChange?: (open: boolean) => void;
+  }
+
+  let {
+    open = $bindable(false),
+    label,
+    groupLabel,
+    items,
+    children,
+    active = false,
+    side,
+    align,
+    class: className,
+    menuClass,
+    onSelect,
+    onOpenChange,
+  }: Props = $props();
+</script>
+
+{#snippet navTrigger({ props }: { props: Record<string, unknown> })}
+  <button
+    {...props}
+    type="button"
+    class={cx('ldt-nav-menu', active && 'ldt-nav-menu--active', className)}
+    aria-current={active ? 'page' : undefined}>{label} <span aria-hidden="true">⌄</span></button
+  >
+{/snippet}
+
+<DropdownMenu
+  bind:open
+  {items}
+  {groupLabel}
+  {children}
+  {side}
+  {align}
+  {onSelect}
+  {onOpenChange}
+  triggerChild={navTrigger}
+  class={menuClass}
+/>

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { Alignment, MenuItem, Placement } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: {
+        open?: boolean;
+        /** Trigger text. */
+        label: string;
+        /** Heading above the items inside the popup. */
+        groupLabel?: string;
+        items?: MenuItem<T>[];
+        children?: Snippet;
+        /** Marks this entry as the current section: styles the trigger and sets `aria-current`. */
+        active?: boolean;
+        side?: Placement;
+        align?: Alignment;
+        /** `class` lands on the trigger; use `menuClass` for the popup. */
+        class?: string;
+        menuClass?: string;
+        onSelect?: (value: T) => void;
+        onOpenChange?: (open: boolean) => void;
+    };
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NavMenu: $$IsomorphicComponent;
+type NavMenu<T extends string = string> = InstanceType<typeof NavMenu<T>>;
+export default NavMenu;

package/dist/components/NumberField.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'min' | 'max' | 'step'> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Accessible name of the field; also used to name the two spin buttons. */
+    label: string;
+    decrementLabel?: (label: string) => string;
+    incrementLabel?: (label: string) => string;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    onValueChange?: (value: number) => void;
+    /** `class` lands on the wrapper; use `inputClass` to reach the input. */
+    class?: string;
+    inputClass?: string;
+    ref?: HTMLInputElement | null;
+  }
+
+  let {
+    value = $bindable(0),
+    min = -Infinity,
+    max = Infinity,
+    step = 1,
+    label,
+    decrementLabel = (name) => `Decrease ${name}`,
+    incrementLabel = (name) => `Increase ${name}`,
+    boxed = false,
+    onValueChange,
+    class: className,
+    inputClass,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  /** Clearing the input yields `NaN`; fall back to the low bound rather than wedging the field. */
+  const fallback = $derived(Number.isFinite(min) ? min : 0);
+
+  const atMin = $derived(value <= min);
+  const atMax = $derived(value >= max);
+
+  function set(next: number) {
+    value = Number.isFinite(next) ? Math.min(max, Math.max(min, next)) : fallback;
+    onValueChange?.(value);
+  }
+</script>
+
+<div class={cx('ldt-number-field', boxed && 'ldt-number-field--boxed', className)}>
+  <button
+    class="ldt-number-field__button"
+    type="button"
+    aria-label={decrementLabel(label)}
+    aria-disabled={atMin || undefined}
+    onclick={() => !atMin && set(value - step)}>−</button
+  >
+  <input
+    bind:this={ref}
+    class={cx('ldt-number-field__input', inputClass)}
+    type="number"
+    bind:value
+    min={Number.isFinite(min) ? min : undefined}
+    max={Number.isFinite(max) ? max : undefined}
+    {step}
+    aria-label={label}
+    {...rest}
+    onchange={(event) => set(Number(event.currentTarget.value))}
+  />
+  <button
+    class="ldt-number-field__button"
+    type="button"
+    aria-label={incrementLabel(label)}
+    aria-disabled={atMax || undefined}
+    onclick={() => !atMax && set(value + step)}>+</button
+  >
+</div>

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

@@ -0,0 +1,21 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'min' | 'max' | 'step'> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Accessible name of the field; also used to name the two spin buttons. */
+    label: string;
+    decrementLabel?: (label: string) => string;
+    incrementLabel?: (label: string) => string;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    onValueChange?: (value: number) => void;
+    /** `class` lands on the wrapper; use `inputClass` to reach the input. */
+    class?: string;
+    inputClass?: string;
+    ref?: HTMLInputElement | null;
+}
+declare const NumberField: import("svelte").Component<Props, {}, "ref" | "value">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

package/dist/components/PageHeader.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HeadingLevel } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    eyebrow,
+    title,
+    description,
+    actions,
+    headingLevel = 1,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<header bind:this={ref} class={cx('ldt-page-header', className)} {...rest}>
+  <div>
+    {#if eyebrow}<p class="ldt-eyebrow">{eyebrow}</p>{/if}
+    <svelte:element this={`h${headingLevel}`} class="ldt-page-header__title">{title}</svelte:element
+    >
+    {#if description}<p class="ldt-page-header__description">{description}</p>{/if}
+  </div>
+  {#if actions}<div class="ldt-cluster">{@render actions()}</div>{/if}
+</header>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../types.js';
+interface Props extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "ref">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/Panel.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HeadingLevel } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    header?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    title,
+    header,
+    children,
+    footer,
+    headingLevel = 2,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<section bind:this={ref} class={cx('ldt-panel', className)} {...rest}>
+  {#if header || title}<header class="ldt-panel__header">
+      {#if header}{@render header()}{:else}<svelte:element
+          this={`h${headingLevel}`}
+          class="ldt-panel__title">{title}</svelte:element
+        >{/if}
+    </header>{/if}
+  <div class="ldt-panel__content">{@render children()}</div>
+  {#if footer}<footer class="ldt-panel__footer">{@render footer()}</footer>{/if}
+</section>