@loidolt/theme-svelte 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chris Loidolt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/Alert.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HeadingLevel, StatusVariant } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: StatusVariant;
+    title: string;
+    /** Heading element used for the title, so the alert fits the page outline. */
+    headingLevel?: HeadingLevel;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    variant = 'info',
+    title,
+    headingLevel = 3,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-alert', `ldt-alert--${variant}`, className)}
+  role={variant === 'error' ? 'alert' : 'status'}
+  {...rest}
+>
+  <svelte:element this={`h${headingLevel}`} class="ldt-alert__title">{title}</svelte:element>
+  {#if children}<div class="ldt-alert__description">{@render children()}</div>{/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel, StatusVariant } from '../types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: StatusVariant;
+    title: string;
+    /** Heading element used for the title, so the alert fits the page outline. */
+    headingLevel?: HeadingLevel;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
+}
+declare const Alert: import("svelte").Component<Props, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/AppShell.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    header?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    /** `id` of the `<main>` element, for skip links. */
+    mainId?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    header,
+    children,
+    footer,
+    mainId = 'main',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<div bind:this={ref} class={cx('ldt-app-shell', className)} {...rest}>
+  {#if header}<header>{@render header()}</header>{/if}
+  <main id={mainId}>{@render children()}</main>
+  {#if footer}<footer>{@render footer()}</footer>{/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    header?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    /** `id` of the `<main>` element, for skip links. */
+    mainId?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "ref">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/Badge.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { BadgeVariant } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLSpanElement | null;
+  }
+
+  let {
+    variant = 'default',
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<span
+  bind:this={ref}
+  class={cx('ldt-badge', variant !== 'default' && `ldt-badge--${variant}`, className)}
+  {...rest}>{@render children()}</span
+>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BadgeVariant } from '../types.js';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLSpanElement | null;
+}
+declare const Badge: import("svelte").Component<Props, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Brand.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  type Props = HTMLAnchorAttributes &
+    HTMLAttributes<HTMLSpanElement> & {
+      name: string;
+      /** Secondary line, e.g. an environment or version marker. */
+      meta?: string;
+      /** Renders an `<a>` instead of a `<span>`. */
+      href?: string;
+      mark?: Snippet;
+      class?: string;
+      ref?: HTMLElement | null;
+    };
+
+  let {
+    name,
+    meta,
+    href,
+    mark,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+{#snippet content()}{#if mark}{@render mark()}{/if}<strong class="ldt-brand__name">{name}</strong
+  >{#if meta}<span class="ldt-brand__meta">{meta}</span>{/if}{/snippet}
+{#if href}<a bind:this={ref} {href} class={cx('ldt-brand', className)} {...rest}
+    >{@render content()}</a
+  >{:else}<span bind:this={ref} class={cx('ldt-brand', className)} {...rest}
+    >{@render content()}</span
+  >{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAnchorAttributes & HTMLAttributes<HTMLSpanElement> & {
+    name: string;
+    /** Secondary line, e.g. an environment or version marker. */
+    meta?: string;
+    /** Renders an `<a>` instead of a `<span>`. */
+    href?: string;
+    mark?: Snippet;
+    class?: string;
+    ref?: HTMLElement | null;
+};
+declare const Brand: import("svelte").Component<Props, {}, "ref">;
+type Brand = ReturnType<typeof Brand>;
+export default Brand;

package/dist/components/Button.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+  import type { ActionVariant, ControlSize } from '../types.js';
+  import { cx } from '../utils.js';
+
+  type Props = HTMLButtonAttributes &
+    HTMLAnchorAttributes & {
+      variant?: ActionVariant;
+      size?: ControlSize;
+      /** Renders an `<a>` styled as a button. */
+      href?: string;
+      disabled?: boolean;
+      loading?: boolean;
+      /** Visible text swapped in while loading. */
+      loadingText?: string;
+      /** Announced while loading when there is no visible `loadingText`. */
+      loadingLabel?: string;
+      class?: string;
+      children: Snippet;
+      ref?: HTMLButtonElement | HTMLAnchorElement | null;
+    };
+
+  let {
+    variant = 'default',
+    size = 'md',
+    type = 'button',
+    href,
+    disabled = false,
+    loading = false,
+    loadingText,
+    loadingLabel = 'Loading',
+    class: className,
+    children,
+    onclick,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const classes = $derived(
+    cx('ldt-button', `ldt-button--${variant}`, size !== 'md' && `ldt-button--${size}`, className)
+  );
+  const inert = $derived(disabled || loading);
+
+  function handleClick(event: MouseEvent) {
+    if (inert) {
+      event.preventDefault();
+      return;
+    }
+    onclick?.(event as MouseEvent & { currentTarget: EventTarget & HTMLButtonElement });
+  }
+</script>
+
+{#snippet content()}
+  {#if loading}<span class="ldt-spinner" aria-hidden="true"></span>{/if}
+  {#if loading && loadingText}{loadingText}{:else}{@render children()}{/if}
+  <!--
+    Persistently mounted: a live region only announces content that changes *after* it is in the
+    DOM, so mounting it alongside the message would be silent in most screen readers.
+  -->
+  <span class="ldt-sr-only" role="status">{loading && !loadingText ? loadingLabel : ''}</span>
+{/snippet}
+
+{#if href}
+  <a
+    bind:this={ref}
+    href={inert ? undefined : href}
+    class={classes}
+    aria-disabled={inert || undefined}
+    aria-busy={loading || undefined}
+    tabindex={inert ? -1 : undefined}
+    {...rest}
+    onclick={handleClick}>{@render content()}</a
+  >
+{:else}
+  <button
+    bind:this={ref}
+    {type}
+    class={classes}
+    disabled={inert}
+    aria-busy={loading || undefined}
+    {...rest}
+    onclick={handleClick}>{@render content()}</button
+  >
+{/if}

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ActionVariant, ControlSize } from '../types.js';
+type Props = HTMLButtonAttributes & HTMLAnchorAttributes & {
+    variant?: ActionVariant;
+    size?: ControlSize;
+    /** Renders an `<a>` styled as a button. */
+    href?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    /** Visible text swapped in while loading. */
+    loadingText?: string;
+    /** Announced while loading when there is no visible `loadingText`. */
+    loadingLabel?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+};
+declare const Button: import("svelte").Component<Props, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Card.svelte

@@ -0,0 +1,43 @@
+<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;
+    description?: string;
+    header?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    /** Root element. `div` by default — use `article` only for self-contained content. */
+    as?: 'div' | 'article' | 'section' | 'li';
+    headingLevel?: HeadingLevel;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    title,
+    description,
+    header,
+    children,
+    footer,
+    as = 'div',
+    headingLevel = 3,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element this={as} bind:this={ref} class={cx('ldt-card', className)} {...rest}>
+  {#if header || title || description}<header class="ldt-card__header">
+      {#if header}{@render header()}{:else}{#if title}<svelte:element
+            this={`h${headingLevel}`}
+            class="ldt-card__title">{title}</svelte:element
+          >{/if}{#if description}<p class="ldt-card__description">{description}</p>{/if}{/if}
+    </header>{/if}
+  <div class="ldt-card__content">{@render children()}</div>
+  {#if footer}<footer class="ldt-card__footer">{@render footer()}</footer>{/if}
+</svelte:element>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../types.js';
+interface Props extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    description?: string;
+    header?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    /** Root element. `div` by default — use `article` only for self-contained content. */
+    as?: 'div' | 'article' | 'section' | 'li';
+    headingLevel?: HeadingLevel;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Card: import("svelte").Component<Props, {}, "ref">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/Checkbox.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLInputAttributes, 'type' | 'checked'> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /**
+     * Visible text when there are no `children`. One of `children`, `label` or an
+     * `aria-labelledby` in the rest props is required, or the control is unnamed.
+     */
+    label?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    /** `class` lands on the wrapping `<label>`; use `inputClass` to reach the input. */
+    class?: string;
+    inputClass?: string;
+    children?: Snippet;
+    ref?: HTMLInputElement | null;
+  }
+
+  let {
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    disabled = false,
+    label,
+    onCheckedChange,
+    onchange,
+    class: className,
+    inputClass,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  function handleChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }): void {
+    onCheckedChange?.(event.currentTarget.checked);
+    onchange?.(event);
+  }
+</script>
+
+<label class={cx('ldt-choice', className)}
+  ><input
+    bind:this={ref}
+    type="checkbox"
+    class={inputClass}
+    bind:checked
+    bind:indeterminate
+    {disabled}
+    {...rest}
+    onchange={handleChange}
+  />{#if children}{@render children()}{:else if label}{label}{/if}</label
+>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'checked'> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /**
+     * Visible text when there are no `children`. One of `children`, `label` or an
+     * `aria-labelledby` in the rest props is required, or the control is unnamed.
+     */
+    label?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    /** `class` lands on the wrapping `<label>`; use `inputClass` to reach the input. */
+    class?: string;
+    inputClass?: string;
+    children?: Snippet;
+    ref?: HTMLInputElement | null;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/ContextBar.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    section: string;
+    title: string;
+    detail?: string;
+    actions?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    section,
+    title,
+    detail,
+    actions,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<div bind:this={ref} class={cx('ldt-contextbar', className)} {...rest}>
+  <div class="ldt-contextbar__location">
+    <span class="ldt-contextbar__section">{section}</span><strong class="ldt-contextbar__title"
+      >{title}</strong
+    >{#if detail}<small class="ldt-contextbar__detail">{detail}</small>{/if}
+  </div>
+  {#if actions}<div class="ldt-contextbar__actions">{@render actions()}</div>{/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    section: string;
+    title: string;
+    detail?: string;
+    actions?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const ContextBar: import("svelte").Component<Props, {}, "ref">;
+type ContextBar = ReturnType<typeof ContextBar>;
+export default ContextBar;

package/dist/components/Dialog.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { DialogContentProps } from 'bits-ui';
+  import type { DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
+  import { cx } from '../utils.js';
+
+  type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Trigger contents, rendered inside a button styled with `triggerClass`. */
+    trigger?: Snippet;
+    /** Full control of the trigger element — receives the props Bits needs on it. */
+    triggerChild?: Snippet<[TriggerChildProps]>;
+    triggerClass?: string;
+    children: Snippet;
+    footer?: Snippet;
+    /** Sets `--ldt-dialog-width` via a modifier class. Omit to inherit the CSS default. */
+    size?: DialogSize;
+    headingLevel?: HeadingLevel;
+    showClose?: boolean;
+    closeLabel?: string;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    overlayClass?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    trigger,
+    triggerChild,
+    triggerClass = 'ldt-button',
+    children,
+    footer,
+    size,
+    headingLevel = 2,
+    showClose = true,
+    closeLabel = 'Close dialog',
+    class: className,
+    overlayClass,
+    onOpenChange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {onOpenChange}>
+  {#if triggerChild}<DialogPrimitive.Trigger
+      >{#snippet child(childProps)}{@render triggerChild(
+          childProps
+        )}{/snippet}</DialogPrimitive.Trigger
+    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClass}
+      >{@render trigger()}</DialogPrimitive.Trigger
+    >{/if}
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay class={cx('ldt-overlay', overlayClass)} />
+    <DialogPrimitive.Content
+      bind:ref
+      class={cx('ldt-dialog', size && `ldt-dialog--${size}`, className)}
+      {...rest}
+    >
+      <header class="ldt-dialog__header">
+        <div>
+          <DialogPrimitive.Title level={headingLevel} class="ldt-dialog__title"
+            >{title}</DialogPrimitive.Title
+          >{#if description}<DialogPrimitive.Description class="ldt-dialog__description"
+              >{description}</DialogPrimitive.Description
+            >{/if}
+        </div>
+        {#if showClose}<DialogPrimitive.Close
+            class="ldt-button ldt-icon-button ldt-button--ghost"
+            aria-label={closeLabel}>×</DialogPrimitive.Close
+          >{/if}
+      </header>
+      <div class="ldt-dialog__body">{@render children()}</div>
+      {#if footer}<footer class="ldt-dialog__footer">{@render footer()}</footer>{/if}
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { DialogContentProps } from 'bits-ui';
+import type { DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
+type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Trigger contents, rendered inside a button styled with `triggerClass`. */
+    trigger?: Snippet;
+    /** Full control of the trigger element — receives the props Bits needs on it. */
+    triggerChild?: Snippet<[TriggerChildProps]>;
+    triggerClass?: string;
+    children: Snippet;
+    footer?: Snippet;
+    /** Sets `--ldt-dialog-width` via a modifier class. Omit to inherit the CSS default. */
+    size?: DialogSize;
+    headingLevel?: HeadingLevel;
+    showClose?: boolean;
+    closeLabel?: string;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    overlayClass?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+};
+declare const Dialog: import("svelte").Component<Props, {}, "ref" | "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;