@sableui/react 0.13.1 → 0.14.0

package/dist/foundations/motion.js

@@ -2,8 +2,8 @@
 var motion = {
   slug: "motion",
   title: "Motion",
-  summary: "Motion explains a change: where something came from, what responded, and that work is happening. It is subtle by default, built from named recipes, and one switch turns it off.",
-  headline: "4 slots \xB7 3 speeds \xB7 enter-only overshoot \xB7 1 kill switch",
+  summary: "Motion explains a change: where something came from, what responded, and that work is happening. Components ship crafted by default: one indicator travels instead of two blinking, numbers roll, ticks draw, a refused answer shakes. It is built from named recipes, comes in two levels, and one switch turns it off.",
+  headline: "4 slots \xB7 3 speeds \xB7 2 levels \xB7 enter-only overshoot \xB7 1 kill switch",
   vocabularies: [
     {
       title: "Three speeds",
@@ -24,7 +24,13 @@ var motion = {
         { name: "motion-pop", value: "enter base \xB7 spring", use: "Anchored or centred surfaces: popovers, menus, dialogs." },
         { name: "motion-slide-{up,down,left,right}", value: "enter base / exit fast", use: "Directional surfaces: sheets, toasts." },
         { name: "motion-disclosure", value: "base \xB7 standard", use: "Height changes: accordion, collapsible." },
-        { name: "motion-icon-swap", value: "enter \xB7 emphasized cross-fade", use: "Two icons of one control trading places: play/pause, outline/fill." },
+        { name: "motion-icon-swap", value: "enter \xB7 emphasized cross-fade", use: "Two icons of one control trading places: play/pause, outline/fill, copy/check." },
+        { name: "motion-glide", value: "slow \xB7 emphasized \xB7 expressive", use: "ONE indicator travelling to the selected option: tabs, segmented thumb, active dot." },
+        { name: "motion-shake", value: "~400ms decaying \xB7 expressive", use: "A refused answer: wrong code, invalid submit. Plays while data-shake is set (useShake). Never the only signal." },
+        { name: "motion-tick", value: "fast fade + base wipe \xB7 expressive", use: "A check mark that draws itself in. Exits only fade." },
+        { name: "motion-appear", value: "fast fade + base scale", use: "A small control mounting in place: a clear button, a send arrow, a badge. @starting-style, no JS." },
+        { name: "motion-arrive", value: "base \xB7 decelerate \xB7 staggered \xB7 expressive", use: "Items a user action brings into a list: a folder's children on expand, a row just added. Never on every render." },
+        { name: "motion-size", value: "base \xB7 emphasized \xB7 expressive", use: "An element easing between intrinsic sizes when its label changes: a two-step confirm, Copy \u2192 Copied." },
         { name: "motion-draw", value: "slower \xB7 decelerate", use: 'SVG line art drawing on when a <Reveal> scrolls in. The path needs pathLength="1"; stagger siblings with --motion-draw-delay.' },
         { name: "motion-spin \xB7 pulse \xB7 shimmer \xB7 dot-bounce \xB7 ping", value: "loops", use: "Activity. Scale-aware, so reduced motion freezes them." }
       ]
@@ -39,6 +45,18 @@ var motion = {
         { name: "ease-bounce", value: "~10% overshoot", use: "A playful pop, opt-in only. Enter only, never on exit." }
       ]
     },
+    {
+      title: "Two levels",
+      note: "Essential motion answers the user; expressive motion narrates continuity. Expressive durations are also multiplied by --motion-expressive, which `subtle` sets to 0. Each level can only turn motion down from what surrounds it.",
+      terms: [
+        { name: "essential", value: "always, unless off", use: "Colour and focus feedback, press, overlay arrival, disclosure height, loaders, chart hover." },
+        { name: "expressive", value: "full only", use: "Glides, rolling numbers (NumberTicker), drawn ticks, shakes, staggers, chart arrival and morph, scroll reveals, spring overshoot." },
+        { name: "full", value: "default", use: "Both levels play. The crafted default." },
+        { name: "subtle", value: 'data-motion="subtle"', use: "Essential only; nothing overshoots. For dense tools, embedded widgets, readers who want calm without stillness." },
+        { name: "off", value: 'data-motion="off" \xB7 reduce-motion', use: "Nothing moves; every state still changes." },
+        { name: "where", value: "provider \xB7 scope \xB7 prop", use: "<MotionProvider policy> for the app, <MotionScope level> for a region, `motion` on a component that owns a flourish." }
+      ]
+    },
     {
       title: "The four slots",
       note: "Every interactive component answers all four, by filling the slot or declining it with a reason in meta.motion.",
@@ -81,6 +99,22 @@ var motion = {
     {
       rule: "JS motion reads useMotion().enabled and does nothing when it is false.",
       why: "Reduced motion is an accessibility setting, not a style preference."
+    },
+    {
+      rule: "One thing travels; two things do not blink. When a selection, a value or a mark changes in place, move the one element that represents it.",
+      why: "A fill switching off here and on there is two events the eye has to connect. A glide, a roll or a draw is one, and it is most of what makes an interface feel made rather than assembled."
+    },
+    {
+      rule: "Flourishes are expressive: multiply their durations by --motion-expressive and gate JS ones on useMotion().expressive.",
+      why: "`subtle` promises the answers without the choreography. A glide on a plain token keeps playing after someone asked for calm."
+    },
+    {
+      rule: "A state change finishes its story: refused shakes and says why, success confirms in place, armed asks again.",
+      why: "Motion that starts a change and leaves the outcome to a snap reads as unfinished. ConfirmButton, OtpField's invalid shake and the copy-to-check swap are the reference cases."
+    },
+    {
+      rule: "Component motion props and MotionScope only turn motion down.",
+      why: "`full` on a component means inherit. Nothing below the provider can switch motion back on for a reader who asked for it off."
     }
   ],
   noGos: [
@@ -120,6 +154,18 @@ var motion = {
       after: '<button className="motion-interactive sable-surface-interactive">',
       why: "Same feel, but reduced motion now resolves it instantly."
     },
+    {
+      title: "A selection that travels",
+      before: '<Tab className="data-[active]:border-b-2 data-[active]:border-foreground" />',
+      after: '<Tabs.Indicator className="motion-glide left-(--active-tab-left) w-(--active-tab-width)" />',
+      why: "The underline used to vanish under one tab and appear under the next. Now it slides, and Tabs renders it for you."
+    },
+    {
+      title: "A value that rolls",
+      before: "<span>{total}</span>",
+      after: '<NumberTicker value={total} format={{ style: "currency", currency: "USD" }} />',
+      why: "The digits that changed roll; the ones that did not stay still, so the eye goes straight to the difference."
+    },
     {
       title: "Faster exits",
       before: "transition: opacity 200ms ease-in-out;  /* in and out */",