@motion-proto/live-tokens 0.73.0 → 0.75.0

package/src/system/components/Image.svelte

@@ -1,3 +1,11 @@
+<!--
+  Image.svelte. A framed picture in the page flow.
+  Use for: any picture the page shows.
+  Not for: a picture whose detail the reader must open (ImageLightbox);
+  decoration that page CSS paints.
+  Variant: `default` keeps the picture's own proportions, `banner` gives it a
+  tall frame, `medium` and `compact` shorter ones.
+-->
 <script lang="ts">
   interface Props {
     src: string;

package/src/system/components/ImageLightbox.svelte

@@ -1,3 +1,9 @@
+<!--
+  ImageLightbox.svelte. A picture that opens to a full view on click.
+  Use for: a screenshot, artwork, or chart whose detail is the point, and for
+  a gallery of them.
+  Not for: decoration or a picture the reader takes in at a glance (Image).
+-->
 <script lang="ts">
   import { onMount, tick } from 'svelte';
   import { portal } from '../internal/portal';

package/src/system/components/InlineEditActions.svelte

@@ -1,3 +1,10 @@
+<!--
+  InlineEditActions.svelte. The confirm-and-cancel pair that ends an inline
+  edit.
+  Use for: the two actions that close an in-place rename or value edit.
+  Not for: the actions of a form or a dialog (Button); a lone action on a row
+  (IconButton).
+-->
 <script lang="ts">
    
 

package/src/system/components/Input.svelte

@@ -1,3 +1,10 @@
+<!--
+  Input.svelte. A text field with its label, hint, and error line.
+  Use for: an answer the page cannot list, such as a name, an amount, or a
+  search string.
+  Not for: a choice from a set the page can write down (MenuSelect); an on/off
+  setting (Toggle).
+-->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 

package/src/system/components/MenuSelect.svelte

@@ -1,3 +1,10 @@
+<!--
+  MenuSelect.svelte. A list of options with one checked.
+  Use for: single selection from a set too long to sit in a row, dropped from
+  a Button.
+  Not for: two to four inline alternatives (SegmentedControl); a form-style
+  list read in full (RadioButton).
+-->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 

package/src/system/components/Notification.svelte

@@ -1,3 +1,10 @@
+<!--
+  Notification.svelte. Feedback about something that just happened.
+  Use for: the outcome of an action or a system event, which the reader can
+  dismiss.
+  Not for: standing content in a section (Callout); a decision that blocks the
+  page (Dialog).
+-->
 <script lang="ts">
    import { createEventDispatcher } from 'svelte';
    import Button from './Button.svelte';

package/src/system/components/Panel.svelte

@@ -1,3 +1,9 @@
+<!--
+  Panel.svelte. A frame around one section of the page's content.
+  Use for: a stage, a list, a form, or a block of copy that reads as one
+  region. `minHeight` holds the height while the content changes.
+  Not for: one item in a set (Card); a modal surface (Dialog).
+-->
 <script lang="ts">
   import type { Snippet } from 'svelte';
 

package/src/system/components/ProgressBar.svelte

@@ -1,3 +1,8 @@
+<!--
+  ProgressBar.svelte. A read-out of progress against a labelled track.
+  Use for: reporting how far a task has run.
+  Not for: a number the reader sets (Slider); a standing status label (Badge).
+-->
 <script lang="ts">
   interface Props {
     value?: number;

package/src/system/components/RadioButton.svelte

@@ -1,3 +1,10 @@
+<!--
+  RadioButton.svelte. A form row that selects one option.
+  Use for: a choice the reader reviews as text before committing to a larger
+  form.
+  Not for: an inline switch between views (SegmentedControl); a setting that
+  takes effect at once (Toggle).
+-->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
@@ -33,7 +40,7 @@
   style={color ? `--radiobutton-color: ${color};` : ''}
   onclick={fireClick}
 >
-  <span class="radio-dot"></span>
+  <span class="radio-dot"><span class="radio-dot-fill"></span></span>
   <span class="radio-label">{label}</span>
 </button>
 
@@ -103,7 +110,7 @@
       .radio-dot {
         border: var(--radiobutton-hover-dot-border-width) solid var(--radiobutton-color, var(--radiobutton-hover-dot-border-color));
 
-        &::after {
+        .radio-dot-fill {
           width: var(--radiobutton-hover-dot-size);
           height: var(--radiobutton-hover-dot-size);
           background: var(--radiobutton-color, var(--radiobutton-hover-dot-fill));
@@ -130,7 +137,7 @@
       .radio-dot {
         border: var(--radiobutton-active-dot-border-width) solid var(--radiobutton-color, var(--radiobutton-active-dot-border-color));
 
-        &::after {
+        .radio-dot-fill {
           width: var(--radiobutton-active-dot-size);
           height: var(--radiobutton-active-dot-size);
           background: var(--radiobutton-color, var(--radiobutton-active-dot-fill));
@@ -149,8 +156,7 @@
     flex-shrink: 0;
     transition: all var(--duration-200);
 
-    &::after {
-      content: '';
+    .radio-dot-fill {
       position: absolute;
       top: 50%;
       left: 50%;

package/src/system/components/SectionDivider.svelte

@@ -1,3 +1,11 @@
+<!--
+  SectionDivider.svelte. A titled break between the sections of a page.
+  Use for: naming the band that follows it.
+  Not for: moving between pages (SideNavigation); a title inside a container
+  (Card).
+  Level: `md` titles a page and `sm` titles a section; `eyebrow` is an opt-in
+  label above the title.
+-->
 <script lang="ts">
   /** Size variant. Each variant owns everything that defines its style:
    *  typography, geometry, colors AND the intrinsic display properties

package/src/system/components/SegmentedControl.svelte

@@ -1,3 +1,9 @@
+<!--
+  SegmentedControl.svelte. An inline switch between named alternatives.
+  Use for: two to four short labels that pick one view of the same data.
+  Not for: swapping the page's content area (TabBar); labels long enough to
+  wrap (RadioButton).
+-->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 

package/src/system/components/SideNavigation.svelte

@@ -1,3 +1,9 @@
+<!--
+  SideNavigation.svelte. The rail that moves between the pages of a site.
+  Use for: navigation that follows the current path.
+  Not for: switching panels inside one page (TabBar); a menu of actions
+  (MenuSelect).
+-->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import CollapsibleSection from './CollapsibleSection.svelte';

package/src/system/components/Slider.svelte

@@ -1,8 +1,9 @@
 <!--
-  Slider.svelte — a number chosen by position on a track. `single` moves one
-  thumb to a value; `range` moves two thumbs to a low and a high bound. Both
-  variants share the track, fill, and thumb tokens, linked in the editor so an
-  edit to one moves the other unless deliberately unlinked.
+  Slider.svelte. A number the reader picks by position on a track.
+  Use for: a volume, a price band, or a percentage, where the position carries
+  the meaning.
+  Not for: an exact number the reader would rather type (Input); an on/off
+  setting (Toggle).
 -->
 <script module lang="ts">
   export const sliderVariants = ['single', 'range'] as const;
@@ -118,6 +119,8 @@
 
 <style>
   :global(:root) {
+    /* SliderEditor declares the two variant sets linkable, so an editor change
+       to one moves the other until the designer unlinks it. */
     /* Single: one thumb. */
     --slider-single-track-surface: var(--surface-neutral-lowest);
     --slider-single-track-border: var(--border-neutral-subtle);

package/src/system/components/TabBar.svelte

@@ -1,3 +1,9 @@
+<!--
+  TabBar.svelte. Tabs that swap the content below them.
+  Use for: two to seven panels the reader moves between inside one page.
+  Not for: one switch among others in a row (SegmentedControl); navigation
+  that changes the URL (SideNavigation).
+-->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
@@ -100,7 +106,7 @@
     --tabbar-default-tab-border-width: var(--border-width-0);
     --tabbar-default-tab-top-radius: var(--radius-none);
     --tabbar-default-tab-bottom-radius: var(--radius-none);
-    --tabbar-default-indicator-border-width: var(--border-width-2);
+    --tabbar-default-indicator-width: var(--border-width-2);
 
     /* Hover tab */
     --tabbar-hover-text: var(--text-secondary);
@@ -116,7 +122,7 @@
     --tabbar-hover-tab-border-width: var(--border-width-0);
     --tabbar-hover-tab-top-radius: var(--radius-none);
     --tabbar-hover-tab-bottom-radius: var(--radius-none);
-    --tabbar-hover-indicator-border-width: var(--border-width-2);
+    --tabbar-hover-indicator-width: var(--border-width-2);
 
     /* Active tab */
     --tabbar-active-text: var(--text-primary);
@@ -132,7 +138,7 @@
     --tabbar-active-tab-border-width: var(--border-width-0);
     --tabbar-active-tab-top-radius: var(--radius-none);
     --tabbar-active-tab-bottom-radius: var(--radius-none);
-    --tabbar-active-indicator-border-width: var(--border-width-2);
+    --tabbar-active-indicator-width: var(--border-width-2);
 
     /* Disabled tab */
     --tabbar-disabled-text: var(--text-disabled);
@@ -148,7 +154,7 @@
     --tabbar-disabled-tab-border-width: var(--border-width-0);
     --tabbar-disabled-tab-top-radius: var(--radius-none);
     --tabbar-disabled-tab-bottom-radius: var(--radius-none);
-    --tabbar-disabled-indicator-border-width: var(--border-width-2);
+    --tabbar-disabled-indicator-width: var(--border-width-2);
   }
 
   .tab-bar {
@@ -177,7 +183,7 @@
     --_icon-size: var(--tabbar-default-icon-size);
     --_surface: var(--tabbar-default-surface);
     --_indicator-color: var(--tabbar-default-border);
-    --_indicator-width: var(--tabbar-default-indicator-border-width);
+    --_indicator-width: var(--tabbar-default-indicator-width);
     --_padding: var(--tabbar-default-padding);
     --_border-color: var(--tabbar-default-tab-border-color);
     --_border-width: var(--tabbar-default-tab-border-width);
@@ -191,7 +197,7 @@
     background: var(--_surface);
     border: var(--_border-width) solid var(--_border-color);
     /* Indicator accent owns the bottom edge. Both width and color rebind
-       per state — `--tabbar-{state}-indicator-border-width` and
+       per state — `--tabbar-{state}-indicator-width` and
        `--tabbar-{state}-border` (the indicator color slot). */
     border-bottom: var(--_indicator-width) solid var(--_indicator-color);
     border-radius: var(--_top-radius) var(--_top-radius) var(--_bottom-radius) var(--_bottom-radius);
@@ -223,7 +229,7 @@
     --_icon-size: var(--tabbar-hover-icon-size);
     --_surface: var(--tabbar-hover-surface);
     --_indicator-color: var(--tabbar-hover-border);
-    --_indicator-width: var(--tabbar-hover-indicator-border-width);
+    --_indicator-width: var(--tabbar-hover-indicator-width);
     --_padding: var(--tabbar-hover-padding);
     --_border-color: var(--tabbar-hover-tab-border-color);
     --_border-width: var(--tabbar-hover-tab-border-width);
@@ -240,7 +246,7 @@
     --_icon-size: var(--tabbar-active-icon-size);
     --_surface: var(--tabbar-active-surface);
     --_indicator-color: var(--tabbar-active-border);
-    --_indicator-width: var(--tabbar-active-indicator-border-width);
+    --_indicator-width: var(--tabbar-active-indicator-width);
     --_padding: var(--tabbar-active-padding);
     --_border-color: var(--tabbar-active-tab-border-color);
     --_border-width: var(--tabbar-active-tab-border-width);
@@ -257,7 +263,7 @@
     --_icon-size: var(--tabbar-disabled-icon-size);
     --_surface: var(--tabbar-disabled-surface);
     --_indicator-color: var(--tabbar-disabled-border);
-    --_indicator-width: var(--tabbar-disabled-indicator-border-width);
+    --_indicator-width: var(--tabbar-disabled-indicator-width);
     --_padding: var(--tabbar-disabled-padding);
     --_border-color: var(--tabbar-disabled-tab-border-color);
     --_border-width: var(--tabbar-disabled-tab-border-width);

package/src/system/components/Table.svelte

@@ -1,3 +1,8 @@
+<!--
+  Table.svelte. A themed frame around the rows and cells the page writes.
+  Use for: records the reader scans and compares.
+  Not for: a set of things the reader acts on (Card).
+-->
 <script lang="ts">
   interface Props {
     children?: import('svelte').Snippet;
@@ -29,8 +34,8 @@
     --table-default-header-font-weight: var(--font-weight-semibold);
     --table-default-header-line-height: var(--line-height-none);
     --table-default-header-padding: var(--space-12);
-    --table-default-header-border: var(--border-neutral);
-    --table-default-header-border-width: var(--border-width-1);
+    --table-default-header-divider: var(--border-neutral);
+    --table-default-header-divider-width: var(--border-width-1);
 
     /* Cell */
     --table-default-cell-text: var(--text-secondary);
@@ -77,7 +82,7 @@
     line-height: var(--table-default-header-line-height);
     @include themed-padding(--table-default-header-padding);
     text-align: left;
-    border-bottom: var(--table-default-header-border-width) solid var(--table-default-header-border);
+    border-bottom: var(--table-default-header-divider-width) solid var(--table-default-header-divider);
     border-right: var(--table-default-column-divider-width) solid var(--table-default-column-divider);
     white-space: nowrap;
   }

package/src/system/components/Toggle.svelte

@@ -1,8 +1,8 @@
 <!--
-  Toggle.svelte — Cloudscape-style on/off switch. The default state is "off",
-  whose tokens carry the baseline appearance plus all geometry and label
-  typography. "On" is a state that recolors track + thumb when the toggle is
-  checked; hover and disabled layer over the active component state.
+  Toggle.svelte. An on/off switch that names the setting it controls.
+  Use for: a setting that takes effect the moment it flips.
+  Not for: a choice between two named alternatives (SegmentedControl); a
+  yes/no answer inside a form (RadioButton).
 -->
 <script lang="ts">
   interface Props {

package/src/system/components/Tooltip.svelte

@@ -1,3 +1,9 @@
+<!--
+  Tooltip.svelte. A hint that appears on an element on hover or focus.
+  Use for: a definition or a shortcut the reader can do without.
+  Not for: content the reader must not miss (Callout); feedback after an
+  action (Notification).
+-->
 <script lang="ts">
   interface Props {
     text?: string;