@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -22,7 +22,7 @@
     <div class="ws-dots ws-funnel-bars__body" role="img" aria-label="New leads 500, contacted 310, qualified 140, showing 72, closed 21">
       <div class="ws-funnel-bars__row" aria-hidden="true">
         <div class="ws-funnel-bars__track">
-          <div class="ws-funnel-bars__fill ws-funnel-bars__fill--first ws-grow" style="width: 100%; background: var(--color-brand-navy);"></div>
+          <div class="ws-funnel-bars__fill ws-grow" style="width: 100%; background: var(--color-text-heading);"></div>
         </div>
         <span class="ws-funnel-bars__figure"><span class="ws-funnel-bars__count">500</span><span class="ws-funnel-bars__label">New leads</span></span>
       </div>
@@ -35,7 +35,7 @@
 
       <div class="ws-funnel-bars__row" aria-hidden="true">
         <div class="ws-funnel-bars__track">
-          <div class="ws-funnel-bars__fill ws-grow" style="width: 62%; background: var(--ws-chart-navy-fade); animation-delay: 40ms;"></div>
+          <div class="ws-funnel-bars__fill ws-grow" style="width: 62%; background: var(--ws-chart-navy-fade); --i: 1;"></div>
         </div>
         <span class="ws-funnel-bars__figure"><span class="ws-funnel-bars__count">310</span><span class="ws-funnel-bars__label">Contacted</span></span>
       </div>
@@ -48,7 +48,7 @@
 
       <div class="ws-funnel-bars__row" aria-hidden="true">
         <div class="ws-funnel-bars__track">
-          <div class="ws-funnel-bars__fill ws-grow" style="width: 28%; background: var(--ws-chart-salmon-fade); animation-delay: 80ms;"></div>
+          <div class="ws-funnel-bars__fill ws-grow" style="width: 28%; background: var(--ws-chart-salmon-fade); --i: 2;"></div>
         </div>
         <span class="ws-funnel-bars__figure"><span class="ws-funnel-bars__count">140</span><span class="ws-funnel-bars__label">Qualified</span></span>
       </div>
@@ -61,7 +61,7 @@
 
       <div class="ws-funnel-bars__row" aria-hidden="true">
         <div class="ws-funnel-bars__track">
-          <div class="ws-funnel-bars__fill ws-grow" style="width: 14.4%; background: var(--ws-chart-purple-fade); animation-delay: 120ms;"></div>
+          <div class="ws-funnel-bars__fill ws-grow" style="width: 14.4%; background: var(--ws-chart-purple-fade); --i: 3;"></div>
         </div>
         <span class="ws-funnel-bars__figure"><span class="ws-funnel-bars__count">72</span><span class="ws-funnel-bars__label">Showing</span></span>
       </div>
@@ -74,7 +74,7 @@
 
       <div class="ws-funnel-bars__row" aria-hidden="true">
         <div class="ws-funnel-bars__track">
-          <div class="ws-funnel-bars__fill ws-grow" style="width: 4.2%; background: var(--ws-chart-teal-fade); animation-delay: 160ms;"></div>
+          <div class="ws-funnel-bars__fill ws-grow" style="width: 4.2%; background: var(--ws-chart-teal-fade); --i: 4;"></div>
         </div>
         <span class="ws-funnel-bars__figure"><span class="ws-funnel-bars__count">21</span><span class="ws-funnel-bars__label">Closed</span></span>
       </div>

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

@@ -0,0 +1,13 @@
+/* ---- FunnelBars: a pipeline's stages as bars that narrow, each step's share to the next between them ---- */
+.ws-funnel-bars__body { display: flex; flex-direction: column; padding: var(--space-md) var(--ws-card-inset) var(--space-lg); }
+.ws-funnel-bars__row { display: flex; align-items: center; gap: var(--space-sm); }
+.ws-funnel-bars__track { position: relative; flex: 1; height: var(--space-lg); }
+.ws-funnel-bars__fill { display: flex; align-items: center; height: 100%; border-radius: var(--ws-radius-control); transform-origin: left; }
+.ws-funnel-bars__figure { display: flex; flex-shrink: 0; align-items: baseline; gap: var(--space-xxs); width: calc(var(--space-7xl) + var(--space-md) + var(--space-xxs)); font-size: var(--ws-text-chart); }
+.ws-funnel-bars__count { font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-funnel-bars__label { color: var(--color-text-body); }
+.ws-funnel-bars__between { display: flex; align-items: center; gap: var(--space-xxs); padding: var(--space-xxs) 0 var(--space-xxs) var(--space-xxs); }
+/* The fill (North): 700 ms on the settle curve, the stages 45 ms apart (style="--i: n" on each fill). */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-funnel-bars__fill.ws-grow { animation-duration: var(--ws-duration-fill); animation-timing-function: var(--ws-ease-settle); animation-delay: calc(var(--i, 0) * var(--ws-stagger-row)); }
+}

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

@@ -15,13 +15,23 @@ Horizontal goal bars: one pill a row, its fill a tone's gradient, a count and la
 
 **Anatomy**
 
-- Row height `calc(--space-lg + --space-xxs)` (28 px): a track (a pill, `--radius-full`, a half-strength tone outline) ending `calc(--space-lg - --space-xxs/8)` short at the right for the leader and dot.
-- Fill: `calc(--space-md + --space-xxs/2)` tall (18 px), inset `calc(--space-xxs * 1.25)` from the track's start, a `linear-gradient(90deg, tone-fade, tone-solid)` the row's share of its goal, growing from the left when the card first shows.
-- "Not yet": a faint dotted texture in the tone at 40%, from the fill's end to the track's end.
-- Leader and dot: a half-strength line from the fill's end out past the track to a small `calc(--space-xs * 0.875)` (7 px) solid dot, so every row's dot sits past its own bar however long.
-- Count: 16 px semibold (`--ws-text-value`), centred over two digits; `of` reads in medium muted beside it when the row names what it is out of.
-- A 1 px hairline (`--ws-edge-card`) splits the count from the label.
-- Label: 16 px medium (`--ws-text-value`), `color-text-heading`, truncates with an ellipsis; a link when the row opens somewhere, plain words otherwise.
+- One grid for every row (issue #5): the rows are subgrid rows, so the columns line up down the card. Columns: the
+  bar (the rest), the count (as wide as the widest count, at least 18, right-aligned), the hairline, the label (as
+  wide as the widest label, at most 120). 16 between rows; in a card 20 at the top and sides, 40 under the rows.
+- Bar, 28 tall: a track (a pill with a half-strength tone outline) ending 24 short at the right for the leader and
+  dot; inside it, 4 in from the start, the fill (18 tall, a `linear-gradient(90deg, tone-fade, tone)`, the row's
+  share), and from just past the fill to the track's end the "not yet" dots: two bands 4 tall, 13 apart, dots in the
+  tone at 40% (Seth).
+- Leader and dot: a 1 px line in the tone at 50% from the fill's end out past the track to a 7 px dot, so every row's
+  dot sits at the same x however long its bar.
+- Count: 16/20 semibold, tabular; "of 20" in medium muted beside it.
+- Hairline: 1 x 20, `--ws-edge-card`, 4 from the count and 4 from the label.
+- Label: 16/20 medium navy, one line with an ellipsis and its `title`; a link when the row opens somewhere. An optional
+  line under it (`__words` holding `__label` and `__line`): 12/16 muted, one line, its `title`.
+- Label first (`--label-first`, issue #11): the words (15/20 navy) first, a 12 px bar up to 402 wide with 2 px corners
+  (a solid fill in the tone, the rest a 4 px dotted grid in the tone at 55%), the figure in a 36 px right column,
+  16 between columns; rows at least 40 tall with a 0.5 px rule between them (none above the first). In a card under 30rem the bar drops under its
+  words (8 between, 12 above and below).
 
 **Variants and sizes**
 
@@ -31,20 +41,32 @@ Horizontal goal bars: one pill a row, its fill a tone's gradient, a count and la
 | `rows[].of` | The bar is that row's own share of `of`, not of the chart's shared `max`; the count then reads "12 of 15" |
 | `wide` | The label column takes more room than the bars (a phrase, not a word or two) |
 | `rows[].href` | The label becomes a link that opens the row's detail |
+| `rows[].line` | A muted second line under the label |
+| `--label-first` | Words first, a thin bar with a dotted remainder, the figure last |
+
+**Parts and modifiers**
+
+- `.ws-goal-bars--wide`: phrase labels: the label column takes 1.2 of the row to the bar's 0.8 and wraps.
+- `.ws-goal-bars__of`: the muted "of 40" after a count, medium.
+- `.ws-goal-bars__bar`: the label-first 12 px bar (up to 402 wide), its remainder a dotted line in the tone.
+- `.ws-goal-bars__bar-fill`: the label-first bar's fill, `--pct` wide in `--tone`.
 
 **States**
 
-- Default: each fill grows from the track's start on `ws-grow`, the rows staggered one after another.
+- Default: with `--draw`, each fill grows from the start over 700 ms on the settle curve, the rows 45 ms apart
+  (`--ws-stagger-row`, `--i` on each row).
 - Empty: a row with nothing counted shows its full "not yet" track and a 0, never an invented share.
 - Long label: truncates with an ellipsis (plain) or wraps (`wide`), the bar and count never move.
-- Linked: the label underlines on hover, shows the focus ring, and (built on `Card`'s link behaviour) a pending edge while its page loads.
+- Linked: the label underlines on hover (with a hovering pointer) and shows the 2 px navy focus ring; the row is not
+  `aria-hidden` then, only its bar.
 - Disabled / error / hover state on the bar itself / pressed / selected: do not apply to the bar; only a linked label has interactive states.
 - Reduced motion: every fill is simply at its final width.
 
 **Behaviour**
 
 - The whole chart is one `<figure aria-label="…">` naming every row's count and label; the bars, tracks and dots are `aria-hidden`.
-- Motion: each fill grows left to right over `--ws-duration-calm` on the soft curve, staggered by `staggerDelay(i)` so the rows fill in order, not at once; still with reduced motion.
+- Motion: each fill grows left to right over `--ws-duration-fill` on `--ws-ease-settle`, 45 ms apart; still with
+  reduced motion.
 - A linked label is a normal link: Tab reaches it, Enter opens it, focus shows the kit's focus ring.
 
 **Content**
@@ -69,4 +91,26 @@ Horizontal goal bars: one pill a row, its fill a tone's gradient, a count and la
 
 **Source**
 
+- **Field fixes**: issue #5 (one grid, the count column as wide as its widest count, from Ignite's `GoalBars`), issue
+  #11 (the label-first row with a dotted remainder, Ignite's `AppIntro`), the leader the README promised, Seth's two
+  bands of "not yet" dots, the second line, the descender clip (line 20).
 - **Derived from**: the system's colour and motion rules (tone colours, `ws-grow`, staggered fills). **Precedent**: the first product built on the system.
+
+**Markup**
+
+```html
+<div class="ws-dots ws-goal-bars ws-goal-bars--in-card ws-goal-bars--draw" role="img" aria-label="14 cold calls, 8 live transfers">
+  <div class="ws-goal-bars__row" style="--i: 0; --tone: var(--ws-chart-under-half); --tone-fade: var(--ws-chart-salmon-fade); --pct: 35%;" aria-hidden="true">
+    <span class="ws-goal-bars__meter">
+      <span class="ws-goal-bars__track"></span>
+      <span class="ws-goal-bars__fillbox"><span class="ws-goal-bars__not-yet"></span><span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span></span>
+      <span class="ws-goal-bars__dot"></span>
+    </span>
+    <span class="ws-goal-bars__count">14</span>
+    <span class="ws-goal-bars__divider"></span>
+    <span class="ws-goal-bars__label" title="Cold calls">Cold calls</span>
+  </div>
+</div>
+```
+
+**Styles**: `GoalBars/style.css`, in `bundle.css` and `fello.css` as `.ws-goal-bars`. Every value is a token.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" height=575 -->
+<!-- @dsCard group="Charts" height=1180 -->
 <!doctype html>
 <html>
 <head>
@@ -20,58 +20,58 @@
             <p class="ws-body">Nine days early. Cold calls did most of the work.</p>
           </div>
         </header>
-        <div class="ws-dots ws-goal-bars ws-goal-bars--in-card" role="img" aria-label="26 Total calls, 14 Cold calls, 8 Live transfers, 4 Follow-ups">
-          <div class="ws-goal-bars__row" style="--tone: var(--color-brand-navy); --tone-fade: var(--ws-chart-navy-fade); --pct: 65%;" aria-hidden="true">
+        <div class="ws-dots ws-goal-bars ws-goal-bars--in-card ws-goal-bars--draw" role="img" aria-label="26 Total calls, 14 Cold calls, 8 Live transfers, 4 Follow-ups">
+          <div class="ws-goal-bars__row" style="--i: 0; --tone: var(--color-text-heading); --tone-fade: var(--ws-chart-navy-fade); --pct: 65%;" aria-hidden="true">
             <span class="ws-goal-bars__meter">
               <span class="ws-goal-bars__track"></span>
               <span class="ws-goal-bars__fillbox">
                 <span class="ws-goal-bars__not-yet"></span>
-                <span class="ws-goal-bars__fill ws-grow"></span>
+                <span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span>
               </span>
               <span class="ws-goal-bars__dot"></span>
             </span>
             <span class="ws-goal-bars__count">26</span>
             <span class="ws-goal-bars__divider"></span>
-            <span class="ws-goal-bars__label">Total calls</span>
+            <span class="ws-goal-bars__label" title="Total calls">Total calls</span>
           </div>
-          <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-under-half); --tone-fade: var(--ws-chart-salmon-fade); --pct: 35%;" aria-hidden="true">
+          <div class="ws-goal-bars__row" style="--i: 1; --tone: var(--ws-chart-under-half); --tone-fade: var(--ws-chart-salmon-fade); --pct: 35%;" aria-hidden="true">
             <span class="ws-goal-bars__meter">
               <span class="ws-goal-bars__track"></span>
               <span class="ws-goal-bars__fillbox">
                 <span class="ws-goal-bars__not-yet"></span>
-                <span class="ws-goal-bars__fill ws-grow" style="animation-delay: 40ms;"></span>
+                <span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span>
               </span>
               <span class="ws-goal-bars__dot"></span>
             </span>
             <span class="ws-goal-bars__count">14</span>
             <span class="ws-goal-bars__divider"></span>
-            <span class="ws-goal-bars__label">Cold calls</span>
+            <span class="ws-goal-bars__label" title="Cold calls">Cold calls</span>
           </div>
-          <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-past-half); --tone-fade: var(--ws-chart-purple-fade); --pct: 20%;" aria-hidden="true">
+          <div class="ws-goal-bars__row" style="--i: 2; --tone: var(--ws-chart-past-half); --tone-fade: var(--ws-chart-purple-fade); --pct: 20%;" aria-hidden="true">
             <span class="ws-goal-bars__meter">
               <span class="ws-goal-bars__track"></span>
               <span class="ws-goal-bars__fillbox">
                 <span class="ws-goal-bars__not-yet"></span>
-                <span class="ws-goal-bars__fill ws-grow" style="animation-delay: 80ms;"></span>
+                <span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span>
               </span>
               <span class="ws-goal-bars__dot"></span>
             </span>
             <span class="ws-goal-bars__count">8</span>
             <span class="ws-goal-bars__divider"></span>
-            <span class="ws-goal-bars__label">Live transfers</span>
+            <span class="ws-goal-bars__label" title="Live transfers">Live transfers</span>
           </div>
-          <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-finished); --tone-fade: var(--ws-chart-teal-fade); --pct: 10%;" aria-hidden="true">
+          <div class="ws-goal-bars__row" style="--i: 3; --tone: var(--ws-chart-finished); --tone-fade: var(--ws-chart-teal-fade); --pct: 10%;" aria-hidden="true">
             <span class="ws-goal-bars__meter">
               <span class="ws-goal-bars__track"></span>
               <span class="ws-goal-bars__fillbox">
                 <span class="ws-goal-bars__not-yet"></span>
-                <span class="ws-goal-bars__fill ws-grow" style="animation-delay: 120ms;"></span>
+                <span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span>
               </span>
               <span class="ws-goal-bars__dot"></span>
             </span>
             <span class="ws-goal-bars__count">4</span>
             <span class="ws-goal-bars__divider"></span>
-            <span class="ws-goal-bars__label">Follow-ups</span>
+            <span class="ws-goal-bars__label" title="Follow-ups">Follow-ups</span>
           </div>
         </div>
         <div class="ws-band">
@@ -88,32 +88,32 @@
   <div class="ws-stack">
     <span class="ws-muted">You beside others: yours teal, theirs purple, both "of" a shared target</span>
     <div style="width: 320px; max-width: 100%;">
-      <div class="ws-card ws-card--inset ws-goal-bars">
-        <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-finished); --tone-fade: var(--ws-chart-teal-fade); --pct: 70%;" aria-hidden="true">
+      <div class="ws-card ws-card--inset ws-goal-bars ws-goal-bars--draw">
+        <div class="ws-goal-bars__row" style="--i: 0; --tone: var(--ws-chart-finished); --tone-fade: var(--ws-chart-teal-fade); --pct: 70%;" aria-hidden="true">
           <span class="ws-goal-bars__meter">
             <span class="ws-goal-bars__track"></span>
             <span class="ws-goal-bars__fillbox">
               <span class="ws-goal-bars__not-yet"></span>
-              <span class="ws-goal-bars__fill ws-grow"></span>
+              <span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span>
             </span>
             <span class="ws-goal-bars__dot"></span>
           </span>
           <span class="ws-goal-bars__count">14 <span class="ws-goal-bars__of">of 20</span></span>
           <span class="ws-goal-bars__divider"></span>
-          <span class="ws-goal-bars__label">You</span>
+          <span class="ws-goal-bars__label" title="You">You</span>
         </div>
-        <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-past-half); --tone-fade: var(--ws-chart-purple-fade); --pct: 45%;" aria-hidden="true">
+        <div class="ws-goal-bars__row" style="--i: 1; --tone: var(--ws-chart-past-half); --tone-fade: var(--ws-chart-purple-fade); --pct: 45%;" aria-hidden="true">
           <span class="ws-goal-bars__meter">
             <span class="ws-goal-bars__track"></span>
             <span class="ws-goal-bars__fillbox">
               <span class="ws-goal-bars__not-yet"></span>
-              <span class="ws-goal-bars__fill ws-grow" style="animation-delay: 40ms;"></span>
+              <span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span>
             </span>
             <span class="ws-goal-bars__dot"></span>
           </span>
           <span class="ws-goal-bars__count">9 <span class="ws-goal-bars__of">of 20</span></span>
           <span class="ws-goal-bars__divider"></span>
-          <span class="ws-goal-bars__label">Team average</span>
+          <span class="ws-goal-bars__label" title="Team average">Team average</span>
         </div>
       </div>
     </div>
@@ -123,18 +123,18 @@
     <span class="ws-muted">Wide labels: a phrase, not a word or two (a set of review themes)</span>
     <div style="width: 320px; max-width: 100%;">
       <div class="ws-card ws-card--inset ws-goal-bars ws-goal-bars--wide">
-        <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-under-half); --tone-fade: var(--ws-chart-salmon-fade); --pct: 55%;" aria-hidden="true">
-          <span class="ws-goal-bars__meter">
+        <div class="ws-goal-bars__row" style="--i: 0; --tone: var(--ws-chart-under-half); --tone-fade: var(--ws-chart-salmon-fade); --pct: 55%;">
+          <span class="ws-goal-bars__meter" aria-hidden="true">
             <span class="ws-goal-bars__track"></span>
             <span class="ws-goal-bars__fillbox">
               <span class="ws-goal-bars__not-yet"></span>
-              <span class="ws-goal-bars__fill ws-grow"></span>
+              <span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span>
             </span>
             <span class="ws-goal-bars__dot"></span>
           </span>
           <span class="ws-goal-bars__count">11 <span class="ws-goal-bars__of">of 20</span></span>
           <span class="ws-goal-bars__divider"></span>
-          <a href="#" class="ws-goal-bars__label">Answering what they asked</a>
+          <a href="#themes" class="ws-goal-bars__label">Answering what they asked, every time</a>
         </div>
       </div>
     </div>
@@ -143,8 +143,8 @@
   <div class="ws-stack">
     <span class="ws-muted">Empty: nothing counted yet</span>
     <div style="width: 260px; max-width: 100%;">
-      <div class="ws-card ws-card--inset ws-goal-bars">
-        <div class="ws-goal-bars__row" style="--tone: var(--color-gray-5); --tone-fade: var(--color-gray-2); --pct: 0%;" aria-hidden="true">
+      <div class="ws-card ws-card--inset ws-goal-bars ws-goal-bars--draw">
+        <div class="ws-goal-bars__row" style="--i: 0; --tone: var(--ws-edge-card); --tone-fade: var(--ws-track); --pct: 0%;" aria-hidden="true">
           <span class="ws-goal-bars__meter">
             <span class="ws-goal-bars__track"></span>
             <span class="ws-goal-bars__fillbox">
@@ -153,12 +153,53 @@
           </span>
           <span class="ws-goal-bars__count">0</span>
           <span class="ws-goal-bars__divider"></span>
-          <span class="ws-goal-bars__label">Referrals</span>
+          <span class="ws-goal-bars__label" title="Referrals">Referrals</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">A line under each label, and a long one cut with its title</span>
+    <div style="width: 400px; max-width: 100%;">
+      <div class="ws-card ws-card--inset ws-goal-bars" role="img" aria-label="Listings 6 of 10, Showings 12 of 20">
+        <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-finished); --tone-fade: var(--ws-chart-teal-fade); --pct: 60%;" aria-hidden="true">
+          <span class="ws-goal-bars__meter"><span class="ws-goal-bars__track"></span><span class="ws-goal-bars__fillbox"><span class="ws-goal-bars__not-yet"></span><span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span></span><span class="ws-goal-bars__dot"></span></span>
+          <span class="ws-goal-bars__count">6 <span class="ws-goal-bars__of">of 10</span></span>
+          <span class="ws-goal-bars__divider"></span>
+          <span class="ws-goal-bars__words"><span class="ws-goal-bars__label" title="Listings">Listings</span><span class="ws-goal-bars__line" title="Two this week">Two this week</span></span>
+        </div>
+        <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-past-half); --tone-fade: var(--ws-chart-purple-fade); --pct: 60%;" aria-hidden="true">
+          <span class="ws-goal-bars__meter"><span class="ws-goal-bars__track"></span><span class="ws-goal-bars__fillbox"><span class="ws-goal-bars__not-yet"></span><span class="ws-goal-bars__leader"></span><span class="ws-goal-bars__fill"></span></span><span class="ws-goal-bars__dot"></span></span>
+          <span class="ws-goal-bars__count">12 <span class="ws-goal-bars__of">of 20</span></span>
+          <span class="ws-goal-bars__divider"></span>
+          <span class="ws-goal-bars__words"><span class="ws-goal-bars__label" title="Showings booked from open houses">Showings booked from open houses</span><span class="ws-goal-bars__line" title="Most from the Saturday open house on Elm Street">Most from the Saturday open house on Elm Street</span></span>
         </div>
       </div>
     </div>
   </div>
 
+  <div class="ws-stack" style="width: 556px; max-width: 100%;">
+    <span class="ws-muted">Label first (issue #11): the words, a 12 px bar with a dotted remainder, the figure; the bar drops under on a narrow card</span>
+    <div class="ws-card ws-card--inset">
+      <div class="ws-goal-bars ws-goal-bars--label-first ws-goal-bars--draw" role="img" aria-label="Calls 24 of 40, Texts 31 of 40, Emails 9 of 40">
+        <div class="ws-goal-bars__row" style="--tone: var(--color-text-heading); --pct: 60%; --i: 0;" aria-hidden="true"><span class="ws-goal-bars__label">Calls</span><span class="ws-goal-bars__bar"><span class="ws-goal-bars__bar-fill"></span></span><span class="ws-goal-bars__count">24</span></div>
+        <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-finished); --pct: 77.5%; --i: 1;" aria-hidden="true"><span class="ws-goal-bars__label">Texts</span><span class="ws-goal-bars__bar"><span class="ws-goal-bars__bar-fill"></span></span><span class="ws-goal-bars__count">31</span></div>
+        <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-past-half); --pct: 22.5%; --i: 2;" aria-hidden="true"><span class="ws-goal-bars__label">Emails</span><span class="ws-goal-bars__bar"><span class="ws-goal-bars__bar-fill"></span></span><span class="ws-goal-bars__count">9</span></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 300px; max-width: 100%;">
+    <span class="ws-muted">Label first in a 300 px card</span>
+    <div class="ws-card ws-card--inset">
+      <div class="ws-goal-bars ws-goal-bars--label-first" role="img" aria-label="Calls 24 of 40, Texts 31 of 40">
+        <div class="ws-goal-bars__row" style="--tone: var(--color-text-heading); --pct: 60%;" aria-hidden="true"><span class="ws-goal-bars__label">Calls</span><span class="ws-goal-bars__bar"><span class="ws-goal-bars__bar-fill"></span></span><span class="ws-goal-bars__count">24</span></div>
+        <div class="ws-goal-bars__row" style="--tone: var(--ws-chart-finished); --pct: 77.5%;" aria-hidden="true"><span class="ws-goal-bars__label">Texts</span><span class="ws-goal-bars__bar"><span class="ws-goal-bars__bar-fill"></span></span><span class="ws-goal-bars__count">31</span></div>
+      </div>
+    </div>
+  </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,51 @@
+/* ---- GoalBars: rows of goal pills, each the share of its goal, its count and label beside it ---- */
+/* Each row carries its tone and share as data: style="--tone: ...; --tone-fade: ...; --pct: 65%". Issue #5: every row
+   sits on one grid (subgrid), so the count column is only as wide as the widest count (at least 18) and the counts,
+   hairlines and labels line up down the card. Columns: the bar, the count, the hairline, the label (as wide as the
+   widest label, at most 120). */
+.ws-goal-bars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(var(--space-md) + var(--space-3xs)), auto) auto fit-content(var(--space-7xl)); row-gap: var(--space-md); container-type: inline-size; }
+.ws-goal-bars--in-card { padding: var(--ws-card-inset) var(--ws-card-inset) var(--space-2xl); }
+.ws-goal-bars__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
+.ws-goal-bars__meter { position: relative; min-width: 0; height: calc(var(--space-lg) + var(--space-xxs)); margin-right: var(--space-xs); }
+.ws-goal-bars__track { position: absolute; inset: 0 var(--space-lg) 0 0; border: var(--ws-line) solid color-mix(in srgb, var(--tone) 50%, transparent); border-radius: var(--radius-full); background: var(--color-bg-page); }
+.ws-goal-bars__fillbox { position: absolute; inset: 0 calc(var(--space-lg) + var(--space-xxs)) 0 var(--space-xxs); }
+/* Not yet (Seth): two bands of dots, 4 tall, 13 apart, from just past the fill to the track's end. */
+.ws-goal-bars__not-yet { position: absolute; top: 50%; right: var(--space-xs); left: calc(var(--pct) + var(--space-xxs)); height: calc(var(--space-md) + var(--ws-line)); translate: 0 -50%; background-image: radial-gradient(circle, color-mix(in srgb, var(--tone) 40%, transparent) calc(var(--ws-hairline) * 1.1), transparent calc(var(--ws-hairline) * 1.5)); background-size: calc(var(--ws-hairline) * 6.82) calc(var(--space-3xs) + var(--ws-line)); -webkit-mask-image: linear-gradient(to bottom, var(--ws-mask) 0 var(--space-xxs), transparent 0 calc(var(--space-sm) + var(--ws-line)), var(--ws-mask) 0); mask-image: linear-gradient(to bottom, var(--ws-mask) 0 var(--space-xxs), transparent 0 calc(var(--space-sm) + var(--ws-line)), var(--ws-mask) 0); }
+/* translate, not transform, so the grow (a transform) never drops the centring. */
+/* "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-goal-bars__fill { position: absolute; left: 0; top: 50%; width: var(--pct); height: calc(var(--space-md) + var(--space-3xs)); translate: 0 -50%; transform-origin: left; border-radius: var(--radius-full); background: linear-gradient(90deg in srgb, var(--tone-fade), var(--tone)); }
+/* The leader (README promise, field fix): a half-strength line from the fill's end out to the dot. */
+.ws-goal-bars__leader { position: absolute; top: calc(50% - var(--ws-line) / 2); left: max(0px, calc(var(--pct) - var(--space-xs))); right: calc(var(--space-lg) * -1); height: var(--ws-line); background: color-mix(in srgb, var(--tone) 50%, transparent); }
+.ws-goal-bars__dot { position: absolute; right: 0; top: 50%; width: calc(var(--space-xs) * 0.875); height: calc(var(--space-xs) * 0.875); translate: 0 -50%; border-radius: var(--radius-full); background: var(--tone); }
+.ws-goal-bars__count { white-space: nowrap; text-align: right; font-size: var(--ws-text-value); font-weight: 600; line-height: var(--ws-leading-row); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-goal-bars__of { font-weight: 500; color: var(--color-text-muted); }
+.ws-goal-bars__divider { width: var(--ws-line); height: calc(var(--space-md) + var(--space-xxs)); margin: 0 var(--space-xxs); background: var(--ws-edge-card); }
+/* The label: 16/20 medium navy, one line with an ellipsis (and its title); an optional muted line under it. */
+.ws-goal-bars__words { display: flex; min-width: 0; flex-direction: column; }
+.ws-goal-bars__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-value); font-weight: 500; line-height: var(--ws-leading-row); color: var(--color-text-heading); text-decoration: none; }
+.ws-goal-bars__line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+a.ws-goal-bars__label { border-radius: var(--ws-radius-chip); }
+@media (hover: hover) { a.ws-goal-bars__label:hover { text-decoration: underline; } }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-goal-bars--draw .ws-goal-bars__fill { animation: ws-grow var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--i, 0) * var(--ws-stagger-row)); }
+}
+/* Phrase labels: the label takes more room than the bar and wraps. */
+.ws-goal-bars--wide { grid-template-columns: minmax(0, 0.8fr) minmax(calc(var(--space-md) + var(--space-3xs)), auto) auto minmax(0, 1.2fr); }
+.ws-goal-bars--wide .ws-goal-bars__label { white-space: normal; }
+/* Label first (issue #11, a first-open card): the words, a 12 px bar up to 402 wide with a dotted remainder, the
+   figure in a 36 px right column; rows at least 40 tall with a 0.5 px rule between them (none above the first). On a
+   narrow card the bar drops under its words. */
+.ws-goal-bars--label-first { grid-template-columns: minmax(0, 1fr) minmax(0, auto) calc(var(--space-xl) + var(--space-xxs)); row-gap: 0; }
+.ws-goal-bars--label-first .ws-goal-bars__row { column-gap: var(--space-md); min-height: var(--space-2xl); }
+.ws-goal-bars--label-first .ws-goal-bars__row + .ws-goal-bars__row { border-top: var(--ws-divider); }
+.ws-goal-bars--label-first .ws-goal-bars__label { font-size: var(--ws-text-chart); font-weight: 400; }
+.ws-goal-bars__bar { position: relative; width: calc(var(--space-9xl) * 2 + var(--space-3xs)); max-width: 100%; height: var(--space-sm); border-radius: var(--ws-radius-chip); background-image: radial-gradient(circle, color-mix(in srgb, var(--tone) 55%, transparent) var(--ws-line), transparent calc(var(--ws-line) * 1.2)); background-size: var(--space-xxs) var(--space-xxs); }
+.ws-goal-bars__bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct); border-radius: var(--ws-radius-chip); background: var(--tone); transform-origin: left; }
+.ws-goal-bars--label-first .ws-goal-bars__count { text-align: right; }
+@container (max-width: 30rem) {
+  .ws-goal-bars--label-first .ws-goal-bars__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); padding-block: var(--space-sm); }
+  .ws-goal-bars--label-first .ws-goal-bars__bar { grid-column: 1 / -1; grid-row: 2; width: 100%; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ws-goal-bars--draw .ws-goal-bars__bar-fill { animation: ws-grow var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--i, 0) * var(--ws-stagger-row)); }
+}

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

@@ -5,84 +5,100 @@ One card's goal as one big number, a run of ticks carrying the gradient, and a s
 - A page's one answer is a share of a goal ("65%", "On pace for 40 calls by Oct 22").
 - The share should read at a glance, not be measured on an axis.
 - The goal breaks into a few things that made it up (cold calls, live transfers, follow-ups).
-- You want the one figure to count up when the card first shows and the strip to sweep in left to right.
-- A streak or a plain count needs the same big-number treatment without a share (pass `figure` instead of `percent`).
+- A streak or a plain count needs the same big-number treatment without a share (a number and its caption, no strip).
 
 **Not for**
 
+- A score rated strong, getting there or needs work, with Seth's 96 px figure: use `ScoreHero`.
+- A share across a row in one tone: use `TickStrip`.
 - Comparing several people or rows against each other: use `GoalBars`.
-- A count out of a small whole inside a row (no big number of its own): use `TickRow` alone.
-- A sequence of steps that happen in order: use `Stepper`.
-- A trend over time: this never draws an axis; if the story is a run of numbers over days, that is a different, line-based chart outside this set.
+- A count out of a small whole inside a row: use `TickRow` alone.
+- A trend over time: use `TrendBars` or `StepLine`.
 
 **Anatomy**
 
-- Big number: `calc(--ws-text-display + --space-xs)` (80 px drawn, `--ws-text-display` is 72 px), weight 400, `--ws-tracking-display` (-3%), colour `--color-text-heading`, tabular numerals. Sits with a `-4px` (`--space-xxs`) left pull so the glyph's own side-bearing lines up with the card edge.
-- Change chip: `ChangeChip` beside the number, `--space-xs` gap, baseline lifted `calc(--space-xs + --space-xxs/2)`: up arrow in `--ws-word-positive` (teal AA step), down in `--color-text-interactive` (mid blue), "same" a grey minus, never red or salmon.
-- Strip: a CSS grid of up to 60 ticks, each `--space-4xl` (64 px) tall, `--radius-xs` (2 px) corners, `--space-xxs` (4 px) apart. A lit tick carries its own slice of one `linear-gradient(90deg, --ws-chart-under-half, --ws-chart-past-half 50%, --ws-chart-finished)` stretched across the whole strip; an empty tick is `--color-bg-page` with a 1 px `--ws-edge-slot` inset edge.
-- Rows: up to 14 ticks each (`TickRow`), a hairline (`--ws-edge-slot`) between rows, the label at 15 px (`--ws-text-message`) truncating, the count at 16 px semibold (`--ws-text-value`) tabular, right-aligned in a fixed `calc(--space-lg + --space-xxs/2)` column so every row's number lines up.
-- Optional caption beside the number ("week streak") at 14 px medium muted, for a plain count that needs to say what it counts.
-- Optional strip key and note under the strip (a filled swatch and an empty one, each named, plus a short note) when the card needs to explain what filled and empty mean.
-
-**Variants and sizes**
-
-| Variant | What changes |
-| --- | --- |
-| `percent` (default) | Big number is `${percent}%`, strip shown by default |
-| `figure` | Big number is the given word/number ("3"); strip hidden unless `strip` is forced true (a score over 0 to 100) |
-| `rows` | Adds the breakdown block; omit for a bare percent card |
-| `change` | `arrowUpRight` (teal), `arrowDownRight` (mid blue), `minus` (grey, "the same"), or omit entirely |
-| `live` | The number counts on from what it last showed instead of from nought (something still landing) |
-| `stripKey` / `stripNote` | Adds a small legend under the strip |
+- Big number: 80/80 (`--ws-text-display` + 8), weight 400, `--ws-tracking-display` (-3%), navy, proportional
+  numerals, its box on the card's content edge with no pull (Seth draws his figures flush), so a chip or caption that
+  wraps under it starts on the same edge. The small card's number is 72/72.
+- Change chip: `ChangeChip` 8 after the number, lifted 10 off its foot. Up in `--ws-word-positive`, down in
+  `--color-text-interactive`, "same" a grey minus. The number, chip and caption wrap (8 across, 4 down) in a narrow card.
+- Caption (a plain count's words, "week streak"): 14/20 medium muted, on the number's baseline.
+- Strip: a grid of `--n` ticks (20 by default, at most 60, one a unit of the target), 64 tall, 1 px corners, 4 apart.
+  A lit tick carries its own slice of one `linear-gradient(90deg, salmon, purple 50%, teal)` stretched across the strip;
+  an empty tick is the plain track (`--ws-track`), no edge.
+- Key (optional): 12 under the strip, a gradient swatch and an empty one (10 x 10), each named in 12/16 muted words, 12
+  apart, and a short note at the right.
+- Rows: a label (15/20 navy, up to half the row, then an ellipsis with a `title`), a `TickRow`, the count (16/20
+  semibold, tabular, right-aligned in a 26 px column so every row's number lines up). 12 above and below each row, a
+  0.5 px divider (`--ws-divider`) between rows.
+- In a card: `--in-card` puts 20 at the sides and 12 under the rows.
+
+**Parts and modifiers**
+
+- `.ws-goal-ticks__figure--small`: the 72 px number instead of 80 (a phone, a second card).
+- `.ws-goal-ticks__change`: the change chip beside the number, 10 above its foot; it wraps under the number in a narrow card.
+- `.ws-goal-ticks__caption`: muted words on the number's baseline instead of a chip ("week streak").
+- `.ws-goal-ticks__key`: the key under the strip, 12 below it.
+- `.ws-goal-ticks__key-item`: a 10 px swatch in the strip's gradient and its word; `--empty` is the track swatch.
+- `.ws-goal-ticks__key-note`: a short note at the key's right end.
 
 **States**
 
-- Default: strip and rows sweep in once, ticks rising from their foot over `--ws-sweep`, each row's own ticks over the same curve.
-- Live: `live` is true, the number counts on from its last value (`CountUp`) rather than from zero.
-- Empty: real zero is a normal state (0%, every tick the empty cream), not hidden; a card with no data at all is left off the page entirely, never drawn with invented zeros.
-- No change: `change.icon` is `null` or `minus`; the chip reads grey, never a tone.
-- Long label: a row's label truncates with an ellipsis; the count column never moves.
-- Narrow: the strip is `container-type: inline-size`, so a narrower card still lays out its full tick count, just thinner ticks.
-- Disabled / error / hover / focus / selected / pressed: do not apply; this is a read-only figure, not a control.
-- Reduced motion: every tick, number and chip simply appears at its final state; nothing sweeps or counts.
+- Default: the strip draws once: one 900 ms draw, tick i starting at its share of the first 55% and rising from its
+  foot on `--ws-ease-settle`.
+- Empty: a real zero (0%, every tick the track), not hidden. A card with no data is left off the page.
+- No change: the chip is grey with a minus, never a tone.
+- Long label: truncates with an ellipsis and a `title`; the tick row gives way first, the count column never moves.
+- Narrow: the chip wraps under the number; the strip keeps every tick, thinner.
+- Reduced motion: every tick in place.
+- Hover, focus, pressed, selected, disabled: do not apply; this is a read-only figure.
 
 **Behaviour**
 
-- No pointer or keyboard interaction; the whole figure is one `<figure aria-label="…">` and every drawn part is `aria-hidden`, so a screen reader gets one sentence instead of dozens of ticks.
-- Motion: the number counts up over `--ws-duration-calm` on the soft curve (skipped with reduced motion); the strip's ticks rise with `ws-grow-up`, each delayed by its share of `--ws-sweep` (`sweepDelay`); each row's own ticks sweep the same way, independently timed to their own count.
-- Touch and pointer make no difference: nothing here is pressable.
+- The whole figure is one `<figure aria-label="...">`; every drawn part is `aria-hidden`, so a screen reader gets one
+  sentence instead of dozens of ticks.
+- Nothing here is pressable.
 
 **Content**
 
-- The big number is the one thing the card says; never a second figure beside it except its change chip.
-- Row labels are short, sentence case, real words ("Cold calls", not "cold_calls"); the component truncates rather than wraps.
-- The change chip's words are short phrases ("12% since Friday"), never a bare number alone unless space forces it.
-- No em dashes; a comma or period instead.
-
-**Props**
-
-| Name | Type | Meaning |
-| --- | --- | --- |
-| `percent` | `number` | The whole percent shown big |
-| `figure` | `string?` | Words instead of the percent, with no strip unless `strip` is forced |
-| `strip` | `boolean?` | Show the tick strip (defaults to true with `percent`, false with `figure`) |
-| `change` | `{ icon: 'arrowUpRight' \| 'arrowDownRight' \| 'minus' \| null; words: string } \| null` | The chip beside the number; omit to hide it |
-| `done` | `number` | Units done, for the strip's share |
-| `target` | `number` | The goal the strip is drawn against |
-| `rows` | `{ key, label, value, of }[]` | The short tick rows under the strip |
-| `live` | `boolean?` | The number counts on from its last value |
-| `caption` | `string?` | A word or two beside the number ("pass rate") |
-| `stripKey` | `[string, string]?` | Names a filled tick and an empty one |
-| `stripNote` | `string?` | A short note at the key's right |
+- The big number is the one thing the card says; only its chip sits beside it.
+- Row labels are short, sentence case, real words ("Cold calls").
+- The chip's words are short phrases ("12% since Friday").
 
 **Rules**
 
-- The designer's exact colours stay on the ticks; words beside them take the AA step (`--ws-word-needs`, `--ws-word-positive`), never the raw salmon or teal (the system's rule, 15 Oct 2026).
+- The ticks keep the exact chart colours; words beside them take the AA step (`--ws-word-positive`, `--ws-word-needs`).
 - A falling number is mid blue, never red.
-- One card, one question, one act: the footer band (the card's `ws-band`, see `Card`, not this component) holds the one next call to action, never a second number.
-- A card whose data does not exist is left out, never faked with invented zeros.
-- The big number is the only thing counting up; a chart never gets a grid or axis where a tick strip says it plainer.
+- One card, one question, one act: the band under the card holds the next step, never a second number.
+- A card whose data does not exist is left out, never faked with zeros.
 
 **Source**
 
-- **Derived from**: the system's chart and motion rules (tone colours, `ws-grow-up`, the one-figure-per-card rule). **Precedent**: the first product built on the system.
+**Derived from**: the system's chart and motion rules; 0.5.0 takes Seth's 1 px tick corners and plain empty tick, North's
+draw, and the field fixes (the strip counts from `--n`, the figure wraps, the caption sits on the baseline, long labels
+carry a title). **Precedent**: the first product built on the system.
+
+**Markup**
+
+```html
+<div class="ws-dots ws-goal-ticks ws-goal-ticks--in-card">
+  <figure class="ws-goal-ticks__figure" aria-label="65 percent, 65 of 100">
+    <span class="ws-goal-ticks__number" aria-hidden="true">65%</span>
+  </figure>
+  <div class="ws-goal-ticks__strip" style="--n: 20;" aria-hidden="true">
+    <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 0;"></span>
+    <!-- one lit tick a unit done, --i counting up, then the empties -->
+    <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
+  </div>
+  <ul class="ws-goal-ticks__rows" aria-hidden="true">
+    <li class="ws-goal-ticks__row">
+      <span class="ws-goal-ticks__row-label" title="Cold calls">Cold calls</span>
+      <span class="ws-tick-row"><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span></span>
+      <span class="ws-goal-ticks__row-value">14</span>
+    </li>
+  </ul>
+</div>
+```
+
+**Styles**: `GoalTicks/style.css`, in `bundle.css` and `fello.css` as `.ws-goal-ticks`. Every value is a token. `.ws-goal-ticks` itself has no styles: it is the hook that
+names the chart (and the root for its modifiers); its parts carry the styles.