@usableapp/cardds 0.1.0 → 0.1.1

package/dist/cardds.css

@@ -110,6 +110,7 @@
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;
   --rule-w: 2px;                                   /* dotted connectors, picker rules */
+  --scroll-w: 1px;                                 /* the scrollbar of a .bleed track: a hairline of ink */
   --focus: 2px solid currentColor;                 /* :focus-visible ring */
   --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
   --shadow-float: 0 0.25rem 0.75rem rgb(0 0 0 / 0.14);
@@ -410,8 +411,7 @@ button { font: inherit; cursor: pointer; }
 .screen--fill > .sheet-stack { flex: 1; min-height: 0; }
 
 /* ---- typography levels ---- */
-/* --fs-self: each level publishes its own size, so a consumer that scales a
-   heading (card.css --squeeze) can multiply it without knowing the level */
+/* --fs-self: each level publishes its own size, for a consumer that scales a level without knowing which */
 .t-display  { font: var(--type-display); letter-spacing: var(--track-display); margin: 0; text-wrap: balance; --fs-self: var(--fs-display); }
 .t-h1       { font: var(--type-h1); letter-spacing: var(--track-h1); margin: 0; --fs-self: var(--fs-h1); }
 .t-h2       { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; --fs-self: var(--fs-h2); }
@@ -503,10 +503,19 @@ button { font: inherit; cursor: pointer; }
    multi-line title can opt back out with .card__head--top. */
 .card__head {
   display: flex;
+  flex-wrap: wrap;               /* the caption / overline take a line of their own — no wrapper div */
   align-items: center;
   justify-content: space-between;
-  gap: var(--sp-3);
-}
+  column-gap: var(--sp-3);
+  row-gap: var(--sp-0);
+}
+/* flat head markup (Lh 2026-09-16 — no <p>, no wrapper, only padding and gap tokens):
+   <div class="card__head"><span class="t-overline t-muted">…</span><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
+   The heading and the far-right thing share the first row; an overline sits
+   on a row above (order −1), a caption on a row below (order 1), whatever the
+   DOM order — so an author writes the words in reading order. */
+.card__head > :is(.t-overline, .t-caption, .t-body) { flex: 1 1 100%; order: 1; margin: 0; }
+.card__head > .t-overline { order: -1; }
 .card__head--top { align-items: flex-start; }
 
 .card__media { border-radius: var(--r-media); overflow: hidden; position: relative; } /* relative: corner badges */
@@ -526,29 +535,12 @@ button { font: inherit; cursor: pointer; }
 .card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
 
 /* Skeleton head — the heading in a card's OWN head, and only there.
-   Two lines are the budget: cardds.js measures and steps --squeeze down so the
-   type shrinks to fit; the clamp holds a heading that still overflows to three
-   lines, never more. The level's own size comes through --fs-self (base.css),
-   so the multiplier is level-agnostic and a heading without --squeeze renders
-   exactly as before.
-   A STACK head is not a skeleton head — it is a one-line peek at its own size,
-   and "stack headers" below opts it out of the budget, the squeeze and the
-   clamp. cardds.js skips those same cards, so CSS and JS agree on what counts
-   as a skeleton head. Change one, change the other. */
-.card__head :is(h1, h2, h3) {
-  font-size: calc(var(--fs-self, var(--fs-h2)) * var(--squeeze, 1));
-  overflow-wrap: anywhere;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-  /* the clip would take the hair the tight leading leaves outside the line
-     box — a stacked tone mark on top, สระอู below (fonts.css). Padding is
-     inside the clip, the negative margin gives the room back, so the head
-     measures exactly as before. */
-  padding-block: 0.15em;
-  margin-block: -0.15em;
-}
+   The heading wraps freely: no line budget, no squeeze, no clamp (Lh
+   2026-09-16 — a height rule on words only distorts them; content that needs
+   more rows takes more rows). The group that holds overline · heading ·
+   caption is the head's own wrapping row (above) — no wrapper element, no
+   height, only the row gap. */
+.card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
 
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
@@ -559,11 +551,30 @@ button { font: inherit; cursor: pointer; }
    <div class="avatar-pick bleed">…</div>
    Padding, not item margins: padding is inside the scrollable area, so the
    last item scrolls fully clear of the edge instead of stopping against it.
-   scroll-padding keeps snap points on the content line, not the border edge. */
+   scroll-padding keeps snap points on the content line, not the border edge.
+   The track IS the scroller (nowrap, overflow-x), so no one writes that inline.
+   Its scrollbar is designed, not hidden (Lh 2026-09-16): a --scroll-w line of
+   the track's own ink, and --sp-2 of room under the items so the line sits
+   clear of them and reads as a slider. It shows only while the track is
+   hovered or scrolling (cardds.js sets .is-scrolling for a beat after each
+   scroll event), otherwise the line is transparent — the room stays, so
+   nothing jumps. Chromium/Safari paint it through the ::-webkit-scrollbar
+   parts; Firefox gets its thin bar in the same ink. */
 .bleed {
   margin-inline: calc(-1 * var(--card-pad, 0px));
   padding-inline: var(--card-pad, 0px);
+  padding-block-end: var(--sp-2);
   scroll-padding-inline: var(--card-pad, 0px);
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.bleed::-webkit-scrollbar { height: var(--scroll-w); }
+.bleed::-webkit-scrollbar-track { background: transparent; margin-inline: var(--card-pad, 0px); }
+.bleed::-webkit-scrollbar-thumb { background: transparent; }
+.bleed:is(:hover, .is-scrolling)::-webkit-scrollbar-thumb { background: currentColor; }
+@supports not selector(::-webkit-scrollbar) {
+  .bleed { scrollbar-width: thin; scrollbar-color: transparent transparent; }
+  .bleed:is(:hover, .is-scrolling) { scrollbar-color: currentColor transparent; }
 }
 /* a bleeding child sits over the container's rounded corner, so a strip that
    is genuinely first or last needs the corner clipped for it */
@@ -843,17 +854,13 @@ button { font: inherit; cursor: pointer; }
   min-height: var(--tap);
 }
 /* NOT a skeleton head: a peek is one line at its own size, and the display
-   stack deliberately runs a second line under the next card. So it opts out of
-   the whole skeleton-head treatment — budget, squeeze and clamp. cardds.js
-   skips the same cards. */
+   stack deliberately runs a second line under the next card. */
 .sheet-stack > .card > .card__head :is(h1, h2, h3) {
   font-size: var(--fs-h1);
   line-height: 1;
   letter-spacing: -0.01em;
   margin-right: auto; /* pins the icon cluster right */
   display: block;
-  -webkit-line-clamp: none;
-  overflow: visible;
   overflow-wrap: normal;
 }
 
@@ -1153,7 +1160,7 @@ button { font: inherit; cursor: pointer; }
 /* the head — a title row at least --tap tall, either kind, so the peek strip
    (--sheet-peek) is the same for every sheet:
    - in a step it is a plain card head (card.css): the heading left, the
-     contextual thing at the far right, the two-line budget and the squeeze
+     contextual thing at the far right
    - .sheet__head is the stage sheet's three-column head: a round button,
      the centred title and sub, a round button
    - a label .row with its .check / .toggle may be the head when the sheet's
@@ -1454,30 +1461,24 @@ button { font: inherit; cursor: pointer; }
    ============================================================ */
 
 /* ---- route: endpoint · dotted connector (icon in middle) · endpoint ---- */
-.route { display: flex; align-items: center; gap: var(--sp-3); }
+.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--sp-1); } /* line → icon: --sp-1, as the via always had; code → line is the code row's own --sp-3 */
+/* the two endpoints get EQUAL columns whatever their words measure, so the via
+   (the icon alone) sits at the card's centre; each dotted run lives on ITS
+   endpoint's code row and fills that side's leftover — with short names the
+   runs are long and equal, a long place name wraps in its half instead of
+   pushing the plane (Lh 2026-09-16) */
 
 .route__point { display: grid; gap: var(--sp-0); min-width: 0; }
 .route__point--end { text-align: right; }
 
-.route__code { font: var(--type-h2); letter-spacing: var(--track-h2); }
+.route__code { font: var(--type-h2); letter-spacing: var(--track-h2); display: flex; align-items: center; gap: var(--sp-3); }
+.route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: 0.65; }
+.route__point--end .route__code::after { content: none; }
 .route__time { font: var(--type-body); font-variant-numeric: tabular-nums; }
 .route__place { font: var(--type-caption); color: var(--card-muted); }
 .card--3 .route__place { color: inherit; opacity: 0.7; }
 
-.route__via {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-1);
-  opacity: 0.65;
-  font-size: var(--fs-body);
-}
-.route__via::before,
-.route__via::after {
-  content: "";
-  flex: 1;
-  border-top: var(--rule-w) dotted currentColor;
-}
+.route__via { display: flex; align-items: center; opacity: 0.65; font-size: var(--fs-body); }
 
 /* ---- tile badge: tiny label over a big value (gate, seat, zone) ---- */
 .tile-badge {
@@ -1651,6 +1652,7 @@ button { font: inherit; cursor: pointer; }
 /* dark-slot inversion lives in card.css (.card--3 :is(...)) */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
+.chip-row.bleed { flex-wrap: nowrap; } /* actions.css loads after card.css — the strip stays one line */
 
 /* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
    <div class="dropdown"><button class="dropdown__btn" popovertarget="f1"><span class="dropdown__label">this week</span><svg class="icon icon--xs"><use href="icons.svg#chevron-down"/></svg></button>
@@ -1679,7 +1681,7 @@ button { font: inherit; cursor: pointer; }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate 0.2s ease; }
 .dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
-.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards */
+.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards (= .menu--end, layover.css) */
 .filter-row { display: flex; gap: var(--sp-2); }
 .filter-row > .dropdown { flex: 1; min-width: 0; }
 
@@ -2232,12 +2234,10 @@ button { font: inherit; cursor: pointer; }
   -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
 }
 .chip--toggle:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-.chip--toggle:has(:checked)::after {
-  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
-  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
-}
+/* checked: the same plus turns 45° into an x — one mask, one rotate, no swap (Lh 2026-09-16) */
+.chip--toggle:has(:checked)::after { rotate: 45deg; }
+@media (prefers-reduced-motion: no-preference) { .chip--toggle::after { transition: rotate var(--motion-slide); } }
 .chip--toggle:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-.chip--toggle:has(:checked) { font-style: italic; } /* the interest-picker flourish; drop if unwanted */
 
 /* ---- chip grid: pick one slot / many options in a grid ----
    <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div> */
@@ -2458,12 +2458,14 @@ button { font: inherit; cursor: pointer; }
   display: flex;
   align-items: center;
   gap: var(--sp-3);
-  min-height: var(--tap);
-  padding-block: var(--sp-2);
+  min-height: var(--tap);        /* the tap target's room — the row's only vertical size */
   min-width: 0;
   color: inherit;
   text-decoration: none; /* .row works as <a> too — it is a tap target */
 }
+/* no padding on a row (Lh 2026-09-16): padding is for room, not for spreading.
+   Space BETWEEN rows is .rows' gap; a lone row as card content takes the card's
+   gap. (.row--flush, which zeroed the old padding, is gone — every row is flush.) */
 .row__lead {
   width: var(--tap);
   height: var(--tap);
@@ -2474,13 +2476,12 @@ button { font: inherit; cursor: pointer; }
   place-items: center;
 }
 .row__body { flex: 1; min-width: 0; display: grid; gap: var(--sp-0); }
-.row__title { font: var(--type-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 0.12em; margin-block: -0.12em; } /* the clip keeps Thai marks — see card.css */
+.row__title { font: var(--type-title); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
 .row__meta { font: var(--type-caption); color: var(--card-muted); display: flex; align-items: center; gap: var(--sp-1); }
 .card--3 .row__meta { color: inherit; opacity: 0.7; }
 .row__end { margin-left: auto; text-align: right; display: grid; gap: var(--sp-0); justify-items: end; flex: none; }
-.row--lg { min-height: var(--fab); padding-block: var(--sp-3); } /* menu rows: more air, round arrow at the end */
+.row--lg { min-height: var(--fab); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
 .row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
-.row--flush { padding-block: 0; } /* a single row as card content: the card's gap is the spacing */
 /* a finished item in a checklist (a to-do list, an onboarding "complete your introduction" list):
    the words go muted, a filled tick sits at the end, and the row is no longer a tap target —
    pointer-events off here, aria-disabled from the markup. The tick is the .check's checked look
@@ -2501,8 +2502,17 @@ button { font: inherit; cursor: pointer; }
 }
 
 /* rows: a list of rows separated by hairlines */
-.rows { display: grid; }
-.rows > .row + .row { border-top: var(--border-w) solid var(--hairline); }
+.rows { display: grid; --rows-gap: var(--sp-4); row-gap: var(--rows-gap); }
+.rows:has(> .row--lg) { --rows-gap: var(--sp-6); }
+/* the hairline between rows sits in the middle of the gap — drawn, not spaced:
+   no padding, no spacer element */
+.rows > .row + .row { position: relative; }
+.rows > .row + .row::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--rows-gap) / 2) 0 auto;
+  border-top: var(--border-w) solid var(--hairline);
+}
 
 /* ---- kv: label left, value right ----
    <dl class="kv"><div class="kv__row"><dt class="kv__key">Pay with</dt><dd class="kv__val">GHO</dd></div>…</dl> */
@@ -2879,14 +2889,22 @@ button { font: inherit; cursor: pointer; }
    <button class="chip" popovertarget="when">Now ▾</button>
    <div class="menu" id="when" popover><button class="menu__item"><svg class="icon"/>Now</button>…</div>
    Native popover: light dismiss, Esc, top layer. Anchored to the invoker where
-   anchor positioning exists; the fallback is the browser's centred placement. */
+   anchor positioning exists; the fallback is the browser's centred placement.
+   Two kinds (Lh 2026-09-16): a VALUE menu (the dropdown's — the picked item
+   stays current) and an ACTIONS menu, .menu--actions — things to do to the
+   element the button belongs to (a card, a sheet), opened by an .icon-btn:
+   <button class="icon-btn icon-btn--sm" popovertarget="m1" aria-label="More">…</button>
+   <div class="menu menu--actions menu--end" id="m1" popover><button class="menu__item"><svg class="icon"/>Edit</button>…</div>
+   No item stays current there (cardds.js skips the mark). .menu--end = the
+   trigger sits at the far right, so the panel grows leftwards. */
 .menu {
   display: none;              /* explicit closed state — never display on the base rule */
   margin: 0;
   inset: auto;
   border: var(--border-w) solid var(--action-border);
   border-radius: var(--r-card);
-  padding: var(--sp-2);
+  --menu-pad: var(--sp-2);       /* published: a row's radius is concentric with the panel's */
+  padding: var(--menu-pad);
   min-width: 12rem;
   background: var(--action-bg);
   color: var(--action-ink);
@@ -2902,7 +2920,9 @@ button { font: inherit; cursor: pointer; }
   width: 100%;
   padding: 0 var(--sp-3);
   border: 0;
-  border-radius: var(--r-control);
+  /* concentric with the panel: the card radius minus the panel's padding, so the
+     highlight's curve follows the outer corner (Lh 2026-09-16) */
+  border-radius: calc(var(--r-card) - var(--menu-pad, var(--sp-2)));
   background: transparent;
   color: inherit;
   font: var(--type-title);
@@ -2918,6 +2938,7 @@ button { font: inherit; cursor: pointer; }
     min-width: max(12rem, anchor-size(width)); /* at least as wide as its trigger */
     position-try-fallbacks: flip-block, flip-inline;
   }
+  .menu--end[popover] { position-area: block-end span-inline-start; }
 }
 @media (prefers-reduced-motion: no-preference) {
   .menu[popover] {

package/dist/cards/CardHead.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 export interface CardHeadProps extends ComponentPropsWithoutRef<'div'> {
-    /** the heading (a string becomes an h2 at level `t-h2`) — two lines is its budget, it squeezes to fit and clamps at three */
+    /** the heading (a string becomes an h2 at level `t-h2`) — wraps freely, as many lines as the words need */
     heading?: ReactNode;
     /** small caps above the heading ("Step 1 of 4", "Time bank") */
     overline?: ReactNode;
@@ -16,6 +16,6 @@ export interface CardHeadProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * CardHead — the card's head: the heading on the left takes the room, the contextual info hugs the far right.
  * Use `heading` (+ `overline`/`caption`) and `end` for the standard head, or pass children for a custom one
- * (the FIRST child takes the room). Never put buttons here — they go in the CardFoot.
+ * (the FIRST child takes the room). Flat markup: no wrapper element, no <p> — the overline and caption are spans on rows of their own (card.css). Never put buttons here — they go in the CardFoot.
  */
 export declare function CardHead({ heading, overline, caption, end, top, level, className, children, ...rest }: CardHeadProps): import("react").JSX.Element;

package/dist/cards/CardHead.js

@@ -3,9 +3,9 @@ import { cx } from '../cx';
 /**
  * CardHead — the card's head: the heading on the left takes the room, the contextual info hugs the far right.
  * Use `heading` (+ `overline`/`caption`) and `end` for the standard head, or pass children for a custom one
- * (the FIRST child takes the room). Never put buttons here — they go in the CardFoot.
+ * (the FIRST child takes the room). Flat markup: no wrapper element, no <p> — the overline and caption are spans on rows of their own (card.css). Never put buttons here — they go in the CardFoot.
  */
 export function CardHead({ heading, overline, caption, end, top, level = 'h2', className, children, ...rest }) {
     const H = level === 'h1' ? 'h1' : 'h2';
-    return (_jsxs("div", { className: cx('card__head', top && 'card__head--top', className), ...rest, children: [heading != null && (_jsxs("div", { children: [overline != null && _jsx("span", { className: "t-overline t-muted", children: overline }), _jsx(H, { className: level === 'display' ? 't-display' : `t-${level}`, children: heading }), caption != null && _jsx("p", { className: "t-caption t-muted", children: caption })] })), children, end] }));
+    return (_jsxs("div", { className: cx('card__head', top && 'card__head--top', className), ...rest, children: [overline != null && _jsx("span", { className: "t-overline t-muted", children: overline }), heading != null && _jsx(H, { className: level === 'display' ? 't-display' : `t-${level}`, children: heading }), caption != null && _jsx("span", { className: "t-caption t-muted", children: caption }), children, end] }));
 }

package/dist/lists/Row.d.ts

@@ -18,8 +18,6 @@ export interface RowProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'>
     endCaption?: ReactNode;
     /** menu row: more air, a bigger title */
     lg?: boolean;
-    /** no vertical padding — a single row as card content */
-    flush?: boolean;
     /** a finished checklist item: muted words, a filled tick at the end, no longer a tap target (aria-disabled) — pass no `end` */
     done?: boolean;
     /** div (default), a link, a label wrapping a Check/Toggle, li */
@@ -31,7 +29,7 @@ export interface RowProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'>
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
  * `done` is the checklist's finished line: ticked, muted, not tappable any more.
  */
-export declare function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, flush, done, as, href, className, children, ...rest }: RowProps): import("react").DetailedReactHTMLElement<{
+export declare function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, className, children, ...rest }: RowProps): import("react").DetailedReactHTMLElement<{
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;

package/dist/lists/Row.js

@@ -7,9 +7,9 @@ import { Icon } from '../type/Icon';
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
  * `done` is the checklist's finished line: ticked, muted, not tappable any more.
  */
-export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, flush, done, as, href, className, children, ...rest }) {
+export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, className, children, ...rest }) {
     const el = as ?? (href ? 'a' : 'div');
-    return createElement(el, { href, className: cx('row', lg && 'row--lg', flush && 'row--flush', done && 'row--done', className), 'aria-disabled': done || undefined, ...rest }, leadIcon ? _jsx("span", { className: "row__lead", children: _jsx(Icon, { name: leadIcon }) }) : lead, (title != null || meta != null || body != null) && (_jsxs("div", { className: "row__body", children: [title != null && _jsx("span", { className: "row__title", children: title }), meta != null && _jsx("span", { className: "row__meta", children: meta }), body] })), children, (endValue != null || endCaption != null) && (_jsxs("span", { className: "row__end", children: [endValue != null && _jsx("span", { className: "t-title", children: endValue }), endCaption != null && _jsx("span", { className: "t-caption t-muted", children: endCaption })] })), end, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
+    return createElement(el, { href, className: cx('row', lg && 'row--lg', done && 'row--done', className), 'aria-disabled': done || undefined, ...rest }, leadIcon ? _jsx("span", { className: "row__lead", children: _jsx(Icon, { name: leadIcon }) }) : lead, (title != null || meta != null || body != null) && (_jsxs("div", { className: "row__body", children: [title != null && _jsx("span", { className: "row__title", children: title }), meta != null && _jsx("span", { className: "row__meta", children: meta }), body] })), children, (endValue != null || endCaption != null) && (_jsxs("span", { className: "row__end", children: [endValue != null && _jsx("span", { className: "t-title", children: endValue }), endCaption != null && _jsx("span", { className: "t-caption t-muted", children: endCaption })] })), end, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
 }
 /** Rows — a list of Rows separated by hairlines. */
 export function Rows({ className, ...rest }) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth), app/ is the Commons Time Bank PWA built from them, demo/ the CSS spec pages the acceptance tests (tests/) drive.",
   "repository": {
     "type": "git",
-    "url": "git@github.com:everysundays/cardds.git"
+    "url": "git+ssh://git@github.com/everysundays/cardds.git"
   },
   "scripts": {
     "dev": "vite --config app/vite.config.ts",