@loidolt/theme-svelte 0.2.0

package/dist/components/Table.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLTableAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLTableAttributes {
+    /** Names the table and its scroll region. */
+    caption?: string;
+    /** Accessible name for the scroll region when there is no `caption`. */
+    regionLabel?: string;
+    /** `class` lands on the `<table>`; use `wrapperClass` for the scroll container. */
+    class?: string;
+    wrapperClass?: string;
+    children: Snippet;
+    ref?: HTMLTableElement | null;
+    wrapperRef?: HTMLDivElement | null;
+  }
+
+  let {
+    caption,
+    regionLabel = 'Data table',
+    class: className,
+    wrapperClass,
+    children,
+    ref = $bindable(null),
+    wrapperRef = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!-- `tabindex` is required: a scrollable region is unreachable by keyboard without it. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  bind:this={wrapperRef}
+  class={cx('ldt-table-wrap', wrapperClass)}
+  role="region"
+  tabindex="0"
+  aria-label={caption ?? regionLabel}
+>
+  <table bind:this={ref} class={cx('ldt-table', className)} {...rest}>
+    {#if caption}<caption class="ldt-sr-only">{caption}</caption>{/if}{@render children()}
+  </table>
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTableAttributes } from 'svelte/elements';
+interface Props extends HTMLTableAttributes {
+    /** Names the table and its scroll region. */
+    caption?: string;
+    /** Accessible name for the scroll region when there is no `caption`. */
+    regionLabel?: string;
+    /** `class` lands on the `<table>`; use `wrapperClass` for the scroll container. */
+    class?: string;
+    wrapperClass?: string;
+    children: Snippet;
+    ref?: HTMLTableElement | null;
+    wrapperRef?: HTMLDivElement | null;
+}
+declare const Table: import("svelte").Component<Props, {}, "ref" | "wrapperRef">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Tabs.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" generics="T extends string = string">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { NavItem, Orientation } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props {
+    /** Defaults to the first tab, so a panel is always rendered. */
+    value?: T;
+    tabs: NavItem<T>[];
+    /** Accessible name of the tab list. */
+    label?: string;
+    orientation?: Orientation;
+    children: Snippet<[{ value: T }]>;
+    class?: string;
+    listClass?: string;
+    contentClass?: string;
+    onValueChange?: (value: T) => void;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    value = $bindable(),
+    tabs,
+    label,
+    orientation = 'horizontal',
+    children,
+    class: className,
+    listClass,
+    contentClass,
+    onValueChange,
+    ref = $bindable(null),
+  }: Props = $props();
+
+  $effect(() => {
+    if (value === undefined && tabs.length > 0) value = tabs[0].value;
+  });
+
+  const active = $derived(value ?? tabs[0]?.value);
+</script>
+
+<TabsPrimitive.Root
+  bind:ref
+  value={active}
+  onValueChange={(next) => {
+    value = next as T;
+    onValueChange?.(next as T);
+  }}
+  {orientation}
+  class={cx('ldt-tabs', className)}
+>
+  <TabsPrimitive.List class={cx('ldt-tabs__list', listClass)} aria-label={label}
+    >{#each tabs as tab (tab.value)}<TabsPrimitive.Trigger
+        class="ldt-tabs__trigger"
+        value={tab.value}
+        disabled={tab.disabled}>{tab.label}</TabsPrimitive.Trigger
+      >{/each}</TabsPrimitive.List
+  >
+  {#each tabs as tab (tab.value)}<TabsPrimitive.Content
+      class={cx('ldt-tabs__content', contentClass)}
+      value={tab.value}>{@render children({ value: tab.value })}</TabsPrimitive.Content
+    >{/each}
+</TabsPrimitive.Root>

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

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { NavItem, Orientation } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: {
+        /** Defaults to the first tab, so a panel is always rendered. */
+        value?: T;
+        tabs: NavItem<T>[];
+        /** Accessible name of the tab list. */
+        label?: string;
+        orientation?: Orientation;
+        children: Snippet<[{
+            value: T;
+        }]>;
+        class?: string;
+        listClass?: string;
+        contentClass?: string;
+        onValueChange?: (value: T) => void;
+        ref?: HTMLElement | 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 Tabs: $$IsomorphicComponent;
+type Tabs<T extends string = string> = InstanceType<typeof Tabs<T>>;
+export default Tabs;

package/dist/components/Textarea.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLTextareaAttributes, 'value'> {
+    value?: string;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLTextAreaElement | null;
+  }
+
+  let {
+    value = $bindable(''),
+    boxed = false,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<textarea
+  bind:this={ref}
+  bind:value
+  class={cx('ldt-textarea', boxed && 'ldt-textarea--boxed', className)}
+  {...rest}
+></textarea>

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

@@ -0,0 +1,11 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLTextareaAttributes, 'value'> {
+    value?: string;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLTextAreaElement | null;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/Toast.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import IconButton from './IconButton.svelte';
+  import type { StatusVariant } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    variant?: StatusVariant;
+    dismissLabel?: string;
+    onDismiss?: () => void;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    title,
+    description,
+    variant,
+    dismissLabel = 'Dismiss notification',
+    onDismiss,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!--
+  No `role="status"` here: `ToastViewport` is the live region, and nesting one inside another
+  makes screen readers announce each toast twice.
+-->
+<div
+  bind:this={ref}
+  class={cx('ldt-toast', variant && `ldt-toast--${variant}`, className)}
+  {...rest}
+>
+  <strong class="ldt-toast__title">{title}</strong>{#if description}<p
+      class="ldt-toast__description"
+    >
+      {description}
+    </p>{/if}{#if children}<div class="ldt-toast__description">
+      {@render children()}
+    </div>{/if}{#if onDismiss}<IconButton
+      class="ldt-toast__dismiss"
+      size="sm"
+      label={dismissLabel}
+      onclick={onDismiss}>×</IconButton
+    >{/if}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { StatusVariant } from '../types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    variant?: StatusVariant;
+    dismissLabel?: string;
+    onDismiss?: () => void;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
+}
+declare const Toast: import("svelte").Component<Props, {}, "ref">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/ToastViewport.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    /** `polite` for routine updates; `assertive` interrupts and should be rare. */
+    politeness?: 'polite' | 'assertive';
+    class?: string;
+    children: Snippet;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    label = 'Notifications',
+    politeness = 'polite',
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!--
+  A plain `<div>`, not a `<section>`: the region has to stay mounted for a screen reader to
+  announce toasts added later, and an always-present landmark with nothing in it is noise.
+-->
+<div
+  bind:this={ref}
+  class={cx('ldt-toast-viewport', className)}
+  aria-label={label}
+  aria-live={politeness}
+  aria-relevant="additions text"
+  {...rest}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    /** `polite` for routine updates; `assertive` interrupts and should be rare. */
+    politeness?: 'polite' | 'assertive';
+    class?: string;
+    children: Snippet;
+    ref?: HTMLDivElement | null;
+}
+declare const ToastViewport: import("svelte").Component<Props, {}, "ref">;
+type ToastViewport = ReturnType<typeof ToastViewport>;
+export default ToastViewport;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import type { TooltipContentProps } from 'bits-ui';
+  import { getContext, type Snippet } from 'svelte';
+  import type { Alignment, Placement, TriggerChildProps } from '../types.js';
+  import { cx } from '../utils.js';
+  import { TOOLTIP_PROVIDER_KEY } from './TooltipProvider.svelte';
+
+  type Props = Omit<TooltipContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    content: string;
+    trigger?: Snippet;
+    /** Full control of the trigger element — avoids nesting a button inside the trigger. */
+    triggerChild?: Snippet<[TriggerChildProps]>;
+    triggerClass?: string;
+    /**
+     * Set only when the trigger has no accessible name of its own. Bits already wires
+     * `aria-describedby`, so forcing an `aria-label` here would clobber that name.
+     */
+    triggerLabel?: string;
+    side?: Placement;
+    align?: Alignment;
+    sideOffset?: number;
+    /** Ignored when an ancestor `TooltipProvider` is present. */
+    delayDuration?: number;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    open = $bindable(false),
+    content,
+    trigger,
+    triggerChild,
+    triggerClass = 'ldt-button ldt-icon-button ldt-button--ghost',
+    triggerLabel,
+    side = 'top',
+    align = 'center',
+    sideOffset = 6,
+    delayDuration = 350,
+    class: className,
+    onOpenChange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const hasProvider = getContext(TOOLTIP_PROVIDER_KEY) === true;
+</script>
+
+{#snippet tooltip()}
+  <TooltipPrimitive.Root bind:open {onOpenChange}>
+    {#if triggerChild}<TooltipPrimitive.Trigger
+        >{#snippet child(childProps)}{@render triggerChild(
+            childProps
+          )}{/snippet}</TooltipPrimitive.Trigger
+      >{:else if trigger}<TooltipPrimitive.Trigger class={triggerClass} aria-label={triggerLabel}
+        >{@render trigger()}</TooltipPrimitive.Trigger
+      >{/if}
+    <TooltipPrimitive.Portal
+      ><TooltipPrimitive.Content
+        bind:ref
+        {side}
+        {align}
+        {sideOffset}
+        class={cx('ldt-tooltip', className)}
+        {...rest}>{content}</TooltipPrimitive.Content
+      ></TooltipPrimitive.Portal
+    >
+  </TooltipPrimitive.Root>
+{/snippet}
+
+{#if hasProvider}{@render tooltip()}{:else}<TooltipPrimitive.Provider {delayDuration}
+    >{@render tooltip()}</TooltipPrimitive.Provider
+  >{/if}

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

@@ -0,0 +1,28 @@
+import type { TooltipContentProps } from 'bits-ui';
+import { type Snippet } from 'svelte';
+import type { Alignment, Placement, TriggerChildProps } from '../types.js';
+type Props = Omit<TooltipContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    content: string;
+    trigger?: Snippet;
+    /** Full control of the trigger element — avoids nesting a button inside the trigger. */
+    triggerChild?: Snippet<[TriggerChildProps]>;
+    triggerClass?: string;
+    /**
+     * Set only when the trigger has no accessible name of its own. Bits already wires
+     * `aria-describedby`, so forcing an `aria-label` here would clobber that name.
+     */
+    triggerLabel?: string;
+    side?: Placement;
+    align?: Alignment;
+    sideOffset?: number;
+    /** Ignored when an ancestor `TooltipProvider` is present. */
+    delayDuration?: number;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+};
+declare const Tooltip: import("svelte").Component<Props, {}, "ref" | "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/TooltipProvider.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+  export const TOOLTIP_PROVIDER_KEY = Symbol('ldt-tooltip-provider');
+</script>
+
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import { setContext, type Snippet } from 'svelte';
+
+  interface Props {
+    /** Delay before the first tooltip in the group opens. */
+    delayDuration?: number;
+    /** Window after closing one tooltip in which the next opens instantly. */
+    skipDelayDuration?: number;
+    disableHoverableContent?: boolean;
+    disabled?: boolean;
+    children: Snippet;
+  }
+
+  let {
+    delayDuration = 350,
+    skipDelayDuration = 300,
+    disableHoverableContent = false,
+    disabled = false,
+    children,
+  }: Props = $props();
+
+  // Tooltips inside this subtree skip their own Provider, so skip-delay grouping works.
+  setContext(TOOLTIP_PROVIDER_KEY, true);
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {skipDelayDuration} {disableHoverableContent} {disabled}
+  >{@render children()}</TooltipPrimitive.Provider
+>

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

@@ -0,0 +1,14 @@
+export declare const TOOLTIP_PROVIDER_KEY: unique symbol;
+import { type Snippet } from 'svelte';
+interface Props {
+    /** Delay before the first tooltip in the group opens. */
+    delayDuration?: number;
+    /** Window after closing one tooltip in which the next opens instantly. */
+    skipDelayDuration?: number;
+    disableHoverableContent?: boolean;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const TooltipProvider: import("svelte").Component<Props, {}, "">;
+type TooltipProvider = ReturnType<typeof TooltipProvider>;
+export default TooltipProvider;

package/dist/components/Topbar.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    brand: Snippet;
+    navigation?: Snippet;
+    actions?: Snippet;
+    /** Accessible name of the `<nav>`, so several navs stay distinguishable. */
+    navLabel?: string;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    brand,
+    navigation,
+    actions,
+    navLabel = 'Primary',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<header bind:this={ref} class={cx('ldt-topbar', className)} {...rest}>
+  <div>{@render brand()}</div>
+  {#if navigation}<nav class="ldt-topbar__nav" aria-label={navLabel}>
+      {@render navigation()}
+    </nav>{/if}{#if actions}<div class="ldt-topbar__actions">{@render actions()}</div>{/if}
+</header>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    brand: Snippet;
+    navigation?: Snippet;
+    actions?: Snippet;
+    /** Accessible name of the `<nav>`, so several navs stay distinguishable. */
+    navLabel?: string;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Topbar: import("svelte").Component<Props, {}, "ref">;
+type Topbar = ReturnType<typeof Topbar>;
+export default Topbar;

package/dist/components/Workspace.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    sidebar?: Snippet;
+    children: Snippet;
+    inspector?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    sidebar,
+    children,
+    inspector,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!-- The grid columns follow the snippets that are actually present. -->
+<div
+  bind:this={ref}
+  class={cx(
+    'ldt-workspace',
+    sidebar && 'ldt-workspace--sidebar',
+    inspector && 'ldt-workspace--inspector',
+    className
+  )}
+  {...rest}
+>
+  {#if sidebar}{@render sidebar()}{/if}
+  <div class="ldt-workspace__main">{@render children()}</div>
+  {#if inspector}{@render inspector()}{/if}
+</div>

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

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

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+export { default as Alert } from './components/Alert.svelte';
+export { default as AppShell } from './components/AppShell.svelte';
+export { default as Badge } from './components/Badge.svelte';
+export { default as Brand } from './components/Brand.svelte';
+export { default as Button } from './components/Button.svelte';
+export { default as Card } from './components/Card.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as ContextBar } from './components/ContextBar.svelte';
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as Field } from './components/Field.svelte';
+export { default as IconButton } from './components/IconButton.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as NavMenu } from './components/NavMenu.svelte';
+export { default as NumberField } from './components/NumberField.svelte';
+export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as Panel } from './components/Panel.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as Progress } from './components/Progress.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as Section } from './components/Section.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Separator } from './components/Separator.svelte';
+export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Table } from './components/Table.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as ToastViewport } from './components/ToastViewport.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as TooltipProvider } from './components/TooltipProvider.svelte';
+export { default as Topbar } from './components/Topbar.svelte';
+export { default as Workspace } from './components/Workspace.svelte';
+/**
+ * Bits UI primitives behind the wrappers, for menus and overlays this package does not
+ * model declaratively (checkbox/radio items, submenus, custom overlay composition).
+ */
+export { Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Popover as PopoverPrimitive, Tabs as TabsPrimitive, Tooltip as TooltipPrimitive, } from 'bits-ui';
+export { cx } from './utils.js';
+export { createToaster } from './toaster.svelte.js';
+export type { Toaster, ToasterOptions, ToastOptions, ToastRecord } from './toaster.svelte.js';
+export type { ActionVariant, Alignment, BadgeVariant, ControlSize, DialogSize, HeadingLevel, MenuItem, NavItem, Option, Orientation, Placement, StatusVariant, TriggerChildProps, } from './types.js';