@loidolt/theme-svelte 0.3.0 → 0.4.0

package/dist/components/Filmstrip.svelte

@@ -0,0 +1,72 @@
+<script lang="ts" generics="T extends { id: string }">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Orientation } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: T[];
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    /** Vertical rails flip horizontal on their own when the workspace container goes compact. */
+    orientation?: Orientation;
+    /** Accessible name of the listbox. */
+    label: string;
+    /** Thumbnail contents for one item; second argument is whether it is selected. */
+    item: Snippet<[T, boolean]>;
+    class?: string;
+    itemClass?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    items,
+    selectedId = $bindable(null),
+    onSelect,
+    orientation = 'vertical',
+    label,
+    item,
+    class: className,
+    itemClass,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  let buttons = $state<Record<string, HTMLButtonElement | null>>({});
+
+  $effect(() => {
+    if (selectedId) {
+      buttons[selectedId]?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+  });
+
+  function select(id: string) {
+    selectedId = id;
+    onSelect?.(id);
+  }
+</script>
+
+<div
+  bind:this={ref}
+  class={cx(
+    'ldt-filmstrip',
+    orientation === 'horizontal' && 'ldt-filmstrip--horizontal',
+    className
+  )}
+  role="listbox"
+  aria-label={label}
+  {...rest}
+>
+  {#each items as entry (entry.id)}
+    <button
+      type="button"
+      class={cx('ldt-filmstrip__item', itemClass)}
+      role="option"
+      aria-selected={selectedId === entry.id}
+      bind:this={buttons[entry.id]}
+      onclick={() => select(entry.id)}
+    >
+      {@render item(entry, selectedId === entry.id)}
+    </button>
+  {/each}
+</div>

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

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Orientation } from '../types.js';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        items: T[];
+        selectedId?: string | null;
+        onSelect?: (id: string) => void;
+        /** Vertical rails flip horizontal on their own when the workspace container goes compact. */
+        orientation?: Orientation;
+        /** Accessible name of the listbox. */
+        label: string;
+        /** Thumbnail contents for one item; second argument is whether it is selected. */
+        item: Snippet<[T, boolean]>;
+        class?: string;
+        itemClass?: string;
+        ref?: HTMLDivElement | null;
+    };
+    exports: {};
+    bindings: "ref" | "selectedId";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "selectedId";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: 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 {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Filmstrip: $$IsomorphicComponent;
+type Filmstrip<T extends {
+    id: string;
+}> = InstanceType<typeof Filmstrip<T>>;
+export default Filmstrip;

package/dist/components/FloatingBar.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Orientation } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Corner of the nearest positioned ancestor to pin to. */
+    placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    orientation?: Orientation;
+    /** Accessible name; renders `role="group"` when set. */
+    label?: string;
+    children: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    placement = 'bottom-end',
+    orientation = 'horizontal',
+    label,
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!-- The parent supplies position: relative — the bar is a pointer-events island over a stage. -->
+<div
+  bind:this={ref}
+  class={cx(
+    'ldt-floating-bar',
+    `ldt-floating-bar--${placement}`,
+    orientation === 'vertical' && 'ldt-floating-bar--vertical',
+    className
+  )}
+  role={label ? 'group' : undefined}
+  aria-label={label}
+  {...rest}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Orientation } from '../types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Corner of the nearest positioned ancestor to pin to. */
+    placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    orientation?: Orientation;
+    /** Accessible name; renders `role="group"` when set. */
+    label?: string;
+    children: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const FloatingBar: import("svelte").Component<Props, {}, "ref">;
+type FloatingBar = ReturnType<typeof FloatingBar>;
+export default FloatingBar;

package/dist/components/ListRow.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface CommonProps {
+    /** Highlighted as the current item: `aria-current` on links, `aria-pressed` on buttons. */
+    selected?: boolean;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLAnchorElement | HTMLButtonElement | null;
+  }
+
+  // Same href rule as Button: with it an <a>, without it a <button>.
+  type Props = CommonProps &
+    (
+      | (Omit<HTMLAnchorAttributes, 'class' | 'type'> & { href: string; type?: never })
+      | (Omit<HTMLButtonAttributes, 'class'> & { href?: never })
+    );
+
+  let {
+    selected = false,
+    href,
+    type = 'button',
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const classes = $derived(cx('ldt-list-row', selected && 'ldt-list-row--selected', className));
+</script>
+
+{#if href}
+  <a
+    bind:this={ref}
+    {href}
+    class={classes}
+    aria-current={selected || undefined}
+    {...rest as HTMLAnchorAttributes}>{@render children()}</a
+  >
+{:else}
+  <button
+    bind:this={ref}
+    {type}
+    class={classes}
+    aria-pressed={selected || undefined}
+    {...rest as HTMLButtonAttributes}>{@render children()}</button
+  >
+{/if}

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+interface CommonProps {
+    /** Highlighted as the current item: `aria-current` on links, `aria-pressed` on buttons. */
+    selected?: boolean;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLAnchorElement | HTMLButtonElement | null;
+}
+type Props = CommonProps & ((Omit<HTMLAnchorAttributes, 'class' | 'type'> & {
+    href: string;
+    type?: never;
+}) | (Omit<HTMLButtonAttributes, 'class'> & {
+    href?: never;
+}));
+declare const ListRow: import("svelte").Component<Props, {}, "ref">;
+type ListRow = ReturnType<typeof ListRow>;
+export default ListRow;

package/dist/components/Marker.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    number?: number;
+    /** `dot` sits in lists; `pin` is the teardrop that points at a spot on a canvas. */
+    shape?: 'dot' | 'pin';
+    active?: boolean;
+    /** Accessible name, e.g. "Comment 3". Omit when adjacent text already names it. */
+    label?: string;
+    class?: string;
+    ref?: HTMLSpanElement | null;
+  }
+
+  let {
+    number,
+    shape = 'dot',
+    active = false,
+    label,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<span
+  bind:this={ref}
+  class={cx(
+    'ldt-marker',
+    shape === 'pin' && 'ldt-marker--pin',
+    active && 'ldt-marker--active',
+    className
+  )}
+  {...rest}
+  >{#if number !== undefined}{number}{/if}{#if label}<span class="ldt-sr-only">{label}</span
+    >{/if}</span
+>

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

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    number?: number;
+    /** `dot` sits in lists; `pin` is the teardrop that points at a spot on a canvas. */
+    shape?: 'dot' | 'pin';
+    active?: boolean;
+    /** Accessible name, e.g. "Comment 3". Omit when adjacent text already names it. */
+    label?: string;
+    class?: string;
+    ref?: HTMLSpanElement | null;
+}
+declare const Marker: import("svelte").Component<Props, {}, "ref">;
+type Marker = ReturnType<typeof Marker>;
+export default Marker;

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/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/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;