@motion-proto/live-tokens 0.97.0 → 0.99.0

package/src/system/components/TabBar.svelte

@@ -58,22 +58,52 @@
       dispatch('tabChange', tab.id);
     }
   }
+
+  const buttons: HTMLButtonElement[] = $state([]);
+
+  // Roving tab stop: the bar takes one Tab press, on the selected tab.
+  let tabStop = $derived(
+    tabs.find((t) => t.id === value && !t.disabled)?.id ?? tabs.find((t) => !t.disabled)?.id,
+  );
+
+  // Arrows move focus alone; Enter or Space selects, since a consumer's
+  // onchange may load the panel.
+  function moveFocus(event: KeyboardEvent, from: number) {
+    const enabled = tabs.flatMap((t, i) => (t.disabled ? [] : [i]));
+    const at = enabled.indexOf(from);
+    const to = {
+      ArrowRight: enabled[(at + 1) % enabled.length],
+      ArrowLeft: enabled[(at - 1 + enabled.length) % enabled.length],
+      Home: enabled[0],
+      End: enabled[enabled.length - 1],
+    }[event.key];
+    if (to === undefined) return;
+    event.preventDefault();
+    buttons[to].focus();
+  }
 </script>
 
 <div
   class="tab-bar {className}"
+  role="tablist"
   style:--tabbar-hover-tint-enabled={hoverTintValue}
 >
-  {#each tabs as tab}
+  {#each tabs as tab, i}
     <button
       class="tab"
       class:selected={value === tab.id}
       class:icon-only={iconOnly}
+      role="tab"
+      aria-selected={value === tab.id}
+      aria-label={iconOnly ? tab.label : undefined}
+      tabindex={tab.id === tabStop ? 0 : -1}
       disabled={tab.disabled}
+      bind:this={buttons[i]}
       onclick={() => selectTab(tab)}
+      onkeydown={(event) => moveFocus(event, i)}
     >
       {#if tab.icon}
-        <i class={tab.icon}></i>
+        <i class={tab.icon} aria-hidden="true"></i>
       {/if}
       {#if !iconOnly}
         <span>{tab.label}</span>
@@ -133,7 +163,7 @@
 
     /* Selected tab */
     --tabbar-selected-text: var(--text-primary);
-    --tabbar-selected-border: var(--color-brand-500);
+    --tabbar-selected-border: var(--border-brand-strong);
     --tabbar-selected-surface: var(--tint-low);
     --tabbar-selected-text-font-family: var(--font-sans);
     --tabbar-selected-text-font-size: var(--font-size-md);

package/src/system/components/Toggle.svelte

@@ -59,11 +59,11 @@
   :global(:root) {
     /* Default (off resting) — also carries all geometry + label typography. */
     --toggle-track-surface: var(--surface-neutral);
-    --toggle-track-border: var(--border-neutral);
+    --toggle-track-border: var(--border-neutral-medium);
     --toggle-track-border-width: var(--border-width-1);
     --toggle-track-radius: var(--radius-full);
     --toggle-track-padding: var(--space-2);
-    --toggle-thumb-surface: var(--surface-neutral-highest);
+    --toggle-thumb-surface: var(--text-primary);
     --toggle-thumb-border: var(--border-neutral-strong);
     --toggle-thumb-size: var(--font-size-md);
     --toggle-label: var(--text-primary);
@@ -78,7 +78,7 @@
 
     /* On (selected — toggle is checked). */
     --toggle-on-track-surface: var(--surface-brand-high);
-    --toggle-on-track-border: var(--border-brand);
+    --toggle-on-track-border: var(--border-brand-medium);
     --toggle-on-thumb-surface: var(--text-primary);
     --toggle-on-thumb-border: var(--border-brand-strong);
 

package/src/system/components/VideoFrame.svelte

@@ -225,7 +225,7 @@
 
   .videoframe-trigger:focus-visible {
     outline: none;
-    box-shadow: var(--ring-focus-md);
+    box-shadow: 0 0 0 var(--border-width-2) var(--border-neutral-strong);
     border-radius: var(--sketch-radius, var(--videoframe-frame-radius));
   }
 

package/src/system/components/VideoLightbox.svelte

@@ -318,7 +318,7 @@
 
   .videolightbox-trigger:focus-visible {
     outline: none;
-    box-shadow: var(--ring-focus-md);
+    box-shadow: 0 0 0 var(--border-width-2) var(--border-neutral-strong);
   }
 
   .videolightbox-trigger img,
@@ -436,7 +436,7 @@
 
   .videolightbox-close:focus-visible {
     outline: none;
-    box-shadow: var(--ring-focus-md);
+    box-shadow: 0 0 0 var(--border-width-2) var(--border-neutral-strong);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/src/system/internal/focusTrap.ts

@@ -0,0 +1,35 @@
+const TABBABLE = [
+  '[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]',
+]
+  .map((selector) => `${selector}:not([tabindex="-1"])`)
+  .join(', ');
+
+export function tabbables(container: HTMLElement): HTMLElement[] {
+  return [...container.querySelectorAll<HTMLElement>(TABBABLE)];
+}
+
+/** Keeps Tab and Shift+Tab cycling through `container`'s tabbable elements.
+ *  Focus on the container itself or outside it enters at the near end.
+ *  Returns false when the container holds none, so the caller picks where
+ *  focus rests. */
+export function trapTab(container: HTMLElement, e: KeyboardEvent): boolean {
+  const stops = tabbables(container);
+  if (stops.length === 0) return false;
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  const active = document.activeElement as HTMLElement | null;
+  const inside = active !== null && active !== container && container.contains(active);
+  if (e.shiftKey && (!inside || active === first)) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && (!inside || active === last)) {
+    e.preventDefault();
+    first.focus();
+  }
+  return true;
+}

package/src/testing-js/__aria__/badge.yml

@@ -0,0 +1,40 @@
+"Brand / base": |
+  - text: Brand With Icon
+"Brand / colors": |
+  - text: Brand With Icon
+"Accent / base": |
+  - text: Accent With Icon
+"Accent / colors": |
+  - text: Accent With Icon
+"Neutral / base": |
+  - text: Neutral With Icon
+"Neutral / colors": |
+  - text: Neutral With Icon
+"Alternate / base": |
+  - text: Alternate With Icon
+"Alternate / colors": |
+  - text: Alternate With Icon
+"Canvas / base": |
+  - text: Canvas With Icon
+"Canvas / colors": |
+  - text: Canvas With Icon
+"Special / base": |
+  - text: Special With Icon
+"Special / colors": |
+  - text: Special With Icon
+"Success / base": |
+  - text: Success With Icon
+"Success / colors": |
+  - text: Success With Icon
+"Warning / base": |
+  - text: Warning With Icon
+"Warning / colors": |
+  - text: Warning With Icon
+"Danger / base": |
+  - text: Danger With Icon
+"Danger / colors": |
+  - text: Danger With Icon
+"Info / base": |
+  - text: Info With Icon
+"Info / colors": |
+  - text: Info With Icon

package/src/testing-js/__aria__/button.yml

@@ -0,0 +1,88 @@
+"Primary / base": |
+  - button "Primary"
+  - button "With Icon"
+"Secondary / base": |
+  - button "Secondary"
+  - button "With Icon"
+"Secondary / default": |
+  - button "Secondary"
+  - button "With Icon"
+"Secondary / hover": |
+  - button "Secondary"
+  - button "With Icon"
+"Secondary / disabled": |
+  - button "Secondary" [disabled]
+  - button "With Icon" [disabled]
+"Outline / base": |
+  - button "Outline"
+  - button "With Icon"
+"Outline / default": |
+  - button "Outline"
+  - button "With Icon"
+"Outline / hover": |
+  - button "Outline"
+  - button "With Icon"
+"Outline / disabled": |
+  - button "Outline" [disabled]
+  - button "With Icon" [disabled]
+"Success / base": |
+  - button "Success"
+  - button "With Icon"
+"Success / default": |
+  - button "Success"
+  - button "With Icon"
+"Success / hover": |
+  - button "Success"
+  - button "With Icon"
+"Success / disabled": |
+  - button "Success" [disabled]
+  - button "With Icon" [disabled]
+"Danger / base": |
+  - button "Danger"
+  - button "With Icon"
+"Danger / default": |
+  - button "Danger"
+  - button "With Icon"
+"Danger / hover": |
+  - button "Danger"
+  - button "With Icon"
+"Danger / disabled": |
+  - button "Danger" [disabled]
+  - button "With Icon" [disabled]
+"Warning / base": |
+  - button "Warning"
+  - button "With Icon"
+"Warning / default": |
+  - button "Warning"
+  - button "With Icon"
+"Warning / hover": |
+  - button "Warning"
+  - button "With Icon"
+"Warning / disabled": |
+  - button "Warning" [disabled]
+  - button "With Icon" [disabled]
+"Outline / active": |
+  - button "Outline"
+  - button "With Icon"
+"Primary / default": |
+  - button "Primary"
+  - button "With Icon"
+"Primary / hover": |
+  - button "Primary"
+  - button "With Icon"
+"Primary / disabled": |
+  - button "Primary" [disabled]
+  - button "With Icon" [disabled]
+"Primary (small)": |
+  - button "Primary"
+  - button "Secondary"
+  - button "Outline"
+  - button "Success"
+  - button "Danger"
+  - button "Warning"
+  - button "Primary"
+  - button "Secondary"
+  - button "Outline"
+  - button "Success"
+  - button "Danger"
+  - button "Warning"

package/src/testing-js/__aria__/callout.yml

@@ -0,0 +1,12 @@
+"Info": |
+  - strong: Note.
+  - text: This is contextual information you should know about.
+"Success": |
+  - strong: Tip.
+  - text: Bookmark this page so you can return when you need it.
+"Warning": |
+  - strong: Warning.
+  - text: This is a warning callout for important caveats or potential issues.
+"Danger": |
+  - strong: Danger.
+  - text: This action is destructive and cannot be undone.

package/src/testing-js/__aria__/card.yml

@@ -0,0 +1,8 @@
+"preview": |
+  - text: Card title Content Placeholder Bare variant
+"default": |
+  - text: Card title Content Placeholder Bare variant
+"hover": |
+  - text: Card title Content Placeholder Bare variant
+"preview (click root)": |
+  - text: Card title Content Placeholder Bare variant

package/src/testing-js/__aria__/codesnippet.yml

@@ -0,0 +1,21 @@
+"preview": |
+  - text: Preview text
+  - textbox "Preview text":
+    - /placeholder: Paste a long command or block to preview scrolling
+    - text: npx @motion-proto/live-tokens setup-claude
+  - code: npx @motion-proto/live-tokens setup-claude
+  - button "Copy to clipboard"
+"default": |
+  - text: Preview text
+  - textbox "Preview text":
+    - /placeholder: Paste a long command or block to preview scrolling
+    - text: npx @motion-proto/live-tokens setup-claude
+  - code: npx @motion-proto/live-tokens setup-claude
+  - button "Copy to clipboard"
+"hover": |
+  - text: Preview text
+  - textbox "Preview text":
+    - /placeholder: Paste a long command or block to preview scrolling
+    - text: npx @motion-proto/live-tokens setup-claude
+  - code: npx @motion-proto/live-tokens setup-claude
+  - button "Copy to clipboard"

package/src/testing-js/__aria__/collapsiblesection.yml

@@ -0,0 +1,23 @@
+"Container / Container": |
+  - button "Click to expand"
+"Container / Header": |
+  - button "Click to expand"
+"Container / Body": |
+  - button "Click to expand" [expanded]
+  - paragraph: This content is revealed when the section is open. Any content can go here.
+"Chromeless / Header": |
+  - button "Click to expand"
+"Chromeless / Body": |
+  - button "Click to expand" [expanded]
+  - paragraph: This content is revealed when the section is open. Any content can go here.
+"With Hairline / Header": |
+  - button "Click to expand"
+"With Hairline / Body": |
+  - button "Click to expand" [expanded]
+  - paragraph: This content is revealed when the section is open. Any content can go here.
+"Container / Header (Hover)": |
+  - button "Click to expand"
+"Chromeless / Header (Hover)": |
+  - button "Click to expand"
+"With Hairline / Header (Hover)": |
+  - button "Click to expand"

package/src/testing-js/__aria__/cornerbadge.yml

@@ -0,0 +1,24 @@
+"Brand": |
+  - text: Brand
+"Accent": |
+  - text: Accent
+"Neutral": |
+  - text: Neutral
+"Alternate": |
+  - text: Alternate
+"Canvas": |
+  - text: Canvas
+"Special": |
+  - text: Special
+"Success": |
+  - text: Success
+"Warning": |
+  - text: Warning
+"Danger": |
+  - text: Danger
+"Info": |
+  - text: Info
+"Brand / base": |
+  - text: Brand
+"Brand / colors": |
+  - text: Brand

package/src/testing-js/__aria__/dialog.yml

@@ -0,0 +1,42 @@
+"preview": |
+  - dialog "Sample Dialog":
+    - heading "Sample Dialog" [level=3]
+    - button "Close"
+    - paragraph: This is the dialog body content. It supports any slotted content including forms, lists, or other components.
+    - button "Cancel"
+    - button "Save"
+"scrim": |
+  - dialog "Sample Dialog":
+    - heading "Sample Dialog" [level=3]
+    - button "Close"
+    - paragraph: This is the dialog body content. It supports any slotted content including forms, lists, or other components.
+    - button "Cancel"
+    - button "Save"
+"dialog": |
+  - dialog "Sample Dialog":
+    - heading "Sample Dialog" [level=3]
+    - button "Close"
+    - paragraph: This is the dialog body content. It supports any slotted content including forms, lists, or other components.
+    - button "Cancel"
+    - button "Save"
+"header": |
+  - dialog "Sample Dialog":
+    - heading "Sample Dialog" [level=3]
+    - button "Close"
+    - paragraph: This is the dialog body content. It supports any slotted content including forms, lists, or other components.
+    - button "Cancel"
+    - button "Save"
+"body": |
+  - dialog "Sample Dialog":
+    - heading "Sample Dialog" [level=3]
+    - button "Close"
+    - paragraph: This is the dialog body content. It supports any slotted content including forms, lists, or other components.
+    - button "Cancel"
+    - button "Save"
+"footer": |
+  - dialog "Sample Dialog":
+    - heading "Sample Dialog" [level=3]
+    - button "Close"
+    - paragraph: This is the dialog body content. It supports any slotted content including forms, lists, or other components.
+    - button "Cancel"
+    - button "Save"

package/src/testing-js/__aria__/iconbutton.yml

@@ -0,0 +1,57 @@
+"Primary / base": |
+  - button "primary action"
+"Secondary / base": |
+  - button "secondary action"
+"Secondary / default": |
+  - button "secondary action"
+"Secondary / hover": |
+  - button "secondary action"
+"Secondary / disabled": |
+  - button "secondary action" [disabled]
+"Outline / base": |
+  - button "outline action"
+"Outline / default": |
+  - button "outline action"
+"Outline / hover": |
+  - button "outline action"
+"Outline / disabled": |
+  - button "outline action" [disabled]
+"Success / base": |
+  - button "success action"
+"Success / default": |
+  - button "success action"
+"Success / hover": |
+  - button "success action"
+"Success / disabled": |
+  - button "success action" [disabled]
+"Danger / base": |
+  - button "danger action"
+"Danger / default": |
+  - button "danger action"
+"Danger / hover": |
+  - button "danger action"
+"Danger / disabled": |
+  - button "danger action" [disabled]
+"Warning / base": |
+  - button "warning action"
+"Warning / default": |
+  - button "warning action"
+"Warning / hover": |
+  - button "warning action"
+"Warning / disabled": |
+  - button "warning action" [disabled]
+"Outline / active": |
+  - button "outline action"
+"Primary / default": |
+  - button "primary action"
+"Primary / hover": |
+  - button "primary action"
+"Primary / disabled": |
+  - button "primary action" [disabled]
+"Primary (small)": |
+  - button "primary action"
+  - button "secondary action"
+  - button "outline action"
+  - button "success action"
+  - button "danger action"
+  - button "warning action"

package/src/testing-js/__aria__/image.yml

@@ -0,0 +1,10 @@
+"Default": |
+  - img "Demo"
+  - paragraph:
+    - text: "Use zoom on hover: every image scales on hover (a page can still force it per image with the"
+    - code: zoom
+    - text: "prop). Overflow scaling on (default): the content zooms inside the fixed frame, masked by overflow. Off: the whole framed image grows past its box. Override per image with"
+    - code: overflowScaling
+    - text: .
+"Bare": |
+  - img "Demo"

package/src/testing-js/__aria__/imagelightbox.yml

@@ -0,0 +1,50 @@
+"preview": |
+  - 'button "Expand image: Newspaper" [expanded]':
+    - img "Newspaper"
+  - img "Newspaper"
+  - button "Close"
+  - button "Previous image"
+  - button "Next image"
+  - button "Zoom out" [disabled]
+  - text: 59%
+  - button "Zoom in"
+"tile": |
+  - 'button "Expand image: Newspaper" [expanded]':
+    - img "Newspaper"
+  - img "Newspaper"
+  - button "Close"
+  - button "Previous image"
+  - button "Next image"
+  - button "Zoom out" [disabled]
+  - text: 59%
+  - button "Zoom in"
+"overlay": |
+  - 'button "Expand image: Newspaper" [expanded]':
+    - img "Newspaper"
+  - img "Newspaper"
+  - button "Close"
+  - button "Previous image"
+  - button "Next image"
+  - button "Zoom out" [disabled]
+  - text: 59%
+  - button "Zoom in"
+"chrome": |
+  - 'button "Expand image: Newspaper" [expanded]':
+    - img "Newspaper"
+  - img "Newspaper"
+  - button "Close"
+  - button "Previous image"
+  - button "Next image"
+  - button "Zoom out" [disabled]
+  - text: 59%
+  - button "Zoom in"
+"preview (click nextButton)": |
+  - 'button "Expand image: Newspaper" [expanded]':
+    - img "Newspaper"
+  - img "Newspaper"
+  - button "Close"
+  - button "Previous image"
+  - button "Next image"
+  - button "Zoom out" [disabled]
+  - text: 59%
+  - button "Zoom in"

package/src/testing-js/__aria__/inlineeditactions.yml

@@ -0,0 +1,16 @@
+"Save button / default": |
+  - text: Editing value...
+  - button "Save"
+  - button "Cancel"
+"Save button / hover": |
+  - text: Editing value...
+  - button "Save"
+  - button "Cancel"
+"Cancel button / default": |
+  - text: Editing value...
+  - button "Save"
+  - button "Cancel"
+"Cancel button / hover": |
+  - text: Editing value...
+  - button "Save"
+  - button "Cancel"

package/src/testing-js/__aria__/input.yml

@@ -0,0 +1,61 @@
+"preview": |
+  - text: Field label
+  - textbox "Field label" [invalid]:
+    - /placeholder: Enter password
+  - button "Show password"
+  - paragraph: Helper text describing the field.
+  - alert: Please enter a valid value.
+"error": |
+  - text: Field label
+  - textbox "Field label" [invalid]:
+    - /placeholder: Enter password
+  - button "Show password"
+  - paragraph: Helper text describing the field.
+  - alert: Please enter a valid value.
+"field": |
+  - text: Field label
+  - textbox "Field label" [invalid]:
+    - /placeholder: Enter password
+  - button "Show password"
+  - paragraph: Helper text describing the field.
+  - alert: Please enter a valid value.
+"default": |
+  - text: Field label
+  - textbox "Field label" [invalid]:
+    - /placeholder: Enter password
+  - button "Show password"
+  - paragraph: Helper text describing the field.
+  - alert: Please enter a valid value.
+"disabled": |
+  - text: Field label
+  - textbox "Field label" [disabled] [invalid]:
+    - /placeholder: Enter password
+  - button "Show password" [disabled]
+  - paragraph: Helper text describing the field.
+  - alert: Please enter a valid value.
+"label": |
+  - text: Field label
+  - textbox "Field label" [invalid]:
+    - /placeholder: Enter password
+  - button "Show password"
+  - paragraph: Helper text describing the field.
+  - alert: Please enter a valid value.
+"hint": |
+  - text: Field label
+  - textbox "Field label" [invalid]:
+    - /placeholder: Enter password
+  - button "Show password"
+  - paragraph: Helper text describing the field.
+  - alert: Please enter a valid value.
+"focused (password, Error off)": |
+  - text: Field label
+  - textbox "Field label":
+    - /placeholder: Enter password
+  - button "Show password"
+  - paragraph: Helper text describing the field.
+"disabled (password, Error off)": |
+  - text: Field label
+  - textbox "Field label" [disabled]:
+    - /placeholder: Enter password
+  - button "Show password" [disabled]
+  - paragraph: Helper text describing the field.

package/src/testing-js/__aria__/menuselect.yml

@@ -0,0 +1,30 @@
+"menu": |
+  - listbox "Options":
+    - option "Option one"
+    - option "Option two"
+    - option "Option three"
+    - option "Option four" [disabled]
+"default item": |
+  - listbox "Options":
+    - option "Option one"
+    - option "Option two"
+    - option "Option three"
+    - option "Option four" [disabled]
+"hover item": |
+  - listbox "Options":
+    - option "Option one"
+    - option "Option two"
+    - option "Option three"
+    - option "Option four" [disabled]
+"selected item": |
+  - listbox "Options":
+    - option "Option one"
+    - option "Option two" [selected]
+    - option "Option three"
+    - option "Option four" [disabled]
+"disabled item": |
+  - listbox "Options":
+    - option "Option one"
+    - option "Option two"
+    - option "Option three"
+    - option "Option four" [disabled]