@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/design-system/components/Radio/README.md

@@ -15,10 +15,9 @@ A set of mutually exclusive choices, each a native radio under a skin, grouped b
 
 ## Anatomy
 
-- Dot: 16px (`--ws-icon`) circle, `radius-full` corners, 1px (`--ws-line`) edge in `--ws-edge-card` at rest.
-- Chosen: the ring turns `--color-text-heading` (navy) and a smaller navy disc fills its centre; the outer ring is never
-  fully filled (that look belongs to `Checkbox`).
-- Label: 14px medium, `--color-text-heading`, beside the dot; an optional description line in `.ws-muted` (`--color-text-muted`) under it.
+- Dot: 18 px circle with a 1.5 px navy edge at rest, in `Checkbox`'s language (Seth's action box), drawn inside.
+- Chosen: an 8 px navy disc in its centre; the ring is never filled (that look belongs to `Checkbox`).
+- Label: 14 / 20 medium navy, 10 px from the dot; an optional description line in `.ws-muted` under it, 2 apart.
 - Group: a `fieldset` with no border of its own, a `legend` at 12px medium `--color-text-body` above the options.
 
 ## Variants and sizes
@@ -28,33 +27,33 @@ A set of mutually exclusive choices, each a native radio under a skin, grouped b
 | Plain | label only | a short, self-explaining option ("Easy", "5 more") |
 | With description | label plus a muted line under it | an option that needs one more clause ("Needs a higher plan") |
 
-There is one size.
+There is one size (18). A choice among two to four short options may instead be a `Segmented` of native radios.
 
 ## States
 
-- **Default (not chosen):** the cream dot with the fine grey edge.
-- **Hover:** no change to the dot itself at rest; a surrounding row may take a faint tint where it sits in a list.
-- **Focus:** the kit's focus halo around the dot, from the native input's own focus.
+- **Default (not chosen):** the cream dot with its navy ring.
+- **Hover (a mouse only):** the dot takes the navy wash while it is not chosen.
+- **Focus:** the kit's ring, 2 px navy, 2 px out, round the dot.
 - **Pressed:** the native input's own press.
-- **Selected (chosen):** a navy ring and a navy inner disc. **The system's rule is navy, not the kit's salmon**: the
-  kit's `Radio` draws its chosen state in salmon, which the reference implementation overrides, since navy matches the
-  rest of the chosen states.
+- **Selected (chosen):** the navy ring and the 8 px navy disc, popping in (`--ws-ease-pop`). Navy, never the kit's
+  salmon.
 - **Pending / loading:** not applicable.
 - **Disabled:** 50% opacity on the row, pointer events off; a disabled, chosen dot still shows its navy centre.
-- **Error:** the kit's `RadioGroup` defines none of its own; a group needing one draws a message below it, as a field
-  does.
+- **Error:** a group that needs a choice takes the salmon's AA step on each ring (`aria-invalid="true"`) and a message
+  below the group.
 - **Empty:** a group may start with nothing chosen, in which case every dot is at rest.
 - **Long label:** the label wraps to a second line; the dot stays aligned to the first line.
 - **Narrow:** the group stacks in one column regardless of width; options never wrap into a row of their own.
-- **Touch:** the whole label is the tap target, not the 16px dot alone.
+- **Touch:** one line is a 40 px row; the whole label is the target.
+- **Width:** each label is as wide as its words, never the whole column, so a click far from them does nothing.
+- **Dark:** the ring and the disc become the light ink.
 
 ## Behaviour
 
 - Keyboard: a native `<input type="radio">` group; Tab reaches the group once, arrow keys move between its options and
   choose as they go (the platform's own radio-group behaviour).
 - Pointer / touch: clicking or tapping anywhere in the label chooses it.
-- Motion: the ring and inner disc's colour and opacity transition over `--ws-duration-instant` on `--ws-ease-soft`;
-  nothing moves under `prefers-reduced-motion: reduce`.
+- Motion: the disc pops in over the settle beat on `--ws-ease-pop`; still under reduced motion.
 
 ## Content
 
@@ -94,5 +93,29 @@ There is one size.
 
 ## Source
 
-**Derived from**: the kit's own `Radio`/`RadioGroup` contracts, overridden for the system's navy-when-chosen rule.
+**Derived from**: the kit's own `Radio`/`RadioGroup` contracts, overridden for the system's navy-when-chosen rule;
+0.5.0 draws it in `Checkbox`'s language (Seth's 18 px box with a 1.5 px navy edge; Seth draws no radio).
 **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<fieldset class="ws-radio-group">
+  <legend class="ws-radio-group__legend">Lead temperature</legend>
+  <label class="ws-radio">
+    <input type="radio" name="temperature" checked>
+    <span class="ws-radio__dot" aria-hidden="true"></span>
+    <span class="ws-radio__words"><span class="ws-radio__label">Cold</span></span>
+  </label>
+  <label class="ws-radio">
+    <input type="radio" name="temperature">
+    <span class="ws-radio__dot" aria-hidden="true"></span>
+    <span class="ws-radio__words"><span class="ws-radio__label">Warm</span><span class="ws-muted">Replied once, then gone quiet</span></span>
+  </label>
+</fieldset>
+```
+
+## Styles
+
+`design-system/components/Radio/style.css`: `ws-radio-group` and `__legend`; `ws-radio` with `--disabled`; `__dot`,
+`__words`, `__label`.

package/design-system/components/Radio/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Fields" height=300 -->
+<!-- @dsCard group="Fields" height=440 -->
 <!doctype html>
 <html>
 <head>
@@ -32,6 +32,21 @@
     </label>
   </fieldset>
 
+  <fieldset class="ws-radio-group" style="max-width: 320px;">
+    <legend class="ws-radio-group__legend">When Grow checks again (one is required)</legend>
+    <label class="ws-radio">
+      <input type="radio" name="when" aria-invalid="true" aria-describedby="r-err">
+      <span class="ws-radio__dot" aria-hidden="true"></span>
+      <span class="ws-radio__words"><span class="ws-radio__label">Every week, on the morning after the team's Monday call</span></span>
+    </label>
+    <label class="ws-radio">
+      <input type="radio" name="when" aria-invalid="true" aria-describedby="r-err">
+      <span class="ws-radio__dot" aria-hidden="true"></span>
+      <span class="ws-radio__words"><span class="ws-radio__label">Once a month</span></span>
+    </label>
+    <p class="ws-field-msg ws-field-msg--error" id="r-err">Choose when Grow checks again</p>
+  </fieldset>
+
   <fieldset class="ws-radio-group">
     <legend class="ws-radio-group__legend">How many more leads</legend>
     <label class="ws-radio">

package/design-system/components/Radio/style.css

@@ -0,0 +1,21 @@
+/* ---- Radio: a native radio under a skin, in Checkbox's language (Seth's 18 px, 1.5 px navy edge at rest): a ring, an
+   8 px navy dot when chosen; a group is a fieldset with its legend. ---- */
+.ws-radio-group { display: flex; flex-direction: column; gap: var(--space-xxs); margin: 0; padding: 0; border: 0; min-width: 0; }
+.ws-radio-group__legend { padding: 0 0 var(--space-xxs); font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 500; color: var(--color-text-body); }
+.ws-radio { --ws-radio: calc(var(--space-md) + var(--space-3xs)); --ws-radio-line: calc(var(--space-md) + var(--space-xxs)); --ws-radio-edge: var(--color-text-heading); position: relative; display: flex; align-items: flex-start; gap: var(--space-xs-plus); width: fit-content; max-width: 100%; padding: var(--space-xxs) 0; cursor: pointer; }
+.ws-radio input { position: absolute; width: var(--ws-line); height: var(--ws-line); margin: 0; opacity: 0; }
+.ws-radio__dot { position: relative; flex-shrink: 0; width: var(--ws-radio); height: var(--ws-radio); margin-top: calc((var(--ws-radio-line) - var(--ws-radio)) / 2); border: 0; border-radius: var(--radius-full); background: var(--color-bg-page); box-shadow: inset 0 0 0 calc(var(--ws-line) * 1.5) var(--ws-radio-edge); }
+.ws-radio__dot::after { content: ""; position: absolute; inset: 0; width: var(--space-xs); height: var(--space-xs); margin: auto; border-radius: var(--radius-full); background: var(--color-text-heading); opacity: 0; transform: scale(var(--ws-pop-scale)); }
+.ws-radio input:checked + .ws-radio__dot::after { opacity: 1; transform: none; }
+.ws-radio input:focus-visible + .ws-radio__dot { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+.ws-radio input[aria-invalid="true"]:not(:checked) + .ws-radio__dot { --ws-radio-edge: var(--ws-word-needs); }
+@media (hover: hover) {
+  .ws-radio:hover input:not(:checked, :disabled) + .ws-radio__dot { background-image: linear-gradient(var(--ws-hover-strong), var(--ws-hover-strong)); }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ws-radio__dot::after { transition: opacity var(--ws-duration-instant) var(--ws-ease-soft), transform var(--ws-duration-settle) var(--ws-ease-pop); }
+}
+.ws-radio__words { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3xs); }
+.ws-radio__label { font-size: var(--ws-text-body); line-height: var(--ws-radio-line); color: var(--color-text-heading); font-weight: 500; }
+.ws-radio--disabled, .ws-radio:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
+@media (pointer: coarse) { .ws-radio { padding-block: calc((var(--ws-touch) - var(--ws-radio-line)) / 2); } }

package/design-system/components/RankBar/README.md

@@ -14,9 +14,11 @@ The person against their team on one skill: a strip of fine ticks from 0 to 100%
 
 **Anatomy**
 
-- Strip: `--space-2xl` (40 px) tall, the unreached part a fine repeating line every `--space-xxs` (4 px) in `--ws-edge-slot`; the reached part twice as wide, salmon, from `--ws-chart-salmon-fade` to `--color-brand-salmon`, uncovered left to right when the card first shows.
+- Strip: `--space-2xl` (40 px) tall, the unreached part a fine repeating line every `--space-xxs` (4 px) in `--ws-edge-slot`; the reached part twice as wide, salmon, from `--ws-chart-salmon-fade` to `--ws-chart-under-half`, uncovered left to right when the card first shows.
 - Mark: a line `calc(--ws-hairline * 3)` wide standing from the strip's foot up to `calc(--space-2xl + --space-md)` (56 px), one label row (14 px) higher for each row its label is raised, in the mark's own colour.
-- Label: 11 px semibold (`--ws-text-micro`) beside its mark's top, in the mark's AA-safe word colour; it sits right of the mark by default, or left where right would run off the card, on a row above the strip raised further when two would otherwise touch (`placeLabels`, pure and tested). In fello.css the row is data: `style="--lane: 1"` on a raised mark and its label, `style="--lanes: 1"` on `.ws-rank-bar__wrap` for its highest row.
+- Label: 11 px semibold (`--ws-text-micro`) beside its mark's top, in the mark's AA-safe word colour; it sits right of the mark by default, or left where right would run off the card, on a row above the strip raised further when two would otherwise touch (`placeLabels`, pure and tested). In fello.css the row is data: `style="--lane: 1"` on a raised mark and its label, `style="--lanes: 1"` on `.ws-rank-bar__wrap` for its highest row. Fixed markup cannot measure, so raise a label
+  wherever it could touch its neighbour in the narrowest column the card meets (at 320, labels of two marks under about
+  40% apart touch).
 - Quarters: 0, 25, 50, 75, 100%, in 11 px medium muted (`--ws-text-micro`, the floor; the first product drew them at 10), under the strip, their own ends held inside it.
 - Each mark's colour: you salmon (words `--ws-word-needs`), team average `--ws-chart-past-half` (words the same, it is AA itself), team best `--ws-chart-finished` (words `--ws-word-positive`).
 
@@ -27,6 +29,10 @@ The person against their team on one skill: a strip of fine ticks from 0 to 100%
 | Any mark `null` | That mark and its label are left out (no team best yet, or the person has not been scored) |
 | Labels collide | `placeLabels` turns the losing label to the strip's other side, or raises it a row, trying every arrangement and keeping the plainest: fewest turned, fewest rows, lowest |
 
+**Parts and modifiers**
+
+- `.ws-rank-bar__quarters`: the 0, 25, 50, 75, 100% row under the strip (11 px medium muted); each span placed with `left`.
+
 **States**
 
 - Default: the person's filled ticks uncover left to right (`ws-wipe`) over `--ws-duration-calm`; each mark's line grows up from the foot, its label fading in after.
@@ -63,8 +69,29 @@ The person against their team on one skill: a strip of fine ticks from 0 to 100%
   resolved, here.
 - Marks keep the system's exact colours; their labels take the AA step (`--ws-word-needs`, `--ws-word-positive`; the purple is AA on its own).
 - Never an axis or a grid beyond the quarters' own four marks; a tick strip, not a bar chart, carries the share.
+- The CSS never moves a label on its own: the app places each one (its side with `left` or `right`, its row with
+  `--lane`, the wrap's `--lanes`) so no two touch at the narrowest width the card meets. With all three marks in a
+  300 px card, the best's label goes up a row (the preview's narrow example).
 
 **Source**
 
 **Derived from**: the system's data-tone rules for a tick strip, and the privacy rule that a teammate shown beside the
 person is a role, never a name. **Precedent**: the first product built on the system.
+
+**Markup**
+
+```html
+<div class="ws-dots ws-rank-bar ws-rank-bar--in-card">
+  <figure role="img" aria-label="Team rankings: you 20%, team average 46%">
+    <div class="ws-rank-bar__caption-row" aria-hidden="true"><span class="ws-rank-bar__caption">Team rankings</span><span class="ws-rank-bar__goal">Goal is 40%</span></div>
+    <div class="ws-rank-bar__wrap" style="--lanes: 0;" aria-hidden="true">
+      <div class="ws-rank-bar__strip"><span class="ws-rank-bar__remaining" style="--you: 20%;"></span><span class="ws-rank-bar__filled ws-wipe" style="--you: 20%;"></span></div>
+      <span class="ws-rank-bar__mark" style="left: 20%; background: var(--ws-chart-under-half);"></span>
+      <span class="ws-rank-bar__label" style="left: calc(20% + var(--space-xxs)); color: var(--ws-word-needs);">You 20%</span>
+    </div>
+  </figure>
+</div>
+```
+
+**Styles**: `RankBar/style.css`, in `bundle.css` and `fello.css` as `.ws-rank-bar`. Every value is a token. `.ws-rank-bar` itself has no styles: it is the hook that
+names the chart (and the root for its modifiers); its parts carry the styles.

package/design-system/components/RankBar/preview.html

@@ -26,17 +26,17 @@
               <span class="ws-rank-bar__caption">Team rankings</span>
               <span class="ws-rank-bar__goal">Goal is 40%</span>
             </div>
-            <div class="ws-rank-bar__wrap" aria-hidden="true">
+            <div class="ws-rank-bar__wrap" style="--lanes: 1;" aria-hidden="true">
               <div class="ws-rank-bar__strip">
                 <span class="ws-rank-bar__remaining" style="--you: 20%;"></span>
                 <span class="ws-rank-bar__filled ws-wipe" style="--you: 20%;"></span>
               </div>
-              <span class="ws-rank-bar__mark" style="left: 20%; background: var(--color-brand-salmon);"></span>
+              <span class="ws-rank-bar__mark" style="left: 20%; background: var(--ws-chart-under-half);"></span>
               <span class="ws-rank-bar__label" style="left: calc(20% + var(--space-xxs)); color: var(--ws-word-needs);">You 20%</span>
               <span class="ws-rank-bar__mark" style="left: 46%; background: var(--ws-chart-past-half);"></span>
-              <span class="ws-rank-bar__label" style="left: calc(46% + var(--space-xxs)); color: var(--ws-chart-past-half);">Team avg 46%</span>
-              <span class="ws-rank-bar__mark" style="left: 81%; background: var(--ws-chart-finished);"></span>
-              <span class="ws-rank-bar__label" style="right: calc(19% + var(--space-xxs)); color: var(--ws-word-positive);">Team best 81%</span>
+              <span class="ws-rank-bar__label" style="left: calc(46% + var(--space-xxs)); color: var(--ws-word-past-half);">Team avg 46%</span>
+              <span class="ws-rank-bar__mark" style="--lane: 1; left: 81%; background: var(--ws-chart-finished);"></span>
+              <span class="ws-rank-bar__label" style="--lane: 1; right: calc(19% + var(--space-xxs)); color: var(--ws-word-positive);">Team best 81%</span>
             </div>
             <div class="ws-rank-bar__quarters" aria-hidden="true">
               <span style="left: 0;">0%</span>
@@ -69,10 +69,10 @@
               <span class="ws-rank-bar__filled ws-wipe" style="--you: 88%;"></span>
             </div>
             <span class="ws-rank-bar__mark" style="left: 46%; background: var(--ws-chart-past-half);"></span>
-            <span class="ws-rank-bar__label" style="right: calc(54% + var(--space-xxs)); color: var(--ws-chart-past-half);">Team avg 46%</span>
+            <span class="ws-rank-bar__label" style="right: calc(54% + var(--space-xxs)); color: var(--ws-word-past-half);">Team avg 46%</span>
             <span class="ws-rank-bar__mark" style="left: 81%; background: var(--ws-chart-finished);"></span>
             <span class="ws-rank-bar__label" style="right: calc(19% + var(--space-xxs)); color: var(--ws-word-positive);">Team best 81%</span>
-            <span class="ws-rank-bar__mark" style="--lane: 1; left: 88%; background: var(--color-brand-salmon);"></span>
+            <span class="ws-rank-bar__mark" style="--lane: 1; left: 88%; background: var(--ws-chart-under-half);"></span>
             <span class="ws-rank-bar__label" style="--lane: 1; right: calc(12% + var(--space-xxs)); color: var(--ws-word-needs);">You 88%</span>
           </div>
           <div class="ws-rank-bar__quarters" aria-hidden="true">
@@ -86,19 +86,21 @@
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">Narrow (300 px): the strip still carries every mark</span>
+    <span class="ws-muted">Narrow (300 px): every mark; the best's label is raised a row so it clears the average's</span>
     <div style="width: 300px; max-width: 100%;">
       <div class="ws-card ws-card--inset ws-rank-bar">
-        <figure role="img" aria-label="Team rankings: You 20%, Team average 46%">
-          <div class="ws-rank-bar__wrap" aria-hidden="true">
+        <figure role="img" aria-label="Team rankings: You 20%, Team average 46%, Team best 81%">
+          <div class="ws-rank-bar__wrap" style="--lanes: 1;" aria-hidden="true">
             <div class="ws-rank-bar__strip">
               <span class="ws-rank-bar__remaining" style="--you: 20%;"></span>
               <span class="ws-rank-bar__filled ws-wipe" style="--you: 20%;"></span>
             </div>
-            <span class="ws-rank-bar__mark" style="left: 20%; background: var(--color-brand-salmon);"></span>
+            <span class="ws-rank-bar__mark" style="left: 20%; background: var(--ws-chart-under-half);"></span>
             <span class="ws-rank-bar__label" style="left: calc(20% + var(--space-xxs)); color: var(--ws-word-needs);">You 20%</span>
             <span class="ws-rank-bar__mark" style="left: 46%; background: var(--ws-chart-past-half);"></span>
-            <span class="ws-rank-bar__label" style="left: calc(46% + var(--space-xxs)); color: var(--ws-chart-past-half);">Team avg 46%</span>
+            <span class="ws-rank-bar__label" style="left: calc(46% + var(--space-xxs)); color: var(--ws-word-past-half);">Team avg 46%</span>
+            <span class="ws-rank-bar__mark" style="--lane: 1; left: 81%; background: var(--ws-chart-finished);"></span>
+            <span class="ws-rank-bar__label" style="--lane: 1; right: calc(19% + var(--space-xxs)); color: var(--ws-word-positive);">Team best 81%</span>
           </div>
           <div class="ws-rank-bar__quarters" aria-hidden="true">
             <span style="left: 0;">0%</span>

package/design-system/components/RankBar/style.css

@@ -0,0 +1,18 @@
+/* ---- RankBar: the person against their team on one skill, a strip of fine ticks with a line for each mark ---- */
+/* Each mark's line and words sit on a row (style="--lane: n", 0 just above the strip); the strip's wrap makes room for
+   its highest row (style="--lanes: n"). Positions and tones are data on the marks. */
+.ws-rank-bar--in-card { padding: 0 var(--ws-card-inset) var(--space-xs); }
+.ws-rank-bar__caption-row { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--space-lg); }
+.ws-rank-bar__caption { font-size: var(--ws-text-meta); font-weight: 600; line-height: var(--space-md); color: var(--color-text-heading); }
+.ws-rank-bar__goal { font-size: var(--ws-text-meta); color: var(--color-text-muted); }
+.ws-rank-bar__wrap { --lanes: 0; position: relative; margin-top: calc(var(--space-lg) - var(--space-xxs) / 2); padding-top: calc(var(--space-md) + var(--lanes) * var(--space-md)); }
+.ws-rank-bar__strip { position: relative; height: var(--space-2xl); background: var(--color-bg-page); }
+/* "in srgb": a palette's stops are derived (color-mix), and a gradient blends those in Oklab unless told; sRGB is how the kit's own stops have always blended (D15). */
+.ws-rank-bar__remaining { position: absolute; inset: 0; left: var(--you); background-image: repeating-linear-gradient(90deg in srgb, var(--ws-edge-slot) 0 var(--ws-line), transparent var(--ws-line) var(--space-xxs)); }
+.ws-rank-bar__filled { position: absolute; inset: 0; width: var(--you); background: linear-gradient(90deg in srgb, var(--ws-chart-salmon-fade), var(--ws-chart-under-half)); -webkit-mask-image: repeating-linear-gradient(90deg, var(--color-text-heading) 0 calc(var(--space-xxs) / 2), transparent calc(var(--space-xxs) / 2) var(--space-xxs)); mask-image: repeating-linear-gradient(90deg, var(--color-text-heading) 0 calc(var(--space-xxs) / 2), transparent calc(var(--space-xxs) / 2) var(--space-xxs)); }
+.ws-rank-bar__mark, .ws-rank-bar__label { --lane: 0; position: absolute; }
+.ws-rank-bar__mark { bottom: 0; width: calc(var(--ws-hairline) * 3); height: calc(var(--space-2xl) + var(--space-md) + var(--lane) * var(--space-md)); transform: translateX(-50%); }
+.ws-rank-bar__label { bottom: calc(var(--space-2xl) + var(--space-md) + var(--lane) * var(--space-md) - var(--space-xs-plus)); white-space: nowrap; font-size: var(--ws-text-micro); font-weight: 600; line-height: var(--space-sm); }
+.ws-rank-bar__quarters { position: relative; height: var(--space-sm); margin-top: var(--space-xs); font-size: var(--ws-text-micro); font-weight: 500; color: var(--color-text-muted); }
+.ws-rank-bar__quarters > span { position: absolute; top: 0; }
+

package/design-system/components/Ring/README.md

@@ -1,9 +1,9 @@
-A circle's own share, drawn as one arc or as a ring of fine ticks in up to three tones.
+A circle's own share as one arc, or Seth's split ring: 96 radial ticks in each part's tone, the total in the hole, a key beside.
 
 **Use it when**
 
 - One share needs to read as a circle rather than a bar: a score, a seal, a review still running.
-- A share of 360 degrees splits into named parts that add up to the whole (a week's time between calls, admin and the rest).
+- A whole splits into a few named parts that add up to it (where a team's savings come from, a week's time between calls, admin and the rest).
 - A live process needs a ring that keeps an even pace while it runs, not one that draws in and stops.
 
 **Not for**
@@ -16,9 +16,21 @@ A circle's own share, drawn as one arc or as a ring of fine ticks in up to three
 **Anatomy**
 
 - `Arc`: a plain SVG `<circle>`, `pathLength={1}` so its `stroke-dasharray` is simply `"{share} 1"`; the caller sets its place, radius, stroke width, colour and caps, so one Arc draws every ring (a score, a seal, a timer).
-- A final figure: draws in once over `--ws-duration-calm` on the soft curve (`ws-draw`, from nothing to its share), then eases to any new value the same way.
-- A live ring: never draws in; it simply follows each new value at a steady, even pace (`--ws-ease-steady`, linear), because it is keeping time with something still running, not announcing a result.
-- The week-split ring: a ring of fine radial ticks (about 70 a full turn), each tone's run proportional to its share of the week, the rest of the circle (not on a call) left the empty chart tone; a plate under the ring keeps the card's dots from showing through its hole. A legend beside it names each tone's count and label.
+- A final figure draws in once over 900 ms (`--ws-duration-draw`) on the soft curve (`ws-draw`), then eases to a new
+  value. A live ring never draws in; it follows each new value at a steady pace (`--ws-ease-steady`).
+- An arc at 0 draws nothing (no round-cap dot): `stroke-dasharray="0 1"` hides the value circle.
+- The split ring (Seth's v7 Tally, issue #6):
+  - Plate: a cream disc 240 across (`.ws-ring__plate`) that keeps the card's dots out from between the ticks.
+  - Ticks: 232 across, a 44 px band (the hole is 144), 96 radial ticks with 0.72 degree gaps, the first centred on
+    twelve o'clock. The parts' tones are the ticks' `conic-gradient` background, starting `from -1.875deg` with each
+    boundary on a whole tick (`n / 96` of the turn), so no tick is split between two tones. A rest of the turn that is
+    no part is `--ws-track`.
+  - Hole: the total at 36/44 semibold navy and a caption at 13/16 medium navy, centred.
+  - Key, 64 beside the ring, or under it when the card is too narrow: rows 24 tall, 6 apart; an 8 px dot, 8, the
+    figure (13/16 semibold navy), 12, a 0.5 x 14 rule (`--ws-edge-slot`), 6, the name (13/16 regular navy, wraps).
+    The rows share one grid, so the figures sit in one column and the rules line up down the key. A name that wraps
+    keeps the dot, the figure and the rule on its first line.
+  - In a card: 24 above, 32 below, 20 at the sides (`.ws-ring__split`).
 
 **Variants and sizes**
 
@@ -26,20 +38,35 @@ A circle's own share, drawn as one arc or as a ring of fine ticks in up to three
 | --- | --- |
 | `Arc` size | The caller's own radius and stroke width; shown here at 48 px (a tile's small score) and 120 px (a card's larger one) |
 | `live` | Swaps the draw-in entrance and soft curve for a steady linear follow; never plays the entrance again |
-| Ring of ticks | Several `Arc`-style shares drawn as adjoining stretches of one ring instead of one circle's single share |
+| Split ring | Parts drawn as adjoining runs of 96 ticks round one ring, the total in the hole, the key beside |
+
+**Parts and modifiers**
+
+- `.ws-ring__arc`: the arc's frame: an SVG turned so the share starts at twelve, the centre words over it.
+- `.ws-ring__track`: the empty circle, in `--ws-track` (the kit's one empty-track grey, so a ring at 0 still shows).
+- `.ws-ring__value`: the share: a circle with `pathLength="1"` and `stroke-dasharray="<share> 1"`, round caps; at "0 " it is hidden.
+- `.ws-ring__value--draw`: draws in once on arrival (`--ws-duration-draw`).
+- `.ws-ring__value--live`: follows its value as it changes, at an even pace.
+- `.ws-ring__center`: the words in the arc: semibold navy, tabular.
+- `.ws-ring__center--sm`: centre words at 12 px (a 36 to 48 px arc).
+- `.ws-ring__center--lg`: centre words at 22 px (a 120 px arc).
 
 **States**
 
-- Default (a final figure): draws in from nought to its share once, then eases to a changed value over `--duration-calm`.
+- Default (a final figure): draws in from nought to its share once, then eases to a changed value.
+- Split ring: the ticks sweep round once over the 900 ms draw (a registered `--ws-ring-sweep` angle), and the total
+  settles in half way through.
 - Live: no entrance; the arc simply tracks its value at an even pace while the thing it measures keeps running.
 - Sending: paired with a small working chip (`ws-working`) beside the ring to say it is still counting.
 - Disabled / error / hover / focus / pressed / selected / empty: do not apply; a ring is always some share, including zero, and never a control.
-- Reduced motion: the arc simply sits at its final share; a live ring simply sits at its latest value.
+- Reduced motion: the arc sits at its final share, a live ring at its latest value, the split ring whole.
 
 **Behaviour**
 
 - `Arc` itself is undecorated SVG: the caller supplies the `aria-label` on an outer `<figure>` or `role="img"`, and keeps the arc itself `aria-hidden`.
-- Motion: `transition: stroke-dasharray` over `--ws-duration-calm`; a final figure also plays `ws-draw` once on arrival; a live ring's transition runs on `--ws-ease-steady` instead of the soft curve, and never replays its entrance.
+- Motion: a final figure plays `ws-draw` once on arrival; a live ring's `stroke-dasharray` transition runs on
+  `--ws-ease-steady` and never replays its entrance.
+- The split ring's `role="img"` label says the total and every part in one sentence; the plate and key are `aria-hidden`.
 - No pointer or keyboard behaviour.
 
 **Content**
@@ -57,12 +84,35 @@ A circle's own share, drawn as one arc or as a ring of fine ticks in up to three
 
 **Rules**
 
-- `Arc` draws nothing at a value of 0 (no stray round-cap dot); a kit gap reported to its owners, not patched here.
+- `Arc` draws nothing at a value of 0 (no stray round-cap dot).
+- At most five parts in a split ring; past that, use `ShareBar`.
+- The total is short: six characters at most ("$46.8K", "40%"), since the hole is 144 across and the total never
+  wraps. Round a longer figure ("$146.8K" becomes "$147K").
+- A part in the mid blue takes `--color-text-interactive` (the mid blue in light, lifted in dark); the raw
+  `--color-brand-mid-blue` falls under 3:1 on the dark grounds.
 - The system's exact tones stay on the ring; a legend's words beside a tone take the AA step where the tone itself would fail contrast.
 - The data behind a week-split ring (profile views, a dated time split) does not exist in every product yet; the card is
   left out entirely where it has nothing real to draw, never filled with invented shares.
 
 **Source**
 
-**Derived from**: the system's rules for a final figure versus a live ring, and the data-tone and legend rules for a
+**Seth**: the split ring, v7 Tally first open (282:1202): 232 / 44 / 96 ticks, read from the frame's own vectors (issue
+#6 said 144 ticks; 144 is the hole's diameter). **Derived from**: the system's rules for a final figure versus a live ring, and the data-tone and legend rules for a
 split chart. **Precedent**: the first product built on the system.
+
+**Markup**
+
+```html
+<div class="ws-dots ws-ring__split" role="img" aria-label="$46.8K of savings: duplicate software $14.2K, unconverted leads $11.6K, the rest $21K">
+  <span class="ws-ring__plate" aria-hidden="true">
+    <span class="ws-ring__ticks" style="background: conic-gradient(from -1.875deg, var(--ws-chart-under-half) 0 30.21%, var(--ws-chart-past-half) 0 55.21%, var(--ws-track) 0 100%);"></span>
+    <span class="ws-ring__hole"><span class="ws-ring__total">$46.8K</span><span class="ws-ring__caption">Potential savings</span></span>
+  </span>
+  <ul class="ws-ring__legend" aria-hidden="true">
+    <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-under-half);"></span><span class="ws-ring__count">$14.2K</span><span class="ws-ring__label">Duplicate software</span></li>
+  </ul>
+</div>
+```
+
+**Styles**: `Ring/style.css`, in `bundle.css` and `fello.css` as `.ws-ring`. Every value is a token, except the ticks'
+geometry, which is Seth's (96 ticks, 0.72 degree gaps) drawn as an SVG mask.

package/design-system/components/Ring/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Progress" height=607 -->
+<!-- @dsCard group="Progress" height=1060 -->
 <!doctype html>
 <html>
 <head>
@@ -16,13 +16,26 @@
       <span class="ws-ring__arc" aria-hidden="true">
         <svg width="48" height="48" viewBox="0 0 48 48">
           <circle class="ws-ring__track" cx="24" cy="24" r="21.5" stroke-width="5" />
-          <circle class="ws-ring__value ws-ring__value--draw" cx="24" cy="24" r="21.5" stroke-width="5" stroke="var(--color-brand-navy)" pathLength="1" stroke-dasharray="0.72 1" />
+          <circle class="ws-ring__value ws-ring__value--draw" cx="24" cy="24" r="21.5" stroke-width="5" stroke="var(--color-text-heading)" pathLength="1" stroke-dasharray="0.72 1" />
         </svg>
         <span class="ws-ring__center ws-ring__center--sm">72%</span>
       </span>
     </figure>
   </div>
 
+  <div class="ws-stack">
+    <span class="ws-muted">Arc at 0: the track alone, never a dot</span>
+    <figure class="ws-ring" aria-label="0 percent">
+      <span class="ws-ring__arc" aria-hidden="true">
+        <svg width="48" height="48" viewBox="0 0 48 48">
+          <circle class="ws-ring__track" cx="24" cy="24" r="21.5" stroke-width="5" />
+          <circle class="ws-ring__value" cx="24" cy="24" r="21.5" stroke-width="5" stroke="var(--color-text-heading)" pathLength="1" stroke-dasharray="0 1" />
+        </svg>
+        <span class="ws-ring__center ws-ring__center--sm">0%</span>
+      </span>
+    </figure>
+  </div>
+
   <div class="ws-stack">
     <span class="ws-muted">Arc at 120 px, live: keeps pace on `--ws-ease-steady`, never draws in</span>
     <figure class="ws-ring" aria-label="A text campaign sending, 40 percent">
@@ -33,12 +46,43 @@
         </svg>
         <span class="ws-ring__center ws-ring__center--lg">40%</span>
       </span>
-      <span class="ws-chip ws-chip--live" aria-hidden="true"><span class="ws-dot ws-working"></span>Sending live</span>
     </figure>
   </div>
 
+  <div class="ws-stack" style="width: 656px; max-width: 100%;">
+    <span class="ws-muted">Seth's split ring (v7 Tally): 96 radial ticks, the total in the hole, the key beside</span>
+    <section class="ws-card ws-card--compound">
+      <header class="ws-head">
+        <div>
+          <h3 class="ws-title">What a team like yours could save</h3>
+          <p class="ws-body">Where a typical 15-agent team's yearly savings come from.</p>
+        </div>
+      </header>
+      <div class="ws-dots ws-ring__split" role="img" aria-label="$46.8K of potential savings: duplicate software $14.2K, unconverted leads $11.6K, admin per deal $8.4K, tools Fia replaces $7.1K, paid lead overlap $5.5K">
+        <span class="ws-ring__plate" aria-hidden="true">
+          <span class="ws-ring__ticks" style="background: conic-gradient(from -1.875deg, var(--ws-chart-under-half) 0 30.21%, var(--ws-chart-past-half) 0 55.21%, var(--ws-chart-finished) 0 72.92%, var(--color-text-interactive) 0 88.54%, var(--color-text-heading) 0 100%);"></span>
+          <span class="ws-ring__hole"><span class="ws-ring__total">$46.8K</span><span class="ws-ring__caption">Potential savings</span></span>
+        </span>
+        <ul class="ws-ring__legend" aria-hidden="true">
+          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-under-half);"></span><span class="ws-ring__count">$14.2K</span><span class="ws-ring__label">Duplicate software</span></li>
+          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-past-half);"></span><span class="ws-ring__count">$11.6K</span><span class="ws-ring__label">Unconverted leads</span></li>
+          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-finished);"></span><span class="ws-ring__count">$8.4K</span><span class="ws-ring__label">Admin per deal</span></li>
+          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--color-text-interactive);"></span><span class="ws-ring__count">$7.1K</span><span class="ws-ring__label">Tools Fia replaces</span></li>
+          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--color-text-heading);"></span><span class="ws-ring__count">$5.5K</span><span class="ws-ring__label">Paid lead overlap</span></li>
+        </ul>
+      </div>
+      <div class="ws-band">
+        <div class="ws-band__words">
+          <span class="ws-band__title">Start here: see your real numbers</span>
+          <span class="ws-band__how">10 quick questions, about 3 minutes.</span>
+        </div>
+        <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Start questions</button>
+      </div>
+    </section>
+  </div>
+
   <div class="ws-stack" style="width: var(--ws-chart-card-w); max-width: 100%;">
-    <span class="ws-muted">The week-split ring: a ring of fine radial ticks, three tones and a legend</span>
+    <span class="ws-muted">The week split: three parts and the rest of the turn empty</span>
     <section class="ws-card">
       <header class="ws-head">
         <div>
@@ -46,14 +90,15 @@
           <p class="ws-body">Up from 32%. Admin is the easiest thing to trim next.</p>
         </div>
       </header>
-      <div class="ws-dots ws-ring__split" role="img" aria-label="40 percent of the week on calls: Cold calls 14, Live transfers 8, Follow-ups 4">
-        <span class="ws-ring__ticks" style="background: conic-gradient(var(--ws-chart-under-half) 0% 21.5%, var(--ws-chart-past-half) 21.5% 33.9%, var(--ws-chart-finished) 33.9% 40%, var(--ws-chart-empty) 40% 100%);" aria-hidden="true">
-          <span class="ws-ring__hole"></span>
+      <div class="ws-dots ws-ring__split" role="img" aria-label="40 percent of the week on calls: cold calls 14 hours, live transfers 8, follow-ups 4">
+        <span class="ws-ring__plate" aria-hidden="true">
+          <span class="ws-ring__ticks" style="background: conic-gradient(from -1.875deg, var(--ws-chart-under-half) 0 21.88%, var(--ws-chart-past-half) 0 34.38%, var(--ws-chart-finished) 0 39.58%, var(--ws-track) 0 100%);"></span>
+          <span class="ws-ring__hole"><span class="ws-ring__total">40%</span><span class="ws-ring__caption">of your week</span></span>
         </span>
         <ul class="ws-ring__legend" aria-hidden="true">
-          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-under-half);"></span><span class="ws-ring__count">14</span><span class="ws-ring__label">Cold calls</span></li>
-          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-past-half);"></span><span class="ws-ring__count">8</span><span class="ws-ring__label">Live transfers</span></li>
-          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-finished);"></span><span class="ws-ring__count">4</span><span class="ws-ring__label">Follow-ups</span></li>
+          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-under-half);"></span><span class="ws-ring__count">14h</span><span class="ws-ring__label">Cold calls</span></li>
+          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-past-half);"></span><span class="ws-ring__count">8h</span><span class="ws-ring__label">Live transfers</span></li>
+          <li class="ws-ring__key"><span class="ws-ring__dot" style="background: var(--ws-chart-finished);"></span><span class="ws-ring__count">4h</span><span class="ws-ring__label">Follow-ups with past clients and their referrals</span></li>
         </ul>
       </div>
     </section>

package/design-system/components/Ring/style.css

@@ -0,0 +1,49 @@
+/* ---- Ring: an arc for one share (drawn in once, or live), and Seth's split ring of radial ticks with its key ---- */
+.ws-ring { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
+.ws-ring__arc { position: relative; display: inline-flex; }
+.ws-ring__arc svg { display: block; transform: rotate(-90deg); }
+/* The empty track is the kit's one empty-track grey (as TickStrip, SegmentedProgress, PaceBar), so a ring at 0 shows. */
+.ws-ring__track { fill: none; stroke: var(--ws-track); }
+.ws-ring__value { fill: none; stroke-linecap: round; }
+/* A share of nothing draws nothing: a round cap at 0 would leave a dot. */
+.ws-ring__value[stroke-dasharray^="0 "] { visibility: hidden; }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-ring__value--draw { animation: ws-draw var(--ws-duration-draw) var(--ws-ease-soft) backwards; animation-delay: var(--ws-build-at, 0s); }
+  .ws-ring__value--live { transition: stroke-dasharray var(--ws-duration-calm) var(--ws-ease-steady); }
+}
+.ws-ring__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-ring__center--sm { font-size: var(--ws-text-dense); }
+.ws-ring__center--lg { font-size: var(--ws-text-title); }
+/* The split ring (Seth's v7 Tally, issue #6): 232 across, a 44 px band of 96 radial ticks (0.72 degree gaps), each
+   part's run its share of the turn (the tones as the band's conic-gradient background), the total in the hole, and
+   the key beside it; when the card is too narrow the key drops under the ring. A cream plate 4 px wider than the ring
+   keeps the card's dots out from between the ticks. */
+/* The ticks are an SVG mask so their edges are smooth: a circle of radius 94 with a 44 stroke in a 232 box (the band
+   72 to 116), dashed into 96 (pathLength 96, each dash 0.808 of its step), the first one centred on twelve o'clock. Put
+   each part's edge on a whole tick: the tones start at from -1.875deg, and part boundaries at n / 96 of the turn. */
+.ws-ring__ticks { --ws-ring-ticks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 232 232'%3E%3Ccircle cx='116' cy='116' r='94' fill='none' stroke='%23000' stroke-width='44' pathLength='96' stroke-dasharray='0.808 0.192' stroke-dashoffset='0.404' transform='rotate(-90 116 116)'/%3E%3C/svg%3E"); }
+@property --ws-ring-sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
+@keyframes ws-ring-sweep { from { --ws-ring-sweep: 0deg; } }
+.ws-ring__split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-4xl); padding: var(--space-lg) var(--ws-card-inset) var(--space-xl); }
+.ws-ring__plate { position: relative; display: grid; flex-shrink: 0; place-items: center; width: calc(var(--space-9xl) + var(--space-xl) + var(--space-xs)); max-width: 100%; aspect-ratio: 1; border-radius: var(--radius-full); background: var(--color-bg-page); }
+.ws-ring__ticks { position: relative; flex-shrink: 0; width: calc(var(--space-9xl) + var(--space-xl)); max-width: 100%; aspect-ratio: 1; border-radius: var(--radius-full); -webkit-mask-image: var(--ws-ring-ticks), conic-gradient(var(--ws-mask) var(--ws-ring-sweep, 360deg), transparent 0); -webkit-mask-composite: source-in; mask-image: var(--ws-ring-ticks), conic-gradient(var(--ws-mask) var(--ws-ring-sweep, 360deg), transparent 0); mask-composite: intersect; mask-size: 100% 100%; }
+.ws-ring__plate > .ws-ring__ticks { grid-area: 1 / 1; }
+/* The hole: the band is 44 of the 232, so the hole is 144 across; the total and its caption sit centred in it. */
+.ws-ring__hole { position: absolute; inset: 15%; border-radius: var(--radius-full); background: var(--color-bg-page); }
+.ws-ring__plate > .ws-ring__hole { position: relative; inset: auto; grid-area: 1 / 1; display: flex; width: calc(var(--space-7xl) + var(--space-lg)); max-width: 62%; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; }
+.ws-ring__total { font-size: calc(var(--ws-text-figure) + var(--space-xxs)); font-weight: 600; line-height: calc(var(--space-2xl) + var(--space-xxs)); color: var(--color-text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-ring__caption { font-size: var(--ws-text-control); font-weight: 500; line-height: var(--space-md); color: var(--color-text-heading); }
+@media (prefers-reduced-motion: no-preference) {
+  /* The build-in: the ticks sweep round once over the draw (900 ms), the total settles in as they land. */
+  .ws-ring__plate > .ws-ring__ticks { animation: ws-ring-sweep var(--ws-duration-draw) var(--ws-ease-soft) backwards; animation-delay: var(--ws-build-at, 0s); }
+  .ws-ring__plate > .ws-ring__hole > * { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) / 2); }
+}
+/* The key: rows 24 tall, 6 apart; an 8 px dot, 8, the figure (13/16 semibold), 12, a 0.5 x 14 rule, 6, the name. Every
+   row sits on one grid (subgrid), so the figures share a column and the rules line up down the key. A name that wraps
+   keeps the dot, the figure and the rule on its first line. */
+.ws-ring__legend { display: grid; flex: 1 1 0; min-width: min(100%, 11rem); grid-template-columns: auto auto minmax(0, 1fr); row-gap: var(--space-xxs-plus); }
+.ws-ring__key { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; column-gap: var(--space-xs); min-height: var(--space-lg); padding-block: var(--space-xxs); font-size: var(--ws-text-control); line-height: var(--space-md); color: var(--color-text-heading); }
+.ws-ring__dot { flex-shrink: 0; width: var(--space-xs); height: var(--space-xs); margin-top: var(--space-xxs); border-radius: var(--radius-full); }
+.ws-ring__count { flex-shrink: 0; margin-right: var(--space-xxs); font-weight: 600; font-variant-numeric: tabular-nums; }
+.ws-ring__label { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-xxs-plus); }
+.ws-ring__label::before { content: ""; flex-shrink: 0; width: var(--ws-hairline); height: var(--space-sm-plus); margin-top: var(--ws-line); background: var(--ws-edge-slot); }