@noxlovette/material 0.5.1 → 0.6.1

package/dist/components/time/theme.js

@@ -1,13 +1,13 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const timepicker = tv({
     slots: {
-        base: 'bg-md-sys-color-surface-container-high shadow-elevation-3 rounded-xl max-w-fit p-6 group relative',
-        clockDiv: 'flex gap-2 mb-6 mt-5',
-        buttonDiv: 'items-center flex justify-between -mb-4 -mx-5',
+        base: 'bg-md-sys-color-surface-container-high shadow-elevation-3 rounded-xl max-w-fit p-spacing-300 group relative',
+        clockDiv: 'flex gap-spacing-100 mb-spacing-300 mt-spacing-250',
+        buttonDiv: 'items-center flex justify-between -mb-spacing-200 -mx-spacing-250',
         headline: 'text-md-sys-color-on-surface-variant md-sys-typescale-label-medium',
-        inputWrapper: 'space-y-2',
+        inputWrapper: 'space-y-spacing-100',
         fieldSeparator: 'text-md-sys-color-on-surface md-sys-typescale-display-large ',
-        timeInput: 'bg-md-sys-color-surface-container-highest rounded-sm outline outline-md-sys-color-outline w-24 h-18 md-sys-typescale-display-medium text-md-sys-color-on-surface hover:text-md-sys-color-on-surface state-layer before:bg-md-sys-color-on-surface/8 md-sys-state-focus-indicator inline-flex items-center justify-center cursor-text focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary focus:bg-md-sys-color-primary-container relative',
+        timeInput: 'bg-md-sys-color-surface-container-highest rounded-sm outline outline-md-sys-color-outline w-24 h-spacing-900 md-sys-typescale-display-medium text-md-sys-color-on-surface hover:text-md-sys-color-on-surface state-layer before:bg-md-sys-color-on-surface/8 md-sys-state-focus-indicator inline-flex items-center justify-center cursor-text focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary focus:bg-md-sys-color-primary-container relative',
         timeInputSupportingText: 'text-md-sys-color-on-surface-variant md-sys-typescale-body-small'
     }
 });

package/dist/components/toolbar/Toolbar.stories.svelte

@@ -10,6 +10,7 @@
 
   const { Story } = defineMeta({
     title: 'Toolbar/Toolbar',
+    tags: ['autodocs'],
     component: Toolbar
   });
 </script>

package/dist/components/toolbar/Toolbar.svelte

@@ -4,7 +4,7 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
 
 - variant="floating" — elevated, rounded, inline (default)
 - variant="docked"   — full-width, flat, anchored to top/bottom
-- ghost             — renders a h-16 spacer after the toolbar to prevent content scroll-under
+- ghost             — renders a h-spacing-800 spacer after the toolbar to prevent content scroll-under
 - color="standard"   — surface-container background
 - color="vibrant"    — secondary-container background with inverted toggle selection
 - fab snippet        — renders a FAB at the trailing edge (canonical for docked bottom bars)

package/dist/components/toolbar/Toolbar.svelte.d.ts

@@ -5,7 +5,7 @@ import type { ToolbarProps } from './types.js';
  *
  * - variant="floating" — elevated, rounded, inline (default)
  * - variant="docked"   — full-width, flat, anchored to top/bottom
- * - ghost             — renders a h-16 spacer after the toolbar to prevent content scroll-under
+ * - ghost             — renders a h-spacing-800 spacer after the toolbar to prevent content scroll-under
  * - color="standard"   — surface-container background
  * - color="vibrant"    — secondary-container background with inverted toggle selection
  * - fab snippet        — renders a FAB at the trailing edge (canonical for docked bottom bars)

package/dist/components/toolbar/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 export type ToolbarVariants = VariantProps<typeof toolbar>;
 export type ToolbarButtonVariants = VariantProps<typeof toolbarButton>;
 export type ToolbarGroupItemVariants = VariantProps<typeof toolbarGroupItem>;

package/dist/components/toolbar/theme.js

@@ -1,20 +1,20 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const toolbar = tv({
     slots: {
         // Layout/position only — no paint. Holds one implicit `segment` by default, or,
         // with `sections`, whatever ToolbarSection/ToolbarSpacer children the consumer supplies.
-        root: 'flex items-center gap-2',
+        root: 'flex items-center gap-spacing-100',
         // The pill/bar surface itself — bg, shape, elevation, chrome padding. Toolbar renders
         // exactly one of these around `children` by default; ToolbarSection renders one per
         // cluster when `sections` splits the toolbar into independently painted groups.
-        segment: 'inline-flex items-center gap-1 p-2 justify-between',
-        group: 'inline-flex items-center gap-1',
+        segment: 'inline-flex items-center gap-spacing-50 p-spacing-100 justify-between',
+        group: 'inline-flex items-center gap-spacing-50',
         divider: 'shrink-0 bg-md-sys-color-outline-variant',
         // A marker gap between ToolbarSections under `sections` — same size as `root`'s own
-        // `gap-2`, it does not grow, so it doesn't push sections apart to opposite edges.
+        // `gap-spacing-100`, it does not grow, so it doesn't push sections apart to opposite edges.
         spacer: '',
-        fabSlot: 'ml-auto flex items-center ps-2',
-        ghost: 'h-16 w-full shrink-0 pointer-events-none'
+        fabSlot: 'ml-auto flex items-center ps-spacing-100',
+        ghost: 'h-spacing-800 w-full shrink-0 pointer-events-none'
     },
     variants: {
         orientation: {
@@ -22,18 +22,18 @@ export const toolbar = tv({
                 root: 'flex-row',
                 segment: 'flex-row h-13',
                 group: 'flex-row',
-                divider: 'mx-1 h-6 w-px'
+                divider: 'mx-spacing-50 h-spacing-300 w-px'
             },
             vertical: {
                 root: 'flex-col h-max',
-                segment: 'flex-col w-14',
+                segment: 'flex-col w-spacing-700',
                 group: 'flex-col',
-                divider: 'my-1 h-px w-6'
+                divider: 'my-spacing-50 h-px w-spacing-300'
             }
         },
         variant: {
             floating: { root: 'inline-flex', segment: 'rounded-full shadow-elevation-1' },
-            docked: { root: 'fixed left-0 z-10 w-full', segment: 'w-full rounded-none' }
+            docked: { root: 'fixed left-spacing-0 z-layer-bar w-full', segment: 'w-full rounded-none' }
         },
         color: {
             standard: { segment: 'bg-md-sys-color-surface-container' },
@@ -48,8 +48,8 @@ export const toolbar = tv({
 });
 export const toolbarButton = tv({
     slots: {
-        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
-        icon: 'size-5 text-[20px]'
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-spacing-500 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
+        icon: 'size-spacing-250 text-[20px]'
     },
     variants: {
         color: {
@@ -61,8 +61,8 @@ export const toolbarButton = tv({
 });
 export const toolbarGroupItem = tv({
     slots: {
-        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
-        icon: 'size-5 text-[20px]'
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-spacing-500 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
+        icon: 'size-spacing-250 text-[20px]'
     },
     variants: {
         color: {

package/dist/components/typography/Typography.mdx

@@ -0,0 +1,67 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as DisplayStories from './display/Display.stories.svelte';
+import * as HeadlineStories from './headline/Headline.stories.svelte';
+import * as TitleStories from './title/Title.stories.svelte';
+import * as BodyStories from './body/Body.stories.svelte';
+import * as LabelStories from './label/Label.stories.svelte';
+
+<Meta title="Typography/Overview" />
+
+# Typography
+
+[M3 type scale](https://m3.material.io/styles/typography/type-scale-tokens) ·
+`import { Display, Headline, Title, Body, Label } from '@noxlovette/material';`
+
+Five components implement the M3 type scale. They share one prop shape, `size` (`small`,
+`medium` by default, or `large`) and `emphasized`, and differ in role and element:
+
+| Component  | Element | Use for                                                                                            |
+| ---------- | ------- | -------------------------------------------------------------------------------------------------- |
+| `Display`  | `<h1>`  | Short, high-impact text or numerals: a hero, a splash screen, a big stat. Once per screen at most  |
+| `Headline` | `<h2>`  | Page and section titles that need more weight than `Title`                                         |
+| `Title`    | `<h3>`  | Medium-emphasis text: section headers, card titles, list-item leads                                |
+| `Body`     | `<p>`   | Running text. `medium` for most copy, `small` for dense UI text, `large` for lead paragraphs       |
+| `Label`    | `<p>`   | Standalone captions and custom controls. Buttons, tabs and chips already set their own label style |
+
+Their element is fixed by role, not size. If the heading level doesn't fit the page outline,
+pick the component that matches the level and adjust `size`; keep levels sequential.
+
+## Emphasized
+
+`emphasized` switches to the M3 emphasized style of the same size: the same size, line height and
+tracking, with a heavier weight (400 → 500, or 500 → 700 for title-medium/small and labels). Use
+it for selected, active or unread states, and for editorial emphasis. Don't add `font-bold` to a
+baseline style instead.
+
+<Canvas of={TitleStories.Sizes} />
+
+## Utility classes
+
+Outside these components, apply the styles as classes: `md-sys-typescale-<role>-<size>`, and
+`md-sys-typescale-emphasized-<role>-<size>`. Each class sets font, weight, size, line height and
+tracking together; don't combine it with `text-*`, `leading-*`, `tracking-*` or `font-*`.
+
+The typefaces come from `--md-ref-typeface-brand` (display, headline, title-large) and
+`--md-ref-typeface-plain` (everything else). Both default to `--font-sans`.
+
+## Language height
+
+Line heights follow the language of each element: medium by default, small for Latin, Cyrillic,
+Greek and Hebrew languages, and taller for Burmese, Telugu and Urdu. Set `lang` on your `<html>`
+(SvelteKit's template does) and on any passage in another language. To force a category, set
+`data-md-language-height="small|medium|large|extra-large"` on an element.
+
+## Accessibility
+
+- **Headings.** `Display`, `Headline` and `Title` are headings; `Body` and `Label` never are. Use
+  a heading component for anything that titles a section.
+- **Color.** None of them sets a color. Pair them with an `on-*` color role for the surface
+  they're on, especially at label sizes, where contrast matters most.
+
+<Canvas of={DisplayStories.Sizes} />
+
+<Canvas of={HeadlineStories.Sizes} />
+
+<Canvas of={BodyStories.Sizes} />
+
+<Canvas of={LabelStories.Sizes} />

package/dist/components/typography/body/Body.stories.svelte

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Typography/Body',
+    tags: ['autodocs'],
     component: Body,
     argTypes: {
       size: {
@@ -22,7 +23,7 @@
 <Story name="Playground">Body text used for longer passages of content.</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">
     <Body size="small">Body small</Body>
     <Body size="medium">Body medium</Body>
     <Body size="large">Body large</Body>

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

@@ -1,30 +1,33 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type BodyVariants = VariantProps<typeof body>;
 export declare const body: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-body-small";
-        medium: "md-sys-typescale-body-medium";
-        large: "md-sys-typescale-body-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, "", {
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-body-small";
-        medium: "md-sys-typescale-body-medium";
-        large: "md-sys-typescale-body-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-body-small";
-        medium: "md-sys-typescale-body-medium";
-        large: "md-sys-typescale-body-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined>>;

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

@@ -1,14 +1,29 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const body = 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-body-small',
-            medium: 'md-sys-typescale-body-medium',
-            large: 'md-sys-typescale-body-large'
+            small: '',
+            medium: '',
+            large: ''
         }
+    },
+    compoundVariants: [
+        { size: 'small', emphasized: false, class: 'md-sys-typescale-body-small' },
+        { size: 'small', emphasized: true, class: 'md-sys-typescale-emphasized-body-small' },
+        { size: 'medium', emphasized: false, class: 'md-sys-typescale-body-medium' },
+        { size: 'medium', emphasized: true, class: 'md-sys-typescale-emphasized-body-medium' },
+        { size: 'large', emphasized: false, class: 'md-sys-typescale-body-large' },
+        { size: 'large', emphasized: true, class: 'md-sys-typescale-emphasized-body-large' }
+    ],
+    defaultVariants: {
+        emphasized: false,
+        size: 'medium'
     }
 });

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

@@ -10,7 +10,8 @@ export interface BodyProps extends BodyVariants, HTMLAttributes<HTMLParagraphEle
      */
     children: Snippet;
     /**
-     * Whether to use the emphasized weight for the body text.
+     * Use the M3 emphasized style (`md-sys-typescale-emphasized-body-*`): same size, heavier weight.
+     * Use it for selected, active, or unread states, or for editorial emphasis.
      */
     emphasized?: boolean;
     /**

package/dist/components/typography/display/Display.stories.svelte

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Typography/Display',
+    tags: ['autodocs'],
     component: Display,
     argTypes: {
       size: {
@@ -22,7 +23,7 @@
 <Story name="Playground">Display 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">
     <Display size="small">Display small</Display>
     <Display size="medium">Display medium</Display>
     <Display size="large">Display large</Display>

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

@@ -1,30 +1,33 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type DisplayVariants = VariantProps<typeof display>;
 export declare const display: import("tailwind-variants").TVReturnType<{
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-display-small";
-        medium: "md-sys-typescale-display-medium";
-        large: "md-sys-typescale-display-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, "", {
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-display-small";
-        medium: "md-sys-typescale-display-medium";
-        large: "md-sys-typescale-display-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     emphasized: {
-        true: "font-medium";
+        true: "";
+        false: "";
     };
     size: {
-        small: "md-sys-typescale-display-small";
-        medium: "md-sys-typescale-display-medium";
-        large: "md-sys-typescale-display-large";
+        small: "";
+        medium: "";
+        large: "";
     };
 }, undefined>>;

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

@@ -1,14 +1,29 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const display = 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-display-small',
-            medium: 'md-sys-typescale-display-medium',
-            large: 'md-sys-typescale-display-large'
+            small: '',
+            medium: '',
+            large: ''
         }
+    },
+    compoundVariants: [
+        { size: 'small', emphasized: false, class: 'md-sys-typescale-display-small' },
+        { size: 'small', emphasized: true, class: 'md-sys-typescale-emphasized-display-small' },
+        { size: 'medium', emphasized: false, class: 'md-sys-typescale-display-medium' },
+        { size: 'medium', emphasized: true, class: 'md-sys-typescale-emphasized-display-medium' },
+        { size: 'large', emphasized: false, class: 'md-sys-typescale-display-large' },
+        { size: 'large', emphasized: true, class: 'md-sys-typescale-emphasized-display-large' }
+    ],
+    defaultVariants: {
+        emphasized: false,
+        size: 'medium'
     }
 });

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

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

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

@@ -1,30 +1,33 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 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

@@ -1,14 +1,29 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 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

@@ -1,18 +1,18 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 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';
+import { tv } from '../../../utils/tv.js';
 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>