@noxlovette/material 0.3.0 → 0.3.2

package/dist/components/containers/context-menu/ContextMenu.stories.svelte

@@ -0,0 +1,71 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ContextMenu from './ContextMenu.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Context Menu',
+    component: ContextMenu
+  });
+</script>
+
+<Story name="Playground" asChild>
+  <ContextMenu
+    items={[
+      { label: 'Edit', value: 'edit', iconProps: { name: 'edit' } },
+      { label: 'Duplicate', value: 'duplicate', iconProps: { name: 'content_copy' } },
+      { separator: true },
+      { label: 'Delete', value: 'delete', iconProps: { name: 'delete' } }
+    ]}
+    onselect={(value) => console.log('selected', value)}
+  >
+    <div
+      class="border-md-sys-color-outline text-md-sys-color-on-surface-variant flex size-40 items-center justify-center rounded-lg border border-dashed"
+    >
+      Right click me
+    </div>
+  </ContextMenu>
+</Story>
+
+<Story name="With Submenu" asChild>
+  <ContextMenu
+    items={[
+      { label: 'Edit', value: 'edit', iconProps: { name: 'edit' } },
+      { separator: true },
+      {
+        label: 'Share',
+        value: 'share',
+        iconProps: { name: 'share' },
+        items: [
+          { label: 'Email', value: 'email' },
+          { label: 'Link', value: 'link' }
+        ]
+      },
+      { separator: true },
+      { label: 'Delete', value: 'delete', iconProps: { name: 'delete' } }
+    ]}
+    onselect={(value) => console.log('selected', value)}
+  >
+    <div
+      class="border-md-sys-color-outline text-md-sys-color-on-surface-variant flex size-40 items-center justify-center rounded-lg border border-dashed"
+    >
+      Right click me
+    </div>
+  </ContextMenu>
+</Story>
+
+<Story name="With Selected Item" asChild>
+  <ContextMenu
+    selected="name"
+    items={[
+      { label: 'Name', value: 'name' },
+      { label: 'Date modified', value: 'date' },
+      { label: 'Size', value: 'size' }
+    ]}
+  >
+    <div
+      class="border-md-sys-color-outline text-md-sys-color-on-surface-variant flex size-40 items-center justify-center rounded-lg border border-dashed"
+    >
+      Right click me
+    </div>
+  </ContextMenu>
+</Story>

package/dist/components/containers/context-menu/ContextMenu.stories.svelte.d.ts

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

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -76,7 +76,7 @@ Context menus appear on right-click and provide actions related to the clicked e
                     mode: 'scale'
                   }}
                 >
-                  {#each item.items as subItem}
+                  {#each item.items as subItem (subItem)}
                     {@render MenuItem(subItem)}
                   {/each}
                 </div>
@@ -139,7 +139,7 @@ Context menus appear on right-click and provide actions related to the clicked e
                 mode: 'scale'
               }}
             >
-              {#each items as item}
+              {#each items as item (item)}
                 {@render MenuItem(item)}
               {/each}
             </div>

package/dist/components/containers/divider/Divider.stories.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Divider from './Divider.svelte';
+  import { Body } from '../../../index.js';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Divider',
+    component: Divider,
+    argTypes: {
+      variant: { control: 'select', options: ['full', 'inset', 'wavy'] },
+      orientation: { control: 'select', options: ['horizontal', 'vertical'] }
+    },
+    args: {
+      variant: 'full',
+      orientation: 'horizontal'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="w-96">
+      <Divider variant={args.variant} orientation={args.orientation} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Full" asChild>
+  <div class="w-96">
+    <Divider variant="full" />
+  </div>
+</Story>
+
+<Story name="Inset" asChild>
+  <div class="w-96">
+    <Divider variant="inset" />
+  </div>
+</Story>
+
+<Story name="Wavy" asChild>
+  <div class="w-96">
+    <Divider variant="wavy" />
+  </div>
+</Story>
+
+<Story name="With Label" asChild>
+  <div class="w-96">
+    <Divider>
+      {#snippet children()}
+        OR
+      {/snippet}
+    </Divider>
+  </div>
+</Story>
+
+<Story name="Vertical" asChild>
+  <div class="flex h-24 items-center gap-4">
+    <Body>Left</Body>
+    <Divider orientation="vertical" />
+    <Body>Right</Body>
+  </div>
+</Story>

package/dist/components/containers/divider/Divider.stories.svelte.d.ts

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

package/dist/components/containers/divider/Divider.svelte

@@ -9,7 +9,7 @@ Powered by bits-ui for accessibility.
 @see https://m3.material.io/components/divider/overview
 -->
 <script lang="ts">
-  import { Separator } from 'bits-ui';
+  import { Separator, type SeparatorRootProps } from 'bits-ui';
   import clsx from 'clsx';
   import { hr } from './theme.js';
   import type { HrProps } from './types.js';
@@ -33,7 +33,6 @@ Powered by bits-ui for accessibility.
   );
   let insetClass = $derived(variant === 'inset' ? 'mr-2 ml-4' : '');
 
-  let host = $state<HTMLDivElement | null>(null);
   let width = $state(0);
   let waveHeight = 12;
   let waveThickness = 1;
@@ -43,23 +42,20 @@ Powered by bits-ui for accessibility.
   let right = $derived(Math.max(left, width - waveThickness * 0.5));
   let wavePath = $derived(width > 0 ? linear(waveAmp, waveCenter, left, right, 0) : '');
 
-  $effect(() => {
-    if (variant !== 'wavy' || !host || typeof window === 'undefined') return;
+  function trackWidth(node: HTMLElement) {
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0];
       width = Math.max(0, entry?.contentRect.width ?? 0);
     });
-    observer.observe(host);
-    return () => {
-      observer.disconnect();
-    };
-  });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }
 </script>
 
 {#if variant === 'wavy'}
   <div
     {...restProps}
-    bind:this={host}
+    {@attach trackWidth}
     class={clsx('w-full', insetClass, className)}
     role={decorative ? 'none' : 'separator'}
     aria-orientation={orientation}
@@ -96,5 +92,10 @@ Powered by bits-ui for accessibility.
     <div class={lineClass}></div>
   </div>
 {:else}
-  <Separator.Root {...restProps} {orientation} {decorative} class={clsx(styling, className)} />
+  <Separator.Root
+    {...restProps as SeparatorRootProps}
+    {orientation}
+    {decorative}
+    class={clsx(styling, className)}
+  />
 {/if}

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

@@ -1,11 +1,11 @@
-import type { SeparatorRootProps } from 'bits-ui';
+import type { DivAttrs } from '../../../utils/types.js';
 import type { Snippet } from 'svelte';
 import type { HrVariants } from './theme.js';
 /**
  * Props for the Divider component.
  * Dividers are thin lines that group content in lists and layouts.
  */
-export interface HrProps extends HrVariants, Omit<SeparatorRootProps, 'children' | 'orientation'> {
+export interface HrProps extends HrVariants, DivAttrs {
     /**
      * Optional content to be rendered within the divider (horizontal only).
      * If provided, the divider will show the content centered between two lines.
@@ -24,4 +24,9 @@ export interface HrProps extends HrVariants, Omit<SeparatorRootProps, 'children'
      * @default 'full'
      */
     variant?: HrVariants['variant'];
+    /**
+     * Whether the separator is decorative and should be hidden from assistive technologies.
+     * @default true
+     */
+    decorative?: boolean;
 }

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

@@ -62,7 +62,6 @@ SupportingPane provides a layout with a main content area and a supporting side
     mobileTriggerClass
   }: SupportingPaneProps = $props();
 
-  let entered = $state(false);
   let supportingVisible = $state(true);
   let mobileSheetOpen = $state(false);
   let isLargeScreen = $state(false);
@@ -140,7 +139,6 @@ SupportingPane provides a layout with a main content area and a supporting side
       class={supportingCls({
         class: clsx(supportingClass, inlineSupportingClass)
       })}
-      data-entered={entered}
       data-position={position}
     >
       {@render supporting()}

package/dist/components/nav/rail/RailItem.svelte

@@ -88,6 +88,7 @@ In mobile (navbar) mode the same item renders as a bottom-bar tab.
       <a
         {...props}
         {...rest}
+        href={hrefValue}
         {target}
         {rel}
         aria-disabled={ariaDisabled}

package/dist/components/nav/tabs/TabHolder.svelte

@@ -30,7 +30,7 @@ Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
 
 <Tabs.Root bind:value {onValueChange} {activationMode}>
   <Tabs.List class={base()}>
-    {#each items as item}
+    {#each items as item (item)}
       <Tab {...item} {variant} />
     {/each}
 

package/dist/components/nav/tabs/Tabs.stories.svelte

@@ -33,10 +33,11 @@
 <Story name="Playground">
   {#snippet template(args)}
     <div class="flex flex-col gap-4">
-      <TabHolder {...args} {items} />
-      <TabContent value="flights"><Body>Flights panel content.</Body></TabContent>
-      <TabContent value="trips"><Body>Trips panel content.</Body></TabContent>
-      <TabContent value="explore"><Body>Explore panel content.</Body></TabContent>
+      <TabHolder {...args} {items}>
+        <TabContent value="flights"><Body>Flights panel content.</Body></TabContent>
+        <TabContent value="trips"><Body>Trips panel content.</Body></TabContent>
+        <TabContent value="explore"><Body>Explore panel content.</Body></TabContent>
+      </TabHolder>
     </div>
   {/snippet}
 </Story>

package/dist/components/time/TimepickerInput.svelte

@@ -24,6 +24,7 @@ It follows the Material 3 design for time input pickers.
 
   const cls = timepicker();
 
+  // svelte-ignore state_referenced_locally (timeValue is a one-time editable seed from `time`, then mutated locally via bind:value)
   let timeValue = $state<Time>(parseTime(time?.includes(':') ? time : '00:00'));
 
   const output = $derived(

package/dist/utils/Layer.svelte

@@ -120,7 +120,8 @@
 
     document.addEventListener('pointerdown', (e) => {
       if (e.button !== 0) return;
-      const layer = (e.target as Element).closest('.m3-layer');
+      if (!(e.target instanceof Element)) return;
+      const layer = e.target.closest('.m3-layer');
       if (!layer || !isEnabled(layer)) return;
       const rect = layer.getBoundingClientRect();
       const cancel = createRippleSvg(
@@ -142,8 +143,8 @@
 
     document.addEventListener('keydown', (e) => {
       if (e.repeat) return;
-      const target = e.target as Element;
-      const layer = target.closest('.m3-layer');
+      if (!(e.target instanceof Element)) return;
+      const layer = e.target.closest('.m3-layer');
       if (!layer || !isEnabled(layer)) return;
       const isActivate = e.key === 'Enter' || (e.key === ' ' && layer.tagName === 'BUTTON');
       if (!isActivate) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "license": "MIT",
   "repository": {