@motion-proto/live-tokens 0.97.0 → 0.98.2

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

@@ -2466,7 +2466,7 @@
       "createdAt": "2026-05-01T08:28:00.345Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--badge-brand-surface": "--surface-brand",
+        "--badge-brand-surface": "--surface-brand-low",
         "--badge-brand-text": "--text-brand",
         "--badge-brand-border": "--border-brand",
         "--badge-brand-text-font-family": "--font-sans",
@@ -2519,7 +2519,7 @@
         "--badge-alternate-blur": "--blur-none",
         "--badge-alternate-icon-size": "--icon-size-sm",
         "--badge-canvas-surface": "--surface-canvas",
-        "--badge-canvas-text": "--text-canvas",
+        "--badge-canvas-text": "--text-secondary",
         "--badge-canvas-border": "--border-canvas",
         "--badge-canvas-text-font-family": "--font-sans",
         "--badge-canvas-text-font-size": "--font-size-md",
@@ -2570,7 +2570,7 @@
         "--badge-warning-shadow": "--shadow-none",
         "--badge-warning-blur": "--blur-none",
         "--badge-warning-icon-size": "--icon-size-sm",
-        "--badge-danger-surface": "--surface-danger",
+        "--badge-danger-surface": "--surface-danger-low",
         "--badge-danger-text": "--text-danger",
         "--badge-danger-border": "--border-danger",
         "--badge-danger-text-font-family": "--font-sans",
@@ -2943,7 +2943,7 @@
         "--cornerbadge-text-font-size": "--font-size-sm",
         "--cornerbadge-text-font-weight": "--font-weight-medium",
         "--cornerbadge-text-line-height": "--line-height-none",
-        "--cornerbadge-brand-surface": "--surface-brand",
+        "--cornerbadge-brand-surface": "--surface-brand-low",
         "--cornerbadge-brand-border": "--border-brand",
         "--cornerbadge-brand-text": "--text-brand",
         "--cornerbadge-accent-surface": "--surface-accent",
@@ -2957,7 +2957,7 @@
         "--cornerbadge-alternate-text": "--text-alternate",
         "--cornerbadge-canvas-surface": "--surface-canvas",
         "--cornerbadge-canvas-border": "--border-canvas",
-        "--cornerbadge-canvas-text": "--text-canvas",
+        "--cornerbadge-canvas-text": "--text-secondary",
         "--cornerbadge-special-surface": "--surface-special",
         "--cornerbadge-special-border": "--border-special",
         "--cornerbadge-special-text": "--text-special",
@@ -2967,7 +2967,7 @@
         "--cornerbadge-warning-surface": "--surface-warning",
         "--cornerbadge-warning-border": "--border-warning",
         "--cornerbadge-warning-text": "--text-warning",
-        "--cornerbadge-danger-surface": "--surface-danger",
+        "--cornerbadge-danger-surface": "--surface-danger-low",
         "--cornerbadge-danger-border": "--border-danger",
         "--cornerbadge-danger-text": "--text-danger",
         "--cornerbadge-info-surface": "--surface-info",
@@ -3185,7 +3185,7 @@
         "--input-border-width": "--border-width-1",
         "--input-gap": "--space-10",
         "--input-default-surface": "--surface-neutral-lower",
-        "--input-default-border": "--border-neutral",
+        "--input-default-border": "--border-neutral-medium",
         "--input-default-text": "--text-primary",
         "--input-default-text-font-family": "--font-sans",
         "--input-default-text-font-size": "--font-size-sm",
@@ -3344,7 +3344,7 @@
         "--notification-warning-text-font-size": "--font-size-md",
         "--notification-warning-text-font-weight": "--font-weight-normal",
         "--notification-warning-text-line-height": "--line-height-normal",
-        "--notification-danger-surface": "--surface-danger",
+        "--notification-danger-surface": "--surface-danger-low",
         "--notification-danger-action-surface": "--surface-neutral-lowest",
         "--notification-danger-border": "--border-danger",
         "--notification-danger-border-width": "--border-width-1",
@@ -3428,7 +3428,7 @@
       "createdAt": "2026-05-10T20:44:44.372Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--radiobutton-default-dot-border-color": "--border-neutral",
+        "--radiobutton-default-dot-border-color": "--border-neutral-medium",
         "--radiobutton-default-dot-border-width": "--border-width-2",
         "--radiobutton-default-dot-fill": "--text-secondary",
         "--radiobutton-default-dot-size": "--dot-size-0",
@@ -3437,7 +3437,7 @@
         "--radiobutton-default-label-font-size": "--font-size-md",
         "--radiobutton-default-label-font-weight": "--font-weight-semibold",
         "--radiobutton-default-label-line-height": "--line-height-none",
-        "--radiobutton-hover-dot-border-color": "--border-neutral",
+        "--radiobutton-hover-dot-border-color": "--border-neutral-medium",
         "--radiobutton-hover-dot-border-width": "--border-width-2",
         "--radiobutton-hover-dot-fill": "--text-secondary",
         "--radiobutton-hover-dot-size": "--dot-size-50",
@@ -3446,7 +3446,7 @@
         "--radiobutton-hover-label-font-size": "--font-size-md",
         "--radiobutton-hover-label-font-weight": "--font-weight-semibold",
         "--radiobutton-hover-label-line-height": "--line-height-none",
-        "--radiobutton-selected-dot-border-color": "--border-neutral",
+        "--radiobutton-selected-dot-border-color": "--border-neutral-medium",
         "--radiobutton-selected-dot-border-width": "--border-width-2",
         "--radiobutton-selected-dot-fill": "--text-secondary",
         "--radiobutton-selected-dot-size": "--dot-size-50",
@@ -3555,7 +3555,7 @@
         "--segmentedcontrol-hover-tint": "--tint",
         "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
         "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
-        "--segmentedcontrol-bar-border": "--border-neutral",
+        "--segmentedcontrol-bar-border": "--border-neutral-medium",
         "--segmentedcontrol-bar-border-width": "--border-width-1",
         "--segmentedcontrol-bar-radius": "--radius-xl",
         "--segmentedcontrol-bar-padding": "--space-8",
@@ -3586,7 +3586,7 @@
         "--segmentedcontrol-selected-text-font-weight": "--font-weight-normal",
         "--segmentedcontrol-selected-text-line-height": "--line-height-normal",
         "--segmentedcontrol-selected-icon": "--text-secondary",
-        "--segmentedcontrol-selected-border": "--border-brand",
+        "--segmentedcontrol-selected-border": "--border-brand-medium",
         "--segmentedcontrol-selected-border-width": "--border-width-1",
         "--segmentedcontrol-selected-radius": "--radius-lg",
         "--segmentedcontrol-disabled-surface": "--color-transparent",
@@ -3813,7 +3813,7 @@
         "--tabbar-hover-tab-bottom-radius": "--radius-sm",
         "--tabbar-hover-indicator-width": "--border-width-2",
         "--tabbar-selected-text": "--text-primary",
-        "--tabbar-selected-border": "--color-brand-500",
+        "--tabbar-selected-border": "--border-brand-medium",
         "--tabbar-selected-surface": "--tint-low",
         "--tabbar-selected-text-font-family": "--font-sans",
         "--tabbar-selected-text-font-size": "--font-size-md",
@@ -3883,7 +3883,7 @@
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--toggle-track-surface": "--surface-neutral",
-        "--toggle-track-border": "--border-neutral",
+        "--toggle-track-border": "--border-neutral-medium",
         "--toggle-track-border-width": "--border-width-1",
         "--toggle-track-radius": "--radius-full",
         "--toggle-track-padding": "--space-6",
@@ -3898,7 +3898,7 @@
         "--toggle-hover-track-surface": "--surface-neutral-high",
         "--toggle-hover-thumb-surface": "--text-primary",
         "--toggle-on-track-surface": "--surface-brand-high",
-        "--toggle-on-track-border": "--border-brand",
+        "--toggle-on-track-border": "--border-brand-medium",
         "--toggle-on-thumb-surface": "--text-primary",
         "--toggle-on-thumb-border": "--border-brand-strong",
         "--toggle-on-hover-track-surface": "--surface-brand-higher",
@@ -3934,13 +3934,13 @@
       "updatedAt": "2026-09-02T10:55:50.831Z",
       "aliases": {
         "--slider-single-track-surface": "--surface-neutral-lowest",
-        "--slider-single-track-border": "--border-neutral-subtle",
+        "--slider-single-track-border": "--border-neutral-medium",
         "--slider-single-track-border-width": "--border-width-1",
         "--slider-single-track-height": "--space-8",
         "--slider-single-track-radius": "--radius-full",
         "--slider-single-fill": "--surface-brand-high",
         "--slider-single-thumb-surface": "--surface-neutral-highest",
-        "--slider-single-thumb-border": "--border-brand",
+        "--slider-single-thumb-border": "--border-brand-medium",
         "--slider-single-thumb-border-width": "--border-width-2",
         "--slider-single-thumb-size": "--font-size-lg",
         "--slider-single-thumb-radius": "--radius-full",
@@ -3952,13 +3952,13 @@
         "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
         "--slider-single-disabled-thumb-border": "--border-neutral",
         "--slider-range-track-surface": "--surface-neutral-lowest",
-        "--slider-range-track-border": "--border-neutral-subtle",
+        "--slider-range-track-border": "--border-neutral-medium",
         "--slider-range-track-border-width": "--border-width-1",
         "--slider-range-track-height": "--space-8",
         "--slider-range-track-radius": "--radius-full",
         "--slider-range-fill": "--surface-brand-high",
         "--slider-range-thumb-surface": "--surface-neutral-highest",
-        "--slider-range-thumb-border": "--border-brand",
+        "--slider-range-thumb-border": "--border-brand-medium",
         "--slider-range-thumb-border-width": "--border-width-2",
         "--slider-range-thumb-size": "--font-size-lg",
         "--slider-range-thumb-radius": "--radius-full",

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

@@ -2518,7 +2518,7 @@
       "createdAt": "2026-05-01T08:28:00.345Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--badge-brand-surface": "--surface-brand",
+        "--badge-brand-surface": "--surface-brand-low",
         "--badge-brand-text": "--text-brand",
         "--badge-brand-border": "--border-brand",
         "--badge-brand-text-font-family": "--font-sans",
@@ -2571,7 +2571,7 @@
         "--badge-alternate-blur": "--blur-none",
         "--badge-alternate-icon-size": "--icon-size-sm",
         "--badge-canvas-surface": "--surface-canvas",
-        "--badge-canvas-text": "--text-canvas",
+        "--badge-canvas-text": "--text-secondary",
         "--badge-canvas-border": "--border-canvas",
         "--badge-canvas-text-font-family": "--font-sans",
         "--badge-canvas-text-font-size": "--font-size-md",
@@ -2622,7 +2622,7 @@
         "--badge-warning-shadow": "--shadow-none",
         "--badge-warning-blur": "--blur-none",
         "--badge-warning-icon-size": "--icon-size-sm",
-        "--badge-danger-surface": "--surface-danger",
+        "--badge-danger-surface": "--surface-danger-low",
         "--badge-danger-text": "--text-danger",
         "--badge-danger-border": "--border-danger",
         "--badge-danger-text-font-family": "--font-sans",
@@ -2995,7 +2995,7 @@
         "--cornerbadge-text-font-size": "--font-size-sm",
         "--cornerbadge-text-font-weight": "--font-weight-medium",
         "--cornerbadge-text-line-height": "--line-height-none",
-        "--cornerbadge-brand-surface": "--surface-brand",
+        "--cornerbadge-brand-surface": "--surface-brand-low",
         "--cornerbadge-brand-border": "--border-brand",
         "--cornerbadge-brand-text": "--text-brand",
         "--cornerbadge-accent-surface": "--surface-accent",
@@ -3009,7 +3009,7 @@
         "--cornerbadge-alternate-text": "--text-alternate",
         "--cornerbadge-canvas-surface": "--surface-canvas",
         "--cornerbadge-canvas-border": "--border-canvas",
-        "--cornerbadge-canvas-text": "--text-canvas",
+        "--cornerbadge-canvas-text": "--text-secondary",
         "--cornerbadge-special-surface": "--surface-special",
         "--cornerbadge-special-border": "--border-special",
         "--cornerbadge-special-text": "--text-special",
@@ -3019,7 +3019,7 @@
         "--cornerbadge-warning-surface": "--surface-warning",
         "--cornerbadge-warning-border": "--border-warning",
         "--cornerbadge-warning-text": "--text-warning",
-        "--cornerbadge-danger-surface": "--surface-danger",
+        "--cornerbadge-danger-surface": "--surface-danger-low",
         "--cornerbadge-danger-border": "--border-danger",
         "--cornerbadge-danger-text": "--text-danger",
         "--cornerbadge-info-surface": "--surface-info",
@@ -3237,7 +3237,7 @@
         "--input-border-width": "--border-width-1",
         "--input-gap": "--space-6",
         "--input-default-surface": "--surface-neutral-lower",
-        "--input-default-border": "--border-neutral",
+        "--input-default-border": "--border-neutral-medium",
         "--input-default-text": "--text-primary",
         "--input-default-text-font-family": "--font-sans",
         "--input-default-text-font-size": "--font-size-sm",
@@ -3396,7 +3396,7 @@
         "--notification-warning-text-font-size": "--font-size-md",
         "--notification-warning-text-font-weight": "--font-weight-normal",
         "--notification-warning-text-line-height": "--line-height-normal",
-        "--notification-danger-surface": "--surface-danger",
+        "--notification-danger-surface": "--surface-danger-low",
         "--notification-danger-action-surface": "--surface-neutral-lowest",
         "--notification-danger-border": "--border-danger",
         "--notification-danger-border-width": "--border-width-1",
@@ -3480,7 +3480,7 @@
       "createdAt": "2026-05-10T20:44:44.372Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--radiobutton-default-dot-border-color": "--border-neutral",
+        "--radiobutton-default-dot-border-color": "--border-neutral-medium",
         "--radiobutton-default-dot-border-width": "--border-width-2",
         "--radiobutton-default-dot-fill": "--text-secondary",
         "--radiobutton-default-dot-size": "--dot-size-0",
@@ -3489,7 +3489,7 @@
         "--radiobutton-default-label-font-size": "--font-size-md",
         "--radiobutton-default-label-font-weight": "--font-weight-semibold",
         "--radiobutton-default-label-line-height": "--line-height-none",
-        "--radiobutton-hover-dot-border-color": "--border-neutral",
+        "--radiobutton-hover-dot-border-color": "--border-neutral-medium",
         "--radiobutton-hover-dot-border-width": "--border-width-2",
         "--radiobutton-hover-dot-fill": "--text-secondary",
         "--radiobutton-hover-dot-size": "--dot-size-50",
@@ -3498,7 +3498,7 @@
         "--radiobutton-hover-label-font-size": "--font-size-md",
         "--radiobutton-hover-label-font-weight": "--font-weight-semibold",
         "--radiobutton-hover-label-line-height": "--line-height-none",
-        "--radiobutton-selected-dot-border-color": "--border-neutral",
+        "--radiobutton-selected-dot-border-color": "--border-neutral-medium",
         "--radiobutton-selected-dot-border-width": "--border-width-2",
         "--radiobutton-selected-dot-fill": "--text-secondary",
         "--radiobutton-selected-dot-size": "--dot-size-50",
@@ -3607,7 +3607,7 @@
         "--segmentedcontrol-hover-tint": "--tint",
         "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
         "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
-        "--segmentedcontrol-bar-border": "--border-neutral",
+        "--segmentedcontrol-bar-border": "--border-neutral-medium",
         "--segmentedcontrol-bar-border-width": "--border-width-1",
         "--segmentedcontrol-bar-radius": "--radius-xl",
         "--segmentedcontrol-bar-padding": "--space-6",
@@ -3638,7 +3638,7 @@
         "--segmentedcontrol-selected-text-font-weight": "--font-weight-normal",
         "--segmentedcontrol-selected-text-line-height": "--line-height-normal",
         "--segmentedcontrol-selected-icon": "--text-secondary",
-        "--segmentedcontrol-selected-border": "--border-brand",
+        "--segmentedcontrol-selected-border": "--border-brand-medium",
         "--segmentedcontrol-selected-border-width": "--border-width-1",
         "--segmentedcontrol-selected-radius": "--radius-lg",
         "--segmentedcontrol-disabled-surface": "--color-transparent",
@@ -3865,7 +3865,7 @@
         "--tabbar-hover-tab-bottom-radius": "--radius-sm",
         "--tabbar-hover-indicator-width": "--border-width-2",
         "--tabbar-selected-text": "--text-primary",
-        "--tabbar-selected-border": "--color-brand-500",
+        "--tabbar-selected-border": "--border-brand-medium",
         "--tabbar-selected-surface": "--tint-low",
         "--tabbar-selected-text-font-family": "--font-sans",
         "--tabbar-selected-text-font-size": "--font-size-md",
@@ -3935,7 +3935,7 @@
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--toggle-track-surface": "--surface-neutral",
-        "--toggle-track-border": "--border-neutral",
+        "--toggle-track-border": "--border-neutral-medium",
         "--toggle-track-border-width": "--border-width-1",
         "--toggle-track-radius": "--radius-full",
         "--toggle-track-padding": "--space-4",
@@ -3950,7 +3950,7 @@
         "--toggle-hover-track-surface": "--surface-neutral-high",
         "--toggle-hover-thumb-surface": "--text-primary",
         "--toggle-on-track-surface": "--surface-brand-high",
-        "--toggle-on-track-border": "--border-brand",
+        "--toggle-on-track-border": "--border-brand-medium",
         "--toggle-on-thumb-surface": "--text-primary",
         "--toggle-on-thumb-border": "--border-brand-strong",
         "--toggle-on-hover-track-surface": "--surface-brand-higher",
@@ -3986,13 +3986,13 @@
       "updatedAt": "2026-09-02T10:55:50.831Z",
       "aliases": {
         "--slider-single-track-surface": "--surface-neutral-lowest",
-        "--slider-single-track-border": "--border-neutral-subtle",
+        "--slider-single-track-border": "--border-neutral-medium",
         "--slider-single-track-border-width": "--border-width-1",
         "--slider-single-track-height": "--space-8",
         "--slider-single-track-radius": "--radius-full",
         "--slider-single-fill": "--surface-brand-high",
         "--slider-single-thumb-surface": "--surface-neutral-highest",
-        "--slider-single-thumb-border": "--border-brand",
+        "--slider-single-thumb-border": "--border-brand-medium",
         "--slider-single-thumb-border-width": "--border-width-2",
         "--slider-single-thumb-size": "--font-size-lg",
         "--slider-single-thumb-radius": "--radius-full",
@@ -4004,13 +4004,13 @@
         "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
         "--slider-single-disabled-thumb-border": "--border-neutral",
         "--slider-range-track-surface": "--surface-neutral-lowest",
-        "--slider-range-track-border": "--border-neutral-subtle",
+        "--slider-range-track-border": "--border-neutral-medium",
         "--slider-range-track-border-width": "--border-width-1",
         "--slider-range-track-height": "--space-8",
         "--slider-range-track-radius": "--radius-full",
         "--slider-range-fill": "--surface-brand-high",
         "--slider-range-thumb-surface": "--surface-neutral-highest",
-        "--slider-range-thumb-border": "--border-brand",
+        "--slider-range-thumb-border": "--border-brand-medium",
         "--slider-range-thumb-border-width": "--border-width-2",
         "--slider-range-thumb-size": "--font-size-lg",
         "--slider-range-thumb-radius": "--radius-full",

package/src/system/components/Badge.svelte

@@ -75,7 +75,7 @@
   // -secondary/-tertiary scale); `--text-brand` is the brand-family text.
   :global(:root) {
     /* Brand */
-    --badge-brand-surface: var(--surface-brand);
+    --badge-brand-surface: var(--surface-brand-low);
     --badge-brand-text: var(--text-brand);
     --badge-brand-border: var(--border-brand);
     --badge-brand-text-font-family: var(--font-sans);
@@ -136,7 +136,7 @@
 
     /* Canvas */
     --badge-canvas-surface: var(--surface-canvas);
-    --badge-canvas-text: var(--text-canvas);
+    --badge-canvas-text: var(--text-secondary);
     --badge-canvas-border: var(--border-canvas);
     --badge-canvas-text-font-family: var(--font-sans);
     --badge-canvas-text-font-size: var(--font-size-md);
@@ -195,7 +195,7 @@
     --badge-warning-icon-size: var(--icon-size-sm);
 
     /* Danger */
-    --badge-danger-surface: var(--surface-danger);
+    --badge-danger-surface: var(--surface-danger-low);
     --badge-danger-text: var(--text-danger);
     --badge-danger-border: var(--border-danger);
     --badge-danger-text-font-family: var(--font-sans);

package/src/system/components/Button.svelte

@@ -2,8 +2,8 @@
   import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
 
   export const catalogue = {
-    description: 'A labelled action.',
-    whenToUse: 'an action that needs a word to be unambiguous.',
+    description: 'A labelled trigger.',
+    whenToUse: 'a trigger that needs a word to be unambiguous. It runs an action or opens another page, such as View details or Create project.',
     whenNotToUse: [
       { when: 'the glyph alone is plain, and space is short.', use: 'iconbutton' },
       { when: 'the actions confirm or cancel an inline edit.', use: 'inlineeditactions' },
@@ -11,7 +11,7 @@
     constraints: [
       'One primary Button per page.',
       'A danger Button opens a Dialog to confirm before it runs.',
-      'A link to another page is an anchor.',
+      'A link inside running text is an anchor.',
     ],
     props: {
       variant: 'one primary per page; secondary for the rest; outline for a tertiary action; danger for a destructive one.',
@@ -542,4 +542,10 @@
          margin-left: var(--space-4);
       }
    }
+
+   @media (prefers-reduced-motion: reduce) {
+      .button::before {
+         display: none;
+      }
+   }
 </style>

package/src/system/components/CodeSnippet.svelte

@@ -46,7 +46,9 @@
 </script>
 
 <div class="codesnippet {className}">
-  <code class="code">{code}</code>
+  <!-- A long snippet scrolls sideways, so the keyboard needs a stop on it. -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <code class="code" tabindex="0">{code}</code>
   <Tooltip text={copied ? 'Copied' : ''} open={copied} position="top">
     <button
       type="button"
@@ -118,6 +120,11 @@
     scrollbar-color: var(--codesnippet-scrollbar-thumb) transparent;
   }
 
+  .code:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--border-width-2) var(--border-neutral-strong);
+  }
+
   .code::-webkit-scrollbar {
     height: var(--codesnippet-scrollbar-border-width);
   }

package/src/system/components/CornerBadge.svelte

@@ -73,7 +73,7 @@
     /* Per-variant color overrides. Default = inherit the same family/level the
        inner Badge uses; author can swap to a different level (e.g. -low) to
        reduce contrast against the host surface. */
-    --cornerbadge-brand-surface: var(--surface-brand);
+    --cornerbadge-brand-surface: var(--surface-brand-low);
     --cornerbadge-brand-border: var(--border-brand);
     --cornerbadge-brand-text: var(--text-brand);
     --cornerbadge-accent-surface: var(--surface-accent);
@@ -87,7 +87,7 @@
     --cornerbadge-alternate-text: var(--text-alternate);
     --cornerbadge-canvas-surface: var(--surface-canvas);
     --cornerbadge-canvas-border: var(--border-canvas);
-    --cornerbadge-canvas-text: var(--text-canvas);
+    --cornerbadge-canvas-text: var(--text-secondary);
     --cornerbadge-special-surface: var(--surface-special);
     --cornerbadge-special-border: var(--border-special);
     --cornerbadge-special-text: var(--text-special);
@@ -97,7 +97,7 @@
     --cornerbadge-warning-surface: var(--surface-warning);
     --cornerbadge-warning-border: var(--border-warning);
     --cornerbadge-warning-text: var(--text-warning);
-    --cornerbadge-danger-surface: var(--surface-danger);
+    --cornerbadge-danger-surface: var(--surface-danger-low);
     --cornerbadge-danger-border: var(--border-danger);
     --cornerbadge-danger-text: var(--text-danger);
     --cornerbadge-info-surface: var(--surface-info);

package/src/system/components/Dialog.svelte

@@ -15,6 +15,7 @@
   import { createEventDispatcher, tick } from 'svelte';
   import type { Snippet } from 'svelte';
   import { portal } from '../internal/portal';
+  import { tabbables, trapTab } from '../internal/focusTrap';
   import Button from './Button.svelte';
   import type { ButtonVariant, DialogButtonSpec } from './types';
 
@@ -64,6 +65,8 @@
     children,
   }: Props = $props();
 
+  const titleId = $props.id();
+
   let effectiveConfirmVariant = $derived(confirm?.variant ?? asVariant(confirmVarValue, 'primary'));
   let effectiveCancelVariant = $derived(cancel?.variant ?? asVariant(cancelVarValue, 'outline'));
 
@@ -75,6 +78,7 @@
   let confirmButtonRef: HTMLButtonElement = $state()!;
   let cancelButtonRef: HTMLButtonElement = $state()!;
   let closeButtonRef: HTMLButtonElement = $state()!;
+  let dialogEl: HTMLDivElement | undefined = $state();
 
   $effect(() => {
     if (typeof document === 'undefined') return;
@@ -86,21 +90,29 @@
     return () => obs.disconnect();
   });
 
-  // Focus the primary button when dialog opens (skip in inline mode so the editor doesn't steal focus).
+  // The inline preview stays out of the trap, so the editor keeps its focus.
   $effect(() => {
-    if (open && !inline) {
-      tick().then(() => {
-        if (confirm && confirmButtonRef && !confirm.disabled) {
-          confirmButtonRef.focus();
-        } else if (cancel && cancelButtonRef) {
-          cancelButtonRef.focus();
-        } else if (closeButtonRef) {
-          closeButtonRef.focus();
-        }
-      });
-    }
+    if (!open || inline) return;
+    const returnTo = document.activeElement as HTMLElement | null;
+    tick().then(() => {
+      const target =
+        (confirm && !confirm.disabled && confirmButtonRef) ||
+        (cancel && cancelButtonRef) ||
+        closeButtonRef ||
+        (dialogEl && tabbables(dialogEl)[0]) ||
+        dialogEl;
+      target?.focus();
+    });
+    return () => returnTo?.focus();
   });
 
+  function holdTab(event: KeyboardEvent) {
+    if (event.key !== 'Tab' || !open || inline || !dialogEl) return;
+    if (trapTab(dialogEl, event)) return;
+    event.preventDefault();
+    dialogEl.focus();
+  }
+
   function handleConfirm() {
     if (confirm && !confirm.disabled) {
       confirm.onClick();
@@ -116,17 +128,34 @@
       open = false;
     }
   }
+
+  function closeOnEscape(event: KeyboardEvent) {
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    handleCancel();
+  }
 </script>
 
+<svelte:document onkeydown={holdTab} />
+
 {#if open}
   <!-- The fixed backdrop portals to <body> to escape transformed/isolated
        ancestors; the inline preview variant stays in flow. -->
   <div class="dialog-backdrop" class:inline use:portal={!inline}>
-    <div class="dialog" style="width: {width}; max-width: {width};">
+    <div
+      bind:this={dialogEl}
+      class="dialog"
+      role="dialog"
+      aria-modal={inline ? undefined : true}
+      aria-labelledby={title ? titleId : undefined}
+      tabindex="-1"
+      style="width: {width}; max-width: {width};"
+      onkeydown={closeOnEscape}
+    >
       <div class="dialog-content">
         {#if title}
           <div class="dialog-header">
-            <h3 class="dialog-title">{title}</h3>
+            <h3 class="dialog-title" id={titleId}>{title}</h3>
             <button
               bind:this={closeButtonRef}
               class="dialog-close"

package/src/system/components/IconButton.svelte

@@ -5,7 +5,7 @@
     description: 'An action that an icon alone carries.',
     whenToUse: 'an action whose meaning is plain from the glyph, such as close, edit, or delete.',
     whenNotToUse: [
-      { when: 'the action needs a word to be unambiguous.', use: 'button' },
+      { when: 'the trigger needs a word to be unambiguous.', use: 'button' },
       { when: 'the pair confirms or cancels an inline edit.', use: 'inlineeditactions' },
     ],
     props: {

package/src/system/components/Image.svelte

@@ -144,4 +144,11 @@
   .image.force-hover img {
     transform: var(--image-zoom-enabled);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .image,
+    img {
+      transition: none;
+    }
+  }
 </style>