@usableapp/cardds 0.3.0 → 0.4.0

package/css/numbers.css

@@ -31,8 +31,8 @@
   mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
 }
-.ring__value { font: var(--type-stat); letter-spacing: var(--track-display); }
-.ring__label { font: var(--type-caption); color: var(--card-muted); }
+.ring__value { font: var(--ring-value-font, var(--type-stat)); letter-spacing: var(--track-display); }
+.ring__label { font: var(--ring-label-font, var(--type-caption)); color: var(--ring-label-ink, var(--card-muted)); }
 .card--3 .ring__label { color: inherit; opacity: 0.7; }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
 .ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
@@ -52,10 +52,10 @@
   --on-accent: var(--_bg);
   list-style: none;
   margin: 0;
-  padding: var(--sp-2);
+  padding: var(--track-pad, var(--sp-2));
   display: flex;
   align-items: center;
-  border-radius: var(--r-chip);
+  border-radius: var(--track-radius, var(--r-chip));
   background: var(--_bg);
   color: var(--_ink);
 }
@@ -96,9 +96,9 @@
   grid-template-areas: "label num" "foot num";
   align-items: end;
   gap: var(--sp-2) var(--sp-4);
-  min-height: var(--tile-h);
+  min-height: var(--card-band-min-h, var(--tile-h));
 }
-.band__label { grid-area: label; align-self: start; font: var(--type-label); font-size: var(--fs-body); line-height: 1.2; }
+.band__label { grid-area: label; align-self: start; font: var(--band-label-font, var(--type-label)); font-size: var(--band-label-font-size, var(--fs-body)); line-height: 1.2; }
 .band__num {
   grid-area: num;
   font: 800 var(--fs-giant) / 0.9 var(--font-display);
@@ -106,14 +106,14 @@
   font-variant-numeric: tabular-nums;
 }
 .band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
-.band__foot { grid-area: foot; font: var(--type-caption); color: var(--card-muted); }
+.band__foot { grid-area: foot; font: var(--band-foot-font, var(--type-caption)); color: var(--band-foot-ink, var(--card-muted)); }
 .card--3 .band__foot { color: inherit; opacity: 0.7; }
 /* band stack: ONE card boundary; bands are frameless inside it, a hairline
    between each. Bands may still carry slot tints (card--2 / card--3). */
 .band-stack {
   display: grid;
-  border: var(--border-w) solid var(--card-border);
-  border-radius: var(--r-card);
+  border: var(--border-w) solid var(--band-stack-border, var(--card-border));
+  border-radius: var(--band-stack-radius, var(--r-card));
   overflow: hidden;
 }
 .band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
@@ -164,7 +164,7 @@
 
 /* ---- picker: horizontal snap picker, centre value big ----
    <div class="picker"><div class="picker__rail"><button class="picker__item">100</button>…</div><span class="picker__unit">ml</span></div> */
-.picker { display: grid; gap: var(--sp-1); justify-items: center; position: relative; }
+.picker { display: grid; gap: var(--picker-gap, var(--sp-1)); justify-items: center; position: relative; }
 .picker__rail {
   width: 100%;
   display: grid;
@@ -172,7 +172,7 @@
   /* side padding = one third of the rail, so the first and last value can sit
      in the centre; the content box is then one third wide, and each column
      fills it (percent columns resolve against the content box) */
-  padding-inline: calc(100% / 3);
+  padding-inline: var(--picker-rail-pad-x, calc(100% / 3));
   grid-auto-columns: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -185,8 +185,8 @@
   border: 0;
   background: transparent;
   color: inherit;
-  padding: var(--sp-2) 0;
-  font: var(--type-stat);
+  padding: var(--picker-item-pad-y, var(--sp-2)) var(--picker-item-pad-x, 0);
+  font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
   opacity: 0.3;
@@ -205,7 +205,7 @@
   left: calc(100% / 3);
 }
 .picker::after { left: auto; right: calc(100% / 3); }
-.picker__unit { font: var(--type-caption); color: var(--card-muted); }
+.picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
 .card--3 .picker__unit { color: inherit; opacity: 0.7; }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
@@ -221,30 +221,30 @@
 .badge {
   display: inline-grid;
   place-items: center;
-  min-width: var(--badge);
-  height: var(--badge);
-  padding: 0 var(--sp-2);
-  border-radius: var(--r-chip);
-  background: var(--accent);
-  color: var(--on-accent);
-  font: var(--type-label);
+  min-width: var(--badge-min-w, var(--badge));
+  height: var(--badge-h, var(--badge));
+  padding: var(--badge-pad-y, 0) var(--badge-pad-x, var(--sp-2));
+  border-radius: var(--badge-radius, var(--r-chip));
+  background: var(--badge-bg, var(--accent));
+  color: var(--badge-ink, var(--on-accent));
+  font: var(--badge-font, var(--type-label));
   font-variant-numeric: tabular-nums;
   vertical-align: middle;
 }
-.badge--soft { background: var(--ink-tint); color: inherit; }
+.badge--soft { background: var(--badge-soft-bg, var(--ink-tint)); color: inherit; }
 
 /* ---- bars: three or four bars with a count on top — the glance chart ----
    <div class="bars"><div class="bar" style="--v: 16"><span>+16</span></div>… --max on the parent */
-.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--sp-2); height: calc(var(--_h) + var(--sp-8)); }
+.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--bars-gap, var(--sp-2)); height: calc(var(--_h) + var(--sp-8)); }
 .bar {
   flex: 1;
   min-width: 0;
   display: grid;
   align-content: end;
   justify-items: center;
-  gap: var(--sp-1);
+  gap: var(--bar-gap, var(--sp-1));
   height: 100%;
-  font: var(--type-caption);
+  font: var(--bar-font, var(--type-caption));
   font-weight: 700;
 }
 .bar::after {

package/css/people.css

@@ -15,9 +15,9 @@
   border-radius: 50%;
   display: grid;
   place-items: center;
-  background: var(--card-2-bg);
-  color: var(--card-2-ink);
-  font: var(--type-label);
+  background: var(--avatar-bg, var(--card-2-bg));
+  color: var(--avatar-ink, var(--card-2-ink));
+  font: var(--avatar-font, var(--type-label));
   font-size: calc(var(--_size) * 0.3);
   text-transform: uppercase;
   letter-spacing: 0.02em;
@@ -30,10 +30,10 @@
 .avatar--lg { --_size: var(--avatar-lg); }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
-.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--outline); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--outline); cursor: pointer; }
+.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); cursor: pointer; }
 /* accent avatar: the "+7" tail, the selected person */
-.avatar--on { background: var(--accent); color: var(--on-accent); }
+.avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
 .avatar--halo::before {
   content: "";
@@ -55,7 +55,7 @@
    <div class="avatar-pick"><button class="avatar-pick__item"><span class="avatar avatar--lg avatar--add">+</span><span class="avatar-pick__name">Add</span><span class="avatar-pick__role">member</span></button>…</div> */
 .avatar-pick {
   display: flex;
-  gap: var(--sp-4);
+  gap: var(--avatar-pick-gap, var(--sp-4));
   overflow-x: auto;
   scroll-snap-type: x proximity;
   scrollbar-width: none; /* starts at the card's padding edge, like every row */
@@ -64,16 +64,16 @@
 .avatar-pick__item {
   scroll-snap-align: start;
   flex: none;
-  width: var(--avatar-lg);
+  width: var(--avatar-pick-item-w, var(--avatar-lg));
   display: grid;
   justify-items: center;
-  gap: var(--sp-2);
+  gap: var(--avatar-pick-item-gap, var(--sp-2));
   border: 0;
   background: transparent;
   color: inherit;
   padding: 0;
   text-align: center;
 }
-.avatar-pick__name { font: var(--type-label); font-size: var(--fs-sm); }
-.avatar-pick__role { font: var(--type-caption); color: var(--card-muted); margin-top: calc(-1 * var(--sp-1)); }
+.avatar-pick__name { font: var(--avatar-pick-name-font, var(--type-label)); font-size: var(--avatar-pick-name-font-size, var(--fs-sm)); }
+.avatar-pick__role { font: var(--avatar-pick-role-font, var(--type-caption)); color: var(--avatar-pick-role-ink, var(--card-muted)); margin-top: calc(-1 * var(--sp-1)); }
 .card--3 .avatar-pick__role { color: inherit; opacity: 0.7; }

package/css/sheet.css

@@ -80,7 +80,7 @@
   overflow: clip;
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
-  box-shadow: var(--shadow-sheet);
+  box-shadow: var(--sheet-shadow, var(--shadow-sheet));
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -178,7 +178,7 @@
   opacity: 0.3;
   width: var(--tap-sm);
   height: var(--_handle);
-  border-radius: var(--r-chip);
+  border-radius: var(--sheet-handle-radius, var(--r-chip));
   margin: 0 auto;
   padding: 0;
   touch-action: none;
@@ -210,8 +210,8 @@
   min-height: var(--tap);
   text-align: center;
 }
-.sheet__title { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; }
-.sheet__sub { font: var(--type-caption); color: var(--card-muted); }
+.sheet__title { font: var(--sheet-title-font, var(--type-h2)); letter-spacing: var(--track-h2); margin: 0; }
+.sheet__sub { font: var(--sheet-sub-font, var(--type-caption)); color: var(--sheet-sub-ink, var(--card-muted)); }
 
 /* ============================================================
    .sheet-stage — the overlay stage: a page-height box the sheet
@@ -233,7 +233,7 @@
   margin-inline: auto;
   overflow: clip; /* not hidden: a clipped box is not a scroll container, so revealing a focused field never shifts the stage */
   container-type: size; /* the sheet's body reads this box's height as 100cqh (--_box above) */
-  background: var(--surface);
+  background: var(--sheet-stage-bg, var(--surface));
 }
 /* on an app screen the stage is the page: it takes the screen's inset back (edge to
    edge, like a step) and, after a fixed .appbar, the room the screen reserved for
@@ -268,7 +268,7 @@
   position: absolute;
   inset: 0;
   isolation: isolate; /* the ring and the hint stack inside the map only — a sheet over the map covers them */
-  color: var(--on-surface);
+  color: var(--map-ink, var(--on-surface));
   background:
     repeating-linear-gradient(75deg,  transparent 0 5.5rem,  var(--hairline) 5.5rem 6.25rem),
     repeating-linear-gradient(-18deg, transparent 0 8.75rem, var(--ink-tint) 8.75rem 9.25rem),
@@ -286,9 +286,9 @@
   height: var(--map-ring);
   translate: -50% -50%;
   border-radius: 50%;
-  border: var(--border-w) solid var(--accent);
-  background: color-mix(in srgb, var(--accent) 22%, transparent);
-  box-shadow: var(--shadow-float);
+  border: var(--border-w) solid var(--map-ring-border, var(--accent));
+  background: var(--map-ring-bg, color-mix(in srgb, var(--accent) 22%, transparent));
+  box-shadow: var(--map-ring-shadow, var(--shadow-float));
   pointer-events: none;
   z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
 }
@@ -297,10 +297,10 @@
   right: var(--sp-2);
   bottom: var(--sp-2);
   padding: var(--sp-0) var(--sp-2);
-  border-radius: var(--r-chip);
-  background: color-mix(in srgb, var(--surface) 80%, transparent);
-  color: var(--on-surface-muted);
-  font: var(--type-caption);
+  border-radius: var(--map-credit-radius, var(--r-chip));
+  background: var(--map-credit-bg, color-mix(in srgb, var(--surface) 80%, transparent));
+  color: var(--map-credit-ink, var(--on-surface-muted));
+  font: var(--map-credit-font, var(--type-caption));
   pointer-events: none;
   z-index: 1;
 }
@@ -311,12 +311,12 @@
   translate: -50% 0;
   max-width: calc(100% - 2 * var(--sp-4));
   padding: var(--sp-2) var(--sp-4);
-  border-radius: var(--r-chip);
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
-  font: var(--type-label);
+  border-radius: var(--map-hint-radius, var(--r-chip));
+  background: var(--map-hint-bg, var(--card-3-bg));
+  color: var(--map-hint-ink, var(--card-3-ink));
+  font: var(--map-hint-font, var(--type-label));
   text-align: center;
-  box-shadow: var(--shadow-float);
+  box-shadow: var(--map-hint-shadow, var(--shadow-float));
   pointer-events: none;
   z-index: 1;
 }
@@ -330,7 +330,7 @@
    the sheet gives it up itself, as --_lift — the same token a raised sheet floats on. */
 .sheet-stage > .sheet { --_lift: var(--kb, 0rem); bottom: var(--_lift); }
 .sheet-stage > .sheet--raised { --_lift: calc(var(--tap-lg) + var(--kb, 0rem)); }
-.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--r-card); border-bottom: var(--border-w) solid var(--card-border); }
+.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--sheet-raised-radius, var(--r-card)); border-bottom: var(--border-w) solid var(--card-border); }
 .sheet-stage__foot {
   position: absolute;
   inset-inline: 0;
@@ -339,8 +339,8 @@
   margin: 0;
   display: grid;
   place-items: center;
-  font: var(--type-caption);
-  color: var(--card-3-ink);
+  font: var(--sheet-stage-foot-font, var(--type-caption));
+  color: var(--sheet-stage-foot-ink, var(--card-3-ink));
   z-index: 2;
 }
 

package/css/theme.template.css

@@ -4,9 +4,12 @@
    Not part of the bundle: copy this file into the project as its own
    `theme.css` and load it AFTER cardds.css. It is the whole public
    surface of the system — the four size bases and the colour roles.
-   Everything else in tokens.css is derived from these; a project never
-   sets a derived token (--sp-4, --fs-h1, --r-card, --tap, --sheet-*…)
-   and never a multiplier.
+   Widest first: a BASE moves a whole family; a role / root token one meaning
+   everywhere (--accent, --btn-h, --header-h…); a KNOB one component
+   (--btn-pad-x, --chip-bg… — docs/knobs.md lists them; also settable on any
+   element, for the components inside it). Never a step of the scale
+   (--sp-4, --fs-h1, --r-card), a multiplier, a private --_* or a published
+   value (--card-pad, --bar-reserve, --sheet-*).
 
    The values below are the defaults (the wireframe): as shipped, this
    file changes nothing (tests/tokens.spec.js holds it to that).

package/dist/actions/Btn.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentPropsWithoutRef } from 'react';
-export interface BtnProps extends ComponentPropsWithoutRef<'button'> {
+import { type ComponentProps } from 'react';
+export interface BtnProps extends ComponentProps<'button'> {
     /** the filled accent button — the one forward move */
     primary?: boolean;
     /** ink on whatever it sits on, a faint outline */
@@ -16,76 +16,128 @@ export interface BtnProps extends ComponentPropsWithoutRef<'button'> {
  * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
  */
 export declare function Btn({ primary, quiet, block, xl, href, className, type, ...rest }: BtnProps): import("react").DetailedReactHTMLElement<{
-    form?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
+    ref?: import("react").Ref<HTMLButtonElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    disabled?: boolean | undefined;
+    form?: string | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    name?: string | undefined;
+    value?: string | readonly string[] | number | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: import("react").CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    color?: string | undefined | undefined;
-    id?: string | undefined | undefined;
-    lang?: string | undefined | undefined;
-    name?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    part?: string | undefined | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
-    tabIndex?: number | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
+    "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
     "aria-modal"?: (boolean | "true" | "false") | undefined;
     "aria-multiline"?: (boolean | "true" | "false") | undefined;
     "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
     "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    children?: import("react").ReactNode;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    children?: import("react").ReactNode | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
-    } | undefined | undefined;
+    } | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -254,58 +306,7 @@ export declare function Btn({ primary, quiet, block, xl, href, className, type,
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-    key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    disabled?: boolean | undefined | undefined;
-    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-    formEncType?: string | undefined | undefined;
-    formMethod?: string | undefined | undefined;
-    formNoValidate?: boolean | undefined | undefined;
-    formTarget?: string | undefined | undefined;
-    value?: string | number | readonly string[] | undefined;
     href: string | undefined;
     type: "button" | "reset" | "submit" | undefined;
     className: string;
-}, HTMLElement>;
+}, HTMLButtonElement>;

package/dist/actions/BtnRow.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface BtnRowProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps } from 'react';
+export interface BtnRowProps extends ComponentProps<'div'> {
 }
 /** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use CardFoot instead. */
 export declare function BtnRow({ className, ...rest }: BtnRowProps): import("react").JSX.Element;