@noxlovette/material 0.2.2 → 0.3.1

package/dist/components/typography/headline/Headline.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Headline from './Headline.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Typography/Headline',
+    component: Headline,
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['small', 'medium', 'large']
+      },
+      emphasized: { control: 'boolean' }
+    },
+    args: {
+      size: 'medium',
+      emphasized: false
+    }
+  });
+</script>
+
+<Story name="Playground">Headline text</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-4 p-6">
+    <Headline size="small">Headline small</Headline>
+    <Headline size="medium">Headline medium</Headline>
+    <Headline size="large">Headline large</Headline>
+  </div>
+</Story>

package/dist/components/typography/headline/Headline.stories.svelte.d.ts

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

package/dist/components/typography/label/Label.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Label from './Label.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Typography/Label',
+    component: Label,
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['small', 'medium', 'large']
+      },
+      emphasized: { control: 'boolean' }
+    },
+    args: {
+      size: 'medium',
+      emphasized: false
+    }
+  });
+</script>
+
+<Story name="Playground">Label text</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-4 p-6">
+    <Label size="small">Label small</Label>
+    <Label size="medium">Label medium</Label>
+    <Label size="large">Label large</Label>
+  </div>
+</Story>

package/dist/components/typography/label/Label.stories.svelte.d.ts

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

package/dist/components/typography/title/Title.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Title from './Title.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Typography/Title',
+    component: Title,
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['small', 'medium', 'large']
+      },
+      emphasized: { control: 'boolean' }
+    },
+    args: {
+      size: 'medium',
+      emphasized: false
+    }
+  });
+</script>
+
+<Story name="Playground">Title text</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-4 p-6">
+    <Title size="small">Title small</Title>
+    <Title size="medium">Title medium</Title>
+    <Title size="large">Title large</Title>
+  </div>
+</Story>

package/dist/components/typography/title/Title.stories.svelte.d.ts

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

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.2.2",
+  "version": "0.3.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -12,7 +12,9 @@
     "check": "svelte-kit sync && svelte-check",
     "test": "vitest run",
     "format": "prettier --write .",
-    "dev": "vite dev"
+    "dev": "vite dev",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "bin": {
     "material-claude-skill": "./bin/install-skill.js"
@@ -46,10 +48,14 @@
   "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-svelte-csf": "5.1.2",
+    "@storybook/svelte-vite": "10.5.2",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.69.3",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "@sveltejs/vite-plugin-svelte": "6.2.4",
     "@tailwindcss/cli": "^4.3.2",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.2",
@@ -64,6 +70,8 @@
     "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",
     "sveltekit-superforms": "^2.30.2",
@@ -71,7 +79,7 @@
     "tailwindcss": "^4.3.2",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.64.0",
-    "vite": "^8.1.4",
+    "vite": "7.3.6",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^4.1.10",
     "zod": "^4.4.3"