@loidolt/theme-svelte 0.2.0 → 0.4.0

package/dist/components/Table.svelte

@@ -8,6 +8,19 @@
     caption?: string;
     /** Accessible name for the scroll region when there is no `caption`. */
     regionLabel?: string;
+    /**
+     * Pins the header row while the body scrolls. Needs a bounded scroll container — set
+     * `--ldt-table-height` on the wrapper, or the page scrolls instead and nothing sticks.
+     */
+    sticky?: boolean;
+    /**
+     * Rendered in place of the rows, as a single full-width cell. Pass it only when there is
+     * nothing to show — `empty={rows.length === 0 ? nothingYet : undefined}` — since the
+     * component cannot see inside `children` to count rows.
+     */
+    empty?: Snippet;
+    /** Columns the empty cell spans. Defaults to the whole row. */
+    columns?: number;
     /** `class` lands on the `<table>`; use `wrapperClass` for the scroll container. */
     class?: string;
     wrapperClass?: string;
@@ -19,6 +32,9 @@
   let {
     caption,
     regionLabel = 'Data table',
+    sticky = false,
+    empty,
+    columns,
     class: className,
     wrapperClass,
     children,
@@ -32,12 +48,23 @@
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   bind:this={wrapperRef}
-  class={cx('ldt-table-wrap', wrapperClass)}
+  class={cx('ldt-table-wrap', sticky && 'ldt-table-wrap--sticky', 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
+    bind:this={ref}
+    class={cx('ldt-table', sticky && 'ldt-table--sticky', className)}
+    {...rest}
+  >
+    {#if caption}<caption class="ldt-sr-only">{caption}</caption
+      >{/if}{@render children()}{#if empty}<tbody class="ldt-table__empty">
+        <tr>
+          <!-- `colspan` defaults to the row-spanning maximum so the cell never leaves a gap
+               beside it, whatever the column count turns out to be. -->
+          <td colspan={columns ?? 1000}>{@render empty()}</td>
+        </tr>
+      </tbody>{/if}
   </table>
 </div>

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

@@ -5,6 +5,19 @@ interface Props extends HTMLTableAttributes {
     caption?: string;
     /** Accessible name for the scroll region when there is no `caption`. */
     regionLabel?: string;
+    /**
+     * Pins the header row while the body scrolls. Needs a bounded scroll container — set
+     * `--ldt-table-height` on the wrapper, or the page scrolls instead and nothing sticks.
+     */
+    sticky?: boolean;
+    /**
+     * Rendered in place of the rows, as a single full-width cell. Pass it only when there is
+     * nothing to show — `empty={rows.length === 0 ? nothingYet : undefined}` — since the
+     * component cannot see inside `children` to count rows.
+     */
+    empty?: Snippet;
+    /** Columns the empty cell spans. Defaults to the whole row. */
+    columns?: number;
     /** `class` lands on the `<table>`; use `wrapperClass` for the scroll container. */
     class?: string;
     wrapperClass?: string;

package/dist/components/TableHeader.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLThAttributes } from 'svelte/elements';
+  import type { ColumnAlign, SortDirection } from '../types.js';
+  import { cx } from '../utils.js';
+
+  // `align` is omitted from the base: the deprecated HTML attribute of that name takes
+  // physical values (`left`/`right`), and this one is logical.
+  interface Props extends Omit<HTMLThAttributes, 'children' | 'align'> {
+    /**
+     * Current sort state of this column. Drives `aria-sort` and the indicator; leave at `none`
+     * for every column that is not the sorted one, so screen readers report a single sort.
+     */
+    sort?: SortDirection;
+    /**
+     * Makes the header a sort control. Called with the direction a press asks for: `ascending`
+     * for an unsorted or descending column, `descending` for an ascending one.
+     */
+    onSort?: (direction: SortDirection) => void;
+    align?: ColumnAlign;
+    /** Accessible name of the sort button when the header's own text is not enough. */
+    sortLabel?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLTableCellElement | null;
+  }
+
+  let {
+    sort = 'none',
+    onSort,
+    align,
+    sortLabel,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  // Two-state cycle. A third "unsorted" step reads as a broken control far more often than it
+  // reads as a feature: the table has to be sorted *somehow*, so there is nothing to return to.
+  const next = $derived<SortDirection>(sort === 'ascending' ? 'descending' : 'ascending');
+</script>
+
+<!--
+  A `<th>` that can sort. `aria-sort` lives on the cell (where the spec puts it) while the
+  press target is a real button inside it, so the column is reachable and announced by keyboard
+  without turning the whole cell into a click surface.
+-->
+<th
+  bind:this={ref}
+  scope="col"
+  class={cx('ldt-table__header', className)}
+  data-align={align}
+  aria-sort={onSort ? sort : undefined}
+  {...rest}
+>
+  {#if onSort}
+    <button
+      type="button"
+      class="ldt-table__sort"
+      data-sort={sort}
+      aria-label={sortLabel}
+      onclick={() => onSort(next)}
+    >
+      {@render children()}
+      <!-- Decorative: `aria-sort` already carries the state to assistive tech. -->
+      <span class="ldt-table__sort-indicator" aria-hidden="true"></span>
+    </button>
+  {:else}
+    {@render children()}
+  {/if}
+</th>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLThAttributes } from 'svelte/elements';
+import type { ColumnAlign, SortDirection } from '../types.js';
+interface Props extends Omit<HTMLThAttributes, 'children' | 'align'> {
+    /**
+     * Current sort state of this column. Drives `aria-sort` and the indicator; leave at `none`
+     * for every column that is not the sorted one, so screen readers report a single sort.
+     */
+    sort?: SortDirection;
+    /**
+     * Makes the header a sort control. Called with the direction a press asks for: `ascending`
+     * for an unsorted or descending column, `descending` for an ascending one.
+     */
+    onSort?: (direction: SortDirection) => void;
+    align?: ColumnAlign;
+    /** Accessible name of the sort button when the header's own text is not enough. */
+    sortLabel?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLTableCellElement | null;
+}
+declare const TableHeader: import("svelte").Component<Props, {}, "ref">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/Tabs.svelte

@@ -1,10 +1,14 @@
 <script lang="ts" generics="T extends string = string">
   import { Tabs as TabsPrimitive } from 'bits-ui';
+  import type { TabsRootProps } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import type { NavItem, Orientation } from '../types.js';
   import { cx } from '../utils.js';
 
-  interface Props {
+  interface Props extends Omit<
+    TabsRootProps,
+    'value' | 'onValueChange' | 'orientation' | 'children' | 'child' | 'class' | 'ref'
+  > {
     /** Defaults to the first tab, so a panel is always rendered. */
     value?: T;
     tabs: NavItem<T>[];
@@ -20,8 +24,10 @@
   }
 
   let {
-    value = $bindable(),
     tabs,
+    // Defaulted at destructure time (not in an effect) so SSR output and the first client
+    // frame already agree with what a parent binding observes.
+    value = $bindable(tabs[0]?.value),
     label,
     orientation = 'horizontal',
     children,
@@ -30,13 +36,24 @@
     contentClass,
     onValueChange,
     ref = $bindable(null),
+    ...rest
   }: Props = $props();
 
+  // Falls back to the first tab when `value` points at a tab that no longer exists,
+  // so removing the selected tab cannot blank every panel.
+  const active = $derived(
+    value !== undefined && tabs.some((tab) => tab.value === value) ? value : tabs[0]?.value
+  );
+
+  // Keep the public binding honest when a dynamic collection removes the selected tab. Effects
+  // do not run during SSR, so the server render remains side-effect free while the client and its
+  // parent converge on the fallback that is already being displayed.
   $effect(() => {
-    if (value === undefined && tabs.length > 0) value = tabs[0].value;
+    if (active !== undefined && value !== active) {
+      value = active;
+      onValueChange?.(active);
+    }
   });
-
-  const active = $derived(value ?? tabs[0]?.value);
 </script>
 
 <TabsPrimitive.Root
@@ -48,6 +65,7 @@
   }}
   {orientation}
   class={cx('ldt-tabs', className)}
+  {...rest}
 >
   <TabsPrimitive.List class={cx('ldt-tabs__list', listClass)} aria-label={label}
     >{#each tabs as tab (tab.value)}<TabsPrimitive.Trigger

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

@@ -1,7 +1,8 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { NavItem, Orientation } from '../types.js';
 declare function $$render<T extends string = string>(): {
-    props: {
+    props: Omit<TabsPrimitive.RootProps, "children" | "class" | "value" | "onValueChange" | "ref" | "child" | "orientation"> & {
         /** Defaults to the first tab, so a panel is always rendered. */
         value?: T;
         tabs: NavItem<T>[];
@@ -18,7 +19,7 @@ declare function $$render<T extends string = string>(): {
         ref?: HTMLElement | null;
     };
     exports: {};
-    bindings: "ref" | "value";
+    bindings: "value" | "ref";
     slots: {};
     events: {};
 };
@@ -26,7 +27,7 @@ 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";
+    bindings(): "value" | "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -6,6 +6,6 @@ interface Props extends Omit<HTMLTextareaAttributes, 'value'> {
     class?: string;
     ref?: HTMLTextAreaElement | null;
 }
-declare const Textarea: import("svelte").Component<Props, {}, "ref" | "value">;
+declare const Textarea: import("svelte").Component<Props, {}, "value" | "ref">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { ControlSize } from '../types.js';
+  import type { Theme, ThemePreference } from '../theme.svelte.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLButtonAttributes, 'children' | 'aria-label'> {
+    /** The store from `createTheme()`. */
+    theme: Theme;
+    /** Accessible name for the preference represented by the icon. */
+    label?: string;
+    lightLabel?: string;
+    darkLabel?: string;
+    systemLabel?: string;
+    /** Include "system" in the cycle. */
+    showSystem?: boolean;
+    size?: ControlSize;
+    class?: string;
+    ref?: HTMLButtonElement | null;
+  }
+
+  let {
+    theme,
+    label = 'Colour scheme',
+    lightLabel = 'Light',
+    darkLabel = 'Dark',
+    systemLabel = 'System',
+    showSystem = true,
+    size = 'sm',
+    class: className,
+    disabled = false,
+    type = 'button',
+    title,
+    onclick,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const preferences = $derived<ThemePreference[]>(
+    showSystem ? ['light', 'dark', 'system'] : ['light', 'dark']
+  );
+
+  // If the system option is hidden, represent the scheme that is actually showing and toggle
+  // away from it on the first press.
+  const activePreference = $derived<ThemePreference>(
+    !showSystem && theme.preference === 'system' ? theme.resolved : theme.preference
+  );
+  const currentIndex = $derived(preferences.indexOf(activePreference));
+  const nextPreference = $derived(preferences[(currentIndex + 1) % preferences.length]);
+
+  const preferenceLabel = (preference: ThemePreference) => {
+    if (preference === 'light') return lightLabel;
+    if (preference === 'dark') return darkLabel;
+    return systemLabel;
+  };
+
+  const currentLabel = $derived(preferenceLabel(activePreference));
+  const nextLabel = $derived(preferenceLabel(nextPreference));
+  const buttonLabel = $derived(`${label}: ${currentLabel}`);
+  const buttonTitle = $derived(title ?? `${buttonLabel} → ${nextLabel}`);
+</script>
+
+<!-- A native button gives the three-state cycle standard keyboard behavior in one compact target. -->
+<button
+  bind:this={ref}
+  {type}
+  {disabled}
+  aria-label={buttonLabel}
+  title={buttonTitle}
+  class={cx(
+    'ldt-button ldt-icon-button ldt-button--ghost',
+    size !== 'md' && `ldt-button--${size}`,
+    className
+  )}
+  data-theme-preference={activePreference}
+  onclick={(event) => {
+    theme.preference = nextPreference;
+    onclick?.(event);
+  }}
+  {...rest}
+>
+  {#if activePreference === 'light'}
+    <svg
+      data-theme-icon="light"
+      aria-hidden="true"
+      focusable="false"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="square"
+    >
+      <circle cx="12" cy="12" r="3.5" />
+      <path
+        d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42"
+      />
+    </svg>
+  {:else if activePreference === 'dark'}
+    <svg
+      data-theme-icon="dark"
+      aria-hidden="true"
+      focusable="false"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linejoin="miter"
+    >
+      <path d="M20.4 15.4A8.5 8.5 0 0 1 8.6 3.6 8.5 8.5 0 1 0 20.4 15.4Z" />
+    </svg>
+  {:else}
+    <svg
+      data-theme-icon="system"
+      aria-hidden="true"
+      focusable="false"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+    >
+      <rect x="3" y="4" width="18" height="13" />
+      <path d="M9 21h6M12 17v4" />
+    </svg>
+  {/if}
+</button>

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

@@ -0,0 +1,20 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ControlSize } from '../types.js';
+import type { Theme } from '../theme.svelte.js';
+interface Props extends Omit<HTMLButtonAttributes, 'children' | 'aria-label'> {
+    /** The store from `createTheme()`. */
+    theme: Theme;
+    /** Accessible name for the preference represented by the icon. */
+    label?: string;
+    lightLabel?: string;
+    darkLabel?: string;
+    systemLabel?: string;
+    /** Include "system" in the cycle. */
+    showSystem?: boolean;
+    size?: ControlSize;
+    class?: string;
+    ref?: HTMLButtonElement | null;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "ref">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/Thumbnail.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    src?: string;
+    /** Required whenever `src` is set — decorative images should say so with `alt=""`. */
+    alt?: string;
+    /** CSS aspect-ratio value: `'4/3'`, `'1/1'`, or a number. */
+    ratio?: string | number;
+    fit?: 'contain' | 'cover';
+    /** `sunken` recesses into the page; `paper` stays white in every theme for artwork. */
+    surface?: 'sunken' | 'paper';
+    /** Alternative to `src` — inline SVG, canvas, anything that fills the frame. */
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    src,
+    alt = '',
+    ratio = '4/3',
+    fit = 'contain',
+    surface = 'sunken',
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<figure
+  bind:this={ref}
+  class={cx(
+    'ldt-thumbnail',
+    surface === 'paper' && 'ldt-thumbnail--paper',
+    fit === 'cover' && 'ldt-thumbnail--cover',
+    className
+  )}
+  style={`--ldt-thumbnail-ratio: ${ratio};`}
+  {...rest}
+>
+  {#if children}{@render children()}{:else if src}<img
+      class="ldt-thumbnail__image"
+      {src}
+      {alt}
+      loading="lazy"
+    />{/if}
+</figure>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    src?: string;
+    /** Required whenever `src` is set — decorative images should say so with `alt=""`. */
+    alt?: string;
+    /** CSS aspect-ratio value: `'4/3'`, `'1/1'`, or a number. */
+    ratio?: string | number;
+    fit?: 'contain' | 'cover';
+    /** `sunken` recesses into the page; `paper` stays white in every theme for artwork. */
+    surface?: 'sunken' | 'paper';
+    /** Alternative to `src` — inline SVG, canvas, anything that fills the frame. */
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Thumbnail: import("svelte").Component<Props, {}, "ref">;
+type Thumbnail = ReturnType<typeof Thumbnail>;
+export default Thumbnail;

package/dist/components/ToggleGroup.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" generics="T extends string = string">
+  import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { ControlSize, Option, Orientation } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    options: Option<T>[];
+    /** Narrowed from the DOM attribute: the Bits root this spreads onto rejects `null`. */
+    id?: string;
+    /** Lets more than one option be pressed at once. `value` is then an array. */
+    multiple?: boolean;
+    /** Pressed option, or options when `multiple`. Bindable. */
+    value?: T | T[];
+    /** Accessible name of the group. */
+    label?: string;
+    size?: ControlSize;
+    orientation?: Orientation;
+    disabled?: boolean;
+    /** Renders an option's contents — an icon, say — in place of its plain label. */
+    children?: Snippet<[Option<T>]>;
+    class?: string;
+    itemClass?: string;
+    onValueChange?: (value: T | T[]) => void;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    options,
+    multiple = false,
+    value = $bindable(),
+    label,
+    size = 'md',
+    orientation = 'horizontal',
+    disabled = false,
+    children,
+    class: className,
+    itemClass,
+    onValueChange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const classes = $derived(
+    cx('ldt-toggle-group', size !== 'md' && `ldt-toggle-group--${size}`, className)
+  );
+
+  // As with `Accordion`, only the Root's typing differs between the two modes.
+  const change = (next: string | string[]) => {
+    value = next as T | T[];
+    onValueChange?.(next as T | T[]);
+  };
+</script>
+
+<!--
+  A segmented control: a small, fixed set of choices shown side by side rather than folded into a
+  Select. Single mode is a radio group in behaviour — one press replaces the last — so reach for
+  it when the options are worth showing at all times.
+-->
+{#snippet items()}
+  {#each options as option (option.value)}
+    <ToggleGroupPrimitive.Item
+      value={option.value}
+      disabled={option.disabled}
+      class={cx('ldt-toggle-group__item', itemClass)}
+      >{#if children}{@render children(option)}{:else}{option.label}{/if}</ToggleGroupPrimitive.Item
+    >
+  {/each}
+{/snippet}
+
+{#if multiple}
+  <ToggleGroupPrimitive.Root
+    bind:ref
+    type="multiple"
+    value={(value ?? []) as string[]}
+    onValueChange={change}
+    {orientation}
+    {disabled}
+    class={classes}
+    aria-label={label}
+    {...rest}
+  >
+    {@render items()}
+  </ToggleGroupPrimitive.Root>
+{:else}
+  <!--
+    Rendered through `child` to correct the root's role. In single mode Bits marks the items
+    `role="radio"` but leaves the root at `role="group"`, and a radio must be owned by a
+    `radiogroup` — otherwise assistive tech reports loose radios with no set and no position.
+  -->
+  <ToggleGroupPrimitive.Root
+    bind:ref
+    type="single"
+    value={(value ?? '') as string}
+    onValueChange={change}
+    {orientation}
+    {disabled}
+    class={classes}
+    aria-label={label}
+    {...rest}
+  >
+    {#snippet child({ props })}
+      <div {...props} role="radiogroup">{@render items()}</div>
+    {/snippet}
+  </ToggleGroupPrimitive.Root>
+{/if}

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ControlSize, Option, Orientation } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        options: Option<T>[];
+        /** Narrowed from the DOM attribute: the Bits root this spreads onto rejects `null`. */
+        id?: string;
+        /** Lets more than one option be pressed at once. `value` is then an array. */
+        multiple?: boolean;
+        /** Pressed option, or options when `multiple`. Bindable. */
+        value?: T | T[];
+        /** Accessible name of the group. */
+        label?: string;
+        size?: ControlSize;
+        orientation?: Orientation;
+        disabled?: boolean;
+        /** Renders an option's contents — an icon, say — in place of its plain label. */
+        children?: Snippet<[Option<T>]>;
+        class?: string;
+        itemClass?: 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 ToggleGroup: $$IsomorphicComponent;
+type ToggleGroup<T extends string = string> = InstanceType<typeof ToggleGroup<T>>;
+export default ToggleGroup;

package/dist/components/TooltipProvider.svelte

@@ -6,6 +6,7 @@
   import { Tooltip as TooltipPrimitive } from 'bits-ui';
   import { setContext, type Snippet } from 'svelte';
 
+  // Renderless: no element of its own, so there are no rest attributes to forward.
   interface Props {
     /** Delay before the first tooltip in the group opens. */
     delayDuration?: number;