@loidolt/theme-svelte 0.2.0 → 0.3.0

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,14 @@
     contentClass,
     onValueChange,
     ref = $bindable(null),
+    ...rest
   }: Props = $props();
 
-  $effect(() => {
-    if (value === undefined && tabs.length > 0) value = tabs[0].value;
-  });
-
-  const active = $derived(value ?? tabs[0]?.value);
+  // 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
+  );
 </script>
 
 <TabsPrimitive.Root
@@ -48,6 +55,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,62 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { ControlSize, Option } from '../types.js';
+  import type { Theme, ThemePreference } from '../theme.svelte.js';
+  import ToggleGroup from './ToggleGroup.svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The store from `createTheme()`. */
+    theme: Theme;
+    /** Narrowed from the DOM attribute: the group this spreads onto rejects `null`. */
+    id?: string;
+    /** Accessible name of the group. */
+    label?: string;
+    lightLabel?: string;
+    darkLabel?: string;
+    systemLabel?: string;
+    /**
+     * Offers "system" alongside the two schemes. Worth keeping: without it a user who has not
+     * chosen is silently locked to whichever scheme they happened to land on.
+     */
+    showSystem?: boolean;
+    size?: ControlSize;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    theme,
+    label = 'Colour scheme',
+    lightLabel = 'Light',
+    darkLabel = 'Dark',
+    systemLabel = 'System',
+    showSystem = true,
+    size = 'sm',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived<Option<ThemePreference>[]>([
+    { value: 'light', label: lightLabel },
+    { value: 'dark', label: darkLabel },
+    ...(showSystem ? [{ value: 'system' as const, label: systemLabel }] : []),
+  ]);
+</script>
+
+<!--
+  A segmented scheme picker wired to `createTheme()`. Pressing the pressed option is ignored: a
+  toggle group deselects on a second press, and "no colour scheme" is not a state a page can be in.
+-->
+<ToggleGroup
+  bind:ref
+  {options}
+  {label}
+  {size}
+  value={theme.preference}
+  onValueChange={(next) => {
+    if (next) theme.preference = next as ThemePreference;
+  }}
+  class={className}
+  {...rest}
+/>

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

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ControlSize } from '../types.js';
+import type { Theme } from '../theme.svelte.js';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The store from `createTheme()`. */
+    theme: Theme;
+    /** Narrowed from the DOM attribute: the group this spreads onto rejects `null`. */
+    id?: string;
+    /** Accessible name of the group. */
+    label?: string;
+    lightLabel?: string;
+    darkLabel?: string;
+    systemLabel?: string;
+    /**
+     * Offers "system" alongside the two schemes. Worth keeping: without it a user who has not
+     * chosen is silently locked to whichever scheme they happened to land on.
+     */
+    showSystem?: boolean;
+    size?: ControlSize;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "ref">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

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;

package/dist/components/Workspace.svelte

@@ -7,6 +7,14 @@
     sidebar?: Snippet;
     children: Snippet;
     inspector?: Snippet;
+    /**
+     * Collapses the sidebar column when `false` — the toggle behind a "hide navigation" control.
+     * The snippet is left unrendered rather than hidden, so nothing in it holds focus or is
+     * reachable by the tab order while collapsed.
+     */
+    sidebarOpen?: boolean;
+    /** The same for the inspector column. */
+    inspectorOpen?: boolean;
     class?: string;
     ref?: HTMLDivElement | null;
   }
@@ -15,24 +23,29 @@
     sidebar,
     children,
     inspector,
+    sidebarOpen = true,
+    inspectorOpen = true,
     class: className,
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+
+  const showSidebar = $derived(Boolean(sidebar) && sidebarOpen);
+  const showInspector = $derived(Boolean(inspector) && inspectorOpen);
 </script>
 
-<!-- The grid columns follow the snippets that are actually present. -->
+<!-- The grid columns follow the panes that are actually rendered. -->
 <div
   bind:this={ref}
   class={cx(
     'ldt-workspace',
-    sidebar && 'ldt-workspace--sidebar',
-    inspector && 'ldt-workspace--inspector',
+    showSidebar && 'ldt-workspace--sidebar',
+    showInspector && 'ldt-workspace--inspector',
     className
   )}
   {...rest}
 >
-  {#if sidebar}{@render sidebar()}{/if}
+  {#if showSidebar}{@render sidebar!()}{/if}
   <div class="ldt-workspace__main">{@render children()}</div>
-  {#if inspector}{@render inspector()}{/if}
+  {#if showInspector}{@render inspector!()}{/if}
 </div>

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

@@ -4,6 +4,14 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     sidebar?: Snippet;
     children: Snippet;
     inspector?: Snippet;
+    /**
+     * Collapses the sidebar column when `false` — the toggle behind a "hide navigation" control.
+     * The snippet is left unrendered rather than hidden, so nothing in it holds focus or is
+     * reachable by the tab order while collapsed.
+     */
+    sidebarOpen?: boolean;
+    /** The same for the inspector column. */
+    inspectorOpen?: boolean;
     class?: string;
     ref?: HTMLDivElement | null;
 }

package/dist/index.d.ts

@@ -1,20 +1,27 @@
+export { default as Accordion } from './components/Accordion.svelte';
 export { default as Alert } from './components/Alert.svelte';
+export { default as AlertDialog } from './components/AlertDialog.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 Breadcrumbs } from './components/Breadcrumbs.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 Drawer } from './components/Drawer.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as Field } from './components/Field.svelte';
+export { default as Fieldset } from './components/Fieldset.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 Pagination } from './components/Pagination.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';
@@ -27,10 +34,13 @@ 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 TableHeader } from './components/TableHeader.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
+export { default as ThemeToggle } from './components/ThemeToggle.svelte';
 export { default as Toast } from './components/Toast.svelte';
 export { default as ToastViewport } from './components/ToastViewport.svelte';
+export { default as ToggleGroup } from './components/ToggleGroup.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';
@@ -39,8 +49,12 @@ 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 { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Pagination as PaginationPrimitive, Popover as PopoverPrimitive, Tabs as TabsPrimitive, ToggleGroup as ToggleGroupPrimitive, 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';
+export { createTheme, themeScript } from './theme.svelte.js';
+export type { ColorScheme, Theme, ThemeOptions, ThemePreference, ThemeScriptOptions, } from './theme.svelte.js';
+export { breakpointQuery, createMediaQuery } from './media.svelte.js';
+export type { BreakpointName, MediaQuery, MediaQueryOptions } from './media.svelte.js';
+export type { ActionVariant, Alignment, BadgeSize, BadgeVariant, ColumnAlign, Crumb, Disclosure, ControlSize, DialogSize, HeadingLevel, MenuItem, NavItem, Option, Orientation, Placement, SortDirection, StatusVariant, TriggerChildProps, } from './types.js';

package/dist/index.js

@@ -1,20 +1,27 @@
+export { default as Accordion } from './components/Accordion.svelte';
 export { default as Alert } from './components/Alert.svelte';
+export { default as AlertDialog } from './components/AlertDialog.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 Breadcrumbs } from './components/Breadcrumbs.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 Drawer } from './components/Drawer.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as Field } from './components/Field.svelte';
+export { default as Fieldset } from './components/Fieldset.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 Pagination } from './components/Pagination.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';
@@ -27,10 +34,13 @@ 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 TableHeader } from './components/TableHeader.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
+export { default as ThemeToggle } from './components/ThemeToggle.svelte';
 export { default as Toast } from './components/Toast.svelte';
 export { default as ToastViewport } from './components/ToastViewport.svelte';
+export { default as ToggleGroup } from './components/ToggleGroup.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';
@@ -39,6 +49,8 @@ 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 { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Pagination as PaginationPrimitive, Popover as PopoverPrimitive, Tabs as TabsPrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive, } from 'bits-ui';
 export { cx } from './utils.js';
 export { createToaster } from './toaster.svelte.js';
+export { createTheme, themeScript } from './theme.svelte.js';
+export { breakpointQuery, createMediaQuery } from './media.svelte.js';