@noxlovette/material 0.3.2 → 0.4.0

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';

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

@@ -6,111 +6,126 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
         vertical: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
     };
     variant: {
         floating: {
             root: string;
+            segment: string;
         };
         docked: {
             root: string;
-        };
-        mobile: {
-            root: string;
+            segment: string;
         };
     };
     color: {
         standard: {
-            root: string;
+            segment: string;
         };
         vibrant: {
-            root: string;
+            segment: string;
         };
     };
 }, {
     root: string;
+    segment: string;
     group: string;
     divider: string;
+    spacer: string;
     fabSlot: string;
     ghost: string;
 }, undefined, {
     orientation: {
         horizontal: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
         vertical: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
     };
     variant: {
         floating: {
             root: string;
+            segment: string;
         };
         docked: {
             root: string;
-        };
-        mobile: {
-            root: string;
+            segment: string;
         };
     };
     color: {
         standard: {
-            root: string;
+            segment: string;
         };
         vibrant: {
-            root: string;
+            segment: string;
         };
     };
 }, {
     root: string;
+    segment: string;
     group: string;
     divider: string;
+    spacer: string;
     fabSlot: string;
     ghost: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
         vertical: {
             root: string;
+            segment: string;
+            group: string;
             divider: string;
         };
     };
     variant: {
         floating: {
             root: string;
+            segment: string;
         };
         docked: {
             root: string;
-        };
-        mobile: {
-            root: string;
+            segment: string;
         };
     };
     color: {
         standard: {
-            root: string;
+            segment: string;
         };
         vibrant: {
-            root: string;
+            segment: string;
         };
     };
 }, {
     root: string;
+    segment: string;
     group: string;
     divider: string;
+    spacer: string;
     fabSlot: string;
     ghost: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
     color: {
         standard: {
@@ -135,7 +150,7 @@ export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     color: {
         standard: {
             base: string;
@@ -147,7 +162,7 @@ export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const toolbarGroupItem: import("tailwind-variants").TVReturnType<{
     color: {
         standard: {
@@ -172,7 +187,7 @@ export declare const toolbarGroupItem: import("tailwind-variants").TVReturnType<
 }, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     color: {
         standard: {
             base: string;
@@ -184,4 +199,4 @@ export declare const toolbarGroupItem: import("tailwind-variants").TVReturnType<
 }, {
     base: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/toolbar/theme.js

@@ -1,27 +1,43 @@
 import { tv } from 'tailwind-variants';
 export const toolbar = tv({
     slots: {
-        root: 'items-center gap-0.5 px-2',
-        group: 'inline-flex items-center gap-0.5',
+        // Layout/position only — no paint. Holds one implicit `segment` by default, or,
+        // with `sections`, whatever ToolbarSection/ToolbarSpacer children the consumer supplies.
+        root: 'flex items-center gap-2',
+        // The pill/bar surface itself — bg, shape, elevation, chrome padding. Toolbar renders
+        // exactly one of these around `children` by default; ToolbarSection renders one per
+        // cluster when `sections` splits the toolbar into independently painted groups.
+        segment: 'inline-flex items-center gap-1 p-2 justify-between',
+        group: 'inline-flex items-center gap-1',
         divider: 'shrink-0 bg-md-sys-color-outline-variant',
+        // A marker gap between ToolbarSections under `sections` — same size as `root`'s own
+        // `gap-2`, it does not grow, so it doesn't push sections apart to opposite edges.
+        spacer: '',
         fabSlot: 'ml-auto flex items-center ps-2',
         ghost: 'h-16 w-full shrink-0 pointer-events-none'
     },
     variants: {
         orientation: {
-            horizontal: { root: 'flex-row', divider: 'mx-1 h-6 w-px' },
-            vertical: { root: 'flex-col h-auto w-14 py-2 px-1', divider: 'my-1 h-px w-6' }
+            horizontal: {
+                root: 'flex-row',
+                segment: 'flex-row h-13',
+                group: 'flex-row',
+                divider: 'mx-1 h-6 w-px'
+            },
+            vertical: {
+                root: 'flex-col h-max',
+                segment: 'flex-col w-14',
+                group: 'flex-col',
+                divider: 'my-1 h-px w-6'
+            }
         },
         variant: {
-            floating: { root: 'inline-flex rounded-2xl shadow-elevation-1 py-1' },
-            docked: { root: 'flex w-full rounded-none py-3' },
-            mobile: {
-                root: 'flex w-full rounded-none py-3 fixed bottom-20 left-0 z-10 shadow-elevation-2'
-            }
+            floating: { root: 'inline-flex', segment: 'rounded-full shadow-elevation-1' },
+            docked: { root: 'fixed left-0 z-10 w-full', segment: 'w-full rounded-none' }
         },
         color: {
-            standard: { root: 'bg-md-sys-color-surface-container' },
-            vibrant: { root: 'bg-md-sys-color-secondary-container' }
+            standard: { segment: 'bg-md-sys-color-surface-container' },
+            vibrant: { segment: 'bg-md-sys-color-secondary-container' }
         }
     },
     defaultVariants: {