@noxlovette/material 0.5.1 → 0.6.1

package/dist/utils/Layer.svelte

@@ -202,7 +202,7 @@
       &:is(:global(input:focus-visible + label) > .tint),
       &:is(:global(:focus-visible) > .tint),
       &:is(:global(:active) > .tint) {
-        opacity: 0.12;
+        opacity: 0.1;
       }
     }
   }

package/dist/utils/icon/Icon.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import clsx from 'clsx';
+  import { twMerge } from 'tailwind-merge';
   import type { IconProps, IconSize } from './types.js';
 
   const sizeMap: Record<IconSize, { cls: string; opsz: number }> = {
-    xs: { cls: 'size-4 text-[16px]', opsz: 20 },
-    sm: { cls: 'size-5 text-[20px]', opsz: 20 },
-    md: { cls: 'size-6 text-[24px]', opsz: 24 },
-    lg: { cls: 'size-10 text-[40px]', opsz: 40 },
-    xl: { cls: 'size-12 text-[48px]', opsz: 48 }
+    xs: { cls: 'size-spacing-200 text-[16px]', opsz: 20 },
+    sm: { cls: 'size-spacing-250 text-[20px]', opsz: 20 },
+    md: { cls: 'size-spacing-300 text-[24px]', opsz: 24 },
+    lg: { cls: 'size-spacing-500 text-[40px]', opsz: 40 },
+    xl: { cls: 'size-spacing-600 text-[48px]', opsz: 48 }
   };
 
   const {
@@ -26,7 +27,8 @@
   const wrapperClass = 'inline-flex items-center justify-center leading-none';
 </script>
 
-<div class={clsx(resolved.cls, className, wrapperClass)}>
+<!-- twMerge: a caller's size class replaces the preset's instead of racing it in the cascade. -->
+<div class={twMerge(resolved.cls, clsx(className), wrapperClass)}>
   <span
     class="material-symbols-{variant}"
     style="font-size: 1em; font-variation-settings: 'FILL' {fill}, 'wght' {wght}, 'GRAD' {grad}, 'opsz' {resolvedOpsz};"

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../tv.js';
 export type LoadingIndicatorVariants = VariantProps<typeof loadingIndicator>;
 export declare const loadingIndicator: import("tailwind-variants").TVReturnType<{
     center: {

package/dist/utils/icon/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../tv.js';
 export const loadingIndicator = tv({
     base: 'rounded-full',
     variants: {

package/dist/utils/tv.d.ts

@@ -0,0 +1,6 @@
+export type { VariantProps } from 'tailwind-variants';
+/**
+ * The library's `tv`. It teaches tailwind-merge that `z-layer-*` sets z-index, so a consumer's
+ * `class="z-40"` replaces a component's layer instead of fighting it in CSS order.
+ */
+export declare const tv: import("tailwind-variants").TV;

package/dist/utils/tv.js

@@ -0,0 +1,12 @@
+import { createTV } from 'tailwind-variants';
+/** The layer names from `styles/layers.css`. Keep the two in sync. */
+const LAYERS = ['bar', 'rail', 'sheet', 'fab', 'pane', 'modal', 'snackbar', 'popup'];
+/**
+ * The library's `tv`. It teaches tailwind-merge that `z-layer-*` sets z-index, so a consumer's
+ * `class="z-40"` replaces a component's layer instead of fighting it in CSS order.
+ */
+export const tv = createTV({
+    twMergeConfig: {
+        extend: { classGroups: { z: [{ 'z-layer': LAYERS }] } }
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [
@@ -23,7 +23,7 @@
     "url": "https://github.com/noxlovette/material/issues"
   },
   "scripts": {
-    "build": "bun run generate:springs && svelte-package",
+    "build": "bun run generate:springs && svelte-package && bun scripts/copy-skill.ts",
     "generate:springs": "bun scripts/generate-motion-springs.ts && prettier --write src/lib/styles/motion.css",
     "build:site": "vite build",
     "watch": "svelte-package --watch",
@@ -44,6 +44,9 @@
     "claude-skill",
     "bin"
   ],
+  "bin": {
+    "material-claude-skill": "./bin/material-claude-skill.js"
+  },
   "sideEffects": false,
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -64,7 +67,7 @@
     "@internationalized/date": "^3.12.1"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.1.0",
+    "@eslint/compat": "^2.1.1",
     "@eslint/js": "^10.0.1",
     "@storybook/addon-a11y": "10.5.10",
     "@storybook/addon-docs": "10.5.10",
@@ -77,44 +80,45 @@
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.4.0",
-    "eslint": "^10.9.1",
+    "@types/node": "^26.6.2",
+    "eslint": "^10.11.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.23.0",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "jsdom": "^30.1.1",
-    "lefthook": "^2.1.12",
-    "prettier": "^3.9.6",
+    "lefthook": "^2.1.14",
+    "prettier": "^3.9.9",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "publint": "^0.3.24",
+    "remark-gfm": "^4.0.1",
     "shiki": "^4.4.3",
     "storybook": "10.5.10",
-    "svelte": "^5.57.0",
+    "svelte": "^5.57.1",
     "svelte-check": "^4.7.6",
     "sveltekit-superforms": "^2.30.2",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.3.3",
     "typescript": "6",
-    "typescript-eslint": "^8.69.0",
+    "typescript-eslint": "^8.70.1",
     "vite": "8.2.2",
     "vite-plugin-devtools-json": "^1.1.0",
     "vitest": "^4.1.11",
-    "zod": "^4.5.4"
+    "zod": "^4.6.5"
   },
   "dependencies": {
     "@dicebear/core": "^10.7.0",
     "@dicebear/styles": "^10.6.0",
     "@floating-ui/dom": "^1.8.0",
-    "@internationalized/date": "^3.12.3",
+    "@internationalized/date": "^3.12.4",
     "@ktibow/material-color-utilities-nightly": "^0.4.1772748028000",
-    "bits-ui": "^2.19.0",
+    "bits-ui": "^2.19.3",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
-    "motion": "^13.4.0",
+    "motion": "^13.4.3",
     "nanoid": "^6.0.1",
-    "tailwind-merge": "^3.6.0",
+    "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1"
   }
 }

package/dist/components/containers/stack/HStack.svelte

@@ -1,23 +0,0 @@
-<!--
-@component
-HStack is a horizontal flex container.
--->
-<script lang="ts">
-  import clsx from 'clsx';
-  import { stack } from './theme.js';
-  import type { StackProps } from './types.js';
-
-  let {
-    children,
-    type = 'hstack',
-    size = 'w',
-    class: className,
-    gap = 'md'
-  }: StackProps = $props();
-
-  const styling = $derived(stack({ type, size, gap }));
-</script>
-
-<div class={clsx(styling, className)}>
-  {@render children()}
-</div>

package/dist/components/containers/stack/HStack.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { StackProps } from './types.js';
-/** HStack is a horizontal flex container. */
-declare const HStack: import("svelte").Component<StackProps, {}, "">;
-type HStack = ReturnType<typeof HStack>;
-export default HStack;

package/dist/components/containers/stack/VStack.svelte

@@ -1,23 +0,0 @@
-<!--
-@component
-VStack is a vertical flex container.
--->
-<script lang="ts">
-  import clsx from 'clsx';
-  import { stack } from './theme.js';
-  import type { StackProps } from './types.js';
-
-  let {
-    children,
-    type = 'vstack',
-    size = 'h',
-    class: className,
-    gap = 'md'
-  }: StackProps = $props();
-
-  const styling = $derived(stack({ type, size, gap }));
-</script>
-
-<div class={clsx(styling, className)}>
-  {@render children()}
-</div>

package/dist/components/containers/stack/VStack.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { StackProps } from './types.js';
-/** VStack is a vertical flex container. */
-declare const VStack: import("svelte").Component<StackProps, {}, "">;
-type VStack = ReturnType<typeof VStack>;
-export default VStack;

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

@@ -1,4 +0,0 @@
-export * from './theme.js';
-export * from './types.js';
-export { default as HStack } from './HStack.svelte';
-export { default as VStack } from './VStack.svelte';

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

@@ -1,66 +0,0 @@
-import { type VariantProps } from 'tailwind-variants';
-export type StackVariants = VariantProps<typeof stack>;
-export declare const stack: import("tailwind-variants").TVReturnType<{
-    type: {
-        vstack: "flex-row";
-        hstack: "flex-col";
-        vFlip: "md:flex-row flex-col";
-        hFlip: "md:flex-col flex-row";
-        zstaack: "flex";
-    };
-    size: {
-        full: "size-full";
-        w: "w-full";
-        h: "h-full";
-    };
-    gap: {
-        none: "gap-0";
-        xs: "gap-1";
-        sm: "gap-2";
-        md: "gap-3";
-        lg: "gap-4";
-        xl: "gap-6";
-    };
-}, undefined, "flex relative", {
-    type: {
-        vstack: "flex-row";
-        hstack: "flex-col";
-        vFlip: "md:flex-row flex-col";
-        hFlip: "md:flex-col flex-row";
-        zstaack: "flex";
-    };
-    size: {
-        full: "size-full";
-        w: "w-full";
-        h: "h-full";
-    };
-    gap: {
-        none: "gap-0";
-        xs: "gap-1";
-        sm: "gap-2";
-        md: "gap-3";
-        lg: "gap-4";
-        xl: "gap-6";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    type: {
-        vstack: "flex-row";
-        hstack: "flex-col";
-        vFlip: "md:flex-row flex-col";
-        hFlip: "md:flex-col flex-row";
-        zstaack: "flex";
-    };
-    size: {
-        full: "size-full";
-        w: "w-full";
-        h: "h-full";
-    };
-    gap: {
-        none: "gap-0";
-        xs: "gap-1";
-        sm: "gap-2";
-        md: "gap-3";
-        lg: "gap-4";
-        xl: "gap-6";
-    };
-}, undefined>>;

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

@@ -1,26 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const stack = tv({
-    base: 'flex relative',
-    variants: {
-        type: {
-            vstack: 'flex-row',
-            hstack: 'flex-col',
-            vFlip: 'md:flex-row flex-col',
-            hFlip: 'md:flex-col flex-row',
-            zstaack: 'flex'
-        },
-        size: {
-            full: 'size-full',
-            w: 'w-full',
-            h: 'h-full'
-        },
-        gap: {
-            none: 'gap-0',
-            xs: 'gap-1',
-            sm: 'gap-2',
-            md: 'gap-3',
-            lg: 'gap-4',
-            xl: 'gap-6'
-        }
-    }
-});

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

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { StackVariants } from './theme.js';
-/**
- * Props for the Stack components (HStack and VStack).
- */
-export type StackProps = StackVariants & HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The content to be stacked.
-     */
-    children: Snippet;
-};