@noxlovette/material 0.3.3 → 0.4.1

package/dist/styles/component.css

@@ -7,9 +7,13 @@
   }
 
   .md-component-button-base {
-    @apply state-layer md-sys-state-focus-indicator disabled:bg-md-sys-color-on-surface/10 disabled:text-md-sys-color-on-surface/38 disabled:before:bg-md-sys-color-on-surface/38 relative inline-flex items-center justify-center select-none disabled:cursor-not-allowed;
+    /* `relative` is applied as a literal utility token at each call site (theme.ts), not
+     * baked in here — that lets tailwind-merge dedupe it against a caller-supplied
+     * `fixed`/`absolute`/`sticky` override. Baking it into this custom class's own compiled
+     * CSS rule would set `position` outside of anything twMerge can see or override. */
+    @apply state-layer md-sys-state-focus-indicator disabled:bg-md-sys-color-on-surface/10 disabled:text-md-sys-color-on-surface/38 disabled:before:bg-md-sys-color-on-surface/38 inline-flex items-center justify-center select-none disabled:cursor-not-allowed;
     transition: box-shadow var(--md-sys-motion-duration, 200ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
   }
 
   .md-btn-morph {
@@ -30,6 +34,124 @@
     }
   }
 
+  /*
+   * Standard button group (https://m3.material.io/components/button-groups/overview).
+   * A plain flex row/column of otherwise-untouched Button/ButtonIcon/Toggle children.
+   * `data-size` drives both the fixed gap between buttons and the padding-inline
+   * "squeeze" below — pressing one button grows its own padding and shrinks its
+   * immediate neighbors', which is the M3-specified adjacent-button interaction.
+   * `:has()` scopes the shrink to only the pressed button's direct neighbors.
+   */
+  .md-btn-group-standard {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: max-content;
+
+    &[data-orientation='vertical'] {
+      flex-direction: column;
+      align-items: stretch;
+      width: auto;
+    }
+
+    &[data-size='xs'] {
+      --btn-group-gap: 1.125rem;
+      --btn-group-base-px: 1rem;
+      --btn-group-squeeze: 0.375rem;
+    }
+    &[data-size='sm'] {
+      --btn-group-gap: 0.75rem;
+      --btn-group-base-px: 1rem;
+      --btn-group-squeeze: 0.375rem;
+    }
+    &[data-size='md'] {
+      --btn-group-gap: 0.5rem;
+      --btn-group-base-px: 1.5rem;
+      --btn-group-squeeze: 0.5rem;
+    }
+    &[data-size='lg'] {
+      --btn-group-gap: 0.5rem;
+      --btn-group-base-px: 3rem;
+      --btn-group-squeeze: 0.75rem;
+    }
+    &[data-size='xl'] {
+      --btn-group-gap: 0.5rem;
+      --btn-group-base-px: 4rem;
+      --btn-group-squeeze: 1rem;
+    }
+
+    gap: var(--btn-group-gap, 0.5rem);
+
+    > * {
+      padding-inline: var(--btn-group-base-px, 1rem);
+      transition:
+        padding-inline var(--md-sys-motion-duration-fast-spatial, 350ms)
+          var(--md-sys-motion-timing-function-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.9)),
+        border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+    }
+
+    > *:active:not(:disabled) {
+      padding-inline: calc(var(--btn-group-base-px, 1rem) + var(--btn-group-squeeze, 0.5rem));
+    }
+
+    > *:has(+ *:active:not(:disabled)),
+    > *:active:not(:disabled) + * {
+      padding-inline: max(
+        0px,
+        calc(var(--btn-group-base-px, 1rem) - var(--btn-group-squeeze, 0.5rem))
+      );
+    }
+  }
+
+  /*
+   * Connected button group item — replaces the deprecated segmented button.
+   * `--cbg-inner` (per size) is the shared radius facing a neighbor; `--cbg-outer`
+   * defaults to fully round and is only overridden (to equal --cbg-inner) for the
+   * square shape, so the position rules below become no-ops in that case.
+   * Selecting/pressing an item collapses all four of its own corners to
+   * --cbg-inner ("round to square") without touching its neighbors' shape.
+   */
+  .md-btn-connected {
+    border-radius: var(--cbg-inner, 9999px);
+    transition:
+      border-radius 250ms var(--md-sys-motion-timing-function-emphasized-accel),
+      background-color var(--md-sys-motion-duration-fast, 150ms)
+        var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1)),
+      color var(--md-sys-motion-duration-fast, 150ms)
+        var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+
+    &:only-child {
+      border-radius: var(--cbg-outer, 9999px);
+    }
+
+    &[data-orientation='horizontal']:first-child:not(:only-child) {
+      border-top-left-radius: var(--cbg-outer, 9999px);
+      border-bottom-left-radius: var(--cbg-outer, 9999px);
+    }
+    &[data-orientation='horizontal']:last-child:not(:only-child) {
+      border-top-right-radius: var(--cbg-outer, 9999px);
+      border-bottom-right-radius: var(--cbg-outer, 9999px);
+    }
+    &[data-orientation='vertical']:first-child:not(:only-child) {
+      border-top-left-radius: var(--cbg-outer, 9999px);
+      border-top-right-radius: var(--cbg-outer, 9999px);
+    }
+    &[data-orientation='vertical']:last-child:not(:only-child) {
+      border-bottom-left-radius: var(--cbg-outer, 9999px);
+      border-bottom-right-radius: var(--cbg-outer, 9999px);
+    }
+
+    &:active:not(:disabled),
+    &[data-state='on'] {
+      border-radius: var(--cbg-inner, 4px) !important;
+      transition-timing-function: var(--md-sys-motion-timing-function-emphasized-decel);
+    }
+
+    &:active:not(:disabled) {
+      transition-duration: 150ms;
+    }
+  }
+
   .md-component-button-filled-primary {
     @apply bg-md-sys-color-primary text-md-sys-color-on-primary;
   }
@@ -124,7 +246,7 @@
   .text-link {
     @apply text-md-sys-color-primary hover:text-md-sys-color-secondary underline;
     transition: color var(--md-sys-motion-duration, 200ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
   }
 
   .text-link.md-sys-typescale-label-small {
@@ -149,6 +271,6 @@
   @apply before:pointer-events-none before:absolute before:inset-0 before:content-[''];
   &::before {
     transition: background-color var(--md-sys-motion-duration-fast, 150ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
   }
 }

package/dist/styles/motion.css

@@ -15,16 +15,19 @@
   --md-sys-motion-easing-slow-spatial: var(--md-sys-motion-timing-function-slow-spatial)
     var(--md-sys-motion-duration-slow-spatial);
 
-  --md-sys-motion-timing-function-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+  /* Standard easing — md.sys.motion.easing.standard, cubic-bezier(0.2, 0, 0, 1) per
+     m3.material.io/styles/motion/easing-and-duration/tokens-specs. Same curve across all
+     three durations; only the duration changes per tier. */
+  --md-sys-motion-timing-function-fast: cubic-bezier(0.2, 0, 0, 1);
   --md-sys-motion-duration-fast: 150ms;
   --md-sys-motion-easing-fast: var(--md-sys-motion-timing-function-fast)
     var(--md-sys-motion-duration-fast);
 
-  --md-sys-motion-timing-function: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-timing-function: cubic-bezier(0.2, 0, 0, 1);
   --md-sys-motion-duration: 200ms;
   --md-sys-motion-easing: var(--md-sys-motion-timing-function) var(--md-sys-motion-duration);
 
-  --md-sys-motion-timing-function-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-timing-function-slow: cubic-bezier(0.2, 0, 0, 1);
   --md-sys-motion-duration-slow: 300ms;
   --md-sys-motion-easing-slow: var(--md-sys-motion-timing-function-slow)
     var(--md-sys-motion-duration-slow);

package/dist/utils/Layer.svelte

@@ -54,7 +54,9 @@
     expand.setAttribute('dur', `${speed}ms`);
     expand.setAttribute('fill', 'freeze');
     expand.setAttribute('calcMode', 'spline');
-    expand.setAttribute('keySplines', '0.4 0, 0.2 1');
+    // md.sys.motion.easing.standard: cubic-bezier(0.2, 0, 0, 1) — keep in sync with
+    // --md-sys-motion-timing-function in motion.css (SMIL keySplines can't reference CSS vars).
+    expand.setAttribute('keySplines', '0.2 0, 0 1');
     circle.appendChild(expand);
 
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -105,7 +107,9 @@
       fade.setAttribute('dur', '800ms');
       fade.setAttribute('fill', 'freeze');
       fade.setAttribute('calcMode', 'spline');
-      fade.setAttribute('keySplines', '0.4 0, 0.2 1');
+      // md.sys.motion.easing.standard: cubic-bezier(0.2, 0, 0, 1) — keep in sync with
+      // --md-sys-motion-timing-function in motion.css (SMIL keySplines can't reference CSS vars).
+      fade.setAttribute('keySplines', '0.2 0, 0 1');
       circle.appendChild(fade);
       fade.beginElement();
       setTimeout(() => svg.remove(), 800);
@@ -196,7 +200,7 @@
     background-color: currentColor;
     opacity: 0;
     transition: opacity var(--md-sys-motion-duration-fast, 150ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.34, 0.8, 0.34, 1));
+      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
 
     &:not(
       :global(input:disabled + label) > .tint,

package/dist/utils/Theme.svelte

@@ -1,5 +1,16 @@
 <script lang="ts">
-  import { generateThemeCSS, isDarkScheme, themeState, STORAGE_KEY } from './theme.svelte.js';
+  import { MediaQuery } from 'svelte/reactivity';
+  import { generateThemeCSS, themeState, STORAGE_KEY } from './theme.svelte.js';
+
+  /**
+   * Whether to generate and inject the M3 dynamic-color CSS custom properties
+   * derived from `themeState.sourceColor`. When `false`, this component still
+   * restores/persists `themeState.scheme` and keeps the `dark` class on
+   * `<html>` in sync with it (including system-preference changes) — it just
+   * skips generating dynamic-color CSS, for consumers supplying their own
+   * static `@noxlovette/material/theme/*` CSS.
+   */
+  let { generateCSS = true }: { generateCSS?: boolean } = $props();
 
   // Restore from localStorage on mount
   $effect(() => {
@@ -17,25 +28,12 @@
   });
 
   // Track dark mode, including system preference changes
-  let finalIsDark = $state(isDarkScheme(themeState.scheme));
-
-  $effect(() => {
-    if (themeState.scheme !== 'system') {
-      finalIsDark = themeState.scheme === 'dark';
-      return;
-    }
-
-    const media = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = (e: MediaQueryListEvent) => {
-      finalIsDark = e.matches;
-    };
-
-    finalIsDark = media.matches;
-    media.addEventListener('change', handler);
-    return () => media.removeEventListener('change', handler);
-  });
+  const systemDark = new MediaQuery('(prefers-color-scheme: dark)');
+  const finalIsDark = $derived(
+    themeState.scheme === 'system' ? systemDark.current : themeState.scheme === 'dark'
+  );
 
-  const themeStyles = $derived(generateThemeCSS(themeState, finalIsDark));
+  const themeStyles = $derived(generateCSS ? generateThemeCSS(themeState, finalIsDark) : '');
 
   // Persist to localStorage on any change
   $effect(() => {
@@ -61,5 +59,7 @@
 </script>
 
 <svelte:head>
-  {@html `<` + `style id="ogonek-m3-dynamic-theme">` + themeStyles + `</` + `style>`}
+  {#if generateCSS}
+    {@html `<` + `style id="ogonek-m3-dynamic-theme">` + themeStyles + `</` + `style>`}
+  {/if}
 </svelte:head>

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/dist/utils/theme.svelte.js

@@ -1,4 +1,4 @@
-import { argbFromHex, Hct, hexFromArgb, MaterialDynamicColors, QuantizerCelebi, SchemeContent, SchemeFidelity, SchemeFruitSalad, SchemeRainbow, SchemeTonalSpot, SchemeVibrant, Score } from '@ktibow/material-color-utilities-nightly';
+import { argbFromHex, Hct, hexFromArgb, MaterialDynamicColors, QuantizerCelebi, SchemeContent, SchemeFidelity, SchemeFruitSalad, SchemeRainbow, SchemeTonalSpot, SchemeVibrant, Score } from '@material/material-color-utilities';
 export const DEFAULT_CONFIG = {
     sourceColor: '#6750A4',
     scheme: 'system',

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "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",
-    "@ktibow/material-color-utilities-nightly": "^0.4.1772748028000",
-    "bits-ui": "^2.18.1",
+    "@internationalized/date": "^3.12.3",
+    "@material/material-color-utilities": "^0.4.0",
+    "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,24 +0,0 @@
-<!--
-@component
-InputMerger is a container that groups multiple input components together visually.
--->
-<script lang="ts">
-  import { inputMerger } from './theme.js';
-
-  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={inputMerger({ class: className })}>
-  {@render children()}
-</div>