@loidolt/theme-svelte 0.2.0

package/dist/components/Panel.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> {
+    title?: string;
+    header?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Panel: import("svelte").Component<Props, {}, "ref">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/components/Popover.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  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 { cx } from '../utils.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]>;
+    triggerClass?: string;
+    children: Snippet;
+    side?: Placement;
+    align?: Alignment;
+    sideOffset?: number;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    open = $bindable(false),
+    trigger,
+    triggerChild,
+    triggerClass = 'ldt-button ldt-button--quiet',
+    children,
+    side = 'bottom',
+    align = 'start',
+    sideOffset = 6,
+    class: className,
+    onOpenChange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {onOpenChange}>
+  {#if triggerChild}<PopoverPrimitive.Trigger
+      >{#snippet child(childProps)}{@render triggerChild(
+          childProps
+        )}{/snippet}</PopoverPrimitive.Trigger
+    >{:else if trigger}<PopoverPrimitive.Trigger class={triggerClass}
+      >{@render trigger()}</PopoverPrimitive.Trigger
+    >{/if}
+  <PopoverPrimitive.Portal
+    ><PopoverPrimitive.Content
+      bind:ref
+      {side}
+      {align}
+      {sideOffset}
+      class={cx('ldt-popover', className)}
+      {...rest}>{@render children()}</PopoverPrimitive.Content
+    ></PopoverPrimitive.Portal
+  >
+</PopoverPrimitive.Root>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { PopoverContentProps } from 'bits-ui';
+import type { Alignment, 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]>;
+    triggerClass?: string;
+    children: Snippet;
+    side?: Placement;
+    align?: Alignment;
+    sideOffset?: number;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+};
+declare const Popover: import("svelte").Component<Props, {}, "ref" | "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/Progress.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Omit (or pass `undefined`) for an indeterminate bar. */
+    value?: number;
+    max?: number;
+    label?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    value,
+    max = 100,
+    label = 'Progress',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const indeterminate = $derived(value === undefined || !Number.isFinite(value));
+  // A non-positive `max` would make every ratio Infinity or NaN.
+  const safeMax = $derived(Number.isFinite(max) && max > 0 ? max : 100);
+  const clamped = $derived(Math.max(0, Math.min(safeMax, value ?? 0)));
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-progress', indeterminate && 'ldt-progress--indeterminate', className)}
+  role="progressbar"
+  aria-label={label}
+  aria-valuenow={indeterminate ? undefined : clamped}
+  aria-valuemin="0"
+  aria-valuemax={safeMax}
+  {...rest}
+>
+  <div
+    class="ldt-progress__bar"
+    style:--ldt-progress-value={indeterminate ? undefined : clamped / safeMax}
+  ></div>
+</div>

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Omit (or pass `undefined`) for an indeterminate bar. */
+    value?: number;
+    max?: number;
+    label?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const Progress: import("svelte").Component<Props, {}, "ref">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/RadioGroup.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" generics="T extends string = string">
+  import type { HTMLFieldsetAttributes } from 'svelte/elements';
+  import type { Option, Orientation } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLFieldsetAttributes {
+    value?: T;
+    options: Option<T>[];
+    /** Shared `name` for the inputs. Defaults to an SSR-stable generated id. */
+    name?: string;
+    /** Visible group label, rendered as a `<legend>`. */
+    label?: string;
+    orientation?: Orientation;
+    onValueChange?: (value: T) => void;
+    class?: string;
+    ref?: HTMLFieldSetElement | null;
+  }
+
+  // `$props.id()` matches between SSR and hydration; `Math.random()` split radio groups in two.
+  const generatedName = $props.id();
+
+  let {
+    value = $bindable(),
+    options,
+    name = generatedName,
+    label,
+    orientation = 'horizontal',
+    onValueChange,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<fieldset bind:this={ref} class={cx('ldt-fieldset', className)} {...rest}>
+  {#if label}<legend class="ldt-legend">{label}</legend>{/if}
+  <div class={cx('ldt-radio-group', orientation === 'vertical' && 'ldt-radio-group--vertical')}>
+    {#each options as option (option.value)}<label class="ldt-choice"
+        ><input
+          type="radio"
+          {name}
+          value={option.value}
+          bind:group={value}
+          disabled={option.disabled}
+          onchange={() => onValueChange?.(option.value)}
+        />{option.label}</label
+      >{/each}
+  </div>
+</fieldset>

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

@@ -0,0 +1,37 @@
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+import type { Option, Orientation } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: HTMLFieldsetAttributes & {
+        value?: T;
+        options: Option<T>[];
+        /** Shared `name` for the inputs. Defaults to an SSR-stable generated id. */
+        name?: string;
+        /** Visible group label, rendered as a `<legend>`. */
+        label?: string;
+        orientation?: Orientation;
+        onValueChange?: (value: T) => void;
+        class?: string;
+        ref?: HTMLFieldSetElement | null;
+    };
+    exports: {};
+    bindings: "ref" | "value";
+    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" | "value";
+    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 RadioGroup: $$IsomorphicComponent;
+type RadioGroup<T extends string = string> = InstanceType<typeof RadioGroup<T>>;
+export default RadioGroup;

package/dist/components/Section.svelte

@@ -0,0 +1,39 @@
+<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;
+    eyebrow?: string;
+    actions?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    title,
+    eyebrow,
+    actions,
+    headingLevel = 2,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<section bind:this={ref} class={cx('ldt-section', className)} {...rest}>
+  {#if title || eyebrow || actions}<header class="ldt-section__heading">
+      <div>
+        {#if eyebrow}<p class="ldt-eyebrow">{eyebrow}</p>{/if}{#if title}<svelte:element
+            this={`h${headingLevel}`}
+            class="ldt-section__title">{title}</svelte:element
+          >{/if}
+      </div>
+      {#if actions}<div class="ldt-cluster">{@render actions()}</div>{/if}
+    </header>{/if}{@render children()}
+</section>

package/dist/components/Section.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> {
+    title?: string;
+    eyebrow?: string;
+    actions?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLElement | null;
+}
+declare const Section: import("svelte").Component<Props, {}, "ref">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/components/Select.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" generics="T extends string = string">
+  import type { HTMLSelectAttributes } from 'svelte/elements';
+  import type { Option } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLSelectAttributes, 'value'> {
+    value?: T | '';
+    options: Option<T>[];
+    /**
+     * Empty-choice text. Selectable again after a real choice unless the field is `required`,
+     * so a user can undo their selection.
+     */
+    placeholder?: string;
+    /** Accessible name when the select is not wrapped in a `Field` or `<label>`. */
+    label?: string;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    onValueChange?: (value: T | '') => void;
+    class?: string;
+    ref?: HTMLSelectElement | null;
+  }
+
+  let {
+    value = $bindable(''),
+    options,
+    placeholder,
+    label,
+    boxed = false,
+    required = false,
+    onValueChange,
+    onchange,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  function handleChange(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
+    onValueChange?.(event.currentTarget.value as T | '');
+    onchange?.(event);
+  }
+</script>
+
+<select
+  bind:this={ref}
+  bind:value
+  {required}
+  aria-label={label}
+  class={cx('ldt-select', boxed && 'ldt-select--boxed', className)}
+  {...rest}
+  onchange={handleChange}
+>
+  {#if placeholder}<option value="" disabled={required} hidden={required}>{placeholder}</option
+    >{/if}
+  {#each options as option (option.value)}<option value={option.value} disabled={option.disabled}
+      >{option.label}</option
+    >{/each}
+</select>

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

@@ -0,0 +1,41 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import type { Option } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: Omit<HTMLSelectAttributes, "value"> & {
+        value?: T | "";
+        options: Option<T>[];
+        /**
+         * Empty-choice text. Selectable again after a real choice unless the field is `required`,
+         * so a user can undo their selection.
+         */
+        placeholder?: string;
+        /** Accessible name when the select is not wrapped in a `Field` or `<label>`. */
+        label?: string;
+        /** Draws the full box instead of the default underline. */
+        boxed?: boolean;
+        onValueChange?: (value: T | "") => void;
+        class?: string;
+        ref?: HTMLSelectElement | null;
+    };
+    exports: {};
+    bindings: "ref" | "value";
+    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" | "value";
+    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 Select: $$IsomorphicComponent;
+type Select<T extends string = string> = InstanceType<typeof Select<T>>;
+export default Select;

package/dist/components/Separator.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Orientation } from '../types.js';
+  import { cx } from '../utils.js';
+
+  type Props = HTMLAttributes<HTMLHRElement> &
+    HTMLAttributes<HTMLDivElement> & {
+      orientation?: Orientation;
+      class?: string;
+      ref?: HTMLElement | null;
+    };
+
+  let {
+    orientation = 'horizontal',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const classes = $derived(
+    cx('ldt-separator', orientation === 'vertical' && 'ldt-separator--vertical', className)
+  );
+</script>
+
+{#if orientation === 'vertical'}
+  <div bind:this={ref} class={classes} role="separator" aria-orientation="vertical" {...rest}></div>
+{:else}
+  <hr bind:this={ref} class={classes} {...rest} />
+{/if}

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Orientation } from '../types.js';
+type Props = HTMLAttributes<HTMLHRElement> & HTMLAttributes<HTMLDivElement> & {
+    orientation?: Orientation;
+    class?: string;
+    ref?: HTMLElement | null;
+};
+declare const Separator: import("svelte").Component<Props, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/components/Sidebar.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    side?: 'left' | 'right';
+    /**
+     * Accessible name. Only needed to tell several complementary regions apart — leave unset
+     * for a single sidebar, since "Sidebar" only repeats the role.
+     */
+    label?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    side = 'left',
+    label,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<aside
+  bind:this={ref}
+  class={cx('ldt-sidebar ldt-scrollbar', side === 'right' && 'ldt-sidebar--right', className)}
+  aria-label={label}
+  {...rest}
+>
+  {@render children()}
+</aside>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    side?: 'left' | 'right';
+    /**
+     * Accessible name. Only needed to tell several complementary regions apart — leave unset
+     * for a single sidebar, since "Sidebar" only repeats the role.
+     */
+    label?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLElement | null;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "ref">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/Skeleton.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Number is treated as pixels; strings pass through as CSS. */
+    width?: string | number;
+    height?: string | number;
+    class?: string;
+    ref?: HTMLSpanElement | null;
+  }
+
+  let { width, height, class: className, ref = $bindable(null), ...rest }: Props = $props();
+
+  const size = (value: string | number | undefined) =>
+    typeof value === 'number' ? `${value}px` : value;
+</script>
+
+<span
+  bind:this={ref}
+  class={cx('ldt-skeleton', className)}
+  style:width={size(width)}
+  style:height={size(height)}
+  aria-hidden="true"
+  {...rest}
+></span>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Number is treated as pixels; strings pass through as CSS. */
+    width?: string | number;
+    height?: string | number;
+    class?: string;
+    ref?: HTMLSpanElement | null;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "ref">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Spinner.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Accessible name. Pass `undefined` when an adjacent label already announces the wait. */
+    label?: string;
+    class?: string;
+    ref?: HTMLSpanElement | null;
+  }
+
+  let { label = 'Loading', class: className, ref = $bindable(null), ...rest }: Props = $props();
+</script>
+
+<span
+  bind:this={ref}
+  class={cx('ldt-spinner', className)}
+  role={label ? 'status' : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : 'true'}
+  {...rest}
+></span>

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Accessible name. Pass `undefined` when an adjacent label already announces the wait. */
+    label?: string;
+    class?: string;
+    ref?: HTMLSpanElement | null;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "ref">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/Switch.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLButtonAttributes {
+    checked?: boolean;
+    disabled?: boolean;
+    /** Set to submit the state with a form; renders a hidden checkbox alongside the switch. */
+    name?: string;
+    /** Submitted value when checked. */
+    value?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLButtonElement | null;
+  }
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    name,
+    value = 'on',
+    onCheckedChange,
+    onclick,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+    if (disabled) return;
+    checked = !checked;
+    onCheckedChange?.(checked);
+    onclick?.(event);
+  }
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  role="switch"
+  aria-checked={checked}
+  {disabled}
+  class={cx('ldt-switch', className)}
+  {...rest}
+  onclick={handleClick}
+>
+  <span class="ldt-switch__track" aria-hidden="true"><span class="ldt-switch__thumb"></span></span>
+  {#if children}<span>{@render children()}</span>{/if}
+</button>
+{#if name}<input
+    type="checkbox"
+    class="ldt-sr-only"
+    tabindex="-1"
+    aria-hidden="true"
+    {name}
+    {value}
+    {checked}
+    {disabled}
+  />{/if}

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    checked?: boolean;
+    disabled?: boolean;
+    /** Set to submit the state with a form; renders a hidden checkbox alongside the switch. */
+    name?: string;
+    /** Submitted value when checked. */
+    value?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLButtonElement | null;
+}
+declare const Switch: import("svelte").Component<Props, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;