@motion-proto/live-tokens 0.73.0 → 0.75.0

package/src/live-tokens/data/themes/spring-meadow.json

@@ -2210,42 +2210,6 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-400) 0%, var(--color-special-700) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-      "--badge-trait-surface": "var(--surface-brand)",
-      "--badge-trait-text": "var(--text-brand)",
-      "--badge-trait-text-font-family": "var(--font-sans)",
-      "--badge-trait-text-font-size": "var(--font-size-sm)",
-      "--badge-trait-text-font-weight": "var(--font-weight-light)",
-      "--badge-trait-text-line-height": "var(--line-height-none)",
-      "--badge-trait-border": "var(--border-brand-medium)",
-      "--badge-trait-border-width": "var(--border-width-1)",
-      "--badge-trait-shadow": "transparent",
-      "--sectiondivider-title": "var(--text-primary)",
-      "--sectiondivider-title-font-family": "var(--font-display)",
-      "--sectiondivider-title-font-size": "var(--font-size-5xl)",
-      "--sectiondivider-title-font-weight": "var(--font-weight-normal)",
-      "--sectiondivider-title-line-height": "var(--line-height-none)",
-      "--sectiondivider-title-border-width": "var(--border-width-4)",
-      "--sectiondivider-title-stroke-color": "var(--surface-canvas-lowest)",
-      "--sectiondivider-description": "var(--text-secondary)",
-      "--sectiondivider-description-font-family": "var(--font-sans)",
-      "--sectiondivider-description-font-size": "var(--font-size-md)",
-      "--sectiondivider-description-font-weight": "var(--font-weight-normal)",
-      "--sectiondivider-description-line-height": "var(--line-height-normal)",
-      "--dialog-primary-default-surface": "var(--surface-neutral-high)",
-      "--dialog-primary-default-text": "var(--text-primary)",
-      "--dialog-primary-default-border": "var(--border-neutral-medium)",
-      "--dialog-primary-default-border-width": "var(--border-width-1)",
-      "--dialog-primary-hover-surface": "var(--surface-neutral-higher)",
-      "--dialog-primary-hover-text": "var(--text-primary)",
-      "--dialog-primary-hover-border": "var(--border-neutral-strong)",
-      "--dialog-primary-hover-border-width": "var(--border-width-1)",
-      "--dialog-secondary-default-text": "var(--text-primary)",
-      "--dialog-secondary-default-border": "var(--border-neutral-medium)",
-      "--dialog-secondary-default-border-width": "var(--border-width-1)",
-      "--dialog-secondary-hover-surface": "var(--surface-neutral-lower)",
-      "--dialog-secondary-hover-text": "var(--text-primary)",
-      "--dialog-secondary-hover-border": "var(--border-neutral-strong)",
-      "--dialog-secondary-hover-border-width": "var(--border-width-1)",
       "--columns-count": "12",
       "--columns-max-width": "1440px",
       "--columns-gutter": "32px",
@@ -2432,7 +2396,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 3,
+    "schemaVersion": 8,
     "gradients": [
       {
         "variable": "--gradient-1",
@@ -2917,8 +2881,8 @@
         "--collapsiblesection-chromeless-hover-icon-size": "--icon-size-xs",
         "--collapsiblesection-chromeless-expanded-padding": "--space-8",
         "--collapsiblesection-divider-default-surface": "--color-transparent",
-        "--collapsiblesection-divider-default-border": "--border-brand",
-        "--collapsiblesection-divider-default-border-width": "--border-width-1",
+        "--collapsiblesection-divider-default-hairline-color": "--border-brand",
+        "--collapsiblesection-divider-default-hairline-thickness": "--border-width-1",
         "--collapsiblesection-divider-default-padding": "--space-8",
         "--collapsiblesection-divider-default-label": "--text-primary",
         "--collapsiblesection-divider-default-label-font-family": "--font-sans",
@@ -2928,8 +2892,8 @@
         "--collapsiblesection-divider-default-icon": "--text-primary",
         "--collapsiblesection-divider-default-icon-size": "--icon-size-xs",
         "--collapsiblesection-divider-hover-surface": "--color-transparent",
-        "--collapsiblesection-divider-hover-border": "--border-neutral",
-        "--collapsiblesection-divider-hover-border-width": "--border-width-1",
+        "--collapsiblesection-divider-hover-hairline-color": "--border-neutral",
+        "--collapsiblesection-divider-hover-hairline-thickness": "--border-width-1",
         "--collapsiblesection-divider-hover-padding": "--space-8",
         "--collapsiblesection-divider-hover-label": "--text-primary",
         "--collapsiblesection-divider-hover-label-font-family": "--font-sans",
@@ -3026,8 +2990,8 @@
         "--dialog-shadow": "--shadow-2xl",
         "--dialog-blur": "--blur-none",
         "--dialog-header-surface": "--surface-neutral-lower",
-        "--dialog-header-border": "--border-neutral-subtle",
-        "--dialog-header-border-width": "--border-width-1",
+        "--dialog-header-divider": "--border-neutral-subtle",
+        "--dialog-header-divider-width": "--border-width-1",
         "--dialog-header-padding": "--space-12",
         "--dialog-title": "--text-primary",
         "--dialog-title-font-family": "--font-sans",
@@ -3042,8 +3006,8 @@
         "--dialog-body-font-size": "--font-size-md",
         "--dialog-body-font-weight": "--font-weight-normal",
         "--dialog-body-line-height": "--line-height-normal",
-        "--dialog-footer-border": "--border-neutral-subtle",
-        "--dialog-footer-border-width": "--border-width-1",
+        "--dialog-footer-divider": "--border-neutral-subtle",
+        "--dialog-footer-divider-width": "--border-width-1",
         "--dialog-footer-padding": "--space-24"
       }
     },
@@ -3830,7 +3794,7 @@
         "--tabbar-default-tab-border-width": "--border-width-0",
         "--tabbar-default-tab-top-radius": "--radius-sm",
         "--tabbar-default-tab-bottom-radius": "--radius-sm",
-        "--tabbar-default-indicator-border-width": "--border-width-2",
+        "--tabbar-default-indicator-width": "--border-width-2",
         "--tabbar-hover-text": "--text-secondary",
         "--tabbar-hover-surface": "--surface-neutral-lower",
         "--tabbar-hover-text-font-family": "--font-sans",
@@ -3844,7 +3808,7 @@
         "--tabbar-hover-tab-border-width": "--border-width-0",
         "--tabbar-hover-tab-top-radius": "--radius-sm",
         "--tabbar-hover-tab-bottom-radius": "--radius-sm",
-        "--tabbar-hover-indicator-border-width": "--border-width-2",
+        "--tabbar-hover-indicator-width": "--border-width-2",
         "--tabbar-active-text": "--text-primary",
         "--tabbar-active-border": "--color-brand-500",
         "--tabbar-active-surface": "--tint-low",
@@ -3858,7 +3822,7 @@
         "--tabbar-active-tab-border-width": "--border-width-0",
         "--tabbar-active-tab-top-radius": "--radius-sm",
         "--tabbar-active-tab-bottom-radius": "--radius-sm",
-        "--tabbar-active-indicator-border-width": "--border-width-2",
+        "--tabbar-active-indicator-width": "--border-width-2",
         "--tabbar-disabled-text": "--text-disabled",
         "--tabbar-disabled-text-font-family": "--font-sans",
         "--tabbar-disabled-text-font-size": "--font-size-md",
@@ -3872,7 +3836,7 @@
         "--tabbar-disabled-tab-border-width": "--border-width-0",
         "--tabbar-disabled-tab-top-radius": "--radius-sm",
         "--tabbar-disabled-tab-bottom-radius": "--radius-sm",
-        "--tabbar-disabled-indicator-border-width": "--border-width-2"
+        "--tabbar-disabled-indicator-width": "--border-width-2"
       }
     },
     "table": {
@@ -3893,8 +3857,8 @@
         "--table-default-header-font-weight": "--font-weight-semibold",
         "--table-default-header-line-height": "--line-height-none",
         "--table-default-header-padding": "--space-20",
-        "--table-default-header-border": "--border-neutral",
-        "--table-default-header-border-width": "--border-width-1",
+        "--table-default-header-divider": "--border-neutral",
+        "--table-default-header-divider-width": "--border-width-1",
         "--table-default-cell-text": "--text-secondary",
         "--table-default-cell-font-family": "--font-sans",
         "--table-default-cell-font-size": "--font-size-md",
@@ -4016,5 +3980,5 @@
       }
     }
   },
-  "componentSchemaVersion": 26
+  "componentSchemaVersion": 27
 }

package/src/live-tokens/data/themes/sunset.json

@@ -2271,42 +2271,6 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-600) 0%, var(--color-canvas-900) 100%)",
-      "--badge-trait-surface": "var(--surface-brand)",
-      "--badge-trait-text": "var(--text-brand)",
-      "--badge-trait-text-font-family": "var(--font-sans)",
-      "--badge-trait-text-font-size": "var(--font-size-sm)",
-      "--badge-trait-text-font-weight": "var(--font-weight-light)",
-      "--badge-trait-text-line-height": "var(--line-height-none)",
-      "--badge-trait-border": "var(--border-brand-medium)",
-      "--badge-trait-border-width": "var(--border-width-1)",
-      "--badge-trait-shadow": "transparent",
-      "--sectiondivider-title": "var(--text-primary)",
-      "--sectiondivider-title-font-family": "var(--font-display)",
-      "--sectiondivider-title-font-size": "var(--font-size-5xl)",
-      "--sectiondivider-title-font-weight": "var(--font-weight-normal)",
-      "--sectiondivider-title-line-height": "var(--line-height-none)",
-      "--sectiondivider-title-border-width": "var(--border-width-4)",
-      "--sectiondivider-title-stroke-color": "var(--surface-canvas-lowest)",
-      "--sectiondivider-description": "var(--text-secondary)",
-      "--sectiondivider-description-font-family": "var(--font-sans)",
-      "--sectiondivider-description-font-size": "var(--font-size-md)",
-      "--sectiondivider-description-font-weight": "var(--font-weight-normal)",
-      "--sectiondivider-description-line-height": "var(--line-height-normal)",
-      "--dialog-primary-default-surface": "var(--surface-neutral-high)",
-      "--dialog-primary-default-text": "var(--text-primary)",
-      "--dialog-primary-default-border": "var(--border-neutral-medium)",
-      "--dialog-primary-default-border-width": "var(--border-width-1)",
-      "--dialog-primary-hover-surface": "var(--surface-neutral-higher)",
-      "--dialog-primary-hover-text": "var(--text-primary)",
-      "--dialog-primary-hover-border": "var(--border-neutral-strong)",
-      "--dialog-primary-hover-border-width": "var(--border-width-1)",
-      "--dialog-secondary-default-text": "var(--text-primary)",
-      "--dialog-secondary-default-border": "var(--border-neutral-medium)",
-      "--dialog-secondary-default-border-width": "var(--border-width-1)",
-      "--dialog-secondary-hover-surface": "var(--surface-neutral-lower)",
-      "--dialog-secondary-hover-text": "var(--text-primary)",
-      "--dialog-secondary-hover-border": "var(--border-neutral-strong)",
-      "--dialog-secondary-hover-border-width": "var(--border-width-1)",
       "--columns-count": "12",
       "--columns-max-width": "1440px",
       "--columns-gutter": "32px",
@@ -2484,7 +2448,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 3,
+    "schemaVersion": 8,
     "gradients": [
       {
         "variable": "--gradient-1",
@@ -2969,8 +2933,8 @@
         "--collapsiblesection-chromeless-hover-icon-size": "--icon-size-xs",
         "--collapsiblesection-chromeless-expanded-padding": "--space-6",
         "--collapsiblesection-divider-default-surface": "--color-transparent",
-        "--collapsiblesection-divider-default-border": "--border-brand",
-        "--collapsiblesection-divider-default-border-width": "--border-width-1",
+        "--collapsiblesection-divider-default-hairline-color": "--border-brand",
+        "--collapsiblesection-divider-default-hairline-thickness": "--border-width-1",
         "--collapsiblesection-divider-default-padding": "--space-6",
         "--collapsiblesection-divider-default-label": "--text-primary",
         "--collapsiblesection-divider-default-label-font-family": "--font-sans",
@@ -2980,8 +2944,8 @@
         "--collapsiblesection-divider-default-icon": "--text-primary",
         "--collapsiblesection-divider-default-icon-size": "--icon-size-xs",
         "--collapsiblesection-divider-hover-surface": "--color-transparent",
-        "--collapsiblesection-divider-hover-border": "--border-neutral",
-        "--collapsiblesection-divider-hover-border-width": "--border-width-1",
+        "--collapsiblesection-divider-hover-hairline-color": "--border-neutral",
+        "--collapsiblesection-divider-hover-hairline-thickness": "--border-width-1",
         "--collapsiblesection-divider-hover-padding": "--space-6",
         "--collapsiblesection-divider-hover-label": "--text-primary",
         "--collapsiblesection-divider-hover-label-font-family": "--font-sans",
@@ -3078,8 +3042,8 @@
         "--dialog-shadow": "--shadow-2xl",
         "--dialog-blur": "--blur-none",
         "--dialog-header-surface": "--surface-neutral-lower",
-        "--dialog-header-border": "--border-neutral-subtle",
-        "--dialog-header-border-width": "--border-width-1",
+        "--dialog-header-divider": "--border-neutral-subtle",
+        "--dialog-header-divider-width": "--border-width-1",
         "--dialog-header-padding": "--space-10",
         "--dialog-title": "--text-primary",
         "--dialog-title-font-family": "--font-sans",
@@ -3094,8 +3058,8 @@
         "--dialog-body-font-size": "--font-size-md",
         "--dialog-body-font-weight": "--font-weight-normal",
         "--dialog-body-line-height": "--line-height-normal",
-        "--dialog-footer-border": "--border-neutral-subtle",
-        "--dialog-footer-border-width": "--border-width-1",
+        "--dialog-footer-divider": "--border-neutral-subtle",
+        "--dialog-footer-divider-width": "--border-width-1",
         "--dialog-footer-padding": "--space-20"
       }
     },
@@ -3882,7 +3846,7 @@
         "--tabbar-default-tab-border-width": "--border-width-0",
         "--tabbar-default-tab-top-radius": "--radius-sm",
         "--tabbar-default-tab-bottom-radius": "--radius-sm",
-        "--tabbar-default-indicator-border-width": "--border-width-2",
+        "--tabbar-default-indicator-width": "--border-width-2",
         "--tabbar-hover-text": "--text-secondary",
         "--tabbar-hover-surface": "--surface-neutral-lower",
         "--tabbar-hover-text-font-family": "--font-sans",
@@ -3896,7 +3860,7 @@
         "--tabbar-hover-tab-border-width": "--border-width-0",
         "--tabbar-hover-tab-top-radius": "--radius-sm",
         "--tabbar-hover-tab-bottom-radius": "--radius-sm",
-        "--tabbar-hover-indicator-border-width": "--border-width-2",
+        "--tabbar-hover-indicator-width": "--border-width-2",
         "--tabbar-active-text": "--text-primary",
         "--tabbar-active-border": "--color-brand-500",
         "--tabbar-active-surface": "--tint-low",
@@ -3910,7 +3874,7 @@
         "--tabbar-active-tab-border-width": "--border-width-0",
         "--tabbar-active-tab-top-radius": "--radius-sm",
         "--tabbar-active-tab-bottom-radius": "--radius-sm",
-        "--tabbar-active-indicator-border-width": "--border-width-2",
+        "--tabbar-active-indicator-width": "--border-width-2",
         "--tabbar-disabled-text": "--text-disabled",
         "--tabbar-disabled-text-font-family": "--font-sans",
         "--tabbar-disabled-text-font-size": "--font-size-md",
@@ -3924,7 +3888,7 @@
         "--tabbar-disabled-tab-border-width": "--border-width-0",
         "--tabbar-disabled-tab-top-radius": "--radius-sm",
         "--tabbar-disabled-tab-bottom-radius": "--radius-sm",
-        "--tabbar-disabled-indicator-border-width": "--border-width-2"
+        "--tabbar-disabled-indicator-width": "--border-width-2"
       }
     },
     "table": {
@@ -3945,8 +3909,8 @@
         "--table-default-header-font-weight": "--font-weight-semibold",
         "--table-default-header-line-height": "--line-height-none",
         "--table-default-header-padding": "--space-16",
-        "--table-default-header-border": "--border-neutral",
-        "--table-default-header-border-width": "--border-width-1",
+        "--table-default-header-divider": "--border-neutral",
+        "--table-default-header-divider-width": "--border-width-1",
         "--table-default-cell-text": "--text-secondary",
         "--table-default-cell-font-family": "--font-sans",
         "--table-default-cell-font-size": "--font-size-md",
@@ -4068,5 +4032,5 @@
       }
     }
   },
-  "componentSchemaVersion": 26
+  "componentSchemaVersion": 27
 }

package/src/live-tokens/data/tokens.generated.css

@@ -7,42 +7,6 @@
   --gradient-2: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%);
   --gradient-3: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-info-500) 100%);
   --gradient-4: linear-gradient(45deg, var(--color-danger-500) 0%, var(--color-warning-500) 100%);
-  --badge-trait-surface: var(--surface-brand);
-  --badge-trait-text: var(--text-brand);
-  --badge-trait-text-font-family: var(--font-sans);
-  --badge-trait-text-font-size: var(--font-size-sm);
-  --badge-trait-text-font-weight: var(--font-weight-light);
-  --badge-trait-text-line-height: var(--line-height-none);
-  --badge-trait-border: var(--border-brand-medium);
-  --badge-trait-border-width: var(--border-width-1);
-  --badge-trait-shadow: transparent;
-  --sectiondivider-title: var(--text-primary);
-  --sectiondivider-title-font-family: var(--font-display);
-  --sectiondivider-title-font-size: var(--font-size-5xl);
-  --sectiondivider-title-font-weight: var(--font-weight-normal);
-  --sectiondivider-title-line-height: var(--line-height-none);
-  --sectiondivider-title-border-width: var(--border-width-4);
-  --sectiondivider-title-stroke-color: var(--surface-canvas-lowest);
-  --sectiondivider-description: var(--text-secondary);
-  --sectiondivider-description-font-family: var(--font-sans);
-  --sectiondivider-description-font-size: var(--font-size-md);
-  --sectiondivider-description-font-weight: var(--font-weight-normal);
-  --sectiondivider-description-line-height: var(--line-height-normal);
-  --dialog-primary-default-surface: var(--surface-neutral-high);
-  --dialog-primary-default-text: var(--text-primary);
-  --dialog-primary-default-border: var(--border-neutral-medium);
-  --dialog-primary-default-border-width: var(--border-width-1);
-  --dialog-primary-hover-surface: var(--surface-neutral-higher);
-  --dialog-primary-hover-text: var(--text-primary);
-  --dialog-primary-hover-border: var(--border-neutral-strong);
-  --dialog-primary-hover-border-width: var(--border-width-1);
-  --dialog-secondary-default-text: var(--text-primary);
-  --dialog-secondary-default-border: var(--border-neutral-medium);
-  --dialog-secondary-default-border-width: var(--border-width-1);
-  --dialog-secondary-hover-surface: var(--surface-neutral-lower);
-  --dialog-secondary-hover-text: var(--text-primary);
-  --dialog-secondary-hover-border: var(--border-neutral-strong);
-  --dialog-secondary-hover-border-width: var(--border-width-1);
   --columns-count: 12;
   --columns-max-width: 1440px;
   --columns-gutter: 32px;

package/src/system/components/Badge.svelte

@@ -1,3 +1,10 @@
+<!--
+  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">
   export const badgeVariants = [
     'primary',

package/src/system/components/Button.svelte

@@ -1,3 +1,10 @@
+<!--
+  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 lang="ts">
    import { createEventDispatcher } from 'svelte';
 

package/src/system/components/Callout.svelte

@@ -1,3 +1,9 @@
+<!--
+  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">
   export const calloutVariants = ['info', 'success', 'warning', 'danger'] as const;
   export type CalloutVariant = typeof calloutVariants[number];
@@ -29,7 +35,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-4);
+    --callout-info-accent-width: var(--border-width-1);
     --callout-info-radius: var(--radius-lg);
     --callout-info-padding: var(--space-12);
     --callout-info-label: var(--text-primary);
@@ -47,7 +53,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-4);
+    --callout-success-accent-width: var(--border-width-1);
     --callout-success-radius: var(--radius-lg);
     --callout-success-padding: var(--space-12);
     --callout-success-label: var(--text-primary);
@@ -65,7 +71,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-4);
+    --callout-warning-accent-width: var(--border-width-1);
     --callout-warning-radius: var(--radius-lg);
     --callout-warning-padding: var(--space-12);
     --callout-warning-label: var(--text-primary);
@@ -83,7 +89,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-4);
+    --callout-danger-accent-width: var(--border-width-1);
     --callout-danger-radius: var(--radius-lg);
     --callout-danger-padding: var(--space-12);
     --callout-danger-label: var(--text-primary);
@@ -99,8 +105,6 @@
   }
 
   .callout {
-    margin: var(--space-24) 0;
-
     :global(p) {
       margin: 0;
       display: inline;

package/src/system/components/Card.svelte

@@ -1,3 +1,10 @@
+<!--
+  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 lang="ts">
   interface Props {
     icon?: string;
@@ -16,6 +23,8 @@
         default; `true`/`false` force this instance on/off. */
     hover?: boolean | undefined;
     class?: string;
+    /** Content at the header's trailing edge: a badge, a count, an action. */
+    aside?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
   }
 
@@ -29,6 +38,7 @@
     flush = false,
     hover = undefined,
     class: className = '',
+    aside,
     children
   }: Props = $props();
 
@@ -40,7 +50,7 @@
     hover === undefined ? undefined : hover ? 'var(--card-hover-shadow)' : 'var(--card-default-shadow)',
   );
 
-  let showHeader = $derived(variant !== 'bare' && Boolean(icon || title));
+  let showHeader = $derived(variant !== 'bare' && Boolean(icon || title || aside));
 
   $effect(() => {
     if (import.meta.env.DEV && variant === 'default' && !icon && !title) {
@@ -65,6 +75,9 @@
       {#if title}
         <span class="card-title">{title}</span>
       {/if}
+      {#if aside}
+        <div class="card-aside">{@render aside()}</div>
+      {/if}
     </div>
   {/if}
   <div class="card-body" class:prose class:flush>
@@ -142,10 +155,11 @@
     box-shadow: var(--card-hover-shadow-enabled);
   }
 
-  /* Editor preview hook: paint hover tokens directly, ignoring the on/off gate. */
+  /* Editor preview hook. Reads the same gated tokens as the real :hover rule,
+     so turning "Use hover" off shows the resting card the page will draw. */
   .card.force-hover {
-    border-color: var(--card-hover-border);
-    box-shadow: var(--card-hover-shadow);
+    border-color: var(--card-hover-border-enabled);
+    box-shadow: var(--card-hover-shadow-enabled);
   }
 
   .card-header {
@@ -156,6 +170,11 @@
     background: var(--card-default-header-surface);
   }
 
+  .card-aside {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
   .card.compact .card-header,
   .card.compact .card-body {
     padding: var(--space-8) var(--space-12);

package/src/system/components/CodeSnippet.svelte

@@ -1,7 +1,8 @@
 <!--
-  CodeSnippet.svelte — code display with a copy button pinned top-right. Click
-  the button to copy `code` to the clipboard; a Tooltip-rendered confirmation
-  ("Copied") flashes briefly above the button.
+  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 lang="ts">
   import Tooltip from './Tooltip.svelte';

package/src/system/components/CollapsibleSection.svelte

@@ -1,3 +1,11 @@
+<!--
+  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 lang="ts">
    import { createEventDispatcher } from 'svelte';
 
@@ -60,10 +68,17 @@
          {@render summary?.()}
       </div>
    {:else}
-      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions, a11y_no_static_element_interactions -->
-      <div class="section-header" class:expanded onclick={fireToggle}>
+      <div class="section-header" class:expanded>
          <div class="section-toggle">
-            <i class="fas fa-chevron-right toggle-icon"></i>
+            <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>
             <span class="section-label">{label}</span>
          </div>
          {@render summary?.()}
@@ -106,8 +121,8 @@
 
       /* Divider — default */
       --collapsiblesection-divider-default-surface: var(--color-transparent);
-      --collapsiblesection-divider-default-border: var(--border-brand);
-      --collapsiblesection-divider-default-border-width: var(--border-width-1);
+      --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);
@@ -118,8 +133,8 @@
       --collapsiblesection-divider-default-icon-size: var(--icon-size-xs);
       /* Divider — hover */
       --collapsiblesection-divider-hover-surface: var(--color-transparent);
-      --collapsiblesection-divider-hover-border: var(--border-neutral);
-      --collapsiblesection-divider-hover-border-width: var(--border-width-1);
+      --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);
@@ -237,7 +252,7 @@
    }
 
    @mixin divider-bottom($state) {
-      border-bottom: var(--collapsiblesection-divider-#{$state}-border-width) solid var(--collapsiblesection-divider-#{$state}-border);
+      border-bottom: var(--collapsiblesection-divider-#{$state}-hairline-thickness) solid var(--collapsiblesection-divider-#{$state}-hairline-color);
    }
 
    .es-root.variant-chromeless {

package/src/system/components/CornerBadge.svelte

@@ -1,3 +1,9 @@
+<!--
+  CornerBadge.svelte. A badge that sits on a corner of its parent.
+  Use for: a count or status marker that sits on the thing it describes.
+  Not for: a label in the text flow (Badge); feedback after an action
+  (Notification).
+-->
 <script module lang="ts">
   export type CornerAnchor = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 </script>

package/src/system/components/Dialog.svelte

@@ -1,3 +1,10 @@
+<!--
+  Dialog.svelte. A modal window that blocks the page.
+  Use for: a decision the page cannot continue without, such as a destructive
+  confirmation or a sign-in.
+  Not for: a routine form (Panel); a message that asks nothing of the reader
+  (Notification).
+-->
 <script lang="ts">
   import { createEventDispatcher, tick } from 'svelte';
   import type { Snippet } from 'svelte';
@@ -179,8 +186,8 @@
 
     /* Header */
     --dialog-header-surface: var(--surface-neutral-lower);
-    --dialog-header-border: var(--border-neutral-subtle);
-    --dialog-header-border-width: var(--border-width-1);
+    --dialog-header-divider: var(--border-neutral-subtle);
+    --dialog-header-divider-width: var(--border-width-1);
     --dialog-header-padding: var(--space-8);
 
     /* Title */
@@ -203,8 +210,8 @@
     --dialog-body-line-height: var(--line-height-normal);
 
     /* Footer */
-    --dialog-footer-border: var(--border-neutral-subtle);
-    --dialog-footer-border-width: var(--border-width-1);
+    --dialog-footer-divider: var(--border-neutral-subtle);
+    --dialog-footer-divider-width: var(--border-width-1);
     --dialog-footer-padding: var(--space-16);
   }
 
@@ -264,7 +271,7 @@
       var(--dialog-header-padding-right, calc(var(--dialog-header-padding) * 3))
       var(--dialog-header-padding-bottom, var(--dialog-header-padding))
       var(--dialog-header-padding-left, calc(var(--dialog-header-padding) * 3));
-    border-bottom: var(--dialog-header-border-width) solid var(--dialog-header-border);
+    border-bottom: var(--dialog-header-divider-width) solid var(--dialog-header-divider);
     background: var(--dialog-header-surface);
     display: flex;
     justify-content: space-between;
@@ -320,7 +327,7 @@
       var(--dialog-footer-padding-right, var(--dialog-footer-padding))
       var(--dialog-footer-padding-bottom, var(--dialog-footer-padding))
       var(--dialog-footer-padding-left, var(--dialog-footer-padding));
-    border-top: var(--dialog-footer-border-width) solid var(--dialog-footer-border);
+    border-top: var(--dialog-footer-divider-width) solid var(--dialog-footer-divider);
     display: flex;
     justify-content: space-between;
     align-items: center;

package/src/system/components/IconButton.svelte

@@ -1,3 +1,12 @@
+<!--
+  IconButton.svelte. An action that an icon alone carries.
+  Use for: an action whose meaning is plain from the glyph, such as close,
+  edit, or delete.
+  Not for: an action that needs a word (Button); the confirm-and-cancel pair
+  after an inline edit (InlineEditActions).
+  Emphasis: one primary per page; secondary for the rest; outline for a
+  tertiary action; danger for a destructive one.
+-->
 <script lang="ts">
    interface Props {
     /** Wash the hovered surface with the theme's tint. `undefined` inherits the