@noxlovette/material 0.2.1 → 0.3.0

package/dist/components/containers/menu/Menu.stories.svelte

@@ -0,0 +1,62 @@
+<!--
+  Menu owns its own open/close state internally (bits-ui DropdownMenu.Root bind:open, defaulting
+  to closed) and renders a default filled Button trigger when no `trigger` snippet is supplied —
+  so unlike Dialogue/Popover, no external open state is needed to demo it: clicking the default
+  trigger is enough.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Menu from './Menu.svelte';
+  import MenuItem from '../menu-item/MenuItem.svelte';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import { Divider } from '../../../index.js';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Menu',
+    component: Menu,
+    argTypes: {
+      label: { control: 'text' },
+      align: { control: 'select', options: ['start', 'center', 'end'] }
+    },
+    args: {
+      label: 'Open menu',
+      align: 'start'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="p-6">
+      <Menu label={args.label} align={args.align}>
+        <MenuItem iconProps={{ name: 'content_cut' }}>Cut</MenuItem>
+        <MenuItem iconProps={{ name: 'content_copy' }}>Copy</MenuItem>
+        <MenuItem iconProps={{ name: 'content_paste' }}>Paste</MenuItem>
+      </Menu>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Custom Trigger" asChild>
+  <div class="p-6">
+    <Menu align="end">
+      {#snippet trigger()}
+        <ButtonIcon iconProps={{ name: 'more_vert' }} variant="text" />
+      {/snippet}
+      <MenuItem iconProps={{ name: 'edit' }}>Edit</MenuItem>
+      <MenuItem iconProps={{ name: 'archive' }} helper="Move to archive folder">Archive</MenuItem>
+      <Divider class="my-2" />
+      <MenuItem iconProps={{ name: 'delete' }} disabled>Delete</MenuItem>
+    </Menu>
+  </div>
+</Story>
+
+<Story name="With Selected Item" asChild>
+  <div class="p-6">
+    <Menu label="Sort by">
+      <MenuItem selected>Name</MenuItem>
+      <MenuItem>Date modified</MenuItem>
+      <MenuItem>Size</MenuItem>
+    </Menu>
+  </div>
+</Story>

package/dist/components/containers/menu/Menu.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Menu from './Menu.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 Menu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Menu = InstanceType<typeof Menu>;
+export default Menu;

package/dist/components/containers/panes/SinglePane.stories.svelte

@@ -0,0 +1,67 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SinglePane from './SinglePane.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Single Pane',
+    component: SinglePane,
+    argTypes: {
+      centered: {
+        control: 'select',
+        options: ['none', 'narrow', 'medium']
+      },
+      padding: {
+        control: 'select',
+        options: ['none', 'sm', 'md', 'lg']
+      },
+      gap: {
+        control: 'select',
+        options: ['none', 'sm', 'md', 'lg', 'xl']
+      },
+      background: { control: 'boolean' },
+      full: { control: 'boolean' },
+      rounded: { control: 'boolean' }
+    },
+    args: {
+      centered: 'medium',
+      padding: 'md',
+      gap: 'md',
+      background: true,
+      full: false,
+      rounded: true
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <SinglePane
+      centered={args.centered}
+      padding={args.padding}
+      gap={args.gap}
+      background={args.background}
+      full={args.full}
+      rounded={args.rounded}
+    >
+      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block one</div>
+      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block two</div>
+      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block three</div>
+    </SinglePane>
+  {/snippet}
+</Story>
+
+<Story name="Centered Widths" asChild>
+  <div class="flex flex-col gap-6">
+    <SinglePane centered="narrow" background={false}>
+      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">narrow</div>
+    </SinglePane>
+    <SinglePane centered="medium" background={false}>
+      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">medium</div>
+    </SinglePane>
+    <SinglePane centered="none" background={false}>
+      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">
+        none (full width)
+      </div>
+    </SinglePane>
+  </div>
+</Story>

package/dist/components/containers/panes/SinglePane.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import SinglePane from './SinglePane.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 SinglePane: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SinglePane = InstanceType<typeof SinglePane>;
+export default SinglePane;

package/dist/components/containers/panes/SplitPane.stories.svelte

@@ -0,0 +1,124 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SplitPane from './SplitPane.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Split Pane',
+    component: SplitPane,
+    argTypes: {
+      anchor: {
+        control: 'select',
+        options: ['viewport', 'parent', 'sticky']
+      },
+      resizable: { control: 'boolean' },
+      leftWidth: { control: 'number' },
+      minLeft: { control: 'number' },
+      maxLeft: { control: 'number' },
+      full: { control: 'boolean' },
+      rounded: { control: 'boolean' },
+      mobilePane: {
+        control: 'select',
+        options: ['left', 'right']
+      }
+    },
+    args: {
+      anchor: 'parent',
+      resizable: true,
+      leftWidth: 320,
+      minLeft: 240,
+      maxLeft: 560,
+      full: false,
+      rounded: true,
+      mobilePane: 'right'
+    }
+  });
+</script>
+
+<!--
+  Playground uses anchor="parent" (bounded/relative container) since it's the
+  only mode that demos meaningfully inside Storybook's iframe canvas — "viewport"
+  fixes to the true browser edge and "sticky" needs a real scrolling page.
+-->
+<Story name="Playground">
+  {#snippet template(args)}
+    <div
+      class="relative h-[420px] overflow-hidden rounded-lg border border-md-sys-color-outline-variant"
+    >
+      <SplitPane {...args}>
+        {#snippet left()}
+          <div class="p-4">
+            <p class="md-sys-typescale-title-small mb-2">Left pane</p>
+            <p class="text-md-sys-color-on-surface-variant text-sm">
+              Drag the handle to resize. Persisted to localStorage when resizable.
+            </p>
+          </div>
+        {/snippet}
+        {#snippet right()}
+          <div class="p-4">
+            <p class="md-sys-typescale-title-small mb-2">Right pane</p>
+            <p class="text-md-sys-color-on-surface-variant text-sm">Main content area.</p>
+          </div>
+        {/snippet}
+      </SplitPane>
+    </div>
+  {/snippet}
+</Story>
+
+<!--
+  anchor="viewport" — left pane fixes to the true browser edge. Meant for a
+  full-page app layout where SplitPane is the outermost positioned element
+  (e.g. the root Rail). Shown here at a reduced height so the fixed left pane
+  is still visible inside the story canvas.
+-->
+<Story name="Anchor Viewport" asChild>
+  <div
+    class="relative h-[420px] overflow-hidden rounded-lg border border-md-sys-color-outline-variant"
+  >
+    <SplitPane anchor="viewport" resizable={false} leftWidth={280}>
+      {#snippet left()}
+        <div class="p-4">
+          <p class="md-sys-typescale-title-small mb-2">Fixed to viewport edge</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">
+            In a real page this pane is position: fixed to the true left edge of the browser.
+          </p>
+        </div>
+      {/snippet}
+      {#snippet right()}
+        <div class="p-4">
+          <p class="text-md-sys-color-on-surface-variant text-sm">Right / main content.</p>
+        </div>
+      {/snippet}
+    </SplitPane>
+  </div>
+</Story>
+
+<!--
+  anchor="sticky" — left/right sit in normal flex flow and the left pane
+  sticks (position: sticky) as the page scrolls. Used for a sidebar nested
+  inside other already-offset content, e.g. the docs secondary nav. Paired
+  with resizable={false} for a static, non-draggable sidebar. Needs a tall
+  scrollable right pane to demonstrate the sticky behaviour.
+-->
+<Story name="Anchor Sticky" asChild>
+  <div class="h-[420px] overflow-y-auto rounded-lg border border-md-sys-color-outline-variant">
+    <SplitPane anchor="sticky" resizable={false} leftWidth={240} rounded={false}>
+      {#snippet left()}
+        <div class="p-4">
+          <p class="md-sys-typescale-title-small mb-2">Sticky nav</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">
+            Stays pinned to the top of the viewport while the right pane scrolls past it.
+          </p>
+        </div>
+      {/snippet}
+      {#snippet right()}
+        <div class="flex flex-col gap-4 p-4">
+          {#each Array(12) as _, i}
+            <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
+              Scrollable content block {i + 1}
+            </div>
+          {/each}
+        </div>
+      {/snippet}
+    </SplitPane>
+  </div>
+</Story>

package/dist/components/containers/panes/SplitPane.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import SplitPane from './SplitPane.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 SplitPane: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SplitPane = InstanceType<typeof SplitPane>;
+export default SplitPane;

package/dist/components/containers/panes/SplitPane.svelte

@@ -1,6 +1,7 @@
 <!--
 @component
-SplitPane provides a resizable two-column layout.
+SplitPane provides a two-column layout. Set `resizable={false}` for a static,
+non-draggable sidebar (e.g. a docs nav) instead of a user-resizable split.
 -->
 <script lang="ts">
   import type { SplitPaneProps } from './types.js';
@@ -16,6 +17,7 @@ SplitPane provides a resizable two-column layout.
     leftWidth = $bindable(396),
     full = true,
     rounded = true,
+    resizable = true,
     minLeft = 280,
     maxLeft = 720,
     storageKey = 'splitpane:leftWidth',
@@ -76,7 +78,7 @@ SplitPane provides a resizable two-column layout.
   onMount(() => {
     mounted = true;
 
-    if (persist && typeof localStorage !== 'undefined') {
+    if (resizable && persist && typeof localStorage !== 'undefined') {
       const stored = Number(localStorage.getItem(storageKey));
       if (!Number.isNaN(stored)) {
         leftWidth = clampWidth(stored);
@@ -96,7 +98,7 @@ SplitPane provides a resizable two-column layout.
   });
 
   $effect(() => {
-    if (!persist || typeof localStorage === 'undefined') return;
+    if (!resizable || !persist || typeof localStorage === 'undefined') return;
     localStorage.setItem(storageKey, String(leftWidth));
   });
 </script>
@@ -113,25 +115,27 @@ SplitPane provides a resizable two-column layout.
   </div>
 
   <!-- DRAG HANDLE -->
-  <div
-    class={hCls()}
-    role="separator"
-    aria-orientation="vertical"
-    aria-valuenow={leftWidth}
-    aria-valuemin={minLeft}
-    aria-valuemax={maxLeft}
-    style={`left: ${handleOffset};`}
-    onpointerdown={startDrag}
-    onpointermove={moveDrag}
-    onpointerup={endDrag}
-    onpointercancel={endDrag}
-  >
+  {#if resizable}
     <div
-      class={handleGrip({
-        class: clsx(dragging && 'w-0.5')
-      })}
-    ></div>
-  </div>
+      class={hCls()}
+      role="separator"
+      aria-orientation="vertical"
+      aria-valuenow={leftWidth}
+      aria-valuemin={minLeft}
+      aria-valuemax={maxLeft}
+      style={anchor === 'sticky' ? undefined : `left: ${handleOffset};`}
+      onpointerdown={startDrag}
+      onpointermove={moveDrag}
+      onpointerup={endDrag}
+      onpointercancel={endDrag}
+    >
+      <div
+        class={handleGrip({
+          class: clsx(dragging && 'w-0.5')
+        })}
+      ></div>
+    </div>
+  {/if}
 
   <!-- RIGHT PANE -->
   <div class={rCls({ class: clsx(rightClass, rightMobileClass) })}>

package/dist/components/containers/panes/SplitPane.svelte.d.ts

@@ -1,5 +1,8 @@
 import type { SplitPaneProps } from './types.js';
-/** SplitPane provides a resizable two-column layout. */
+/**
+ * SplitPane provides a two-column layout. Set `resizable={false}` for a static,
+ * non-draggable sidebar (e.g. a docs nav) instead of a user-resizable split.
+ */
 declare const SplitPane: import("svelte").Component<SplitPaneProps, {}, "leftWidth">;
 type SplitPane = ReturnType<typeof SplitPane>;
 export default SplitPane;

package/dist/components/containers/panes/SupportingPane.stories.svelte

@@ -0,0 +1,113 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SupportingPane from './SupportingPane.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Supporting Pane',
+    component: SupportingPane,
+    argTypes: {
+      anchor: {
+        control: 'select',
+        options: ['viewport', 'parent']
+      },
+      position: {
+        control: 'select',
+        options: ['left', 'right']
+      },
+      centered: { control: 'boolean' },
+      rounded: { control: 'boolean' },
+      full: { control: 'boolean' },
+      gap: {
+        control: 'select',
+        options: ['none', 'sm', 'md', 'lg']
+      },
+      collapsible: { control: 'boolean' },
+      supportingWidth: { control: 'number' },
+      mobileSheet: { control: 'boolean' }
+    },
+    args: {
+      anchor: 'parent',
+      position: 'right',
+      centered: false,
+      rounded: false,
+      full: false,
+      gap: 'md',
+      collapsible: false,
+      supportingWidth: 320,
+      mobileSheet: false
+    }
+  });
+</script>
+
+<!--
+  anchor="parent" demos meaningfully in a bounded box (classic sticky-while-
+  scrolling-the-page behaviour). anchor="viewport" — used by the docs pages'
+  own "On this page" TOC — fixes the supporting pane to the true browser edge,
+  which only reads correctly on a real scrolling page, not inside Storybook's
+  iframe canvas.
+-->
+<Story name="Playground">
+  {#snippet template(args)}
+    <SupportingPane {...args}>
+      {#snippet main()}
+        <div class="flex flex-col gap-4 p-4">
+          {#each Array(6) as _, i}
+            <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
+              Main content block {i + 1}
+            </div>
+          {/each}
+        </div>
+      {/snippet}
+      {#snippet supporting()}
+        <div class="bg-md-sys-color-surface-container rounded-lg p-4">
+          <p class="md-sys-typescale-title-small mb-2">Supporting content</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">
+            Fixed-width side panel — e.g. a table of contents or contextual actions.
+          </p>
+        </div>
+      {/snippet}
+    </SupportingPane>
+  {/snippet}
+</Story>
+
+<Story name="Collapsible" asChild>
+  <SupportingPane anchor="parent" position="right" collapsible>
+    {#snippet main()}
+      <div class="flex flex-col gap-4 p-4">
+        {#each Array(4) as _, i}
+          <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
+            Main content block {i + 1}
+          </div>
+        {/each}
+      </div>
+    {/snippet}
+    {#snippet supporting()}
+      <div class="bg-md-sys-color-surface-container rounded-lg p-4">
+        <p class="md-sys-typescale-title-small mb-2">Collapsible panel</p>
+        <p class="text-md-sys-color-on-surface-variant text-sm">
+          A toggle button appears over the main pane to hide/show this panel (desktop only).
+        </p>
+      </div>
+    {/snippet}
+  </SupportingPane>
+</Story>
+
+<Story name="Position Left" asChild>
+  <SupportingPane anchor="parent" position="left">
+    {#snippet main()}
+      <div class="flex flex-col gap-4 p-4">
+        {#each Array(4) as _, i}
+          <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
+            Main content block {i + 1}
+          </div>
+        {/each}
+      </div>
+    {/snippet}
+    {#snippet supporting()}
+      <div class="bg-md-sys-color-surface-container rounded-lg p-4">
+        <p class="md-sys-typescale-title-small mb-2">Supporting content</p>
+        <p class="text-md-sys-color-on-surface-variant text-sm">Panel rendered on the left.</p>
+      </div>
+    {/snippet}
+  </SupportingPane>
+</Story>

package/dist/components/containers/panes/SupportingPane.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import SupportingPane from './SupportingPane.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 SupportingPane: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SupportingPane = InstanceType<typeof SupportingPane>;
+export default SupportingPane;

package/dist/components/containers/panes/theme.d.ts

@@ -13,6 +13,12 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
             left: string;
             handle: string;
         };
+        sticky: {
+            base: string;
+            left: string;
+            handle: string;
+            right: string;
+        };
     };
     full: {
         true: {
@@ -49,6 +55,12 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
             left: string;
             handle: string;
         };
+        sticky: {
+            base: string;
+            left: string;
+            handle: string;
+            right: string;
+        };
     };
     full: {
         true: {
@@ -85,6 +97,12 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
             left: string;
             handle: string;
         };
+        sticky: {
+            base: string;
+            left: string;
+            handle: string;
+            right: string;
+        };
     };
     full: {
         true: {

package/dist/components/containers/panes/theme.js

@@ -18,6 +18,17 @@ export const splitPane = tv({
                 base: 'relative',
                 left: 'md:absolute',
                 handle: 'absolute'
+            },
+            // In-flow flex row: left/right sit side by side and the left pane sticks
+            // as the page scrolls, instead of being fixed/absolute. Use for nested
+            // sidebars (e.g. a secondary docs nav) that live inside an already
+            // width-offset content column, where "viewport" would fix to the true
+            // left edge and "parent" would lose sticky-while-scrolling behaviour.
+            sticky: {
+                base: 'md:flex md:flex-row',
+                left: 'shrink-0 md:sticky md:top-0 md:self-start md:max-h-dvh',
+                handle: 'md:sticky md:top-0 md:ml-0 md:h-dvh md:translate-x-0 md:self-start',
+                right: 'md:ml-0 md:grow md:min-w-0'
             }
         },
         full: {

package/dist/components/containers/panes/types.d.ts

@@ -36,8 +36,24 @@ export type SplitPaneProps = SplitPaneVariants & DivAttrs & {
     persist?: boolean;
     /** Called when the component wants to update external footer padding. */
     onPaddingChange?: (padding: number) => void;
-    /** The anchor mode for the panes. */
+    /**
+     * The anchor mode for the panes.
+     * - `viewport` — left pane fixes to the true browser edge (full-page app layouts).
+     * - `parent` — left pane is absolutely positioned within a `relative` ancestor
+     *   (embedded/contained demos, does not stick while scrolling).
+     * - `sticky` — left/right sit in normal flex flow and the left pane sticks as
+     *   the page scrolls. Use for a sidebar nested inside other offset content
+     *   (e.g. a secondary docs nav inside an already Rail-offset column), where
+     *   `viewport` would fix to the wrong edge and `parent` would lose sticky
+     *   behaviour. Typically paired with `resizable={false}`.
+     */
     anchor?: SplitPaneVariants['anchor'];
+    /**
+     * Whether the split is user-draggable. Set to `false` for a static sidebar —
+     * hides the drag handle and skips width persistence.
+     * @default true
+     */
+    resizable?: boolean;
     /**
      * Which pane to show on mobile. On desktop both panes are always visible.
      * @default 'right'