@loidolt/theme-svelte 0.2.0 → 0.4.0

package/dist/components/Pagination.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Total number of items being paged through — not the number of pages. */
+    count: number;
+    perPage?: number;
+    /** 1-based current page. */
+    page?: number;
+    /** Pages kept either side of the current one before the trail turns into an ellipsis. */
+    siblingCount?: number;
+    /** Accessible name of the landmark. */
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Accessible name for a page button, e.g. `(page) => `Page ${page}``. */
+    pageLabel?: (page: number) => string;
+    onPageChange?: (page: number) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    count,
+    perPage = 10,
+    page = $bindable(1),
+    siblingCount = 1,
+    label = 'Pagination',
+    previousLabel = 'Previous',
+    nextLabel = 'Next',
+    pageLabel = (value: number) => `Page ${value}`,
+    onPageChange,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!--
+  Bits' Root is a `<div>`; the landmark is ours, so the control set is reachable as "Pagination"
+  from a rotor without the page having to add one.
+-->
+<nav bind:this={ref} class={cx('ldt-pagination', className)} aria-label={label} {...rest}>
+  <PaginationPrimitive.Root
+    {count}
+    {perPage}
+    {siblingCount}
+    bind:page
+    onPageChange={(next) => onPageChange?.(next)}
+    class="ldt-pagination__list"
+  >
+    {#snippet children({ pages, currentPage })}
+      <PaginationPrimitive.PrevButton class="ldt-button ldt-button--quiet ldt-button--sm"
+        >{previousLabel}</PaginationPrimitive.PrevButton
+      >
+      {#each pages as item (item.key)}
+        {#if item.type === 'ellipsis'}
+          <!-- Presentational: the gap is a rendering device, and "…" read aloud between page
+               numbers is noise. The page buttons either side already say where the trail jumps. -->
+          <span class="ldt-pagination__ellipsis" aria-hidden="true">…</span>
+        {:else}
+          <!--
+            Rendered through Bits' `child` snippet rather than as a styled primitive: the
+            primitive merges its own `aria-label` last and would overwrite `pageLabel`. Spreading
+            `props` first leaves its behaviour intact while the naming stays ours.
+          -->
+          <PaginationPrimitive.Page page={item}>
+            {#snippet child({ props })}
+              <button
+                {...props}
+                class="ldt-button ldt-button--quiet ldt-button--sm ldt-pagination__page"
+                aria-label={pageLabel(item.value)}
+                aria-current={item.value === currentPage ? 'page' : undefined}>{item.value}</button
+              >
+            {/snippet}
+          </PaginationPrimitive.Page>
+        {/if}
+      {/each}
+      <PaginationPrimitive.NextButton class="ldt-button ldt-button--quiet ldt-button--sm"
+        >{nextLabel}</PaginationPrimitive.NextButton
+      >
+    {/snippet}
+  </PaginationPrimitive.Root>
+</nav>

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Total number of items being paged through — not the number of pages. */
+    count: number;
+    perPage?: number;
+    /** 1-based current page. */
+    page?: number;
+    /** Pages kept either side of the current one before the trail turns into an ellipsis. */
+    siblingCount?: number;
+    /** Accessible name of the landmark. */
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Accessible name for a page button, e.g. `(page) => `Page ${page}``. */
+    pageLabel?: (page: number) => string;
+    onPageChange?: (page: number) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "ref" | "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Popover.svelte

@@ -2,7 +2,13 @@
   import { Popover as PopoverPrimitive } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import type { PopoverContentProps } from 'bits-ui';
-  import type { Alignment, Placement, TriggerChildProps } from '../types.js';
+  import type {
+    ActionVariant,
+    Alignment,
+    ControlSize,
+    Placement,
+    TriggerChildProps,
+  } from '../types.js';
   import { cx } from '../utils.js';
 
   type Props = Omit<PopoverContentProps, 'children' | 'class' | 'child'> & {
@@ -10,6 +16,9 @@
     trigger?: Snippet;
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
+    /** Button variant for the default trigger (`quiet` unless set). An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
     triggerClass?: string;
     children: Snippet;
     side?: Placement;
@@ -25,7 +34,9 @@
     open = $bindable(false),
     trigger,
     triggerChild,
-    triggerClass = 'ldt-button ldt-button--quiet',
+    triggerVariant,
+    triggerSize,
+    triggerClass,
     children,
     side = 'bottom',
     align = 'start',
@@ -35,6 +46,16 @@
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+
+  // Popover's historical default trigger is the quiet button; an explicit triggerClass wins.
+  const triggerClasses = $derived(
+    triggerClass ??
+      cx(
+        'ldt-button',
+        (triggerVariant ?? 'quiet') !== 'default' && `ldt-button--${triggerVariant ?? 'quiet'}`,
+        triggerSize && triggerSize !== 'md' && `ldt-button--${triggerSize}`
+      )
+  );
 </script>
 
 <PopoverPrimitive.Root bind:open {onOpenChange}>
@@ -42,7 +63,7 @@
       >{#snippet child(childProps)}{@render triggerChild(
           childProps
         )}{/snippet}</PopoverPrimitive.Trigger
-    >{:else if trigger}<PopoverPrimitive.Trigger class={triggerClass}
+    >{:else if trigger}<PopoverPrimitive.Trigger class={triggerClasses}
       >{@render trigger()}</PopoverPrimitive.Trigger
     >{/if}
   <PopoverPrimitive.Portal

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

@@ -1,11 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { PopoverContentProps } from 'bits-ui';
-import type { Alignment, Placement, TriggerChildProps } from '../types.js';
+import type { ActionVariant, Alignment, ControlSize, Placement, TriggerChildProps } from '../types.js';
 type Props = Omit<PopoverContentProps, 'children' | 'class' | 'child'> & {
     open?: boolean;
     trigger?: Snippet;
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
+    /** Button variant for the default trigger (`quiet` unless set). An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
     triggerClass?: string;
     children: Snippet;
     side?: Placement;

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

@@ -14,7 +14,7 @@ declare function $$render<T extends string = string>(): {
         ref?: HTMLFieldSetElement | null;
     };
     exports: {};
-    bindings: "ref" | "value";
+    bindings: "value" | "ref";
     slots: {};
     events: {};
 };
@@ -22,7 +22,7 @@ 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" | "value";
+    bindings(): "value" | "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/RecordStepper.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 0-based position in the set; `format` receives it 1-based. */
+    index: number;
+    total: number;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    format?: (n: number, total: number) => string;
+    disabled?: boolean;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    index,
+    total,
+    onPrevious,
+    onNext,
+    label = 'Records',
+    previousLabel = 'Previous',
+    nextLabel = 'Next',
+    format = (n, t) => `${n} of ${t}`,
+    disabled = false,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-record-stepper', className)}
+  role="group"
+  aria-label={label}
+  {...rest}
+>
+  <button
+    type="button"
+    class="ldt-button ldt-button--text ldt-button--sm"
+    disabled={disabled || index <= 0}
+    onclick={() => onPrevious?.()}>{previousLabel}</button
+  >
+  <span class="ldt-record-stepper__count ldt-utility-text" aria-live="polite"
+    >{format(index + 1, total)}</span
+  >
+  <button
+    type="button"
+    class="ldt-button ldt-button--text ldt-button--sm"
+    disabled={disabled || index >= total - 1}
+    onclick={() => onNext?.()}>{nextLabel}</button
+  >
+</div>

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 0-based position in the set; `format` receives it 1-based. */
+    index: number;
+    total: number;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    format?: (n: number, total: number) => string;
+    disabled?: boolean;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const RecordStepper: import("svelte").Component<Props, {}, "ref">;
+type RecordStepper = ReturnType<typeof RecordStepper>;
+export default RecordStepper;

package/dist/components/SegmentedNav.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { ControlSize } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface SegmentedNavItem {
+    label: string;
+    href: string;
+    /** Marks the current page (`aria-current="page"`), which is also the pressed style. */
+    current?: boolean;
+    /** Small trailing annotation, e.g. "latest". */
+    hint?: string;
+  }
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items: SegmentedNavItem[];
+    /** Accessible name of the navigation region. */
+    label?: string;
+    size?: ControlSize;
+    class?: string;
+    itemClass?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    items,
+    label = 'Sections',
+    size = 'md',
+    class: className,
+    itemClass,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!-- ToggleGroup's shape for navigation: options are real links, so open-in-new-tab and the
+     rotor both work — an anchor inside a radiogroup would surrender that. -->
+<nav
+  bind:this={ref}
+  class={cx('ldt-segmented-nav', size !== 'md' && `ldt-toggle-group--${size}`, className)}
+  aria-label={label}
+  {...rest}
+>
+  {#each items as item, index (index)}
+    <a
+      class={cx('ldt-toggle-group__item', itemClass)}
+      href={item.href}
+      aria-current={item.current ? 'page' : undefined}
+    >
+      {item.label}{#if item.hint}<span class="ldt-segmented-nav__hint">{item.hint}</span>{/if}
+    </a>
+  {/each}
+</nav>

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ControlSize } from '../types.js';
+interface SegmentedNavItem {
+    label: string;
+    href: string;
+    /** Marks the current page (`aria-current="page"`), which is also the pressed style. */
+    current?: boolean;
+    /** Small trailing annotation, e.g. "latest". */
+    hint?: string;
+}
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items: SegmentedNavItem[];
+    /** Accessible name of the navigation region. */
+    label?: string;
+    size?: ControlSize;
+    class?: string;
+    itemClass?: string;
+    ref?: HTMLElement | null;
+}
+declare const SegmentedNav: import("svelte").Component<Props, {}, "ref">;
+type SegmentedNav = ReturnType<typeof SegmentedNav>;
+export default SegmentedNav;

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

@@ -18,7 +18,7 @@ declare function $$render<T extends string = string>(): {
         ref?: HTMLSelectElement | null;
     };
     exports: {};
-    bindings: "ref" | "value";
+    bindings: "value" | "ref";
     slots: {};
     events: {};
 };
@@ -26,7 +26,7 @@ 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" | "value";
+    bindings(): "value" | "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/Stat.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface CommonProps {
+    label: string;
+    value: string | number;
+    /** Small accent line above the value, in the eyebrow voice. */
+    eyebrow?: string;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  type Props = CommonProps &
+    (
+      | (Omit<HTMLAnchorAttributes, 'class'> & { href: string })
+      | (Omit<HTMLAttributes<HTMLElement>, 'class'> & { href?: never })
+    );
+
+  let {
+    label,
+    value,
+    eyebrow,
+    href,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'div'}
+  bind:this={ref}
+  class={cx('ldt-stat', className)}
+  {href}
+  {...rest}
+>
+  {#if eyebrow}<p class="ldt-eyebrow">{eyebrow}</p>{/if}
+  <p class="ldt-stat__value">{value}</p>
+  <p class="ldt-stat__label">{label}</p>
+</svelte:element>

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

@@ -0,0 +1,17 @@
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+interface CommonProps {
+    label: string;
+    value: string | number;
+    /** Small accent line above the value, in the eyebrow voice. */
+    eyebrow?: string;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+type Props = CommonProps & ((Omit<HTMLAnchorAttributes, 'class'> & {
+    href: string;
+}) | (Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    href?: never;
+}));
+declare const Stat: import("svelte").Component<Props, {}, "ref">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/components/StatusDot.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { BadgeVariant } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    /** Accessible name — color alone must never carry the state. */
+    label: string;
+    class?: string;
+    ref?: HTMLSpanElement | null;
+  }
+
+  let {
+    variant = 'default',
+    label,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<span
+  bind:this={ref}
+  class={cx('ldt-status-dot', variant !== 'default' && `ldt-status-dot--${variant}`, className)}
+  {...rest}><span class="ldt-sr-only">{label}</span></span
+>

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BadgeVariant } from '../types.js';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    /** Accessible name — color alone must never carry the state. */
+    label: string;
+    class?: string;
+    ref?: HTMLSpanElement | null;
+}
+declare const StatusDot: import("svelte").Component<Props, {}, "ref">;
+type StatusDot = ReturnType<typeof StatusDot>;
+export default StatusDot;

package/dist/components/SwatchGroup.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" generics="T extends string = string">
+  import type { HTMLFieldsetAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface SwatchOption<V extends string = string> {
+    value: V;
+    /** Accessible name of the swatch. Falls back to the color value. */
+    label?: string;
+    /** Any CSS color. */
+    color: string;
+    disabled?: boolean;
+  }
+
+  interface Props extends HTMLFieldsetAttributes {
+    options: SwatchOption<T>[];
+    value?: T;
+    onValueChange?: (value: T) => void;
+    size?: 'sm' | 'md';
+    /** Visible group label, rendered as a `<legend>`. */
+    label?: string;
+    /** Shared `name` for the radios. Defaults to an SSR-stable generated id. */
+    name?: string;
+    disabled?: boolean;
+    class?: string;
+    ref?: HTMLFieldSetElement | null;
+  }
+
+  const generatedName = $props.id();
+
+  let {
+    options,
+    value = $bindable(),
+    onValueChange,
+    size = 'md',
+    label,
+    name = generatedName,
+    disabled = false,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<fieldset bind:this={ref} class={cx('ldt-fieldset', className)} {disabled} {...rest}>
+  {#if label}<legend class="ldt-legend">{label}</legend>{/if}
+  <div class={cx('ldt-swatch-group', size === 'sm' && 'ldt-swatch-group--sm')}>
+    {#each options as option (option.value)}
+      <label
+        class="ldt-swatch-group__swatch"
+        style={`--ldt-swatch: ${option.color};`}
+        title={option.label ?? option.color}
+      >
+        <input
+          class="ldt-sr-only"
+          type="radio"
+          {name}
+          value={option.value}
+          checked={value === option.value}
+          disabled={option.disabled}
+          onchange={() => {
+            value = option.value;
+            onValueChange?.(option.value);
+          }}
+        />
+        <span class="ldt-sr-only">{option.label ?? option.color}</span>
+      </label>
+    {/each}
+  </div>
+</fieldset>

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

@@ -0,0 +1,44 @@
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+declare function $$render<T extends string = string>(): {
+    props: HTMLFieldsetAttributes & {
+        options: {
+            value: T;
+            /** Accessible name of the swatch. Falls back to the color value. */
+            label?: string;
+            /** Any CSS color. */
+            color: string;
+            disabled?: boolean;
+        }[];
+        value?: T;
+        onValueChange?: (value: T) => void;
+        size?: "sm" | "md";
+        /** Visible group label, rendered as a `<legend>`. */
+        label?: string;
+        /** Shared `name` for the radios. Defaults to an SSR-stable generated id. */
+        name?: string;
+        disabled?: boolean;
+        class?: string;
+        ref?: HTMLFieldSetElement | null;
+    };
+    exports: {};
+    bindings: "value" | "ref";
+    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(): "value" | "ref";
+    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 SwatchGroup: $$IsomorphicComponent;
+type SwatchGroup<T extends string = string> = InstanceType<typeof SwatchGroup<T>>;
+export default SwatchGroup;

package/dist/components/Switch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLButtonAttributes } from 'svelte/elements';
   import { cx } from '../utils.js';
@@ -20,6 +21,7 @@
     checked = $bindable(false),
     disabled = false,
     name,
+    form,
     value = 'on',
     onCheckedChange,
     onclick,
@@ -29,6 +31,20 @@
     ...rest
   }: Props = $props();
 
+  let input = $state<HTMLInputElement | null>(null);
+  const initialChecked = checked;
+
+  onMount(() => {
+    const owner = input?.form;
+    if (!owner) return;
+    const reset = () => {
+      checked = initialChecked;
+      onCheckedChange?.(checked);
+    };
+    owner.addEventListener('reset', reset);
+    return () => owner.removeEventListener('reset', reset);
+  });
+
   function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
     if (disabled) return;
     checked = !checked;
@@ -43,6 +59,7 @@
   role="switch"
   aria-checked={checked}
   {disabled}
+  {form}
   class={cx('ldt-switch', className)}
   {...rest}
   onclick={handleClick}
@@ -51,11 +68,13 @@
   {#if children}<span>{@render children()}</span>{/if}
 </button>
 {#if name}<input
+    bind:this={input}
     type="checkbox"
     class="ldt-sr-only"
     tabindex="-1"
     aria-hidden="true"
     {name}
+    {form}
     {value}
     {checked}
     {disabled}