@noxlovette/material 0.5.1 → 0.6.0

package/dist/components/snackbar/Snackbar.mdx

@@ -0,0 +1,52 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SnackbarStories from './Snackbar.stories.svelte';
+
+<Meta of={SnackbarStories} />
+
+<Title />
+
+<Subtitle>
+  Snackbars show a brief message about an app process at the bottom of the screen.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/snackbar/specs) ·
+`import { Snackbar } from '@noxlovette/material';`
+
+<Canvas of={SnackbarStories.Playground} />
+
+<Controls of={SnackbarStories.Playground} />
+
+## Showing a snackbar
+
+There's no `toast()` function or queue. Mount one `Snackbar`, bind its `message`, and assign to
+that state to show it:
+
+```svelte
+<script lang="ts">
+  import { Snackbar } from '@noxlovette/material';
+
+  let snackbarMessage = $state('');
+</script>
+
+<button onclick={() => (snackbarMessage = 'Changes saved.')}>Save</button>
+
+<Snackbar bind:message={snackbarMessage} label="Undo" callback={undoSave} />
+```
+
+When `message` becomes non-empty (a string or a snippet), the snackbar slides in. After 4
+seconds it hides and resets a string `message` to `''`, so the same text can be shown again. With
+`static`, it stays until the user closes it.
+
+`label` and `callback` add an action button.
+
+<Canvas of={SnackbarStories.Triggered} />
+
+<Canvas of={SnackbarStories.WithAction} />
+
+## Accessibility
+
+- **Timing.** A non-static snackbar disappears on its own, so never make it the only place
+  critical information appears.
+- **Dismiss.** `showClose` (on by default) renders a close button labelled "Dismiss snackbar".
+- **One at a time.** Mount one snackbar per region and drive it through one binding; stacking
+  instances isn't supported.

package/dist/components/snackbar/Snackbar.stories.svelte

@@ -9,10 +9,6 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Snackbar from './Snackbar.svelte';
-</script>
-
-<script lang="ts">
-  import Button from '../buttons/Button.svelte';
 
   const { Story } = defineMeta({
     title: 'Feedback/Snackbar',
@@ -28,6 +24,10 @@
       static: false
     }
   });
+</script>
+
+<script lang="ts">
+  import Button from '../buttons/Button.svelte';
 
   let playgroundMessage = $state('This is a snackbar message.');
   let triggeredMessage = $state('');
@@ -50,7 +50,7 @@
 </Story>
 
 <Story name="Triggered" asChild>
-  <div class="relative flex min-h-32 flex-col items-center justify-center gap-4">
+  <div class="gap-spacing-200 relative flex min-h-32 flex-col items-center justify-center">
     <Button
       variant="tonal"
       onclick={() => {

package/dist/components/snackbar/Snackbar.svelte

@@ -88,7 +88,7 @@ Snackbars provide brief messages about app processes at the bottom of the screen
 
       {#if showClose}
         <button
-          class="relative rounded-full p-1"
+          class="p-spacing-50 relative rounded-full"
           onclick={() => {
             dismissed = true;
             if (typeof message === 'string') {

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

@@ -2,7 +2,7 @@ import { type VariantProps } from 'tailwind-variants';
 export type SnackBarVariants = VariantProps<typeof snackbar>;
 export declare const snackbar: import("tailwind-variants").TVReturnType<{
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {
@@ -13,7 +13,7 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, undefined, {
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {
@@ -24,7 +24,7 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {

package/dist/components/snackbar/theme.js

@@ -1,15 +1,15 @@
 import { tv } from 'tailwind-variants';
 export const snackbar = tv({
     slots: {
-        base: 'rounded-xs relative min-h-12 md:max-h-17 flex z-[100] items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-2 pl-4 justify-between h-max py-3',
-        label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-3 cursor-pointer ',
+        base: 'rounded-xs relative min-h-spacing-600 md:max-h-17 flex z-[100] items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-spacing-100 pl-spacing-200 justify-between h-max py-spacing-150',
+        label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-spacing-150 cursor-pointer ',
         actionWrapper: 'flex items-center z-40',
         supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-medium max-w-[60ch] ',
-        icon: 'size-6 text-[24px] text-md-sys-color-inverse-on-surface mr-1 ml-3'
+        icon: 'size-spacing-300 text-[24px] text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
     },
     variants: {
         fixed: {
-            true: 'fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2',
+            true: 'fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2',
             false: ''
         }
     }

package/dist/components/table/Table.stories.svelte

@@ -11,6 +11,7 @@
 
   const { Story } = defineMeta({
     title: 'Table/Table',
+    tags: ['autodocs'],
     component: Table,
     argTypes: {
       rounded: { control: 'boolean' }

package/dist/components/table/TableHeader.svelte

@@ -25,7 +25,7 @@ and `sortDirection` props. Defaults to `scope="col"`.
 </script>
 
 <th {scope} class={header({ class: clsx(className) })} {...restProps}>
-  <span class="inline-flex items-center gap-1">
+  <span class="gap-spacing-50 inline-flex items-center">
     {@render children?.()}
     {#if sortable}
       <span

package/dist/components/table/theme.js

@@ -6,8 +6,8 @@ export const table = tv({
         body: '[&_tr:last-child]:border-b-0',
         foot: 'border-t border-md-sys-color-outline-variant',
         row: 'border-b border-md-sys-color-outline-variant transition-colors md-sys-motion-fast-effects focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-md-sys-color-primary',
-        cell: 'px-4 py-3 align-middle',
-        header: 'px-4 py-4 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface font-medium whitespace-nowrap'
+        cell: 'px-spacing-200 py-spacing-150 align-middle',
+        header: 'px-spacing-200 py-spacing-200 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface whitespace-nowrap'
     },
     variants: {
         hoverable: {
@@ -43,7 +43,7 @@ export const table = tv({
         },
         sticky: {
             true: {
-                head: 'sticky top-0 z-10 bg-md-sys-color-surface-container-high shadow-[0_1px_0_0_var(--md-sys-color-outline-variant)]'
+                head: 'sticky top-spacing-0 z-10 bg-md-sys-color-surface-container-high shadow-[0_1px_0_0_var(--md-sys-color-outline-variant)]'
             }
         }
     }

package/dist/components/time/TimeField.stories.svelte

@@ -9,6 +9,7 @@
 
   const { Story } = defineMeta({
     title: 'Time/TimeField',
+    tags: ['autodocs'],
     component: TimeField,
     argTypes: {
       label: { control: 'text' },
@@ -28,14 +29,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-xs p-8">
+    <div class="p-spacing-400 max-w-xs">
       <TimeField {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Near Bottom Edge" asChild>
-  <div class="flex min-h-dvh max-w-xs flex-col justify-end p-8">
+  <div class="p-spacing-400 flex min-h-dvh max-w-xs flex-col justify-end">
     <TimeField label="Time" value="18:45" />
   </div>
 </Story>

package/dist/components/time/TimeField.svelte

@@ -77,7 +77,7 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
         <button
           {...props}
           title="time-overlay"
-          class="absolute inset-0 cursor-pointer disabled:cursor-not-allowed"
+          class="inset-spacing-0 absolute cursor-pointer disabled:cursor-not-allowed"
           type="button"
           data-cy="calendar-time-toggle"
         ></button>

package/dist/components/time/TimepickerInput.svelte

@@ -63,7 +63,7 @@ It follows the Material 3 design for time input pickers.
   </TimeField.Root>
 
   <div class={cls.buttonDiv()}>
-    <ButtonIcon type="button" iconProps={{ name: 'schedule' }} />
+    <ButtonIcon variant="standard" type="button" iconProps={{ name: 'schedule' }} />
     <div>
       <Button variant="text" type="button" onclick={() => close()}>{cancelText}</Button>
       <Button

package/dist/components/time/theme.js

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

@@ -3,18 +3,18 @@ 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-10 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

@@ -2,29 +2,32 @@ import { type VariantProps } from 'tailwind-variants';
 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

@@ -2,13 +2,28 @@ import { tv } from 'tailwind-variants';
 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

@@ -2,29 +2,32 @@ import { type VariantProps } from 'tailwind-variants';
 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

@@ -2,13 +2,28 @@ import { tv } from 'tailwind-variants';
 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;
     /**