@noxlovette/material 0.3.2 → 0.4.0

package/dist/utils/ThemeScript.svelte

@@ -13,5 +13,5 @@ Add this to your root +layout.svelte (or any layout that wraps the whole app):
 </script>
 
 <svelte:head>
-  {@html `<script>${THEME_INIT_SCRIPT}</script>`}
+  {@html '<' + 'script>' + THEME_INIT_SCRIPT + '</' + 'script>'}
 </svelte:head>

package/dist/utils/icon/theme.d.ts

@@ -2,29 +2,29 @@ import { type VariantProps } from 'tailwind-variants';
 export type LoadingIndicatorVariants = VariantProps<typeof loadingIndicator>;
 export declare const loadingIndicator: import("tailwind-variants").TVReturnType<{
     center: {
-        true: string;
-        false: string;
+        true: "mx-auto";
+        false: "";
     };
     container: {
-        true: string;
-        false: string;
+        true: "text-md-sys-color-on-primary-container bg-md-sys-color-primary-container";
+        false: "text-md-sys-color-primary";
     };
 }, undefined, "rounded-full", {
     center: {
-        true: string;
-        false: string;
+        true: "mx-auto";
+        false: "";
     };
     container: {
-        true: string;
-        false: string;
+        true: "text-md-sys-color-on-primary-container bg-md-sys-color-primary-container";
+        false: "text-md-sys-color-primary";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     center: {
-        true: string;
-        false: string;
+        true: "mx-auto";
+        false: "";
     };
     container: {
-        true: string;
-        false: string;
+        true: "text-md-sys-color-on-primary-container bg-md-sys-color-primary-container";
+        false: "text-md-sys-color-primary";
     };
-}, undefined, "rounded-full", unknown, unknown, undefined>>;
+}, undefined>>;

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "repository": {
-    "url": "git+https://github.com/noxlovette/material.git"
+    "url": "git+https://codeberg.org/noxlovette/material.git"
   },
   "scripts": {
-    "build": "svelte-package && bun scripts/copy-skill.ts",
+    "build": "svelte-package",
+    "watch": "svelte-package --watch",
     "prepublishOnly": "bun run build",
     "check": "svelte-kit sync && svelte-check",
     "test": "vitest run",
     "format": "prettier --write .",
     "dev": "vite dev",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "bin": {
-    "material-claude-skill": "./bin/install-skill.js"
+    "build-storybook": "storybook build",
+    "index": "bun run scripts/generate-components-index.ts"
   },
   "files": [
     "dist",
@@ -48,51 +47,53 @@
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "@storybook/addon-a11y": "10.5.2",
-    "@storybook/addon-docs": "10.5.2",
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-docs": "10.5.10",
     "@storybook/addon-svelte-csf": "5.1.2",
-    "@storybook/svelte-vite": "10.5.2",
+    "@storybook/svelte-vite": "10.5.10",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.69.3",
+    "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "6.2.4",
-    "@tailwindcss/cli": "^4.3.2",
+    "@sveltejs/vite-plugin-svelte": "7.3.0",
+    "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
-    "@tailwindcss/vite": "^4.3.2",
-    "@types/node": "^25.9.5",
-    "eslint": "^10.7.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.4.0",
+    "eslint": "^10.9.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.20.0",
-    "globals": "^17.7.0",
-    "lefthook": "^2.1.10",
-    "prettier": "^3.9.5",
+    "eslint-plugin-svelte": "^3.23.0",
+    "globals": "^17.11.0",
+    "lefthook": "^2.1.12",
+    "prettier": "^3.9.6",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-svelte": "^4.1.1",
-    "prettier-plugin-tailwindcss": "^0.8.0",
-    "publint": "^0.3.21",
-    "shiki": "^4.3.1",
-    "storybook": "10.5.2",
-    "svelte": "^5.56.5",
-    "svelte-check": "^4.7.2",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "publint": "^0.3.24",
+    "shiki": "^4.4.3",
+    "storybook": "10.5.10",
+    "svelte": "^5.57.0",
+    "svelte-check": "^4.7.6",
     "sveltekit-superforms": "^2.30.2",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss": "^4.3.2",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.64.0",
-    "vite": "7.3.6",
-    "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^4.1.10",
-    "zod": "^4.4.3"
+    "tailwindcss": "^4.3.3",
+    "typescript": "6",
+    "typescript-eslint": "^8.69.0",
+    "vite": "8.2.2",
+    "vite-plugin-devtools-json": "^1.1.0",
+    "vitest": "^4.1.11",
+    "zod": "^4.5.4"
   },
   "dependencies": {
+    "@dicebear/core": "^10.7.0",
+    "@dicebear/styles": "^10.6.0",
     "@floating-ui/dom": "^1.8.0",
-    "@internationalized/date": "^3.12.2",
+    "@internationalized/date": "^3.12.3",
     "@ktibow/material-color-utilities-nightly": "^0.4.1772748028000",
-    "bits-ui": "^2.18.1",
+    "bits-ui": "^2.19.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
-    "nanoid": "^5.1.16",
+    "nanoid": "^6.0.1",
     "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.2.2"
+    "tailwind-variants": "^3.3.1"
   }
 }

package/bin/install-skill.js

@@ -1,29 +0,0 @@
-#!/usr/bin/env node
-import { cpSync, existsSync, mkdirSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const source = join(__dirname, '..', 'claude-skill', 'material-design');
-const destDir = join(process.cwd(), '.claude', 'skills');
-const dest = join(destDir, 'material-design');
-const force = process.argv.includes('--force');
-
-if (!existsSync(source)) {
-  console.error(
-    'Could not find the bundled material-design skill. Reinstall @noxlovette/material and try again.'
-  );
-  process.exit(1);
-}
-
-if (existsSync(dest) && !force) {
-  console.error(
-    `.claude/skills/material-design already exists. Re-run with --force to overwrite it.`
-  );
-  process.exit(1);
-}
-
-mkdirSync(destDir, { recursive: true });
-cpSync(source, dest, { recursive: true, force: true });
-
-console.log(`Installed the material-design Claude Code skill to .claude/skills/material-design`);

package/dist/components/buttons/button-group/ButtonGroupItem.svelte

@@ -1,41 +0,0 @@
-<!--
-@component
-A single button within a ButtonGroup.
-Displays a leading check icon when selected, per M3 spec.
--->
-<script lang="ts">
-  import { ToggleGroup } from 'bits-ui';
-  import clsx from 'clsx';
-  import { getContext } from 'svelte';
-  import { Icon, Layer } from '../../../utils/index.js';
-  import { buttonGroupItem } from './theme.js';
-  import type { ButtonGroupItemProps } from './types.js';
-
-  let {
-    value,
-    label,
-    iconProps,
-    disabled = false,
-    class: className
-  }: ButtonGroupItemProps = $props();
-
-  const buttonGroupCtx = getContext<{ orientation: 'horizontal' | 'vertical' } | undefined>(
-    'buttonGroup'
-  );
-  const orientation = $derived(buttonGroupCtx?.orientation ?? 'horizontal');
-  const { base, checkIcon, icon } = $derived(buttonGroupItem({ orientation }));
-</script>
-
-<ToggleGroup.Item {value} {disabled} class={base({ class: clsx(className) })}>
-  {#snippet children({ pressed })}
-    {#if pressed}
-      <Icon name="check" class={checkIcon()} />
-    {:else if iconProps}
-      <Icon {...iconProps} class={icon()} />
-    {/if}
-    {#if label}
-      <span>{label}</span>
-    {/if}
-    <Layer />
-  {/snippet}
-</ToggleGroup.Item>

package/dist/components/buttons/button-group/ButtonGroupItem.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { ButtonGroupItemProps } from './types.js';
-/**
- * A single button within a ButtonGroup.
- * Displays a leading check icon when selected, per M3 spec.
- */
-declare const ButtonGroupItem: import("svelte").Component<ButtonGroupItemProps, {}, "">;
-type ButtonGroupItem = ReturnType<typeof ButtonGroupItem>;
-export default ButtonGroupItem;

package/dist/components/buttons/connected/ConnectedButtons.svelte

@@ -1,14 +0,0 @@
-<!--
-@component
-A container for grouping buttons with shared borders and rounding.
-Typically used for segmented controls or closely related actions.
--->
-<script lang="ts">
-  import type { ConnectedButtonsProps } from './types.js';
-
-  let { children, ...rest }: ConnectedButtonsProps = $props();
-</script>
-
-<div class="grid auto-cols-fr grid-flow-col gap-0.5 overflow-hidden rounded-full" {...rest}>
-  {@render children()}
-</div>

package/dist/components/buttons/connected/ConnectedButtons.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { ConnectedButtonsProps } from './types.js';
-/**
- * A container for grouping buttons with shared borders and rounding.
- * Typically used for segmented controls or closely related actions.
- */
-declare const ConnectedButtons: import("svelte").Component<ConnectedButtonsProps, {}, "">;
-type ConnectedButtons = ReturnType<typeof ConnectedButtons>;
-export default ConnectedButtons;

package/dist/components/containers/menu-item/MenuItem.svelte

@@ -1,74 +0,0 @@
-<!--
-@component
-A single interactive row inside a `Menu`.
-
-`MenuItem` is the leaf node of the menu system. It wraps bits-ui's
-`DropdownMenu.Item` so each row automatically gets keyboard navigation,
-focus management, and the ARIA `menuitem` role.
-
-Pass `onclick` (or `onSelect`) for the action; use `iconProps` for a
-leading icon and `helper` for a supporting line below the label.
-
-Contrast with `Menu`, which is just the shell (open state + floating panel),
-and `ContextMenu`, which owns its own item list and is right-click triggered.
-
-@see https://m3.material.io/components/menus/guidelines
--->
-<script lang="ts">
-  import type { MenuItemProps } from './types.js';
-  import Icon from '../../../utils/icon/Icon.svelte';
-  import Layer from '../../../utils/Layer.svelte';
-  import { DropdownMenu } from 'bits-ui';
-  import { tv } from 'tailwind-variants';
-
-  let {
-    iconProps,
-    disabled = false,
-    onclick,
-    onSelect,
-    selected,
-    helper,
-    children,
-    ...restProps
-  }: MenuItemProps & Record<string, any> = $props();
-
-  // bits-ui fires onSelect at the Item level; avoid wiring onclick to the
-  // native button as well or it would fire twice on every click.
-  const handleSelect = $derived(onSelect ?? (onclick ? () => onclick() : undefined));
-
-  const itemClass = $derived(
-    tv({
-      base: 'relative flex w-full cursor-pointer items-start gap-3 border-none bg-transparent px-4 py-3 text-left md-sys-typescale-body-large whitespace-nowrap text-md-sys-color-on-surface hover:bg-md-sys-color-on-surface/8 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-primary disabled:cursor-not-allowed disabled:opacity-38',
-      variants: {
-        selected: {
-          true: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
-        }
-      }
-    })({ selected })
-  );
-</script>
-
-<DropdownMenu.Item {disabled} onSelect={handleSelect}>
-  <button {...restProps} type="button" class={itemClass} {disabled}>
-    {#if iconProps}
-      <Icon class="text-md-sys-color-on-surface-variant size-6 text-[24px]" {...iconProps} />
-    {/if}
-
-    <div class="flex flex-1 flex-col gap-1">
-      <span class="md-sys-typescale-body-large text-md-sys-color-on-surface">
-        {@render children()}
-      </span>
-      {#if helper}
-        <span class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant">
-          {helper}
-        </span>
-      {/if}
-    </div>
-
-    {#if selected}
-      <Icon aria-hidden="true" name="check" />
-    {/if}
-
-    <Layer />
-  </button>
-</DropdownMenu.Item>

package/dist/components/containers/merger/InputMerger.svelte

@@ -1,29 +0,0 @@
-<!--
-@component
-InputMerger is a container that groups multiple input components together visually.
--->
-<script lang="ts">
-  import clsx from 'clsx';
-
-  interface Props {
-    /**
-     * The input components to be merged.
-     */
-    children: import('svelte').Snippet;
-    /**
-     * Additional CSS classes for the container.
-     */
-    class?: string;
-  }
-
-  let { children, class: className = '' }: Props = $props();
-</script>
-
-<div
-  class={clsx(
-    className,
-    'border-primary padding-default gap-narrow grid max-h-max w-full shrink rounded-none border-x-0 px-0 md:rounded-2xl md:border-x-2 md:px-2.5'
-  )}
->
-  {@render children()}
-</div>

package/dist/components/containers/merger/InputMerger.svelte.d.ts

@@ -1,14 +0,0 @@
-interface Props {
-    /**
-     * The input components to be merged.
-     */
-    children: import('svelte').Snippet;
-    /**
-     * Additional CSS classes for the container.
-     */
-    class?: string;
-}
-/** InputMerger is a container that groups multiple input components together visually. */
-declare const InputMerger: import("svelte").Component<Props, {}, "">;
-type InputMerger = ReturnType<typeof InputMerger>;
-export default InputMerger;

package/dist/components/containers/merger/index.d.ts

@@ -1 +0,0 @@
-export { default as InputMerger } from './InputMerger.svelte';

package/dist/components/containers/merger/index.js

@@ -1,3 +0,0 @@
-// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
-// default exports for components in this folder
-export { default as InputMerger } from './InputMerger.svelte';

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

@@ -1,67 +0,0 @@
-<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.svelte

@@ -1,32 +0,0 @@
-<!--
-@component
-SinglePane provides a centered or full-width container for content.
--->
-<script lang="ts">
-  import clsx from 'clsx';
-  import { singlePane } from './theme.js';
-  import type { SinglePaneProps } from './types.js';
-
-  const {
-    children,
-    centered = 'none',
-    background = true,
-    full = true,
-    padding = 'md',
-    gap = 'md',
-    rounded = true,
-    class: className,
-    contentClass,
-    ...rest
-  }: SinglePaneProps = $props();
-
-  const { base, content } = $derived(
-    singlePane({ padding, gap, centered, full, background, rounded })
-  );
-</script>
-
-<div class={base({ class: clsx(className) })} {...rest}>
-  <div class={content({ class: clsx(contentClass) })}>
-    {@render children()}
-  </div>
-</div>

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

@@ -1,5 +0,0 @@
-import type { SinglePaneProps } from './types.js';
-/** SinglePane provides a centered or full-width container for content. */
-declare const SinglePane: import("svelte").Component<SinglePaneProps, {}, "">;
-type SinglePane = ReturnType<typeof SinglePane>;
-export default SinglePane;

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

@@ -1,124 +0,0 @@
-<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>