@sableui/react 0.14.0 → 0.16.0

package/dist/foundations/accessibility.js

@@ -69,6 +69,11 @@ var accessibility = {
       why: "The ratio alone passes labels that read muddy. A deliberate brand pair is allowed with a recorded reason (lint disable or preset exceptions).",
       enforcedBy: "sable-lint: label-contrast"
     },
+    {
+      never: "A label fill painted on a mark that carries no text \u2014 a meter, a segmented bar, a status dot, a chart series, a soft tint.",
+      instead: "The colour's `-mark` token (`bg-success-mark`, `bg-tone-warning-mark/15`): the same hue lifted and saturated, held to 2:1 on the page. Text contrast is for text; a graphic owes visibility, and 3:1 (WCAG 1.4.11) only when it is the sole carrier of its meaning.",
+      why: "A fill is pinned dark enough for a white label. On a bar or dot with nothing to label, that darkness only reads as mud: a brown warning, a forest-green success."
+    },
     {
       never: 'Blocking paste, or type="number" for codes and card numbers.',
       instead: 'type="text" inputMode="numeric" with the right autocomplete.',

package/dist/foundations/motion.js

@@ -31,6 +31,8 @@ var motion = {
         { 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-bloom", value: "slower \xB7 0 \u2192 1.2 \u2192 1 \xB7 expressive", use: "A small glyph landing in its on state: a liked heart, a picked rating, a toast's status icon. Remount it (key) to replay; never on the resting state." },
+        { name: "<Burst>", value: "slower ring + thrown dots \xB7 expressive", use: "The follow-through behind a bloom, in the theme's palette families. Only on a choice a person made: a like, a star, a finished task." },
         { 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." }
       ]
@@ -50,7 +52,7 @@ var motion = {
       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: "expressive", value: "full only", use: "Glides, rolling numbers (NumberTicker), drawn ticks, blooms and bursts, 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." },
@@ -112,6 +114,18 @@ var motion = {
       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: "Amplitude scales with smallness. A 16px glyph that turns on grows from nothing past its size; a surface travels from 0.96 and a press settles to 0.97.",
+      why: "The same 4% that is right for a dialog is invisible on an icon, which is why a state change on a small control used to read as a colour swap with no life in it. A dialog that overshot 20% would lurch. Size, not importance, sets how far a thing moves."
+    },
+    {
+      rule: "Stage a moment: the main object lands first, the follow-through after it.",
+      why: "A ring that opens, a glyph that blooms 90ms later, dots thrown 60ms after that read as one event with a cause and an effect. Everything starting on the same frame reads as a flash. LikeButton and the toast's status glyph are the reference cases."
+    },
+    {
+      rule: "Celebrate only what a person chose, and only at full motion.",
+      why: "A burst is a reply. On a like it is delight; on a system event, on load, or on every row of a list it is a notification wearing confetti. Under subtle the fill alone answers."
+    },
     {
       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."
@@ -166,6 +180,12 @@ var motion = {
       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: "A glyph that lands",
+      before: '<Icon name="heart" variant={liked ? "solid" : "regular"} />',
+      after: "<LikeButton count={likes} defaultPressed={liked} />",
+      why: "The heart used to swap fill in one frame. Now it blooms past its size and settles while a ring and dots burst from it, and the count rolls: the same state, told as an event."
+    },
     {
       title: "Faster exits",
       before: "transition: opacity 200ms ease-in-out;  /* in and out */",

package/dist/icon-sets/reicon.js

@@ -72,6 +72,9 @@ import { Pause } from "reicon-react/icons/Pause";
 import { Play } from "reicon-react/icons/Play";
 import { Previous } from "reicon-react/icons/Previous";
 import { Refresh } from "reicon-react/icons/Refresh";
+import { Restart } from "reicon-react/icons/Restart";
+import { EmojiHappy } from "reicon-react/icons/EmojiHappy";
+import { PlaybackSpeed } from "reicon-react/icons/PlaybackSpeed";
 import { Send } from "reicon-react/icons/Send";
 import { Star } from "reicon-react/icons/Star";
 import { Trash } from "reicon-react/icons/Trash";
@@ -181,7 +184,14 @@ var ICONS = {
   paperclip: Paperclip,
   chart: ChartBar,
   flag: Flag,
-  "at-sign": AtSign
+  "at-sign": AtSign,
+  // Added when the docs' preview controls borrowed `sparkles` (which reads
+  // as AI) for a motion level and `refresh` (which reads as fetching again)
+  // for watching an animation from its first frame.
+  replay: Restart,
+  motion: PlaybackSpeed,
+  // Added for the add-reaction pill under a chat bubble.
+  emoji: EmojiHappy
 };
 var WEIGHTS = {
   regular: "Outline",