@loidolt/theme-svelte 0.2.0 → 0.4.0

package/dist/components/EmptyState.svelte

@@ -0,0 +1,40 @@
+<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<HTMLDivElement> {
+    title: string;
+    /** What to do about it. An empty state without a next step is just a blank screen. */
+    description?: string;
+    /** Leading visual, sized by the consumer. */
+    icon?: Snippet;
+    /** Buttons or links offering the next step. */
+    actions?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    title,
+    description,
+    icon,
+    actions,
+    headingLevel = 3,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<div bind:this={ref} class={cx('ldt-empty-state', className)} {...rest}>
+  {#if icon}<div class="ldt-empty-state__icon" aria-hidden="true">{@render icon()}</div>{/if}
+  <svelte:element this={`h${headingLevel}`} class="ldt-empty-state__title">{title}</svelte:element>
+  {#if description}<p class="ldt-empty-state__description">{description}</p>{/if}
+  {#if children}{@render children()}{/if}
+  {#if actions}<div class="ldt-empty-state__actions">{@render actions()}</div>{/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    /** What to do about it. An empty state without a next step is just a blank screen. */
+    description?: string;
+    /** Leading visual, sized by the consumer. */
+    icon?: Snippet;
+    /** Buttons or links offering the next step. */
+    actions?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "ref">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/Fieldset.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLFieldsetAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLFieldsetAttributes {
+    /** Defaults to an SSR-stable generated id, used to wire the description and error. */
+    id?: string;
+    /** Visible group label, rendered as a `<legend>`. */
+    legend: string;
+    description?: string;
+    error?: string;
+    optional?: boolean;
+    /** Text of the "optional" marker, for localisation. */
+    optionalText?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLFieldSetElement | null;
+  }
+
+  const generatedId = $props.id();
+
+  let {
+    id = generatedId,
+    legend,
+    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>
+
+<!--
+  `Field` wires one control; `Fieldset` wires a group of them. The description and error hang off
+  the `<fieldset>` rather than off each control: grouping context is announced once on entry, so
+  a shared message stays shared instead of repeating on every checkbox in the set.
+-->
+<fieldset
+  bind:this={ref}
+  {id}
+  class={cx('ldt-fieldset', className)}
+  aria-describedby={describedBy}
+  {...rest}
+>
+  <legend class="ldt-legend"
+    ><span>{legend}</span>{#if optional}<small>{optionalText}</small>{/if}</legend
+  >
+  <div class="ldt-fieldset__body">{@render children()}</div>
+  {#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}
+</fieldset>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+interface Props extends HTMLFieldsetAttributes {
+    /** Defaults to an SSR-stable generated id, used to wire the description and error. */
+    id?: string;
+    /** Visible group label, rendered as a `<legend>`. */
+    legend: string;
+    description?: string;
+    error?: string;
+    optional?: boolean;
+    /** Text of the "optional" marker, for localisation. */
+    optionalText?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLFieldSetElement | null;
+}
+declare const Fieldset: import("svelte").Component<Props, {}, "ref">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/dist/components/FileInput.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  // Input cannot render type="file" — its string `value` binding does not apply — so the
+  // file picker gets its own component in the same clothes.
+  interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | 'class'> {
+    accept?: string;
+    multiple?: boolean;
+    /** Fired when the user picks at least one file. */
+    onFiles?: (files: FileList) => void;
+    disabled?: boolean;
+    /** Draws the full box instead of the default underline, like Input. */
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLInputElement | null;
+  }
+
+  let {
+    accept,
+    multiple = false,
+    onFiles,
+    disabled = false,
+    boxed = false,
+    class: className,
+    onchange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+    onchange?.(event);
+    const files = event.currentTarget.files;
+    if (files && files.length > 0) onFiles?.(files);
+  }
+</script>
+
+<input
+  bind:this={ref}
+  type="file"
+  class={cx('ldt-input', 'ldt-file-input', boxed && 'ldt-input--boxed', className)}
+  {accept}
+  {multiple}
+  {disabled}
+  {...rest}
+  onchange={handleChange}
+/>

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

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | 'class'> {
+    accept?: string;
+    multiple?: boolean;
+    /** Fired when the user picks at least one file. */
+    onFiles?: (files: FileList) => void;
+    disabled?: boolean;
+    /** Draws the full box instead of the default underline, like Input. */
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLInputElement | null;
+}
+declare const FileInput: import("svelte").Component<Props, {}, "ref">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;

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/IconButton.svelte

@@ -34,7 +34,7 @@
   {disabled}
   class={cx(
     'ldt-button ldt-icon-button',
-    `ldt-button--${variant}`,
+    variant !== 'default' && `ldt-button--${variant}`,
     size !== 'md' && `ldt-button--${size}`,
     className
   )}

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

@@ -6,6 +6,6 @@ interface Props extends Omit<HTMLInputAttributes, 'value'> {
     class?: string;
     ref?: HTMLInputElement | null;
 }
-declare const Input: import("svelte").Component<Props, {}, "ref" | "value">;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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/NavMenu.svelte

@@ -1,10 +1,11 @@
 <script lang="ts" generics="T extends string = string">
   import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
   import DropdownMenu from './DropdownMenu.svelte';
   import type { Alignment, MenuItem, Placement } from '../types.js';
   import { cx } from '../utils.js';
 
-  interface Props {
+  interface Props extends Omit<HTMLButtonAttributes, 'children' | 'class' | 'type'> {
     open?: boolean;
     /** Trigger text. */
     label: string;
@@ -36,11 +37,15 @@
     menuClass,
     onSelect,
     onOpenChange,
+    ...rest
   }: Props = $props();
 </script>
 
 {#snippet navTrigger({ props }: { props: Record<string, unknown> })}
+  <!-- `rest` first: the menu's trigger wiring (from `props`) and this component's own
+       attributes are policy and must win over forwarded attributes. -->
   <button
+    {...rest}
     {...props}
     type="button"
     class={cx('ldt-nav-menu', active && 'ldt-nav-menu--active', className)}

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { Alignment, MenuItem, Placement } from '../types.js';
 declare function $$render<T extends string = string>(): {
-    props: {
+    props: Omit<HTMLButtonAttributes, "children" | "class" | "type"> & {
         open?: boolean;
         /** Trigger text. */
         label: string;

package/dist/components/NumberField.svelte

@@ -29,7 +29,9 @@
     decrementLabel = (name) => `Decrease ${name}`,
     incrementLabel = (name) => `Increase ${name}`,
     boxed = false,
+    disabled = false,
     onValueChange,
+    onchange,
     class: className,
     inputClass,
     ref = $bindable(null),
@@ -52,6 +54,7 @@
   <button
     class="ldt-number-field__button"
     type="button"
+    {disabled}
     aria-label={decrementLabel(label)}
     aria-disabled={atMin || undefined}
     onclick={() => !atMin && set(value - step)}>−</button
@@ -64,13 +67,21 @@
     min={Number.isFinite(min) ? min : undefined}
     max={Number.isFinite(max) ? max : undefined}
     {step}
+    {disabled}
     aria-label={label}
     {...rest}
-    onchange={(event) => set(Number(event.currentTarget.value))}
+    onchange={(event) => {
+      // `Number('')` is 0, not NaN — a cleared field must hit the documented fallback,
+      // not silently clamp to zero.
+      const raw = event.currentTarget.value;
+      set(raw === '' ? NaN : Number(raw));
+      onchange?.(event);
+    }}
   />
   <button
     class="ldt-number-field__button"
     type="button"
+    {disabled}
     aria-label={incrementLabel(label)}
     aria-disabled={atMax || undefined}
     onclick={() => !atMax && set(value + step)}>+</button

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

@@ -16,6 +16,6 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'min' | 'ma
     inputClass?: string;
     ref?: HTMLInputElement | null;
 }
-declare const NumberField: import("svelte").Component<Props, {}, "ref" | "value">;
+declare const NumberField: import("svelte").Component<Props, {}, "value" | "ref">;
 type NumberField = ReturnType<typeof NumberField>;
 export default NumberField;