@usableapp/cardds 0.1.6 → 0.1.7

package/README.md

@@ -308,7 +308,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 | `css/actions.css` | topbar, chips, buttons (`.btn--xl`), `.dropdown` (the standard select: pill + `.menu` popover), `.action-bar` (+ `--pager` for previous/next, two round icon buttons, never labels; `--tiers` for a control row above the buttons), `.fab` | when adding actions |
 | `css/numbers.css` | `.ring` gauge, `.track` steps, `.card--band` + `.band-stack`, `.dotgrid`, `.picker`, `.badge`, `.bars` | big numbers |
 | `css/people.css` | `.avatar` (sm/lg/xl, outline, add, on, halo), `.avatar-stack`, `.avatar-pick` | people |
-| `css/choice.css` | `.check`, `.toggle`, `.chip--toggle`, `.chip-grid` + `.chip--pick`, `.day-strip`, `.calendar`, `.mood`, `.pin`, `.composer`, `.slider` | choice controls |
+| `css/choice.css` | `.check`, `.toggle`, `.chip-grid` + `.chip--pick` (+ `--sign`), `.day-strip`, `.calendar`, `.mood`, `.pin`, `.composer`, `.slider` | choice controls |
 | `css/lists.css` | `.row` / `.rows` (frameless rows in a card), `.kv`, `.kv-grid`, `.timeline`, `.legend`, `.link` | lists inside cards |
 | `css/media.css` | `.card--cover`, `.quote`, `.tile-grid` + `.tile`, `.card--fold`, `.mosaic`, `.wave` | media & display |
 | `css/layover.css` | `.modal` (the ask: `__lift` + `__drawer`, closes on any drawer button → `cardds:modal`), `.menu` (popover), `.banner` (details), `.float-bar`, `.callout`, `.chip--bubble`, `.deck` | cards over content |

package/css/actions.css

@@ -58,7 +58,7 @@
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
 /* the bar's trailing controls (one or two: a labelled switch chip, a wallet button — home,
    Lh 2026-09-13) stand on the tap floor: a chip that is a switch grows to --tap here */
-.appbar .chip--toggle { min-height: var(--tap); }
+.appbar .chip--pick { min-height: var(--tap); }
 
 /* ---- icon button (round) ---- */
 .icon-btn {

package/css/base.css

@@ -8,7 +8,7 @@
    in cards, rows and bodies stay selectable (an address, a code, a number
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
-button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--toggle, .chip--pick,
+button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
 .segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
   user-select: none;
   -webkit-user-select: none;

package/css/choice.css

@@ -71,27 +71,11 @@
 .toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); opacity: 1; }
 .toggle:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 
-/* ---- toggle chip: interest / filter picker — shows + off, × on ----
-   <label class="chip chip--toggle"><input type="checkbox">Nature</label> */
-.chip--toggle { cursor: pointer; padding-right: var(--sp-2); }
-.chip--toggle > input { appearance: none; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
-.chip--toggle::after {
-  content: "";
-  width: var(--icon-xs);
-  height: var(--icon-xs);
-  flex: none;
-  background: currentColor;
-  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;
-  -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; }
-/* 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 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> */
+/* ---- chip pick: a chip that is a choice — a native radio/checkbox inside the label, the picked one filled with accent.
+   Full-width in a .chip-grid (one slot / many options), or hugging its word on a .chip-row with --sign (an interest
+   picker: + off, × on). Was two things, .chip--toggle and .chip--pick — one chip, one state, the sign is a variant (Lh 2026-09-16).
+   <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div>
+   <div class="chip-row"><label class="chip chip--pick chip--sign"><input type="checkbox">Nature</label>…</div> */
 .chip-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
@@ -102,10 +86,23 @@
    Matters most in scripts without word spaces (Thai): min-content is the
    whole string, tracks get wide, and hugging chips leave a ragged grid. */
 .chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); position: relative; }
-.chip--pick { cursor: pointer; }
+.chip--pick { cursor: pointer; position: relative; } /* the input covers the whole chip, on a row as in a grid */
 .chip--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
 .chip--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .chip--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+/* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
+.chip--sign { padding-right: var(--sp-2); }
+.chip--sign::after {
+  content: "";
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  flex: none;
+  background: currentColor;
+  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;
+  -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--sign:has(:checked)::after { rotate: 45deg; }
+@media (prefers-reduced-motion: no-preference) { .chip--sign::after { transition: rotate var(--motion-slide); } }
 
 /* ---- day strip: a week, one day selected ----
    <div class="day-strip" role="tablist"><button class="day" role="tab" aria-selected="true"><span class="day__name">Thu</span><span class="day__num">16</span></button>…</div> */

package/dist/actions/Chip.d.ts

@@ -11,7 +11,7 @@ export interface ChipProps extends ComponentPropsWithoutRef<'span'> {
     href?: string;
     children?: ReactNode;
 }
-/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For pickers use ChipToggle / ChipPick. */
+/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
 export declare function Chip({ on, dot, bubble, as, href, className, children, ...rest }: ChipProps): import("react").DetailedReactHTMLElement<{
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -296,26 +296,20 @@ export declare function Chip({ on, dot, bubble, as, href, className, children, .
     type: string | undefined;
     className: string;
 }, HTMLElement>;
-export interface ChipToggleProps extends Omit<ComponentPropsWithoutRef<'label'>, 'onChange'> {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    name?: string;
-    value?: string;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-/** ChipToggle — an interest / filter chip: shows + off and × on; the state is a native checkbox inside the label. */
-export declare function ChipToggle({ checked, defaultChecked, name, value, onChange, className, children, ...rest }: ChipToggleProps): import("react").JSX.Element;
 export interface ChipPickProps extends Omit<ComponentPropsWithoutRef<'label'>, 'onChange'> {
-    /** radio for pick-one (a time slot), checkbox for pick-many (skills) */
+    /** radio for pick-one (a time slot), checkbox for pick-many (skills); `sign` defaults to checkbox */
     type?: 'radio' | 'checkbox';
+    /** the +/× at the end: an interest / filter chip on a row, hugging its word (was ChipToggle) */
+    sign?: boolean;
     name?: string;
     value?: string;
     checked?: boolean;
     defaultChecked?: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-/** ChipPick — a full-width pick target in a ChipGrid (9:00 · 9:30 · …); the picked one fills with accent. */
-export declare function ChipPick({ type, name, value, checked, defaultChecked, onChange, className, children, ...rest }: ChipPickProps): import("react").JSX.Element;
+/** ChipPick — a chip that is a choice: full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
+ *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */
+export declare function ChipPick({ type, sign, name, value, checked, defaultChecked, onChange, className, children, ...rest }: ChipPickProps): import("react").JSX.Element;
 export interface ChipRowProps extends ComponentPropsWithoutRef<'div'> {
     /** run the row to the card's edges as a one-line scrolling strip (`.bleed`: nowrap, overflow, the hairline ink scrollbar) */
     bleed?: boolean;

package/dist/actions/Chip.js

@@ -2,18 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
 import { cx } from '../cx.js';
 import { Dot } from './Dot.js';
-/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For pickers use ChipToggle / ChipPick. */
+/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
 export function Chip({ on, dot, bubble, as, href, className, children, ...rest }) {
     const el = as ?? (href ? 'a' : 'span');
     return createElement(el, { href, type: el === 'button' ? 'button' : undefined, className: cx('chip', on && 'chip--on', bubble && 'chip--bubble', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b' }), children);
 }
-/** ChipToggle — an interest / filter chip: shows + off and × on; the state is a native checkbox inside the label. */
-export function ChipToggle({ checked, defaultChecked, name, value, onChange, className, children, ...rest }) {
-    return (_jsxs("label", { className: cx('chip chip--toggle', className), ...rest, children: [_jsx("input", { type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, value: value, onChange: onChange }), children] }));
-}
-/** ChipPick — a full-width pick target in a ChipGrid (9:00 · 9:30 · …); the picked one fills with accent. */
-export function ChipPick({ type = 'radio', name, value, checked, defaultChecked, onChange, className, children, ...rest }) {
-    return (_jsxs("label", { className: cx('chip chip--pick', className), ...rest, children: [_jsx("input", { type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: onChange }), children] }));
+/** ChipPick — a chip that is a choice: full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
+ *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */
+export function ChipPick({ type, sign, name, value, checked, defaultChecked, onChange, className, children, ...rest }) {
+    return (_jsxs("label", { className: cx('chip chip--pick', sign && 'chip--sign', className), ...rest, children: [_jsx("input", { type: type ?? (sign ? 'checkbox' : 'radio'), name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: onChange }), children] }));
 }
 /** ChipRow — chips on a wrapping line (or a bleeding strip). */
 export function ChipRow({ bleed, className, ...rest }) {

package/dist/cardds.css

@@ -344,7 +344,7 @@
    in cards, rows and bodies stay selectable (an address, a code, a number
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
-button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--toggle, .chip--pick,
+button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
 .segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
   user-select: none;
   -webkit-user-select: none;
@@ -1603,7 +1603,7 @@ button { font: inherit; cursor: pointer; }
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
 /* the bar's trailing controls (one or two: a labelled switch chip, a wallet button — home,
    Lh 2026-09-13) stand on the tap floor: a chip that is a switch grows to --tap here */
-.appbar .chip--toggle { min-height: var(--tap); }
+.appbar .chip--pick { min-height: var(--tap); }
 
 /* ---- icon button (round) ---- */
 .icon-btn {
@@ -2237,27 +2237,11 @@ button { font: inherit; cursor: pointer; }
 .toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); opacity: 1; }
 .toggle:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 
-/* ---- toggle chip: interest / filter picker — shows + off, × on ----
-   <label class="chip chip--toggle"><input type="checkbox">Nature</label> */
-.chip--toggle { cursor: pointer; padding-right: var(--sp-2); }
-.chip--toggle > input { appearance: none; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
-.chip--toggle::after {
-  content: "";
-  width: var(--icon-xs);
-  height: var(--icon-xs);
-  flex: none;
-  background: currentColor;
-  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;
-  -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; }
-/* 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 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> */
+/* ---- chip pick: a chip that is a choice — a native radio/checkbox inside the label, the picked one filled with accent.
+   Full-width in a .chip-grid (one slot / many options), or hugging its word on a .chip-row with --sign (an interest
+   picker: + off, × on). Was two things, .chip--toggle and .chip--pick — one chip, one state, the sign is a variant (Lh 2026-09-16).
+   <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div>
+   <div class="chip-row"><label class="chip chip--pick chip--sign"><input type="checkbox">Nature</label>…</div> */
 .chip-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
@@ -2268,10 +2252,23 @@ button { font: inherit; cursor: pointer; }
    Matters most in scripts without word spaces (Thai): min-content is the
    whole string, tracks get wide, and hugging chips leave a ragged grid. */
 .chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); position: relative; }
-.chip--pick { cursor: pointer; }
+.chip--pick { cursor: pointer; position: relative; } /* the input covers the whole chip, on a row as in a grid */
 .chip--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
 .chip--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .chip--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+/* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
+.chip--sign { padding-right: var(--sp-2); }
+.chip--sign::after {
+  content: "";
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  flex: none;
+  background: currentColor;
+  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;
+  -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--sign:has(:checked)::after { rotate: 45deg; }
+@media (prefers-reduced-motion: no-preference) { .chip--sign::after { transition: rotate var(--motion-slide); } }
 
 /* ---- day strip: a week, one day selected ----
    <div class="day-strip" role="tablist"><button class="day" role="tab" aria-selected="true"><span class="day__name">Thu</span><span class="day__num">16</span></button>…</div> */

package/dist/scaffold/AppBar.d.ts

@@ -7,7 +7,7 @@ export interface AppBarProps extends Omit<ComponentPropsWithoutRef<'header'>, 't
     /** the second line under the title */
     sub?: ReactNode;
     /** the trailing control(s) — an IconBtn with a chevron-down to switch context; on the home bar a labelled
-     * switch chip (ChipToggle, --tap tall here) and the wallet Btn, side by side (Lh 2026-09-13) */
+     * switch chip (ChipPick sign, --tap tall here) and the wallet Btn, side by side (Lh 2026-09-13) */
     action?: ReactNode;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "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); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",