@noxlovette/material 0.5.1 → 0.6.0

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

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Typography/Headline',
+    tags: ['autodocs'],
     component: Headline,
     argTypes: {
       size: {
@@ -22,7 +23,7 @@
 <Story name="Playground">Headline text</Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-col gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col">
     <Headline size="small">Headline small</Headline>
     <Headline size="medium">Headline medium</Headline>
     <Headline size="large">Headline large</Headline>

package/dist/components/typography/headline/theme.d.ts

@@ -2,29 +2,32 @@ import { type VariantProps } from 'tailwind-variants';
 export type HeadlineVariants = VariantProps<typeof headline>;
 export declare const headline: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-headline-small";
-        medium: "md-sys-typescale-headline-medium";
-        large: "md-sys-typescale-headline-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, "", {
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-headline-small";
-        medium: "md-sys-typescale-headline-medium";
-        large: "md-sys-typescale-headline-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-headline-small";
-        medium: "md-sys-typescale-headline-medium";
-        large: "md-sys-typescale-headline-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined>>;

package/dist/components/typography/headline/theme.js

@@ -2,13 +2,28 @@ import { tv } from 'tailwind-variants';
 export const headline = tv({
     base: '',
     variants: {
+        // `emphasized` swaps in the M3 emphasized style of the same size (heavier weight, same
+        // metrics). The class is picked in compoundVariants so only one typescale class is ever set.
         emphasized: {
-            true: 'font-medium'
+            true: '',
+            false: ''
         },
         size: {
-            small: 'md-sys-typescale-headline-small',
-            medium: 'md-sys-typescale-headline-medium',
-            large: 'md-sys-typescale-headline-large'
+            small: '',
+            medium: '',
+            large: ''
         }
+    },
+    compoundVariants: [
+        { size: 'small', emphasized: false, class: 'md-sys-typescale-headline-small' },
+        { size: 'small', emphasized: true, class: 'md-sys-typescale-emphasized-headline-small' },
+        { size: 'medium', emphasized: false, class: 'md-sys-typescale-headline-medium' },
+        { size: 'medium', emphasized: true, class: 'md-sys-typescale-emphasized-headline-medium' },
+        { size: 'large', emphasized: false, class: 'md-sys-typescale-headline-large' },
+        { size: 'large', emphasized: true, class: 'md-sys-typescale-emphasized-headline-large' }
+    ],
+    defaultVariants: {
+        emphasized: false,
+        size: 'medium'
     }
 });

package/dist/components/typography/headline/types.d.ts

@@ -10,7 +10,8 @@ export type HeadlineProps = HeadlineVariants & HTMLAttributes<HTMLElement> & {
      */
     children: Snippet;
     /**
-     * Whether to use the emphasized weight for the headline text.
+     * Use the M3 emphasized style (`md-sys-typescale-emphasized-headline-*`): same size, heavier weight.
+     * Use it for selected, active, or unread states, or for editorial emphasis.
      */
     emphasized?: boolean;
     /**

package/dist/components/typography/kbd/Kbd.stories.svelte

@@ -9,6 +9,7 @@
 
   const { Story } = defineMeta({
     title: 'Typography/Kbd',
+    tags: ['autodocs'],
     component: Kbd,
     argTypes: {
       position: { control: 'select', options: ['relative', 'absolute'] }
@@ -33,7 +34,7 @@
 
 <Story name="Anchored in a Search Field" asChild>
   <div
-    class="bg-md-sys-color-surface-container-high md-sys-typescale-body-large text-md-sys-color-on-surface-variant relative flex h-12 w-80 items-center rounded-full px-4"
+    class="bg-md-sys-color-surface-container-high md-sys-typescale-body-large text-md-sys-color-on-surface-variant h-spacing-600 px-spacing-200 relative flex w-80 items-center rounded-full"
   >
     Search...
     <Kbd position="absolute">⌘K</Kbd>

package/dist/components/typography/kbd/theme.d.ts

@@ -2,17 +2,17 @@ import { type VariantProps } from 'tailwind-variants';
 export type KbdVariants = VariantProps<typeof kbd>;
 export declare const kbd: import("tailwind-variants").TVReturnType<{
     position: {
-        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        absolute: "right-spacing-75 bottom-spacing-75 hidden md:absolute md:right-spacing-100 md:bottom-spacing-100 md:inline-flex";
         relative: "";
     };
-}, undefined, "md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant", {
+}, undefined, "md-sys-typescale-emphasized-label-small text-md-sys-color-on-surface-variant", {
     position: {
-        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        absolute: "right-spacing-75 bottom-spacing-75 hidden md:absolute md:right-spacing-100 md:bottom-spacing-100 md:inline-flex";
         relative: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     position: {
-        absolute: "right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex";
+        absolute: "right-spacing-75 bottom-spacing-75 hidden md:absolute md:right-spacing-100 md:bottom-spacing-100 md:inline-flex";
         relative: "";
     };
 }, undefined>>;

package/dist/components/typography/kbd/theme.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const kbd = tv({
-    base: 'md-sys-typescale-label-small font-semibold text-md-sys-color-on-surface-variant',
+    base: 'md-sys-typescale-emphasized-label-small text-md-sys-color-on-surface-variant',
     variants: {
         position: {
-            absolute: 'right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2 md:inline-flex',
+            absolute: 'right-spacing-75 bottom-spacing-75 hidden md:absolute md:right-spacing-100 md:bottom-spacing-100 md:inline-flex',
             relative: ''
         }
     }

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

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Typography/Label',
+    tags: ['autodocs'],
     component: Label,
     argTypes: {
       size: {
@@ -22,7 +23,7 @@
 <Story name="Playground">Label text</Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-col gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col">
     <Label size="small">Label small</Label>
     <Label size="medium">Label medium</Label>
     <Label size="large">Label large</Label>

package/dist/components/typography/label/theme.d.ts

@@ -1,28 +1,31 @@
 export declare const label: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: "font-semibold";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-label-small";
-        medium: "md-sys-typescale-label-medium";
-        large: "md-sys-typescale-label-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, "", {
     emphasized: {
-        true: "font-semibold";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-label-small";
-        medium: "md-sys-typescale-label-medium";
-        large: "md-sys-typescale-label-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: "font-semibold";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-label-small";
-        medium: "md-sys-typescale-label-medium";
-        large: "md-sys-typescale-label-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined>>;

package/dist/components/typography/label/theme.js

@@ -2,13 +2,28 @@ import { tv } from 'tailwind-variants';
 export const label = tv({
     base: '',
     variants: {
+        // `emphasized` swaps in the M3 emphasized style of the same size (heavier weight, same
+        // metrics). The class is picked in compoundVariants so only one typescale class is ever set.
         emphasized: {
-            true: 'font-semibold'
+            true: '',
+            false: ''
         },
         size: {
-            small: 'md-sys-typescale-label-small',
-            medium: 'md-sys-typescale-label-medium',
-            large: 'md-sys-typescale-label-large'
+            small: '',
+            medium: '',
+            large: ''
         }
+    },
+    compoundVariants: [
+        { size: 'small', emphasized: false, class: 'md-sys-typescale-label-small' },
+        { size: 'small', emphasized: true, class: 'md-sys-typescale-emphasized-label-small' },
+        { size: 'medium', emphasized: false, class: 'md-sys-typescale-label-medium' },
+        { size: 'medium', emphasized: true, class: 'md-sys-typescale-emphasized-label-medium' },
+        { size: 'large', emphasized: false, class: 'md-sys-typescale-label-large' },
+        { size: 'large', emphasized: true, class: 'md-sys-typescale-emphasized-label-large' }
+    ],
+    defaultVariants: {
+        emphasized: false,
+        size: 'medium'
     }
 });

package/dist/components/typography/label/types.d.ts

@@ -12,7 +12,8 @@ export type LabelProps = LabelVariants & HTMLAttributes<HTMLElement> & {
      */
     children: Snippet;
     /**
-     * Whether to use the emphasized weight for the label text.
+     * Use the M3 emphasized style (`md-sys-typescale-emphasized-label-*`): same size, heavier weight.
+     * Use it for selected, active, or unread states, or for editorial emphasis.
      */
     emphasized?: boolean;
     /**

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

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Typography/Title',
+    tags: ['autodocs'],
     component: Title,
     argTypes: {
       size: {
@@ -22,7 +23,7 @@
 <Story name="Playground">Title text</Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-col gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col">
     <Title size="small">Title small</Title>
     <Title size="medium">Title medium</Title>
     <Title size="large">Title large</Title>

package/dist/components/typography/title/theme.d.ts

@@ -2,29 +2,32 @@ import { type VariantProps } from 'tailwind-variants';
 export type TitleVariants = VariantProps<typeof title>;
 export declare const title: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: "font-semibold";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-title-small";
-        medium: "md-sys-typescale-title-medium";
-        large: "md-sys-typescale-title-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, "", {
     emphasized: {
-        true: "font-semibold";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-title-small";
-        medium: "md-sys-typescale-title-medium";
-        large: "md-sys-typescale-title-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: "font-semibold";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-title-small";
-        medium: "md-sys-typescale-title-medium";
-        large: "md-sys-typescale-title-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined>>;

package/dist/components/typography/title/theme.js

@@ -2,13 +2,28 @@ import { tv } from 'tailwind-variants';
 export const title = tv({
     base: '',
     variants: {
+        // `emphasized` swaps in the M3 emphasized style of the same size (heavier weight, same
+        // metrics). The class is picked in compoundVariants so only one typescale class is ever set.
         emphasized: {
-            true: 'font-semibold'
+            true: '',
+            false: ''
         },
         size: {
-            small: 'md-sys-typescale-title-small',
-            medium: 'md-sys-typescale-title-medium',
-            large: 'md-sys-typescale-title-large'
+            small: '',
+            medium: '',
+            large: ''
         }
+    },
+    compoundVariants: [
+        { size: 'small', emphasized: false, class: 'md-sys-typescale-title-small' },
+        { size: 'small', emphasized: true, class: 'md-sys-typescale-emphasized-title-small' },
+        { size: 'medium', emphasized: false, class: 'md-sys-typescale-title-medium' },
+        { size: 'medium', emphasized: true, class: 'md-sys-typescale-emphasized-title-medium' },
+        { size: 'large', emphasized: false, class: 'md-sys-typescale-title-large' },
+        { size: 'large', emphasized: true, class: 'md-sys-typescale-emphasized-title-large' }
+    ],
+    defaultVariants: {
+        emphasized: false,
+        size: 'medium'
     }
 });

package/dist/components/typography/title/types.d.ts

@@ -10,7 +10,8 @@ export type TitleProps = TitleVariants & HTMLAttributes<HTMLElement> & {
      */
     children: Snippet;
     /**
-     * Whether to use the emphasized weight for the title text.
+     * Use the M3 emphasized style (`md-sys-typescale-emphasized-title-*`): same size, heavier weight.
+     * Use it for selected, active, or unread states, or for editorial emphasis.
      */
     emphasized?: boolean;
     /**

package/dist/index.css

@@ -1,4 +1,5 @@
 @import './styles/typescale.css';
+@import './styles/spacing.css';
 @import './styles/motion.css';
 @import './styles/rounding.css';
 @import './styles/elevation.css';