@noxlovette/material 0.3.3 → 0.4.1

package/dist/components/table/Table.svelte

@@ -14,7 +14,7 @@ Compose with TableHead, TableBody, TableFoot, TableRow, TableCell, and TableHead
 </script>
 
 {#if rounded}
-  <div class="ring-md-sys-color-outline-variant overflow-hidden rounded-xl ring-1">
+  <div class="ring-md-sys-color-outline-variant overflow-x-auto rounded-sm ring-1">
     <table class={root({ class: clsx(className) })} {...restProps}>
       {@render children()}
     </table>

package/dist/components/table/TableBody.svelte

@@ -1,17 +1,30 @@
 <!--
 @component
-Wraps the data rows of a Table.
+Wraps the data rows of a Table. Rows are keyboard-navigable by default: Tab/Shift+Tab
+stop on the table once (roving tabindex), and ArrowUp/ArrowDown or k/j move focus
+between rows. Set `navigable={false}` to opt a purely presentational table out.
 -->
 <script lang="ts">
   import type { TableBodyProps } from './types.js';
   import { table } from './theme.js';
+  import { rovingFocusGroup } from '../../actions/index.js';
   import clsx from 'clsx';
 
-  let { children, class: className, ...restProps }: TableBodyProps = $props();
+  let {
+    children,
+    navigable = true,
+    loop = false,
+    class: className,
+    ...restProps
+  }: TableBodyProps = $props();
 
   const { body } = table();
 </script>
 
-<tbody class={body({ class: clsx(className) })} {...restProps}>
+<tbody
+  class={body({ class: clsx(className) })}
+  use:rovingFocusGroup={{ candidateSelector: '[data-table-row]', loop, enabled: navigable }}
+  {...restProps}
+>
   {@render children()}
 </tbody>

package/dist/components/table/TableBody.svelte.d.ts

@@ -1,5 +1,9 @@
 import type { TableBodyProps } from './types.js';
-/** Wraps the data rows of a Table. */
+/**
+ * Wraps the data rows of a Table. Rows are keyboard-navigable by default: Tab/Shift+Tab
+ * stop on the table once (roving tabindex), and ArrowUp/ArrowDown or k/j move focus
+ * between rows. Set `navigable={false}` to opt a purely presentational table out.
+ */
 declare const TableBody: import("svelte").Component<TableBodyProps, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

package/dist/components/table/TableRow.svelte

@@ -19,6 +19,6 @@ and `hoverable` to show a hover background (e.g. for clickable rows).
   const { row } = $derived(table({ selected, hoverable }));
 </script>
 
-<tr class={row({ class: clsx(className) })} {...restProps}>
+<tr data-table-row class={row({ class: clsx(className) })} {...restProps}>
   {@render children()}
 </tr>

package/dist/components/table/theme.d.ts

@@ -107,7 +107,7 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     row: string;
     cell: string;
     header: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     hoverable: {
         true: {
             row: string;
@@ -161,5 +161,5 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     row: string;
     cell: string;
     header: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TableVariants = VariantProps<typeof table>;

package/dist/components/table/theme.js

@@ -5,8 +5,8 @@ export const table = tv({
         head: '',
         body: '[&_tr:last-child]:border-b-0',
         foot: 'border-t border-md-sys-color-outline-variant',
-        row: 'border-b border-md-sys-color-outline-variant transition-colors',
-        cell: 'px-4 py-3 align-middle',
+        row: 'border-b border-md-sys-color-outline-variant transition-colors focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-md-sys-color-primary',
+        cell: 'px-4 py-3 align-middle wrap-anywhere',
         header: 'px-4 py-4 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface font-medium whitespace-nowrap'
     },
     variants: {

package/dist/components/table/types.d.ts

@@ -13,6 +13,13 @@ export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement> & {
 };
 export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
     children: Snippet;
+    /**
+     * Make rows keyboard-navigable: roving tabindex so Tab/Shift+Tab stop on the table
+     * once, and ArrowUp/ArrowDown (or k/j) move focus between rows. Default `true`.
+     */
+    navigable?: boolean;
+    /** Loop focus from the last row back to the first (and vice versa). Default `false`. */
+    loop?: boolean;
 };
 export type TableFootProps = HTMLAttributes<HTMLTableSectionElement> & {
     children: Snippet;

package/dist/components/time/theme.d.ts

@@ -2,28 +2,28 @@ import { type VariantProps } from 'tailwind-variants';
 export type TimepickerVariants = VariantProps<typeof timepicker>;
 export declare const timepicker: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            headline?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            clockDiv?: import("tailwind-merge").ClassNameValue;
-            buttonDiv?: import("tailwind-merge").ClassNameValue;
-            fieldSeparator?: import("tailwind-merge").ClassNameValue;
-            timeInput?: import("tailwind-merge").ClassNameValue;
-            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            headline?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            clockDiv?: import("tailwind-variants").ClassValue;
+            buttonDiv?: import("tailwind-variants").ClassValue;
+            fieldSeparator?: import("tailwind-variants").ClassValue;
+            timeInput?: import("tailwind-variants").ClassValue;
+            timeInputSupportingText?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            headline?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            clockDiv?: import("tailwind-merge").ClassNameValue;
-            buttonDiv?: import("tailwind-merge").ClassNameValue;
-            fieldSeparator?: import("tailwind-merge").ClassNameValue;
-            timeInput?: import("tailwind-merge").ClassNameValue;
-            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            headline?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            clockDiv?: import("tailwind-variants").ClassValue;
+            buttonDiv?: import("tailwind-variants").ClassValue;
+            fieldSeparator?: import("tailwind-variants").ClassValue;
+            timeInput?: import("tailwind-variants").ClassValue;
+            timeInputSupportingText?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -37,15 +37,15 @@ export declare const timepicker: import("tailwind-variants").TVReturnType<{
     timeInputSupportingText: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            headline?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            clockDiv?: import("tailwind-merge").ClassNameValue;
-            buttonDiv?: import("tailwind-merge").ClassNameValue;
-            fieldSeparator?: import("tailwind-merge").ClassNameValue;
-            timeInput?: import("tailwind-merge").ClassNameValue;
-            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            headline?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            clockDiv?: import("tailwind-variants").ClassValue;
+            buttonDiv?: import("tailwind-variants").ClassValue;
+            fieldSeparator?: import("tailwind-variants").ClassValue;
+            timeInput?: import("tailwind-variants").ClassValue;
+            timeInputSupportingText?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -57,7 +57,7 @@ export declare const timepicker: import("tailwind-variants").TVReturnType<{
     fieldSeparator: string;
     timeInput: string;
     timeInputSupportingText: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
     clockDiv: string;
     buttonDiv: string;
@@ -66,4 +66,4 @@ export declare const timepicker: import("tailwind-variants").TVReturnType<{
     fieldSeparator: string;
     timeInput: string;
     timeInputSupportingText: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/toolbar/Toolbar.stories.svelte

@@ -0,0 +1,71 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Toolbar from './Toolbar.svelte';
+  import ToolbarButton from './ToolbarButton.svelte';
+  import ToolbarDivider from './ToolbarDivider.svelte';
+  import ToolbarGroup from './ToolbarGroup.svelte';
+  import ToolbarGroupItem from './ToolbarGroupItem.svelte';
+  import ToolbarSection from './ToolbarSection.svelte';
+  import ToolbarSpacer from './ToolbarSpacer.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Toolbar/Toolbar',
+    component: Toolbar
+  });
+</script>
+
+<Story name="Playground" asChild>
+  <Toolbar>
+    <ToolbarButton iconProps={{ name: 'format_bold' }} />
+    <ToolbarButton iconProps={{ name: 'format_italic' }} />
+    <ToolbarDivider />
+    <ToolbarButton iconProps={{ name: 'format_underlined' }} />
+  </Toolbar>
+</Story>
+
+<Story name="Sections">
+  {#snippet template()}
+    <div class="w-120">
+      <Toolbar sections class="w-full">
+        <ToolbarSection>
+          <ToolbarButton iconProps={{ name: 'format_bold' }} />
+          <ToolbarButton iconProps={{ name: 'format_italic' }} />
+        </ToolbarSection>
+        <ToolbarSpacer />
+        <ToolbarSection>
+          <ToolbarButton iconProps={{ name: 'share' }} />
+          <ToolbarButton iconProps={{ name: 'settings' }} />
+        </ToolbarSection>
+      </Toolbar>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Vertical" asChild>
+  <Toolbar orientation="vertical">
+    <ToolbarGroup type="single">
+      <ToolbarGroupItem value="bold" iconProps={{ name: 'format_bold' }} />
+      <ToolbarGroupItem value="italic" iconProps={{ name: 'format_italic' }} />
+    </ToolbarGroup>
+    <ToolbarDivider />
+    <ToolbarButton iconProps={{ name: 'format_underlined' }} />
+  </Toolbar>
+</Story>
+
+<Story name="VerticalSections">
+  {#snippet template()}
+    <div class="h-120">
+      <Toolbar orientation="vertical" sections class="h-full">
+        <ToolbarSection>
+          <ToolbarButton iconProps={{ name: 'format_bold' }} />
+          <ToolbarButton iconProps={{ name: 'format_italic' }} />
+        </ToolbarSection>
+        <ToolbarSpacer />
+        <ToolbarSection>
+          <ToolbarButton iconProps={{ name: 'share' }} />
+          <ToolbarButton iconProps={{ name: 'settings' }} />
+        </ToolbarSection>
+      </Toolbar>
+    </div>
+  {/snippet}
+</Story>

package/dist/components/toolbar/Toolbar.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Toolbar from './Toolbar.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toolbar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toolbar = InstanceType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/toolbar/Toolbar.svelte

@@ -4,11 +4,17 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
 
 - variant="floating" — elevated, rounded, inline (default)
 - variant="docked"   — full-width, flat, anchored to top/bottom
-- variant="mobile"   — fixed above the bottom Navbar (bottom-20), full-width
-- ghost             — renders a h-16 spacer after the toolbar to prevent content scroll-under (pair with variant="mobile")
+- ghost             — renders a h-16 spacer after the toolbar to prevent content scroll-under
 - color="standard"   — surface-container background
 - color="vibrant"    — secondary-container background with inverted toggle selection
 - fab snippet        — renders a FAB at the trailing edge (canonical for docked bottom bars)
+- sections           — splits the pill/bar into independently painted surfaces: root becomes a
+                        plain flex layout and `children` render raw, so compose it from
+                        `ToolbarSection` clusters (each gets its own bg/shape/elevation),
+                        separated by `ToolbarSpacer` — a plain marker gap, the same size as
+                        the toolbar's normal item spacing, not a flex-growing push to opposite
+                        edges. Default (false) renders one implicit ToolbarSection around all
+                        of `children`, unchanged from before.
 
 @see https://m3.material.io/components/toolbars
 -->
@@ -27,6 +33,7 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
     loop = true,
     variant = 'floating',
     color = 'standard',
+    sections = false,
     class: className,
     ...restProps
   }: ToolbarProps = $props();
@@ -37,6 +44,9 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
     },
     get orientation() {
       return orientation;
+    },
+    get variant() {
+      return variant;
     }
   };
   setContext('toolbar', toolbarCtx);
@@ -45,7 +55,13 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
 </script>
 
 <Toolbar.Root {orientation} {loop} class={cls.root({ class: clsx(className) })} {...restProps}>
-  {@render children?.()}
+  {#if sections}
+    {@render children?.()}
+  {:else}
+    <div class={cls.segment()}>
+      {@render children?.()}
+    </div>
+  {/if}
   {#if fab}
     <div class={cls.fabSlot()}>
       {@render fab()}

package/dist/components/toolbar/Toolbar.svelte.d.ts

@@ -5,11 +5,17 @@ import type { ToolbarProps } from './types.js';
  *
  * - variant="floating" — elevated, rounded, inline (default)
  * - variant="docked"   — full-width, flat, anchored to top/bottom
- * - variant="mobile"   — fixed above the bottom Navbar (bottom-20), full-width
- * - ghost             — renders a h-16 spacer after the toolbar to prevent content scroll-under (pair with variant="mobile")
+ * - ghost             — renders a h-16 spacer after the toolbar to prevent content scroll-under
  * - color="standard"   — surface-container background
  * - color="vibrant"    — secondary-container background with inverted toggle selection
  * - fab snippet        — renders a FAB at the trailing edge (canonical for docked bottom bars)
+ * - sections           — splits the pill/bar into independently painted surfaces: root becomes a
+ * plain flex layout and `children` render raw, so compose it from
+ * `ToolbarSection` clusters (each gets its own bg/shape/elevation),
+ * separated by `ToolbarSpacer` — a plain marker gap, the same size as
+ * the toolbar's normal item spacing, not a flex-growing push to opposite
+ * edges. Default (false) renders one implicit ToolbarSection around all
+ * of `children`, unchanged from before.
  *
  * @see https://m3.material.io/components/toolbars
  */

package/dist/components/toolbar/ToolbarButton.svelte

@@ -11,10 +11,14 @@ Color is inherited from the parent Toolbar via context.
   import { toolbarButton } from './theme.js';
   import type { ToolbarButtonProps } from './types.js';
   import type { ToolbarColor } from './types.js';
+  import Tooltip from '../forms/tooltip/Tooltip.svelte';
 
   let {
     iconProps,
+    avatar,
     disabled = false,
+    tooltipContent,
+    triggerClass = '',
     class: className,
     ...restProps
   }: ToolbarButtonProps = $props();
@@ -24,9 +28,29 @@ Color is inherited from the parent Toolbar via context.
   );
   const color = $derived(toolbarCtx?.color ?? 'standard');
   const { base, icon } = $derived(toolbarButton({ color }));
+
+  const btnCls = $derived(base({ class: clsx(className) }));
 </script>
 
-<Toolbar.Button {disabled} class={base({ class: clsx(className) })} {...restProps}>
-  <Icon {...iconProps} class={icon()} />
-  <Layer />
-</Toolbar.Button>
+<Tooltip {triggerClass} variant="snack" supportingText={tooltipContent}>
+  {#snippet trigger({
+    class: triggerClass_,
+    type: _tooltipType,
+    onclick: _tooltipOnclick,
+    ...triggerAttrs
+  })}
+    <Toolbar.Button
+      {disabled}
+      class={clsx(btnCls, triggerClass_ as string)}
+      {...restProps}
+      {...triggerAttrs}
+    >
+      {#if avatar}
+        {@render avatar()}
+      {:else if iconProps}
+        <Icon {...iconProps} class={icon()} />
+      {/if}
+      <Layer />
+    </Toolbar.Button>
+  {/snippet}
+</Tooltip>

package/dist/components/toolbar/ToolbarDivider.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { toolbar } from './theme.js';
+  import { toolbar, type ToolbarVariants } from './theme.js';
 
   const toolbarCtx = getContext<
-    { color: string; orientation: 'horizontal' | 'vertical' } | undefined
+    | { color: string; orientation: 'horizontal' | 'vertical'; variant: ToolbarVariants['variant'] }
+    | undefined
   >('toolbar');
   const orientation = $derived(toolbarCtx?.orientation ?? 'horizontal');
-  const cls = $derived(toolbar({ orientation }));
+  const cls = $derived(toolbar({ orientation, variant: toolbarCtx?.variant }));
 
   // separator runs perpendicular to the toolbar flow
   const ariaOrientation = $derived(orientation === 'horizontal' ? 'vertical' : 'horizontal');

package/dist/components/toolbar/ToolbarGroup.svelte

@@ -5,12 +5,17 @@ A toggle group within a Toolbar. Manages single or multiple selection.
 <script lang="ts">
   import { Toolbar } from 'bits-ui';
   import clsx from 'clsx';
-  import { toolbar } from './theme.js';
+  import { getContext } from 'svelte';
+  import { toolbar, type ToolbarVariants } from './theme.js';
   import type { ToolbarGroupProps } from './types.js';
 
   let { children, disabled = false, class: className, ...restProps }: ToolbarGroupProps = $props();
 
-  const cls = toolbar();
+  const toolbarCtx = getContext<{ orientation: ToolbarVariants['orientation'] } | undefined>(
+    'toolbar'
+  );
+
+  const cls = $derived(toolbar({ orientation: toolbarCtx?.orientation }));
 </script>
 
 <Toolbar.Group {disabled} class={cls.group({ class: clsx(className) })} {...restProps}>

package/dist/components/toolbar/ToolbarGroupItem.svelte

@@ -12,11 +12,15 @@ Color is inherited from the parent Toolbar via context.
   import { toolbarGroupItem } from './theme.js';
   import type { ToolbarGroupItemProps } from './types.js';
   import type { ToolbarColor } from './types.js';
+  import Tooltip from '../forms/tooltip/Tooltip.svelte';
 
   let {
     iconProps,
+    avatar,
     value,
     disabled = false,
+    tooltipContent,
+    triggerClass = '',
     class: className,
     ...restProps
   }: ToolbarGroupItemProps = $props();
@@ -26,9 +30,30 @@ Color is inherited from the parent Toolbar via context.
   );
   const color = $derived(toolbarCtx?.color ?? 'standard');
   const { base, icon } = $derived(toolbarGroupItem({ color }));
+
+  const btnCls = $derived(base({ class: clsx(className) }));
 </script>
 
-<Toolbar.GroupItem {value} {disabled} class={base({ class: clsx(className) })} {...restProps}>
-  <Icon {...iconProps} class={icon()} />
-  <Layer />
-</Toolbar.GroupItem>
+<Tooltip {triggerClass} variant="snack" supportingText={tooltipContent}>
+  {#snippet trigger({
+    class: triggerClass_,
+    type: _tooltipType,
+    onclick: _tooltipOnclick,
+    ...triggerAttrs
+  })}
+    <Toolbar.GroupItem
+      {value}
+      {disabled}
+      class={clsx(btnCls, triggerClass_ as string)}
+      {...restProps}
+      {...triggerAttrs}
+    >
+      {#if avatar}
+        {@render avatar()}
+      {:else if iconProps}
+        <Icon {...iconProps} class={icon()} />
+      {/if}
+      <Layer />
+    </Toolbar.GroupItem>
+  {/snippet}
+</Tooltip>

package/dist/components/toolbar/ToolbarSection.svelte

@@ -0,0 +1,35 @@
+<!--
+@component
+One independently painted cluster within a `<Toolbar sections>` — gets its own bg/shape/
+elevation matching the parent Toolbar's variant/color. Combine with ToolbarSpacer to split
+one toolbar into two or more visually separate surfaces.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { getContext } from 'svelte';
+  import { toolbar, type ToolbarVariants } from './theme.js';
+  import type { ToolbarSectionProps } from './types.js';
+
+  let { children, class: className, ...restProps }: ToolbarSectionProps = $props();
+
+  const toolbarCtx = getContext<
+    | {
+        color: ToolbarVariants['color'];
+        orientation: ToolbarVariants['orientation'];
+        variant: ToolbarVariants['variant'];
+      }
+    | undefined
+  >('toolbar');
+
+  const cls = $derived(
+    toolbar({
+      orientation: toolbarCtx?.orientation,
+      variant: toolbarCtx?.variant,
+      color: toolbarCtx?.color
+    })
+  );
+</script>
+
+<div class={cls.segment({ class: clsx(className) })} {...restProps}>
+  {@render children?.()}
+</div>

package/dist/components/toolbar/ToolbarSection.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ToolbarSectionProps } from './types.js';
+/**
+ * One independently painted cluster within a `<Toolbar sections>` — gets its own bg/shape/
+ * elevation matching the parent Toolbar's variant/color. Combine with ToolbarSpacer to split
+ * one toolbar into two or more visually separate surfaces.
+ */
+declare const ToolbarSection: import("svelte").Component<ToolbarSectionProps, {}, "">;
+type ToolbarSection = ReturnType<typeof ToolbarSection>;
+export default ToolbarSection;

package/dist/components/toolbar/ToolbarSpacer.svelte

@@ -0,0 +1,18 @@
+<!--
+@component
+A plain marker gap between `ToolbarSection`s under `<Toolbar sections>` — visually the same
+as the toolbar's normal item spacing, it does not grow, so sections stay adjacent rather than
+being pushed apart to opposite edges. (For pushing trailing children to the far edge of a
+single segment, use `fabSlot`/the `fab` prop instead — that's a flex-`ml-auto` push, not this.)
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { toolbar } from './theme.js';
+  import type { ToolbarSpacerProps } from './types.js';
+
+  let { class: className, ...restProps }: ToolbarSpacerProps = $props();
+
+  const cls = toolbar();
+</script>
+
+<div class={cls.spacer({ class: clsx(className) })} {...restProps}></div>

package/dist/components/toolbar/ToolbarSpacer.svelte.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A plain marker gap between `ToolbarSection`s under `<Toolbar sections>` — visually the same
+ * as the toolbar's normal item spacing, it does not grow, so sections stay adjacent rather than
+ * being pushed apart to opposite edges. (For pushing trailing children to the far edge of a
+ * single segment, use `fabSlot`/the `fab` prop instead — that's a flex-`ml-auto` push, not this.)
+ */
+declare const ToolbarSpacer: import("svelte").Component<import("../../index.js").DivAttrs, {}, "">;
+type ToolbarSpacer = ReturnType<typeof ToolbarSpacer>;
+export default ToolbarSpacer;

package/dist/components/toolbar/index.d.ts

@@ -5,3 +5,5 @@ export { default as ToolbarButton } from './ToolbarButton.svelte';
 export { default as ToolbarDivider } from './ToolbarDivider.svelte';
 export { default as ToolbarGroup } from './ToolbarGroup.svelte';
 export { default as ToolbarGroupItem } from './ToolbarGroupItem.svelte';
+export { default as ToolbarSection } from './ToolbarSection.svelte';
+export { default as ToolbarSpacer } from './ToolbarSpacer.svelte';

package/dist/components/toolbar/index.js

@@ -8,3 +8,5 @@ export { default as ToolbarButton } from './ToolbarButton.svelte';
 export { default as ToolbarDivider } from './ToolbarDivider.svelte';
 export { default as ToolbarGroup } from './ToolbarGroup.svelte';
 export { default as ToolbarGroupItem } from './ToolbarGroupItem.svelte';
+export { default as ToolbarSection } from './ToolbarSection.svelte';
+export { default as ToolbarSpacer } from './ToolbarSpacer.svelte';