@motion-proto/live-tokens 0.78.0 → 0.80.0

package/src/system/components/Badge.svelte

@@ -1,13 +1,17 @@
-<!--
-  Badge.svelte. A short standing label on an element.
-  Use for: status the reader takes at a glance, such as "Beta", "New", or a
-  version.
-  Not for: a marker that sits on a parent's corner (CornerBadge); feedback
-  after an action (Notification).
--->
 <script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A short standing label on an element.',
+    useFor: 'status the reader takes at a glance, such as "Beta", "New", or a version.',
+    notFor: "a marker that sits on a parent's corner (CornerBadge); feedback after an action (Notification).",
+    props: {
+      variant: '`brand`, `accent`, `special`, `alternate`, `canvas`, and `neutral` paint a color family; `success`, `warning`, `danger`, and `info` carry a status.',
+    },
+  } satisfies CatalogueEntry;
+
   export const badgeVariants = [
-    'primary',
+    'brand',
     'accent',
     'neutral',
     'alternate',
@@ -57,7 +61,7 @@
 <style lang="scss">
   @use '../styles/padding' as *;
 
-  $variants: info, accent, primary, success, warning, danger, neutral, special, alternate, canvas;
+  $variants: info, accent, brand, success, warning, danger, neutral, special, alternate, canvas;
 
   // Per-variant token block kept flat (not collapsed via SCSS @each) so the
   // Layer-2 token-discovery parser (`extractGlobalRootBody` in
@@ -67,20 +71,20 @@
   // Notification.svelte. `--text-primary` is the neutral primary text (with
   // -secondary/-tertiary scale); `--text-brand` is the brand-family text.
   :global(:root) {
-    /* Primary */
-    --badge-primary-surface: var(--surface-brand);
-    --badge-primary-text: var(--text-brand);
-    --badge-primary-border: var(--border-brand);
-    --badge-primary-text-font-family: var(--font-sans);
-    --badge-primary-text-font-size: var(--font-size-md);
-    --badge-primary-text-font-weight: var(--font-weight-normal);
-    --badge-primary-text-line-height: var(--line-height-none);
-    --badge-primary-border-width: var(--border-width-1);
-    --badge-primary-radius: var(--radius-full);
-    --badge-primary-padding: var(--space-6);
-    --badge-primary-shadow: var(--shadow-none);
-    --badge-primary-blur: var(--blur-none);
-    --badge-primary-icon-size: var(--icon-size-sm);
+    /* Brand */
+    --badge-brand-surface: var(--surface-brand);
+    --badge-brand-text: var(--text-brand);
+    --badge-brand-border: var(--border-brand);
+    --badge-brand-text-font-family: var(--font-sans);
+    --badge-brand-text-font-size: var(--font-size-md);
+    --badge-brand-text-font-weight: var(--font-weight-normal);
+    --badge-brand-text-line-height: var(--line-height-none);
+    --badge-brand-border-width: var(--border-width-1);
+    --badge-brand-radius: var(--radius-full);
+    --badge-brand-padding: var(--space-6);
+    --badge-brand-shadow: var(--shadow-none);
+    --badge-brand-blur: var(--blur-none);
+    --badge-brand-icon-size: var(--icon-size-sm);
 
     /* Accent */
     --badge-accent-surface: var(--surface-accent);

package/src/system/components/Button.svelte

@@ -1,10 +1,16 @@
-<!--
-  Button.svelte. A labelled action.
-  Use for: an action that needs a word to be unambiguous.
-  Not for: an icon-only action (IconButton); a link to another page.
-  Emphasis: one primary per page; secondary for the rest; outline for a
-  tertiary action; danger for a destructive one.
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A labelled action.',
+    useFor: 'an action that needs a word to be unambiguous.',
+    notFor: 'an icon-only action (IconButton); a link to another page.',
+    props: {
+      variant: 'one primary per page; secondary for the rest; outline for a tertiary action; danger for a destructive one.',
+    },
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
    import { createEventDispatcher } from 'svelte';
 

package/src/system/components/Callout.svelte

@@ -1,10 +1,15 @@
-<!--
-  Callout.svelte. A standing message that sits inside a section.
-  Use for: something the reader must know about the content around it.
-  Not for: feedback after an action (Notification); a hint that hangs off one
-  element (Tooltip).
--->
 <script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A standing message that sits inside a section.',
+    useFor: 'something the reader must know about the content around it.',
+    notFor: 'feedback after an action (Notification); a note that hangs off one element (Tooltip).',
+    props: {
+      variant: '`info` notes, `success` confirms, `warning` cautions, `danger` flags harm.',
+    },
+  } satisfies CatalogueEntry;
+
   export const calloutVariants = ['info', 'success', 'warning', 'danger'] as const;
   export type CalloutVariant = typeof calloutVariants[number];
 </script>
@@ -35,7 +40,7 @@
     --callout-info-surface: var(--surface-info-lowest);
     --callout-info-border: var(--border-info-medium);
     --callout-info-border-width: var(--border-width-1);
-    --callout-info-accent-width: var(--border-width-1);
+    --callout-info-indicator-width: var(--border-width-1);
     --callout-info-radius: var(--radius-lg);
     --callout-info-padding: var(--space-12);
     --callout-info-label: var(--text-primary);
@@ -53,7 +58,7 @@
     --callout-success-surface: var(--surface-success-lowest);
     --callout-success-border: var(--border-success-subtle);
     --callout-success-border-width: var(--border-width-1);
-    --callout-success-accent-width: var(--border-width-1);
+    --callout-success-indicator-width: var(--border-width-1);
     --callout-success-radius: var(--radius-lg);
     --callout-success-padding: var(--space-12);
     --callout-success-label: var(--text-primary);
@@ -71,7 +76,7 @@
     --callout-warning-surface: var(--surface-warning-lowest);
     --callout-warning-border: var(--border-warning-subtle);
     --callout-warning-border-width: var(--border-width-1);
-    --callout-warning-accent-width: var(--border-width-1);
+    --callout-warning-indicator-width: var(--border-width-1);
     --callout-warning-radius: var(--radius-lg);
     --callout-warning-padding: var(--space-12);
     --callout-warning-label: var(--text-primary);
@@ -89,7 +94,7 @@
     --callout-danger-surface: var(--surface-danger-lowest);
     --callout-danger-border: var(--border-danger-subtle);
     --callout-danger-border-width: var(--border-width-1);
-    --callout-danger-accent-width: var(--border-width-1);
+    --callout-danger-indicator-width: var(--border-width-1);
     --callout-danger-radius: var(--radius-lg);
     --callout-danger-padding: var(--space-12);
     --callout-danger-label: var(--text-primary);
@@ -130,7 +135,7 @@
     .callout-#{$variant} {
       background: var(--callout-#{$variant}-surface);
       border: var(--callout-#{$variant}-border-width) solid var(--callout-#{$variant}-border);
-      border-left-width: var(--callout-#{$variant}-accent-width);
+      border-left-width: var(--callout-#{$variant}-indicator-width);
       border-radius: var(--callout-#{$variant}-radius);
       @include themed-padding(--callout-#{$variant}-padding, $h: 1.33);
 

package/src/system/components/Card.svelte

@@ -1,10 +1,17 @@
-<!--
-  Card.svelte. One item with a title.
-  Use for: an item on its own, or each item in a set: a product, a record, a
-  plan the reader may act on.
-  Not for: a section of the page's content (Panel); content the reader opens
-  on demand (CollapsibleSection); a decision that blocks the page (Dialog).
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'One item with a title.',
+    useFor: 'an item on its own, or each item in a set: a product, a record, a plan the reader may act on.',
+    notFor:
+      "a section of the page's content (Panel); content the reader opens on demand (CollapsibleSection); a decision that blocks the page (Dialog).",
+    props: {
+      variant: '`bare` drops the header for content that carries its own title.',
+    },
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   interface Props {
     icon?: string;
@@ -13,7 +20,7 @@
     /** `bare` drops the header. The frame and body keep every token the default
         variant uses, so padding, stroke and fill stay editable. */
     variant?: 'default' | 'bare';
-    size?: 'default' | 'compact';
+    size?: 'default' | 'small';
     /** false → the card stops pinning body typography so the consumer fully owns slotted content's styling. */
     prose?: boolean;
     /** true → the body drops its inset so slotted media runs to the card's edge.
@@ -62,7 +69,7 @@
 <div
   class="card {className}"
   class:bare={variant === 'bare'}
-  class:compact={size === 'compact'}
+  class:small={size === 'small'}
   style:--card-color={iconColor}
   style:--card-hover-border-enabled={hoverBorder}
   style:--card-hover-shadow-enabled={hoverShadow}
@@ -175,8 +182,8 @@
     margin-left: auto;
   }
 
-  .card.compact .card-header,
-  .card.compact .card-body {
+  .card.small .card-header,
+  .card.small .card-body {
     padding: var(--space-8) var(--space-12);
   }
 
@@ -185,7 +192,7 @@
     color: var(--card-color, var(--card-default-title));
   }
 
-  .card.compact .card-icon {
+  .card.small .card-icon {
     font-size: var(--icon-size-md);
   }
 
@@ -201,7 +208,7 @@
     text-overflow: ellipsis;
   }
 
-  .card.compact .card-title {
+  .card.small .card-title {
     font-size: var(--font-size-md);
   }
 
@@ -216,11 +223,11 @@
     @include slot-prose;
   }
 
-  .card.compact .card-body {
+  .card.small .card-body {
     font-size: var(--font-size-sm);
   }
 
-  /* Last, and at the same weight as the compact override, so a flush card is
+  /* Last, and at the same weight as the small override, so a flush card is
      flush at either size. Full-bleed media has to reach the border the card
      already clips it against. */
   .card-body.flush {

package/src/system/components/CodeSnippet.svelte

@@ -1,9 +1,13 @@
-<!--
-  CodeSnippet.svelte. A command or value with a copy button.
-  Use for: text the reader is meant to run or paste somewhere else.
-  Not for: prose the reader only reads (a paragraph in its Card or Panel); a
-  value the reader edits (Input).
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A command or value with a copy button.',
+    useFor: 'text the reader is meant to run or paste somewhere else.',
+    notFor: 'prose the reader only reads (a paragraph in its Card or Panel); a value the reader edits (Input).',
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   import Tooltip from './Tooltip.svelte';
 

package/src/system/components/CollapsibleSection.svelte

@@ -1,19 +1,24 @@
-<!--
-  CollapsibleSection.svelte. A section the reader opens and closes.
-  Use for: secondary content that most readers skip.
-  Not for: content every reader needs (Card); moving between pages
-  (SideNavigation).
-  Variant: `chromeless` sits inside other content, `divider` rules a line
-  under the header, `container` frames the whole section.
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A section the reader opens and closes.',
+    useFor: 'secondary content that most readers skip.',
+    notFor: 'content every reader needs (Card); moving between pages (SideNavigation).',
+    props: {
+      variant: '`chromeless` sits inside other content, `hairline` draws a line under the header, `container` frames the whole section.',
+    },
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
    import { createEventDispatcher } from 'svelte';
 
    interface Props {
       label: string;
-      expanded?: boolean;
+      open?: boolean;
       href?: string | undefined;
-      variant?: 'chromeless' | 'divider' | 'container';
+      variant?: 'chromeless' | 'hairline' | 'container';
       /** false → the section stops pinning body typography so the consumer fully owns slotted content's styling. */
       prose?: boolean;
       class?: string;
@@ -25,7 +30,7 @@
 
    let {
       label,
-      expanded = false,
+      open = false,
       href = undefined,
       variant = 'container',
       prose = true,
@@ -52,13 +57,13 @@
            section can still be collapsed even when the label is a link. Both
            live inside the same `.section-header` flex row so paint (hover,
            background, indicator) continues to land on the row as a whole. -->
-      <div class="section-header section-header--linked" class:expanded>
+      <div class="section-header section-header--linked" class:open>
          <button
             type="button"
             class="section-toggle-button"
             onclick={fireToggle}
-            aria-label={expanded ? 'Collapse section' : 'Expand section'}
-            aria-expanded={expanded}
+            aria-label={open ? 'Collapse section' : 'Expand section'}
+            aria-expanded={open}
          >
             <i class="fas fa-chevron-right toggle-icon"></i>
          </button>
@@ -68,23 +73,20 @@
          {@render summary?.()}
       </div>
    {:else}
-      <div class="section-header" class:expanded>
-         <div class="section-toggle">
-            <button
-               type="button"
-               class="section-toggle-button"
-               onclick={fireToggle}
-               aria-label={expanded ? 'Collapse section' : 'Expand section'}
-               aria-expanded={expanded}
-            >
-               <i class="fas fa-chevron-right toggle-icon"></i>
-            </button>
+      <div class="section-header" class:open>
+         <button
+            type="button"
+            class="section-toggle-button section-toggle"
+            onclick={fireToggle}
+            aria-expanded={open}
+         >
+            <i class="fas fa-chevron-right toggle-icon" aria-hidden="true"></i>
             <span class="section-label">{label}</span>
-         </div>
+         </button>
          {@render summary?.()}
       </div>
    {/if}
-   {#if expanded && children}
+   {#if open && children}
       <div class="section-content" class:prose>
          {@render children?.()}
       </div>
@@ -116,35 +118,35 @@
       --collapsiblesection-chromeless-hover-label-line-height: var(--line-height-normal);
       --collapsiblesection-chromeless-hover-icon: var(--text-primary);
       --collapsiblesection-chromeless-hover-icon-size: var(--icon-size-xs);
-      /* Chromeless — expanded */
-      --collapsiblesection-chromeless-expanded-padding: var(--space-4);
+      /* Chromeless — open */
+      --collapsiblesection-chromeless-open-padding: var(--space-4);
 
-      /* Divider — default */
-      --collapsiblesection-divider-default-surface: var(--color-transparent);
-      --collapsiblesection-divider-default-hairline-color: var(--border-brand);
-      --collapsiblesection-divider-default-hairline-thickness: var(--border-width-1);
-      --collapsiblesection-divider-default-padding: var(--space-4);
-      --collapsiblesection-divider-default-label: var(--text-primary);
-      --collapsiblesection-divider-default-label-font-family: var(--font-sans);
-      --collapsiblesection-divider-default-label-font-size: var(--font-size-md);
-      --collapsiblesection-divider-default-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-divider-default-label-line-height: var(--line-height-normal);
-      --collapsiblesection-divider-default-icon: var(--text-primary);
-      --collapsiblesection-divider-default-icon-size: var(--icon-size-xs);
-      /* Divider — hover */
-      --collapsiblesection-divider-hover-surface: var(--color-transparent);
-      --collapsiblesection-divider-hover-hairline-color: var(--border-neutral);
-      --collapsiblesection-divider-hover-hairline-thickness: var(--border-width-1);
-      --collapsiblesection-divider-hover-padding: var(--space-4);
-      --collapsiblesection-divider-hover-label: var(--text-primary);
-      --collapsiblesection-divider-hover-label-font-family: var(--font-sans);
-      --collapsiblesection-divider-hover-label-font-size: var(--font-size-md);
-      --collapsiblesection-divider-hover-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-divider-hover-label-line-height: var(--line-height-normal);
-      --collapsiblesection-divider-hover-icon: var(--text-primary);
-      --collapsiblesection-divider-hover-icon-size: var(--icon-size-xs);
-      /* Divider — expanded */
-      --collapsiblesection-divider-expanded-padding: var(--space-4);
+      /* Hairline — default */
+      --collapsiblesection-hairline-default-surface: var(--color-transparent);
+      --collapsiblesection-hairline-default-hairline-color: var(--border-brand);
+      --collapsiblesection-hairline-default-hairline-width: var(--border-width-1);
+      --collapsiblesection-hairline-default-padding: var(--space-4);
+      --collapsiblesection-hairline-default-label: var(--text-primary);
+      --collapsiblesection-hairline-default-label-font-family: var(--font-sans);
+      --collapsiblesection-hairline-default-label-font-size: var(--font-size-md);
+      --collapsiblesection-hairline-default-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-hairline-default-label-line-height: var(--line-height-normal);
+      --collapsiblesection-hairline-default-icon: var(--text-primary);
+      --collapsiblesection-hairline-default-icon-size: var(--icon-size-xs);
+      /* Hairline — hover */
+      --collapsiblesection-hairline-hover-surface: var(--color-transparent);
+      --collapsiblesection-hairline-hover-hairline-color: var(--border-neutral);
+      --collapsiblesection-hairline-hover-hairline-width: var(--border-width-1);
+      --collapsiblesection-hairline-hover-padding: var(--space-4);
+      --collapsiblesection-hairline-hover-label: var(--text-primary);
+      --collapsiblesection-hairline-hover-label-font-family: var(--font-sans);
+      --collapsiblesection-hairline-hover-label-font-size: var(--font-size-md);
+      --collapsiblesection-hairline-hover-label-font-weight: var(--font-weight-normal);
+      --collapsiblesection-hairline-hover-label-line-height: var(--line-height-normal);
+      --collapsiblesection-hairline-hover-icon: var(--text-primary);
+      --collapsiblesection-hairline-hover-icon-size: var(--icon-size-xs);
+      /* Hairline — open */
+      --collapsiblesection-hairline-open-padding: var(--space-4);
 
       /* Container — frame (always-on outer chrome) */
       --collapsiblesection-container-frame-border: var(--border-neutral);
@@ -170,9 +172,9 @@
       --collapsiblesection-container-hover-label-line-height: var(--line-height-normal);
       --collapsiblesection-container-hover-icon: var(--text-primary);
       --collapsiblesection-container-hover-icon-size: var(--icon-size-xs);
-      /* Container — expanded content area */
-      --collapsiblesection-container-expanded-surface: var(--surface-neutral-higher);
-      --collapsiblesection-container-expanded-padding: var(--space-4);
+      /* Container — open content area */
+      --collapsiblesection-container-open-surface: var(--surface-neutral-higher);
+      --collapsiblesection-container-open-padding: var(--space-4);
    }
 
    .es-root {
@@ -189,16 +191,19 @@
       color: inherit;
       transition: all var(--duration-150);
 
-      &.expanded .toggle-icon {
+      &.open .toggle-icon {
          transform: rotate(90deg);
       }
    }
 
-   .section-toggle {
-      display: flex;
-      align-items: center;
+   /* The whole unlinked header toggles, so the button carries the label and
+      fills the row; a summary snippet still sits beside it. */
+   .section-toggle-button.section-toggle {
       gap: var(--space-8);
-      flex-shrink: 0;
+      flex: 1 1 auto;
+      min-width: 0;
+      justify-content: flex-start;
+      text-align: start;
    }
 
    /* Linked header: chevron is a sibling button next to the label link, not a
@@ -251,8 +256,8 @@
       }
    }
 
-   @mixin divider-bottom($state) {
-      border-bottom: var(--collapsiblesection-divider-#{$state}-hairline-thickness) solid var(--collapsiblesection-divider-#{$state}-hairline-color);
+   @mixin hairline-bottom($state) {
+      border-bottom: var(--collapsiblesection-hairline-#{$state}-hairline-width) solid var(--collapsiblesection-hairline-#{$state}-hairline-color);
    }
 
    .es-root.variant-chromeless {
@@ -262,25 +267,25 @@
       }
       &.force-hover > .section-header { @include header-paint(chromeless, hover); }
       > .section-content {
-         @include themed-padding(--collapsiblesection-chromeless-expanded-padding, $h: 2);
+         @include themed-padding(--collapsiblesection-chromeless-open-padding, $h: 2);
       }
    }
 
-   .es-root.variant-divider {
+   .es-root.variant-hairline {
       > .section-header {
-         @include header-paint(divider, default);
-         @include divider-bottom(default);
+         @include header-paint(hairline, default);
+         @include hairline-bottom(default);
          &:hover {
-            @include header-paint(divider, hover);
-            @include divider-bottom(hover);
+            @include header-paint(hairline, hover);
+            @include hairline-bottom(hover);
          }
       }
       &.force-hover > .section-header {
-         @include header-paint(divider, hover);
-         @include divider-bottom(hover);
+         @include header-paint(hairline, hover);
+         @include hairline-bottom(hover);
       }
       > .section-content {
-         @include themed-padding(--collapsiblesection-divider-expanded-padding, $h: 2);
+         @include themed-padding(--collapsiblesection-hairline-open-padding, $h: 2);
       }
    }
 
@@ -295,8 +300,8 @@
       }
       &.force-hover > .section-header { @include header-paint(container, hover); }
       > .section-content {
-         background: var(--collapsiblesection-container-expanded-surface);
-         @include themed-padding(--collapsiblesection-container-expanded-padding, $h: 2);
+         background: var(--collapsiblesection-container-open-surface);
+         @include themed-padding(--collapsiblesection-container-open-padding, $h: 2);
       }
    }