@loidolt/theme-svelte 0.2.0 → 0.4.0

package/README.md

@@ -0,0 +1,21 @@
+# @loidolt/theme-svelte
+
+Accessible Svelte 5 components and state helpers for the Loidolt design system.
+
+```sh
+npm install @loidolt/theme-svelte
+```
+
+Import the global styles once:
+
+```css
+@import '@loidolt/theme-svelte/styles.css';
+```
+
+Then import components from the package barrel:
+
+```svelte
+<script>
+  import { Button, Field, Input } from '@loidolt/theme-svelte';
+</script>
+```

package/dist/components/Accordion.svelte

@@ -0,0 +1,100 @@
+<script lang="ts" generics="T extends string = string">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Disclosure, HeadingLevel } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: Disclosure<T>[];
+    /** Narrowed from the DOM attribute: the Bits root this spreads onto rejects `null`. */
+    id?: string;
+    /** Lets more than one panel stay open. `value` is then an array. */
+    multiple?: boolean;
+    /** Open panel, or panels when `multiple`. Bindable. */
+    value?: T | T[];
+    /**
+     * Heading level of every trigger's wrapper. Panels sit at one level below whatever heading
+     * introduces the accordion, so keep this in step with the surrounding outline.
+     */
+    headingLevel?: HeadingLevel;
+    disabled?: boolean;
+    /** Panel body, rendered for each item with the item's own value. */
+    children: Snippet<[{ value: T }]>;
+    class?: string;
+    itemClass?: string;
+    contentClass?: string;
+    onValueChange?: (value: T | T[]) => void;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    items,
+    multiple = false,
+    value = $bindable(),
+    headingLevel = 3,
+    disabled = false,
+    children,
+    class: className,
+    itemClass,
+    contentClass,
+    onValueChange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  // Bits discriminates single/multiple at the type level with a different `value` shape for
+  // each. The panels are identical either way, so the markup lives in one snippet and only the
+  // Root differs.
+  const change = (next: string | string[]) => {
+    value = next as T | T[];
+    onValueChange?.(next as T | T[]);
+  };
+</script>
+
+{#snippet panels()}
+  {#each items as item (item.value)}
+    <AccordionPrimitive.Item
+      value={item.value}
+      disabled={item.disabled}
+      class={cx('ldt-accordion__item', itemClass)}
+    >
+      <AccordionPrimitive.Header level={headingLevel} class="ldt-accordion__heading">
+        <AccordionPrimitive.Trigger class="ldt-accordion__trigger">
+          <span class="ldt-accordion__label">{item.title}</span>
+          <!-- Decorative: the trigger's `aria-expanded` already carries open state. -->
+          <span class="ldt-accordion__indicator" aria-hidden="true"></span>
+        </AccordionPrimitive.Trigger>
+      </AccordionPrimitive.Header>
+      <AccordionPrimitive.Content class={cx('ldt-accordion__content', contentClass)}>
+        <div class="ldt-accordion__body">{@render children({ value: item.value })}</div>
+      </AccordionPrimitive.Content>
+    </AccordionPrimitive.Item>
+  {/each}
+{/snippet}
+
+{#if multiple}
+  <AccordionPrimitive.Root
+    bind:ref
+    type="multiple"
+    value={(value ?? []) as string[]}
+    onValueChange={change}
+    {disabled}
+    class={cx('ldt-accordion', className)}
+    {...rest}
+  >
+    {@render panels()}
+  </AccordionPrimitive.Root>
+{:else}
+  <AccordionPrimitive.Root
+    bind:ref
+    type="single"
+    value={(value ?? '') as string}
+    onValueChange={change}
+    {disabled}
+    class={cx('ldt-accordion', className)}
+    {...rest}
+  >
+    {@render panels()}
+  </AccordionPrimitive.Root>
+{/if}

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

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Disclosure, HeadingLevel } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        items: Disclosure<T>[];
+        /** Narrowed from the DOM attribute: the Bits root this spreads onto rejects `null`. */
+        id?: string;
+        /** Lets more than one panel stay open. `value` is then an array. */
+        multiple?: boolean;
+        /** Open panel, or panels when `multiple`. Bindable. */
+        value?: T | T[];
+        /**
+         * Heading level of every trigger's wrapper. Panels sit at one level below whatever heading
+         * introduces the accordion, so keep this in step with the surrounding outline.
+         */
+        headingLevel?: HeadingLevel;
+        disabled?: boolean;
+        /** Panel body, rendered for each item with the item's own value. */
+        children: Snippet<[{
+            value: T;
+        }]>;
+        class?: string;
+        itemClass?: string;
+        contentClass?: string;
+        onValueChange?: (value: T | T[]) => void;
+        ref?: HTMLDivElement | 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 Accordion: $$IsomorphicComponent;
+type Accordion<T extends string = string> = InstanceType<typeof Accordion<T>>;
+export default Accordion;

package/dist/components/Alert.svelte

@@ -4,9 +4,10 @@
   import type { HeadingLevel, StatusVariant } from '../types.js';
   import { cx } from '../utils.js';
 
-  interface Props extends HTMLAttributes<HTMLDivElement> {
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     variant?: StatusVariant;
-    title: string;
+    /** Optional heading. Accepts a snippet for rich content; omit it for a body-only alert. */
+    title?: string | Snippet;
     /** Heading element used for the title, so the alert fits the page outline. */
     headingLevel?: HeadingLevel;
     class?: string;
@@ -31,6 +32,8 @@
   role={variant === 'error' ? 'alert' : 'status'}
   {...rest}
 >
-  <svelte:element this={`h${headingLevel}`} class="ldt-alert__title">{title}</svelte:element>
+  {#if title}<svelte:element this={`h${headingLevel}`} class="ldt-alert__title"
+      >{#if typeof title === 'string'}{title}{:else}{@render title()}{/if}</svelte:element
+    >{/if}
   {#if children}<div class="ldt-alert__description">{@render children()}</div>{/if}
 </div>

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

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { HeadingLevel, StatusVariant } from '../types.js';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     variant?: StatusVariant;
-    title: string;
+    /** Optional heading. Accepts a snippet for rich content; omit it for a body-only alert. */
+    title?: string | Snippet;
     /** Heading element used for the title, so the alert fits the page outline. */
     headingLevel?: HeadingLevel;
     class?: string;

package/dist/components/AlertDialog.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { AlertDialogContentProps } from 'bits-ui';
+  import type {
+    ActionVariant,
+    ControlSize,
+    DialogSize,
+    HeadingLevel,
+    TriggerChildProps,
+  } from '../types.js';
+  import { cx } from '../utils.js';
+
+  type Props = Omit<AlertDialogContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    title: string;
+    /** What confirming will do. Say the consequence here, not in the button. */
+    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]>;
+    /** Button variant for the default trigger. An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
+    triggerClass?: string;
+    /** Extra body content between the description and the buttons. */
+    children?: Snippet;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Colour of the confirm button. Use `danger` for anything destructive. */
+    confirmVariant?: ActionVariant;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    size?: DialogSize;
+    headingLevel?: HeadingLevel;
+    /** `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,
+    triggerVariant,
+    triggerSize,
+    triggerClass,
+    children,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    confirmVariant = 'primary',
+    onConfirm,
+    onCancel,
+    size = 'sm',
+    headingLevel = 2,
+    class: className,
+    overlayClass,
+    onOpenChange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  // An explicit triggerClass keeps today's contract and wins outright.
+  const triggerClasses = $derived(
+    triggerClass ??
+      cx(
+        'ldt-button',
+        triggerVariant && triggerVariant !== 'default' && `ldt-button--${triggerVariant}`,
+        triggerSize && triggerSize !== 'md' && `ldt-button--${triggerSize}`
+      )
+  );
+</script>
+
+<!--
+  A decision the user has to answer before anything else continues. Unlike `Dialog` it has no
+  close affordance in the corner and does not dismiss on an outside click — Bits' alertdialog
+  role enforces that, and it is the point: a confirmation you can dismiss by missing is not one.
+  Focus opens on Cancel, so a stray Enter cannot confirm a destructive action.
+-->
+<AlertDialogPrimitive.Root bind:open {onOpenChange}>
+  {#if triggerChild}<AlertDialogPrimitive.Trigger
+      >{#snippet child(childProps)}{@render triggerChild(
+          childProps
+        )}{/snippet}</AlertDialogPrimitive.Trigger
+    >{:else if trigger}<AlertDialogPrimitive.Trigger class={triggerClasses}
+      >{@render trigger()}</AlertDialogPrimitive.Trigger
+    >{/if}
+  <AlertDialogPrimitive.Portal>
+    <AlertDialogPrimitive.Overlay class={cx('ldt-overlay', overlayClass)} />
+    <AlertDialogPrimitive.Content
+      bind:ref
+      class={cx('ldt-dialog', size && `ldt-dialog--${size}`, className)}
+      {...rest}
+    >
+      <header class="ldt-dialog__header">
+        <div>
+          <AlertDialogPrimitive.Title level={headingLevel} class="ldt-dialog__title"
+            >{title}</AlertDialogPrimitive.Title
+          >{#if description}<AlertDialogPrimitive.Description class="ldt-dialog__description"
+              >{description}</AlertDialogPrimitive.Description
+            >{/if}
+        </div>
+      </header>
+      {#if children}<div class="ldt-dialog__body">{@render children()}</div>{/if}
+      <footer class="ldt-dialog__footer">
+        <AlertDialogPrimitive.Cancel
+          class="ldt-button ldt-button--quiet"
+          onclick={() => onCancel?.()}>{cancelLabel}</AlertDialogPrimitive.Cancel
+        >
+        <!--
+          Bits leaves the Action button open on purpose, for callers awaiting a request. This
+          wrapper is the declarative form, so it closes: `open` is bindable, and work that has to
+          keep the dialog up can set it back to `true` from `onConfirm`.
+        -->
+        <AlertDialogPrimitive.Action
+          class={cx('ldt-button', confirmVariant !== 'default' && `ldt-button--${confirmVariant}`)}
+          onclick={() => {
+            onConfirm?.();
+            open = false;
+          }}>{confirmLabel}</AlertDialogPrimitive.Action
+        >
+      </footer>
+    </AlertDialogPrimitive.Content>
+  </AlertDialogPrimitive.Portal>
+</AlertDialogPrimitive.Root>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { AlertDialogContentProps } from 'bits-ui';
+import type { ActionVariant, ControlSize, DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
+type Props = Omit<AlertDialogContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    title: string;
+    /** What confirming will do. Say the consequence here, not in the button. */
+    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]>;
+    /** Button variant for the default trigger. An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
+    triggerClass?: string;
+    /** Extra body content between the description and the buttons. */
+    children?: Snippet;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Colour of the confirm button. Use `danger` for anything destructive. */
+    confirmVariant?: ActionVariant;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    size?: DialogSize;
+    headingLevel?: HeadingLevel;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    overlayClass?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+};
+declare const AlertDialog: import("svelte").Component<Props, {}, "ref" | "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/components/AppShell.svelte

@@ -4,6 +4,7 @@
   import { cx } from '../utils.js';
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Complete banner/header content, such as `Topbar`; rendered without another landmark wrapper. */
     header?: Snippet;
     children: Snippet;
     footer?: Snippet;
@@ -25,7 +26,7 @@
 </script>
 
 <div bind:this={ref} class={cx('ldt-app-shell', className)} {...rest}>
-  {#if header}<header>{@render header()}</header>{/if}
+  {#if header}{@render header()}{/if}
   <main id={mainId}>{@render children()}</main>
   {#if footer}<footer>{@render footer()}</footer>{/if}
 </div>

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Complete banner/header content, such as `Topbar`; rendered without another landmark wrapper. */
     header?: Snippet;
     children: Snippet;
     footer?: Snippet;

package/dist/components/Badge.svelte

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

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

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { BadgeVariant } from '../types.js';
+import type { BadgeSize, BadgeVariant } from '../types.js';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
+    size?: BadgeSize;
     class?: string;
     children: Snippet;
     ref?: HTMLSpanElement | null;

package/dist/components/Brand.svelte

@@ -3,17 +3,24 @@
   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;
-    };
+  interface CommonProps {
+    name: string;
+    /** Secondary line, e.g. an environment or version marker. */
+    meta?: string;
+    mark?: Snippet;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  // Discriminated on `href`: an `<a>` with anchor attributes, or a plain `<span>`.
+  type Props = CommonProps &
+    (
+      | (Omit<HTMLAnchorAttributes, 'class'> & {
+          /** Renders an `<a>` instead of a `<span>`. */
+          href: string;
+        })
+      | (Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & { href?: never })
+    );
 
   let {
     name,
@@ -28,8 +35,15 @@
 
 {#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
+<!-- TS cannot narrow the destructured `rest` by `href`, so each branch casts to its side
+     of the union. The public Props type still rejects mismatched attributes. -->
+{#if href}<a
+    bind:this={ref}
+    {href}
+    class={cx('ldt-brand', className)}
+    {...rest as HTMLAnchorAttributes}>{@render content()}</a
+  >{:else}<span
+    bind:this={ref}
+    class={cx('ldt-brand', className)}
+    {...rest as HTMLAttributes<HTMLSpanElement>}>{@render content()}</span
   >{/if}

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

@@ -1,15 +1,19 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAnchorAttributes & HTMLAttributes<HTMLSpanElement> & {
+interface CommonProps {
     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;
-};
+}
+type Props = CommonProps & ((Omit<HTMLAnchorAttributes, 'class'> & {
+    /** Renders an `<a>` instead of a `<span>`. */
+    href: string;
+}) | (Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+    href?: never;
+}));
 declare const Brand: import("svelte").Component<Props, {}, "ref">;
 type Brand = ReturnType<typeof Brand>;
 export default Brand;

package/dist/components/Breadcrumbs.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Crumb } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** Ordered trail, root first. The last entry is the current page and is never a link. */
+    items: Crumb[];
+    /** Accessible name of the landmark. Several trails on one page need distinct names. */
+    label?: string;
+    /**
+     * Separator drawn between crumbs. Decorative — it lives in a `::before` on the list item, so
+     * it is never read out or copied with the text.
+     */
+    separator?: string;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    items,
+    label = 'Breadcrumb',
+    separator = '/',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<nav
+  bind:this={ref}
+  class={cx('ldt-breadcrumbs', className)}
+  aria-label={label}
+  style={`--ldt-breadcrumb-separator: ${JSON.stringify(separator)}`}
+  {...rest}
+>
+  <ol class="ldt-breadcrumbs__list">
+    {#each items as item, index (item.label)}
+      {@const current = index === items.length - 1}
+      <li class="ldt-breadcrumbs__item">
+        {#if item.href && !current}
+          <a class="ldt-breadcrumbs__link" href={item.href}>{item.label}</a>
+        {:else}
+          <!-- The current page is not a link, and says so. Marking it up as one that goes
+               nowhere is the most common breadcrumb defect. -->
+          <span class="ldt-breadcrumbs__current" aria-current={current ? 'page' : undefined}
+            >{item.label}</span
+          >
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Crumb } from '../types.js';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Ordered trail, root first. The last entry is the current page and is never a link. */
+    items: Crumb[];
+    /** Accessible name of the landmark. Several trails on one page need distinct names. */
+    label?: string;
+    /**
+     * Separator drawn between crumbs. Decorative — it lives in a `::before` on the list item, so
+     * it is never read out or copied with the text.
+     */
+    separator?: string;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "ref">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;