npm - @loidolt/theme-svelte - Versions diffs - 0.2.0 → 0.4.0 - Mend

@loidolt/theme-svelte 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/README.md +21 -0
package/dist/components/Accordion.svelte +100 -0
package/dist/components/Accordion.svelte.d.ts +50 -0
package/dist/components/Alert.svelte +6 -3
package/dist/components/Alert.svelte.d.ts +3 -2
package/dist/components/AlertDialog.svelte +130 -0
package/dist/components/AlertDialog.svelte.d.ts +35 -0
package/dist/components/AppShell.svelte +2 -1
package/dist/components/AppShell.svelte.d.ts +1 -0
package/dist/components/Badge.svelte +9 -2
package/dist/components/Badge.svelte.d.ts +2 -1
package/dist/components/Brand.svelte +29 -15
package/dist/components/Brand.svelte.d.ts +8 -4
package/dist/components/Breadcrumbs.svelte +53 -0
package/dist/components/Breadcrumbs.svelte.d.ts +18 -0
package/dist/components/Button.svelte +43 -21
package/dist/components/Button.svelte.d.ts +9 -4
package/dist/components/Card.svelte +23 -5
package/dist/components/Card.svelte.d.ts +11 -4
package/dist/components/CodeBlock.svelte +55 -0
package/dist/components/CodeBlock.svelte.d.ts +14 -0
package/dist/components/CommentList.svelte +67 -0
package/dist/components/CommentList.svelte.d.ts +53 -0
package/dist/components/Dialog.svelte +25 -3
package/dist/components/Dialog.svelte.d.ts +4 -1
package/dist/components/Drawer.svelte +105 -0
package/dist/components/Drawer.svelte.d.ts +31 -0
package/dist/components/DropdownMenu.svelte +2 -2
package/dist/components/DropdownMenu.svelte.d.ts +1 -1
package/dist/components/EmptyState.svelte +40 -0
package/dist/components/EmptyState.svelte.d.ts +19 -0
package/dist/components/Fieldset.svelte +60 -0
package/dist/components/Fieldset.svelte.d.ts +19 -0
package/dist/components/FileInput.svelte +47 -0
package/dist/components/FileInput.svelte.d.ts +15 -0
package/dist/components/Filmstrip.svelte +72 -0
package/dist/components/Filmstrip.svelte.d.ts +50 -0
package/dist/components/FloatingBar.svelte +43 -0
package/dist/components/FloatingBar.svelte.d.ts +16 -0
package/dist/components/IconButton.svelte +1 -1
package/dist/components/Input.svelte.d.ts +1 -1
package/dist/components/ListRow.svelte +50 -0
package/dist/components/ListRow.svelte.d.ts +18 -0
package/dist/components/Marker.svelte +38 -0
package/dist/components/Marker.svelte.d.ts +14 -0
package/dist/components/NavMenu.svelte +6 -1
package/dist/components/NavMenu.svelte.d.ts +2 -1
package/dist/components/NumberField.svelte +12 -1
package/dist/components/NumberField.svelte.d.ts +1 -1
package/dist/components/Pagination.svelte +86 -0
package/dist/components/Pagination.svelte.d.ts +22 -0
package/dist/components/Popover.svelte +24 -3
package/dist/components/Popover.svelte.d.ts +4 -1
package/dist/components/RadioGroup.svelte.d.ts +2 -2
package/dist/components/RecordStepper.svelte +58 -0
package/dist/components/RecordStepper.svelte.d.ts +18 -0
package/dist/components/SegmentedNav.svelte +53 -0
package/dist/components/SegmentedNav.svelte.d.ts +22 -0
package/dist/components/Select.svelte.d.ts +2 -2
package/dist/components/Stat.svelte +41 -0
package/dist/components/Stat.svelte.d.ts +17 -0
package/dist/components/StatusDot.svelte +27 -0
package/dist/components/StatusDot.svelte.d.ts +12 -0
package/dist/components/SwatchGroup.svelte +69 -0
package/dist/components/SwatchGroup.svelte.d.ts +44 -0
package/dist/components/Switch.svelte +19 -0
package/dist/components/Table.svelte +30 -3
package/dist/components/Table.svelte.d.ts +13 -0
package/dist/components/TableHeader.svelte +72 -0
package/dist/components/TableHeader.svelte.d.ts +24 -0
package/dist/components/Tabs.svelte +23 -5
package/dist/components/Tabs.svelte.d.ts +4 -3
package/dist/components/Textarea.svelte.d.ts +1 -1
package/dist/components/ThemeToggle.svelte +133 -0
package/dist/components/ThemeToggle.svelte.d.ts +20 -0
package/dist/components/Thumbnail.svelte +51 -0
package/dist/components/Thumbnail.svelte.d.ts +19 -0
package/dist/components/ToggleGroup.svelte +107 -0
package/dist/components/ToggleGroup.svelte.d.ts +46 -0
package/dist/components/TooltipProvider.svelte +1 -0
package/dist/components/Workspace.svelte +27 -6
package/dist/components/Workspace.svelte.d.ts +12 -0
package/dist/index.d.ts +29 -2
package/dist/index.js +26 -1
package/dist/media.svelte.d.ts +48 -0
package/dist/media.svelte.js +69 -0
package/dist/theme.svelte.d.ts +86 -0
package/dist/theme.svelte.js +166 -0
package/dist/toaster.svelte.d.ts +2 -0
package/dist/toaster.svelte.js +51 -9
package/dist/types.d.ts +21 -0
package/package.json +10 -8

package/dist/components/Button.svelte CHANGED Viewed

@@ -4,22 +4,32 @@
   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;
-    };
+  interface CommonProps {
+    variant?: ActionVariant;
+    size?: ControlSize;
+    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;
+  }
+  // Discriminated on `href`: with it the component renders an `<a>` and accepts anchor
+  // attributes; without it, a `<button>` and button attributes. Button-only attributes
+  // (`formaction`, `type`, …) on an anchor are a type error instead of silent junk.
+  type Props = CommonProps &
+    (
+      | (Omit<HTMLAnchorAttributes, 'class' | 'type'> & {
+          /** Renders an `<a>` styled as a button. */
+          href: string;
+          type?: never;
+        })
+      | (Omit<HTMLButtonAttributes, 'class'> & { href?: never })
+    );
   let {
     variant = 'default',
@@ -38,7 +48,12 @@
   }: Props = $props();
   const classes = $derived(
-    cx('ldt-button', `ldt-button--${variant}`, size !== 'md' && `ldt-button--${size}`, className)
+    cx(
+      'ldt-button',
+      variant !== 'default' && `ldt-button--${variant}`,
+      size !== 'md' && `ldt-button--${size}`,
+      className
+    )
   );
   const inert = $derived(disabled || loading);
@@ -47,7 +62,8 @@
       event.preventDefault();
       return;
     }
-    onclick?.(event as MouseEvent & { currentTarget: EventTarget & HTMLButtonElement });
+    // The union collapses the handler's currentTarget; the branch that rendered us fixes it.
+    (onclick as ((event: MouseEvent) => void) | undefined)?.(event);
   }
 </script>
@@ -69,17 +85,23 @@
     aria-disabled={inert || undefined}
     aria-busy={loading || undefined}
     tabindex={inert ? -1 : undefined}
-    {...rest}
+    {...rest as HTMLAnchorAttributes}
     onclick={handleClick}>{@render content()}</a
   >
 {:else}
+  <!--
+    `loading` uses `aria-disabled` + a click guard instead of native `disabled`: disabling
+    the control mid-interaction would drop keyboard focus to <body> and can hide the busy
+    announcement from assistive tech. Explicit `disabled` keeps native semantics.
+  -->
   <button
     bind:this={ref}
     {type}
     class={classes}
-    disabled={inert}
+    disabled={disabled || undefined}
+    aria-disabled={loading && !disabled ? true : undefined}
     aria-busy={loading || undefined}
-    {...rest}
+    {...rest as HTMLButtonAttributes}
     onclick={handleClick}>{@render content()}</button
   >
 {/if}

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

@@ -1,11 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import type { ActionVariant, ControlSize } from '../types.js';
-type Props = HTMLButtonAttributes & HTMLAnchorAttributes & {
+interface CommonProps {
     variant?: ActionVariant;
     size?: ControlSize;
-    /** Renders an `<a>` styled as a button. */
-    href?: string;
     disabled?: boolean;
     loading?: boolean;
     /** Visible text swapped in while loading. */
@@ -15,7 +13,14 @@ type Props = HTMLButtonAttributes & HTMLAnchorAttributes & {
     class?: string;
     children: Snippet;
     ref?: HTMLButtonElement | HTMLAnchorElement | null;
-};
+}
+type Props = CommonProps & ((Omit<HTMLAnchorAttributes, 'class' | 'type'> & {
+    /** Renders an `<a>` styled as a button. */
+    href: string;
+    type?: never;
+}) | (Omit<HTMLButtonAttributes, 'class'> & {
+    href?: never;
+}));
 declare const Button: import("svelte").Component<Props, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/Card.svelte CHANGED Viewed

@@ -1,22 +1,36 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
   import type { HeadingLevel } from '../types.js';
   import { cx } from '../utils.js';
-  interface Props extends HTMLAttributes<HTMLElement> {
+  interface CommonProps {
     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;
   }
+  // Discriminated on `href`, like Button: with it the whole card is an anchor and accepts
+  // anchor attributes; without it the root stays a plain container element.
+  type Props = CommonProps &
+    (
+      | (Omit<HTMLAnchorAttributes, 'class'> & {
+          /** Renders the card as one block-level link. */
+          href: string;
+          as?: never;
+        })
+      | (Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+          href?: never;
+          /** Root element. `div` by default — use `article` only for self-contained content. */
+          as?: 'div' | 'article' | 'section' | 'li';
+        })
+    );
   let {
     title,
     description,
@@ -24,14 +38,18 @@
     children,
     footer,
     as = 'div',
+    href,
     headingLevel = 3,
     class: className,
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+  const element = $derived(href ? 'a' : as);
+  const classes = $derived(cx('ldt-card', href && 'ldt-card--link', className));
 </script>
-<svelte:element this={as} bind:this={ref} class={cx('ldt-card', className)} {...rest}>
+<svelte:element this={element} bind:this={ref} class={classes} {href} {...rest}>
   {#if header || title || description}<header class="ldt-card__header">
       {#if header}{@render header()}{:else}{#if title}<svelte:element
             this={`h${headingLevel}`}

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

@@ -1,18 +1,25 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
 import type { HeadingLevel } from '../types.js';
-interface Props extends HTMLAttributes<HTMLElement> {
+interface CommonProps {
     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;
 }
+type Props = CommonProps & ((Omit<HTMLAnchorAttributes, 'class'> & {
+    /** Renders the card as one block-level link. */
+    href: string;
+    as?: never;
+}) | (Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    href?: never;
+    /** Root element. `div` by default — use `article` only for self-contained content. */
+    as?: 'div' | 'article' | 'section' | 'li';
+}));
 declare const Card: import("svelte").Component<Props, {}, "ref">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/CodeBlock.svelte ADDED Viewed

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    code: string;
+    /** One click/tap selects the whole value. On by default — this block exists for copying. */
+    selectable?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+  let {
+    code,
+    selectable = true,
+    copyable = false,
+    copyLabel = 'Copy',
+    copiedLabel = 'Copied',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+  let copied = $state(false);
+  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code);
+      copied = true;
+      clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => (copied = false), 2000);
+    } catch {
+      // Clipboard unavailable (permissions, insecure context) — the text stays selectable.
+    }
+  }
+</script>
+<div
+  bind:this={ref}
+  class={cx('ldt-code-block', selectable && 'ldt-code-block--selectable', className)}
+  {...rest}
+>
+  <code class="ldt-code-block__code">{code}</code>
+  {#if copyable}
+    <button type="button" class="ldt-button ldt-button--quiet ldt-button--sm" onclick={copy}>
+      {copied ? copiedLabel : copyLabel}
+    </button>
+    <!-- Persistently mounted so the announcement fires when the content changes. -->
+    <span class="ldt-sr-only" role="status">{copied ? copiedLabel : ''}</span>
+  {/if}
+</div>

package/dist/components/CodeBlock.svelte.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    code: string;
+    /** One click/tap selects the whole value. On by default — this block exists for copying. */
+    selectable?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "ref">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/CommentList.svelte ADDED Viewed

@@ -0,0 +1,67 @@
+<script lang="ts" generics="T extends string = string">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import Marker from './Marker.svelte';
+  import { cx } from '../utils.js';
+  interface CommentListItem<V extends string = string> {
+    id: V;
+    author: string;
+    /** Preformatted suffix after the author — timestamps, origins. The theme adds nothing. */
+    meta?: string;
+    body: string;
+    /** Renders a numbered Marker when set — ties the comment to a pin on a canvas. */
+    marker?: number;
+  }
+  interface Props extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    items: CommentListItem<T>[];
+    /** Highlighted item; kept in view as it changes. */
+    activeId?: T | null;
+    /** Fired when a markered item is hovered — for syncing the matching canvas pin. */
+    onItemHover?: (id: T) => void;
+    /** Full row-content override. */
+    item?: Snippet<[CommentListItem<T>]>;
+    class?: string;
+    itemClass?: string;
+    ref?: HTMLUListElement | null;
+  }
+  let {
+    items,
+    activeId = $bindable(null),
+    onItemHover,
+    item,
+    class: className,
+    itemClass,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+  let rows = $state<Record<string, HTMLLIElement | null>>({});
+  $effect(() => {
+    if (activeId) rows[activeId]?.scrollIntoView({ block: 'nearest' });
+  });
+</script>
+<ul bind:this={ref} class={cx('ldt-comment-list', className)} {...rest}>
+  {#each items as entry (entry.id)}
+    <li
+      class={cx('ldt-comment', activeId === entry.id && 'ldt-comment--active', itemClass)}
+      bind:this={rows[entry.id]}
+      onpointerenter={entry.marker !== undefined ? () => onItemHover?.(entry.id) : undefined}
+    >
+      {#if item}{@render item(entry)}{:else}
+        {#if entry.marker !== undefined}<Marker
+            number={entry.marker}
+            active={activeId === entry.id}
+          />{/if}
+        <div class="ldt-comment__content">
+          <span class="ldt-comment__meta">{entry.author}{entry.meta ? ` ${entry.meta}` : ''}</span>
+          <p class="ldt-comment__body">{entry.body}</p>
+        </div>
+      {/if}
+    </li>
+  {/each}
+</ul>

package/dist/components/CommentList.svelte.d.ts ADDED Viewed

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T extends string = string>(): {
+    props: Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+        items: {
+            id: T;
+            author: string;
+            /** Preformatted suffix after the author — timestamps, origins. The theme adds nothing. */
+            meta?: string;
+            body: string;
+            /** Renders a numbered Marker when set — ties the comment to a pin on a canvas. */
+            marker?: number;
+        }[];
+        /** Highlighted item; kept in view as it changes. */
+        activeId?: T | null;
+        /** Fired when a markered item is hovered — for syncing the matching canvas pin. */
+        onItemHover?: (id: T) => void;
+        /** Full row-content override. */
+        item?: Snippet<[{
+            id: T;
+            author: string;
+            /** Preformatted suffix after the author — timestamps, origins. The theme adds nothing. */
+            meta?: string;
+            body: string;
+            /** Renders a numbered Marker when set — ties the comment to a pin on a canvas. */
+            marker?: number;
+        }]>;
+        class?: string;
+        itemClass?: string;
+        ref?: HTMLUListElement | null;
+    };
+    exports: {};
+    bindings: "ref" | "activeId";
+    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" | "activeId";
+    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 CommentList: $$IsomorphicComponent;
+type CommentList<T extends string = string> = InstanceType<typeof CommentList<T>>;
+export default CommentList;

package/dist/components/Dialog.svelte CHANGED Viewed

@@ -2,7 +2,13 @@
   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 type {
+    ActionVariant,
+    ControlSize,
+    DialogSize,
+    HeadingLevel,
+    TriggerChildProps,
+  } from '../types.js';
   import { cx } from '../utils.js';
   type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
@@ -13,6 +19,9 @@
     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;
     children: Snippet;
     footer?: Snippet;
@@ -34,7 +43,9 @@
     description,
     trigger,
     triggerChild,
-    triggerClass = 'ldt-button',
+    triggerVariant,
+    triggerSize,
+    triggerClass,
     children,
     footer,
     size,
@@ -47,6 +58,17 @@
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+  // An explicit triggerClass keeps today's contract and wins outright; otherwise the class is
+  // composed from the button variant vocabulary.
+  const triggerClasses = $derived(
+    triggerClass ??
+      cx(
+        'ldt-button',
+        triggerVariant && triggerVariant !== 'default' && `ldt-button--${triggerVariant}`,
+        triggerSize && triggerSize !== 'md' && `ldt-button--${triggerSize}`
+      )
+  );
 </script>
 <DialogPrimitive.Root bind:open {onOpenChange}>
@@ -54,7 +76,7 @@
       >{#snippet child(childProps)}{@render triggerChild(
           childProps
         )}{/snippet}</DialogPrimitive.Trigger
-    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClass}
+    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClasses}
       >{@render trigger()}</DialogPrimitive.Trigger
     >{/if}
   <DialogPrimitive.Portal>

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { DialogContentProps } from 'bits-ui';
-import type { DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
+import type { ActionVariant, ControlSize, DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
 type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
     open?: boolean;
     title: string;
@@ -9,6 +9,9 @@ type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
     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;
     children: Snippet;
     footer?: Snippet;

package/dist/components/Drawer.svelte ADDED Viewed

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { DialogContentProps } from 'bits-ui';
+  import type { ActionVariant, ControlSize, HeadingLevel, TriggerChildProps } from '../types.js';
+  import { cx } from '../utils.js';
+  type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Edge the panel is anchored to. `left`/`right` size by width, `top`/`bottom` by height. */
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    /** 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;
+    children: Snippet;
+    footer?: Snippet;
+    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,
+    side = 'left',
+    trigger,
+    triggerChild,
+    triggerVariant,
+    triggerSize,
+    triggerClass,
+    children,
+    footer,
+    headingLevel = 2,
+    showClose = true,
+    closeLabel = 'Close',
+    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 modal panel anchored to one edge — the narrow-viewport form of a sidebar, and the usual home
+  for navigation that has no room to sit in the topbar. Same primitive as `Dialog`, so focus is
+  trapped, Escape closes, and the page behind is inert; set `--ldt-drawer-size` for the measure
+  across the anchored edge.
+-->
+<DialogPrimitive.Root bind:open {onOpenChange}>
+  {#if triggerChild}<DialogPrimitive.Trigger
+      >{#snippet child(childProps)}{@render triggerChild(
+          childProps
+        )}{/snippet}</DialogPrimitive.Trigger
+    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClasses}
+      >{@render trigger()}</DialogPrimitive.Trigger
+    >{/if}
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay class={cx('ldt-overlay', overlayClass)} />
+    <DialogPrimitive.Content
+      bind:ref
+      class={cx('ldt-drawer', `ldt-drawer--${side}`, className)}
+      {...rest}
+    >
+      <header class="ldt-drawer__header">
+        <div>
+          <DialogPrimitive.Title level={headingLevel} class="ldt-drawer__title"
+            >{title}</DialogPrimitive.Title
+          >{#if description}<DialogPrimitive.Description class="ldt-drawer__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-drawer__body ldt-scrollbar">{@render children()}</div>
+      {#if footer}<footer class="ldt-drawer__footer">{@render footer()}</footer>{/if}
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

package/dist/components/Drawer.svelte.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { DialogContentProps } from 'bits-ui';
+import type { ActionVariant, ControlSize, HeadingLevel, TriggerChildProps } from '../types.js';
+type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Edge the panel is anchored to. `left`/`right` size by width, `top`/`bottom` by height. */
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    /** 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;
+    children: Snippet;
+    footer?: Snippet;
+    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 Drawer: import("svelte").Component<Props, {}, "ref" | "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/DropdownMenu.svelte CHANGED Viewed

@@ -58,13 +58,13 @@
         {#if item.href}
           <a {...props} href={item.href}
             >{#if item.icon}{@render item.icon()}{/if}<span>{item.label}</span>{#if item.hint}<span
-                aria-hidden="true">{item.hint}</span
+                class="ldt-menu__hint">{item.hint}</span
               >{/if}</a
           >
         {:else}
           <button {...props} type="button"
             >{#if item.icon}{@render item.icon()}{/if}<span>{item.label}</span>{#if item.hint}<span
-                aria-hidden="true">{item.hint}</span
+                class="ldt-menu__hint">{item.hint}</span
               >{/if}</button
           >
         {/if}

package/dist/components/DropdownMenu.svelte.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { DropdownMenu as MenuPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { Alignment, MenuItem, Placement, TriggerChildProps } from '../types.js';
 declare function $$render<T extends string = string>(): {
-    props: Omit<MenuPrimitive.ContentProps, "class" | "children" | "child"> & {
+    props: Omit<MenuPrimitive.ContentProps, "children" | "class" | "child"> & {
         open?: boolean;
         /** Heading rendered above `items`, associated with them via a menu group. */
         groupLabel?: string;