@noxlovette/material 0.5.0 → 0.6.0

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';

package/dist/styles/component.css

@@ -16,138 +16,100 @@
       var(--md-sys-motion-timing-function-effects-spring);
   }
 
-  /* Shape morphs run on the fast spatial spring in both directions (press and release). */
-  .md-btn-morph {
-    border-radius: var(--btn-shape-override, var(--btn-shape, 9999px));
-    transition: border-radius var(--md-sys-motion-duration-fast-spatial)
-      var(--md-sys-motion-timing-function-fast-spatial);
-
-    &::before {
-      border-radius: inherit;
-      transition: border-radius var(--md-sys-motion-duration-fast-spatial)
-        var(--md-sys-motion-timing-function-fast-spatial);
-    }
-
-    &:active:not(:disabled) {
-      border-radius: var(
-        --btn-pressed-shape,
-        var(--btn-shape-override, var(--btn-shape, 9999px))
-      ) !important;
+  /*
+   * Every M3 button (Button, Toggle, ButtonIcon, SplitButton, ConnectedButtonGroup items, FAB).
+   * Colour, border and shadow settle on the effects spring. The ::after box is the 48dp minimum
+   * target that XS and S buttons need
+   * (https://m3.material.io/components/buttons/specs#target-areas); on larger buttons it is just
+   * the button.
+   */
+  .md-btn {
+    transition:
+      background-color var(--md-sys-motion-duration-effects-spring)
+        var(--md-sys-motion-timing-function-effects-spring),
+      color var(--md-sys-motion-duration-effects-spring)
+        var(--md-sys-motion-timing-function-effects-spring),
+      border-color var(--md-sys-motion-duration-effects-spring)
+        var(--md-sys-motion-timing-function-effects-spring),
+      box-shadow var(--md-sys-motion-duration-effects-spring)
+        var(--md-sys-motion-timing-function-effects-spring);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: max(100%, 48px);
+      height: max(100%, 48px);
+      translate: -50% -50%;
     }
   }
 
   /*
-   * Standard button group (https://m3.material.io/components/button-groups/overview).
-   * A plain flex row/column of otherwise-untouched Button/ButtonIcon/Toggle children.
-   * `data-size` drives both the fixed gap between buttons and the padding-inline
-   * "squeeze" below — pressing one button grows its own padding and shrinks its
-   * immediate neighbors', which is the M3-specified adjacent-button interaction.
-   * `:has()` scopes the shrink to only the pressed button's direct neighbors.
+   * Resting shape of Button, Toggle and ButtonIcon, for the first paint. Size classes set
+   * --btn-round (half the height), --btn-square and --btn-pressed; the shape variant points
+   * --btn-shape at round or square. Once mounted, buttons/shapeMorph.ts springs the corners
+   * between these on Motion (inline styles, which win over this rule).
    */
-  .md-btn-group-standard {
-    display: inline-flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    width: max-content;
-
-    &[data-orientation='vertical'] {
-      flex-direction: column;
-      align-items: stretch;
-      width: auto;
-    }
-
-    &[data-size='xs'] {
-      --btn-group-gap: 1.125rem;
-      --btn-group-base-px: 1rem;
-      --btn-group-squeeze: 0.375rem;
-    }
-    &[data-size='sm'] {
-      --btn-group-gap: 0.75rem;
-      --btn-group-base-px: 1rem;
-      --btn-group-squeeze: 0.375rem;
-    }
-    &[data-size='md'] {
-      --btn-group-gap: 0.5rem;
-      --btn-group-base-px: 1.5rem;
-      --btn-group-squeeze: 0.5rem;
-    }
-    &[data-size='lg'] {
-      --btn-group-gap: 0.5rem;
-      --btn-group-base-px: 3rem;
-      --btn-group-squeeze: 0.75rem;
-    }
-    &[data-size='xl'] {
-      --btn-group-gap: 0.5rem;
-      --btn-group-base-px: 4rem;
-      --btn-group-squeeze: 1rem;
-    }
-
-    gap: var(--btn-group-gap, 0.5rem);
-
-    > * {
-      padding-inline: var(--btn-group-base-px, 1rem);
-      transition:
-        padding-inline var(--md-sys-motion-duration-fast-spatial)
-          var(--md-sys-motion-timing-function-fast-spatial),
-        border-radius var(--md-sys-motion-duration-fast-spatial)
-          var(--md-sys-motion-timing-function-fast-spatial);
-    }
-
-    > *:active:not(:disabled) {
-      padding-inline: calc(var(--btn-group-base-px, 1rem) + var(--btn-group-squeeze, 0.5rem));
-    }
+  .md-btn-shape {
+    border-radius: var(--btn-shape, var(--btn-round, 9999px));
+  }
 
-    > *:has(+ *:active:not(:disabled)),
-    > *:active:not(:disabled) + * {
-      padding-inline: max(
-        0px,
-        calc(var(--btn-group-base-px, 1rem) - var(--btn-group-squeeze, 0.5rem))
-      );
-    }
+  /*
+   * Split button (https://m3.material.io/components/split-button/specs). Outer corners round;
+   * inner corners --split-inner at rest, --split-active while hovered, focused or pressed, and
+   * fully round on the trailing button while its menu is open. These rules give the first paint;
+   * once mounted, buttons/shapeMorph.ts springs the corners on Motion.
+   */
+  .md-btn-split-leading,
+  .md-btn-split-trailing {
+    --split-now: var(--split-inner);
+  }
+  .md-btn-split-trailing[data-state='open'] {
+    --split-now: var(--btn-round);
+  }
+  .md-btn-split-leading {
+    border-start-start-radius: var(--btn-round);
+    border-end-start-radius: var(--btn-round);
+    border-start-end-radius: var(--split-now);
+    border-end-end-radius: var(--split-now);
+  }
+  .md-btn-split-trailing {
+    border-start-start-radius: var(--split-now);
+    border-end-start-radius: var(--split-now);
+    border-start-end-radius: var(--btn-round);
+    border-end-end-radius: var(--btn-round);
   }
 
   /*
-   * Connected button group item — replaces the deprecated segmented button.
-   * `--cbg-inner` (per size) is the shared radius facing a neighbor; `--cbg-outer`
-   * defaults to fully round and is only overridden (to equal --cbg-inner) for the
-   * square shape, so the position rules below become no-ops in that case.
-   * Selecting/pressing an item collapses all four of its own corners to
-   * --cbg-inner ("round to square") without touching its neighbors' shape.
+   * Connected button group item (https://m3.material.io/components/button-groups/specs).
+   * Inner corners (facing a neighbour) are --cbg-inner, --cbg-pressed while pressed, and fully
+   * round while selected; outer corners are --cbg-outer. These rules give the first paint; once
+   * mounted, buttons/shapeMorph.ts springs the corners on Motion. Neighbours never change.
    */
   .md-btn-connected {
-    border-radius: var(--cbg-inner, 9999px);
-    transition:
-      border-radius var(--md-sys-motion-duration-fast-spatial)
-        var(--md-sys-motion-timing-function-fast-spatial),
-      background-color var(--md-sys-motion-duration-fast-effects-spring)
-        var(--md-sys-motion-timing-function-fast-effects-spring),
-      color var(--md-sys-motion-duration-fast-effects-spring)
-        var(--md-sys-motion-timing-function-fast-effects-spring);
+    --cbg-now: var(--cbg-inner);
+    border-radius: var(--cbg-now);
 
-    &:only-child {
-      border-radius: var(--cbg-outer, 9999px);
+    &[data-state='on'] {
+      --cbg-now: var(--btn-round);
     }
 
-    &[data-orientation='horizontal']:first-child:not(:only-child) {
-      border-top-left-radius: var(--cbg-outer, 9999px);
-      border-bottom-left-radius: var(--cbg-outer, 9999px);
+    &[data-orientation='horizontal']:first-child {
+      border-start-start-radius: var(--cbg-outer);
+      border-end-start-radius: var(--cbg-outer);
     }
-    &[data-orientation='horizontal']:last-child:not(:only-child) {
-      border-top-right-radius: var(--cbg-outer, 9999px);
-      border-bottom-right-radius: var(--cbg-outer, 9999px);
+    &[data-orientation='horizontal']:last-child {
+      border-start-end-radius: var(--cbg-outer);
+      border-end-end-radius: var(--cbg-outer);
     }
-    &[data-orientation='vertical']:first-child:not(:only-child) {
-      border-top-left-radius: var(--cbg-outer, 9999px);
-      border-top-right-radius: var(--cbg-outer, 9999px);
+    &[data-orientation='vertical']:first-child {
+      border-start-start-radius: var(--cbg-outer);
+      border-start-end-radius: var(--cbg-outer);
     }
-    &[data-orientation='vertical']:last-child:not(:only-child) {
-      border-bottom-left-radius: var(--cbg-outer, 9999px);
-      border-bottom-right-radius: var(--cbg-outer, 9999px);
-    }
-
-    &:active:not(:disabled),
-    &[data-state='on'] {
-      border-radius: var(--cbg-inner, 4px) !important;
+    &[data-orientation='vertical']:last-child {
+      border-end-start-radius: var(--cbg-outer);
+      border-end-end-radius: var(--cbg-outer);
     }
   }
 
@@ -165,65 +127,6 @@
     @apply bg-md-sys-color-error text-md-sys-color-on-error;
   }
 
-  .md-component-button-tonal-primary {
-    @apply bg-md-sys-color-primary-container text-md-sys-color-on-primary-container;
-  }
-  .md-component-button-tonal-secondary {
-    @apply bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container;
-  }
-  .md-component-button-tonal-tertiary {
-    @apply bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container;
-  }
-  .md-component-button-tonal-error {
-    @apply bg-md-sys-color-error-container text-md-sys-color-on-error-container;
-  }
-
-  .md-component-button-outline-default {
-    @apply text-md-sys-color-on-surface-variant outline-md-sys-color-outline-variant outline-2;
-  }
-  .md-component-button-outline-primary {
-    @apply text-md-sys-color-primary outline-md-sys-color-primary outline;
-  }
-  .md-component-button-outline-secondary {
-    @apply text-md-sys-color-secondary outline-md-sys-color-secondary outline;
-  }
-  .md-component-button-outline-tertiary {
-    @apply text-md-sys-color-tertiary outline-md-sys-color-tertiary outline;
-  }
-  .md-component-button-outline-error {
-    @apply text-md-sys-color-error outline-md-sys-color-error outline;
-  }
-
-  .md-component-button-text-primary {
-    @apply text-md-sys-color-primary;
-  }
-  .md-component-button-text-secondary {
-    @apply text-md-sys-color-secondary;
-  }
-  .md-component-button-text-tertiary {
-    @apply text-md-sys-color-tertiary;
-  }
-  .md-component-button-text-error {
-    @apply text-md-sys-color-error;
-  }
-
-  .md-component-button-elevated-default {
-    @apply bg-md-sys-color-surface-container-low text-md-sys-color-primary shadow-elevation-1;
-  }
-
-  .md-component-button-elevated-primary {
-    @apply bg-md-sys-color-surface-container-low text-md-sys-color-primary shadow-elevation-1;
-  }
-  .md-component-button-elevated-secondary {
-    @apply bg-md-sys-color-surface-container-low text-md-sys-color-secondary shadow-elevation-1;
-  }
-  .md-component-button-elevated-tertiary {
-    @apply bg-md-sys-color-surface-container-low text-md-sys-color-tertiary shadow-elevation-1;
-  }
-  .md-component-button-elevated-error {
-    @apply bg-md-sys-color-surface-container-low text-md-sys-color-error shadow-elevation-1;
-  }
-
   [class^='material-symbols-'],
   [class*=' material-symbols-'] {
     font-weight: normal;
@@ -267,7 +170,7 @@
 }
 
 @utility state-layer {
-  @apply before:pointer-events-none before:absolute before:inset-0 before:content-[''];
+  @apply before:inset-spacing-0 before:pointer-events-none before:absolute before:content-[''];
   &::before {
     transition: background-color var(--md-sys-motion-duration-fast-effects-spring)
       var(--md-sys-motion-timing-function-fast-effects-spring);

package/dist/styles/elevation.css

@@ -43,3 +43,12 @@
 @utility shadow-elevation-5 {
   box-shadow: var(--md-sys-elevation-5);
 }
+
+/* Elevation 3 as a filter, for surfaces whose shape is a clip-path (a box-shadow would be
+   clipped with it). drop-shadow has no spread, so the ambient layer is a little tighter. */
+@utility drop-shadow-elevation-3 {
+  filter: drop-shadow(
+      0px 1px 3px color-mix(in srgb, var(--color-md-sys-color-shadow) 30%, transparent)
+    )
+    drop-shadow(0px 4px 8px color-mix(in srgb, var(--color-md-sys-color-shadow) 15%, transparent));
+}

package/dist/styles/spacing.css

@@ -0,0 +1,29 @@
+/*
+ * M3 system spacing: https://m3.material.io/styles/spacing/tokens
+ * md.sys.measurement.space<N> = N/100 x the 8dp base (space100). Registered in Tailwind's
+ * spacing namespace, so every spacing utility takes them: mr-spacing-200 (16dp),
+ * gap-spacing-50 (4dp), p-spacing-300, size-spacing-600, -mt-spacing-100, and so on.
+ * The number is M3's token number, not Tailwind's 4px multiplier: spacing-200 is 16dp, the same
+ * as Tailwind's p-4. Tailwind's numeric scale stays available to consuming apps; the library's
+ * own spacing uses these tokens.
+ */
+@theme {
+  --spacing-spacing-0: 0; /* md.sys.measurement.space0, 0dp */
+  --spacing-spacing-25: 0.125rem; /* md.sys.measurement.space25, 2dp */
+  --spacing-spacing-50: 0.25rem; /* md.sys.measurement.space50, 4dp */
+  --spacing-spacing-75: 0.375rem; /* md.sys.measurement.space75, 6dp */
+  --spacing-spacing-100: 0.5rem; /* md.sys.measurement.space100, 8dp */
+  --spacing-spacing-125: 0.625rem; /* md.sys.measurement.space125, 10dp */
+  --spacing-spacing-150: 0.75rem; /* md.sys.measurement.space150, 12dp */
+  --spacing-spacing-175: 0.875rem; /* md.sys.measurement.space175, 14dp */
+  --spacing-spacing-200: 1rem; /* md.sys.measurement.space200, 16dp */
+  --spacing-spacing-250: 1.25rem; /* md.sys.measurement.space250, 20dp */
+  --spacing-spacing-300: 1.5rem; /* md.sys.measurement.space300, 24dp */
+  --spacing-spacing-400: 2rem; /* md.sys.measurement.space400, 32dp */
+  --spacing-spacing-450: 2.25rem; /* md.sys.measurement.space450, 36dp */
+  --spacing-spacing-500: 2.5rem; /* md.sys.measurement.space500, 40dp */
+  --spacing-spacing-600: 3rem; /* md.sys.measurement.space600, 48dp */
+  --spacing-spacing-700: 3.5rem; /* md.sys.measurement.space700, 56dp */
+  --spacing-spacing-800: 4rem; /* md.sys.measurement.space800, 64dp */
+  --spacing-spacing-900: 4.5rem; /* md.sys.measurement.space900, 72dp */
+}