@keyfunc/keybricks-ds 1.0.3 → 2.1.1

package/components/forms/Dropzone.vue

@@ -12,17 +12,17 @@ function stop(e) { e.preventDefault(); e.stopPropagation() }
 function onDrop(e) { stop(e); dragging.value = false; emit('dropFiles', e.dataTransfer.files) }
 </script>
 <template>
-  <div v-if="file" :style="{ height, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-control)', background: 'var(--bg-inset)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, boxSizing: 'border-box', ...style }">
+  <div v-if="file" :style="{ height, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-control)', background: 'var(--bg-inset)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '8px', boxSizing: 'border-box', ...style }">
     <span style="color:var(--success-strong)"><Icon name="file-check" :size="22" :stroke-width="1.5" /></span>
     <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);color:var(--text-heading)">{{ file }}</span>
-    <button type="button" @click="$emit('remove')" style="display:flex;align-items:center;gap:4px;border:none;background:transparent;cursor:pointer;color:var(--danger);font-family:var(--font-sans);font-size:var(--text-sm);padding:0"><Icon name="trash-2" :size="13" />Remove</button>
+    <button type="button" data-link="" @click="$emit('remove')" style="display:flex;align-items:center;gap:4px;border:none;background:transparent;cursor:pointer;color:var(--danger);font-family:var(--font-sans);font-size:var(--text-base);padding:0;text-decoration-line:var(--link-line, none);text-underline-offset:2px"><Icon name="trash-2" :size="13" />Remove</button>
   </div>
   <div v-else @click="!disabled && $emit('click')" @mouseenter="hover = true" @mouseleave="hover = false"
     @dragenter="!disabled && ((e) => { stop(e); dragging = true })($event)" @dragover="!disabled && stop($event)"
     @dragleave="!disabled && ((e) => { stop(e); dragging = false })($event)" @drop="!disabled && onDrop($event)"
-    :style="{ height, borderRadius: 'var(--radius-lg)', border: `1px dashed ${toneColor[tone]}`, background: error ? 'var(--danger-bg)' : dragActive ? 'var(--soft-bg)' : 'transparent', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, cursor: disabled ? 'not-allowed' : 'pointer', boxSizing: 'border-box', opacity: disabled ? .5 : 1, transition: 'var(--t-hover)', ...style }">
-    <span :style="{ color: error ? 'var(--danger)' : dragActive ? 'var(--action-primary)' : 'var(--text-muted)', marginBottom: 6 }"><Icon :name="error ? 'triangle-alert' : 'upload'" :size="22" :stroke-width="1.5" /></span>
+    :style="{ height, borderRadius: 'var(--radius-lg)', border: `1px dashed ${toneColor[tone]}`, background: error ? 'var(--danger-bg)' : dragActive ? 'var(--soft-bg)' : 'transparent', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '4px', cursor: disabled ? 'not-allowed' : 'pointer', boxSizing: 'border-box', opacity: disabled ? .5 : 1, transition: 'var(--t-hover)', ...style }">
+    <span :style="{ color: error ? 'var(--danger)' : dragActive ? 'var(--action-primary)' : 'var(--text-muted)', marginBottom: '6px' }"><Icon :name="error ? 'triangle-alert' : 'upload'" :size="22" :stroke-width="1.5" /></span>
     <span :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: error ? 'var(--danger-text)' : dragActive ? 'var(--action-primary)' : 'var(--text-heading)' }">{{ error || (dragActive ? 'Drop file to upload' : title) }}</span>
-    <span :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: dragActive ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ hint }}</span>
+    <span :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', color: dragActive ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ hint }}</span>
   </div>
 </template>

package/components/forms/Field.d.ts

@@ -1,8 +1,12 @@
 import * as React from "react";
-/** Label + control wrapper. Label 12px/500 #525252; required appends a red " *" after the label. */
+/** Label + control wrapper. The label uses the tier's control text at weight 500 (text-body); required appends a red " *". */
 export interface FieldProps {
   label: string;
   required?: boolean;
+  /** Size tier for the label and the control inside. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
+  /** Label beside the control instead of above it — the filter-bar layout */
+  inline?: boolean;
   /** Muted helper text below the control; hidden when `error` is set */
   hint?: string;
   /** Red error text below the control; also expected to drive the control's own error look */

package/components/forms/Field.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-/** Form field wrapper: 12px/500 label (red + * when required) above the control, optional hint/error below. */
-export function Field({ label, required, hint, error, children, style }) {
+/** Form field wrapper: label (tier control text, weight 500; red + * when required) above the control, optional hint/error below. `size` sets the tier for the whole field; `inline` puts the label beside the control for filter bars. */
+export function Field({ label, required, hint, error, size, inline, children, style }) {
   return (
-    <div style={{ display: "flex", flexDirection: "column", ...style }}>
-      <label style={{ paddingBottom: 6, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}{required ? <span style={{ color: "var(--danger)" }}> *</span> : null}</label>
+    <div data-size={size} style={{ display: "flex", flexDirection: inline ? "row" : "column", ...(inline ? { alignItems: "center", gap: "var(--control-gap)" } : null), ...style }}>
+      <label style={{ paddingBottom: inline ? 0 : 8, whiteSpace: inline ? "nowrap" : undefined, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-body)" }}>{label}{required ? <span style={{ color: "var(--danger)" }}> *</span> : null}</label>
       {children}
       {error ? <span style={{ paddingTop: 5, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--danger)" }}>{error}</span>
         : hint ? <span style={{ paddingTop: 5, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-muted)" }}>{hint}</span> : null}

package/components/forms/Field.vue

@@ -1,10 +1,10 @@
 <script setup>
-// Form field wrapper: 12px/500 label (red + * when required) above the control, optional hint/error below.
-defineProps({ label: String, required: Boolean, hint: String, error: String, style: Object })
+// Form field wrapper: label (tier control text, weight 500; red + * when required) above the control, optional hint/error below. `size` sets the tier for the whole field; `inline` puts the label beside the control for filter bars.
+defineProps({ label: String, required: Boolean, hint: String, error: String, size: String, inline: Boolean, style: Object })
 </script>
 <template>
-  <div :style="{ display: 'flex', flexDirection: 'column', ...style }">
-    <label style="padding-bottom:6px;font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-body)">{{ label }}<span v-if="required" style="color:var(--danger)"> *</span></label>
+  <div :data-size="size" :style="{ display: 'flex', flexDirection: inline ? 'row' : 'column', ...(inline ? { alignItems: 'center', gap: 'var(--control-gap)' } : null), ...style }">
+    <label :style="{ paddingBottom: inline ? 0 : '8px', whiteSpace: inline ? 'nowrap' : undefined, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-body)' }">{{ label }}<span v-if="required" style="color:var(--danger)"> *</span></label>
     <slot />
     <span v-if="error" style="padding-top:5px;font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--danger)">{{ error }}</span>
     <span v-else-if="hint" style="padding-top:5px;font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)">{{ hint }}</span>

package/components/forms/Input.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
-/** 36px r8 hairline text input; readOnly = #fafafa inset, disabled = 50% opacity, error = red border+ring. Extends native input props. */
+/** r8 hairline text input at the region's tier height (sm 24 · md 32 · lg 36); readOnly = inset fill, disabled = 50% opacity, error = red border+ring. Extends native input props. */
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /** Size tier. Omit to inherit the enclosing region's tier (the default); controls that share a row must share a tier. */
+  size?: "sm" | "md" | "lg";
   readOnly?: boolean;
   disabled?: boolean;
   error?: boolean;
@@ -9,6 +11,8 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 export declare function Input(props: InputProps): JSX.Element;
 /** r8 hairline textarea (default 90px). showCount + maxLength renders a live "n/max" character counter that turns red past the limit. */
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Size tier for the text; omit to inherit */
+  size?: "sm" | "md" | "lg";
   error?: boolean;
   disabled?: boolean;
   showCount?: boolean;

package/components/forms/Input.jsx

@@ -3,18 +3,18 @@ import React from "react";
 import { inputBase } from "./input-base.js";
 export { inputBase };
 
-/** Text input, 36px r8. readOnly = #fafafa inset; disabled = 50% opacity; error = red border + ring. */
-export function Input({ readOnly, disabled, error, style, ...rest }) {
+/** Text input, r8, tier height (sm 24 · md 32 · lg 36 — omit `size` to inherit the region's tier). readOnly = inset fill; disabled = 50% opacity; error = red border + ring. */
+export function Input({ readOnly, disabled, error, size, style, ...rest }) {
   const [focus, setFocus] = React.useState(false);
-  return <input readOnly={readOnly} disabled={disabled} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
+  return <input readOnly={readOnly} disabled={disabled} data-size={size} data-field={readOnly || disabled ? undefined : ""} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
     style={{ ...inputBase, ...(readOnly ? { background: "var(--bg-inset)", color: "var(--text-secondary)" } : null),
       ...(error ? { borderColor: "var(--danger)" } : null),
       ...(focus && !readOnly && !disabled ? { borderColor: error ? "var(--danger)" : "var(--focus-border)", boxShadow: `0 0 0 2px ${error ? "var(--danger-bg)" : "var(--focus-ring)"}` } : null),
       ...(disabled ? { opacity: .5, cursor: "not-allowed", background: "var(--bg-inset)" } : null), ...style }} {...rest} />;
 }
 
-/** Multiline textarea, r8, default 90px tall. showCount + maxLength renders a bottom-right "n/max" counter (red past the limit). */
-export function Textarea({ style, rows = 4, error, disabled, showCount, maxLength, value, defaultValue, onChange, ...rest }) {
+/** Multiline textarea, r8, default 90px tall; text follows the region's tier. showCount + maxLength renders a bottom-right "n/max" counter (red past the limit). */
+export function Textarea({ style, rows = 4, error, disabled, showCount, maxLength, size, value, defaultValue, onChange, ...rest }) {
   const [focus, setFocus] = React.useState(false);
   const [inner, setInner] = React.useState(defaultValue || "");
   const val = value != null ? value : inner;
@@ -22,11 +22,11 @@ export function Textarea({ style, rows = 4, error, disabled, showCount, maxLengt
   const over = maxLength != null && len > maxLength;
   return (
     <div style={{ position: "relative" }}>
-      <textarea rows={rows} disabled={disabled} maxLength={showCount ? undefined : maxLength}
+      <textarea rows={rows} disabled={disabled} data-size={size} data-field={disabled ? undefined : ""} maxLength={showCount ? undefined : maxLength}
         value={value} defaultValue={value == null ? defaultValue : undefined}
         onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
         onChange={(e) => { if (value == null) setInner(e.target.value); onChange && onChange(e); }}
-        style={{ ...inputBase, height: 90, resize: "vertical", paddingBottom: showCount ? 22 : 8,
+        style={{ ...inputBase, height: 90, resize: "vertical", paddingTop: 8, paddingBottom: showCount ? 22 : 8,
           ...(error || over ? { borderColor: "var(--danger)" } : null),
           ...(focus && !disabled ? { borderColor: error || over ? "var(--danger)" : "var(--focus-border)", boxShadow: `0 0 0 2px ${error || over ? "var(--danger-bg)" : "var(--focus-ring)"}` } : null),
           ...(disabled ? { opacity: .5, cursor: "not-allowed", background: "var(--bg-inset)" } : null), ...style }} {...rest} />

package/components/forms/Input.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { inputBase } from './input-base.js'
-// Text input, 36px r8. v-model. readonly = inset fill; disabled = 50% opacity; error = red border + ring.
+// Text input, r8, tier height (sm 24 · md 32 · lg 36 — omit `size` to inherit the region's tier). v-model. readonly = inset fill; disabled = 50% opacity; error = red border + ring.
 // Multiline variant lives in Textarea.vue.
-const props = defineProps({ modelValue: String, readonly: Boolean, disabled: Boolean, error: Boolean, style: Object })
+const props = defineProps({ modelValue: String, readonly: Boolean, disabled: Boolean, error: Boolean, size: String, style: Object })
 defineEmits(['update:modelValue'])
 const focus = ref(false)
 const s = computed(() => ({ ...inputBase, ...(props.readonly ? { background: 'var(--bg-inset)', color: 'var(--text-secondary)' } : null),
@@ -12,5 +12,5 @@ const s = computed(() => ({ ...inputBase, ...(props.readonly ? { background: 'va
   ...(props.disabled ? { opacity: .5, cursor: 'not-allowed', background: 'var(--bg-inset)' } : null), ...props.style }))
 </script>
 <template>
-  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :readonly="readonly" :disabled="disabled" @focus="focus = true" @blur="focus = false" :style="s" />
+  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :readonly="readonly" :disabled="disabled" :data-size="size" :data-field="readonly || disabled ? undefined : ''" @focus="focus = true" @blur="focus = false" :style="s" />
 </template>

package/components/forms/MultiSelect.d.ts

@@ -9,6 +9,8 @@ export interface MultiSelectProps {
   maxTags?: number;
   disabled?: boolean;
   width?: number | string;
+  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   onChange?: (value: string[]) => void;
   style?: React.CSSProperties;
 }

package/components/forms/MultiSelect.jsx

@@ -3,29 +3,31 @@ import { Icon } from "../icons/Icon.jsx";
 import { Checkbox } from "./Checkbox.jsx";
 import { Tag } from "../display/Tag.jsx";
 
-/** Multi-select dropdown: checkbox option list, selected values render as removable tags in the field (overflow collapses to "+n"), clear-all ×. */
-export function MultiSelect({ options = [], value = [], placeholder = "Select...", maxTags = 2, disabled, width, onChange, style }) {
+const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
+
+/** Multi-select dropdown: checkbox option list, selected values render as removable tags in the field (overflow collapses to "+n"), clear-all ×. Field, tags and option rows take the region's tier (omit `size` to inherit). */
+export function MultiSelect({ options = [], value = [], placeholder = "Select...", maxTags = 2, disabled, width, size, onChange, style }) {
   const [open, setOpen] = React.useState(false);
   const root = React.useRef(null);
   React.useEffect(() => { const h = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []);
   const toggle = (o) => { const next = value.includes(o) ? value.filter(x => x !== o) : [...value, o]; onChange && onChange(next); };
   const shown = value.slice(0, maxTags), extra = value.length - shown.length;
   return (
-    <div ref={root} style={{ position: "relative", width, ...style }}>
-      <div onClick={() => !disabled && setOpen(!open)} style={{ minHeight: "var(--h-input)", borderRadius: "var(--radius-md)", border: `1px solid ${open ? "var(--focus-border)" : "var(--border-control)"}`, boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", background: "var(--bg-surface)", padding: "5px 30px 5px 8px", boxSizing: "border-box", display: "flex", alignItems: "center", flexWrap: "wrap", gap: 4, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, position: "relative" }}>
-        {value.length === 0 && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-muted)", paddingLeft: 4 }}>{placeholder}</span>}
+    <div ref={root} data-size={size} style={{ position: "relative", width, ...style }}>
+      <div data-field={disabled ? undefined : ""} onClick={() => !disabled && setOpen(!open)} style={{ minHeight: "var(--control-h)", borderRadius: "var(--radius-md)", border: `1px solid ${open ? "var(--focus-border)" : "var(--field-border, var(--border-control))"}`, boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", background: "var(--bg-surface)", padding: "calc((var(--control-h) - var(--tag-h) - 2px) / 2) calc(var(--control-px) + var(--control-icon) * 2 + 8px) calc((var(--control-h) - var(--tag-h) - 2px) / 2) calc(var(--control-px) - 4px)", boxSizing: "border-box", display: "flex", alignItems: "center", flexWrap: "wrap", gap: 4, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, position: "relative" }}>
+        {value.length === 0 && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-muted)", paddingLeft: 4 }}>{placeholder}</span>}
         {shown.map(v => <Tag key={v} removable onRemove={() => toggle(v)}>{v}</Tag>)}
         {extra > 0 && <Tag>+{extra}</Tag>}
-        <span style={{ position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 2, color: "var(--text-muted)" }}>
-          {value.length > 0 && <button type="button" onClick={(e) => { e.stopPropagation(); onChange && onChange([]); }} style={{ border: "none", background: "transparent", cursor: "pointer", color: "inherit", display: "flex", padding: 0 }}><Icon name="x" size={13} /></button>}
-          <span style={{ display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-down" size={14} /></span>
+        <span style={{ position: "absolute", right: "var(--control-px)", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 4, color: "var(--text-muted)" }}>
+          {value.length > 0 && <button type="button" aria-label="Clear" data-ink="" onClick={(e) => { e.stopPropagation(); onChange && onChange([]); }} style={{ border: "none", background: "transparent", cursor: "pointer", color: "var(--ink, var(--text-muted))", display: "flex", padding: 0 }}><Icon name="x" size={16} style={tierIcon} /></button>}
+          <span style={{ display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-down" size={16} style={tierIcon} /></span>
         </span>
       </div>
       {open && <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0, zIndex: "var(--z-menu)", background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-menu)", padding: 4, maxHeight: 208, overflowY: "auto" }}>
-        {options.map(o => <div key={o} role="option" aria-selected={value.includes(o)} tabIndex={0} onClick={() => toggle(o)} style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", borderRadius: "var(--radius-sm)", cursor: "pointer", background: "transparent" }}
+        {options.map(o => <div key={o} role="option" aria-selected={value.includes(o)} tabIndex={0} onClick={() => toggle(o)} style={{ display: "flex", alignItems: "center", gap: 8, height: "var(--control-h)", padding: "0 10px", boxSizing: "border-box", borderRadius: "var(--radius-sm)", cursor: "pointer", background: "transparent" }}
           onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-hover)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
-          <Checkbox size="sm" checked={value.includes(o)} onChange={() => toggle(o)} />
-          <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-heading)" }}>{o}</span>
+          <Checkbox checked={value.includes(o)} onChange={() => toggle(o)} />
+          <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", color: "var(--text-heading)" }}>{o}</span>
         </div>)}
       </div>}
     </div>

package/components/forms/MultiSelect.vue

@@ -3,8 +3,9 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import Icon from '../icons/Icon.vue'
 import Checkbox from './Checkbox.vue'
 import Tag from '../display/Tag.vue'
-// Multi-select dropdown: checkbox options; picks render as removable tags with "+n" overflow and clear-all ×.
-const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: { type: Array, default: () => [] }, placeholder: { type: String, default: 'Select...' }, maxTags: { type: Number, default: 2 }, disabled: Boolean, width: [Number, String], style: Object })
+// Multi-select dropdown: checkbox options; picks render as removable tags with "+n" overflow and clear-all ×. Field, tags and option rows take the region's tier (omit `size` to inherit).
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: { type: Array, default: () => [] }, placeholder: { type: String, default: 'Select...' }, maxTags: { type: Number, default: 2 }, disabled: Boolean, width: [Number, String], size: String, style: Object })
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
 const emit = defineEmits(['update:modelValue'])
 const open = ref(false), root = ref(null)
 function toggle(o) { emit('update:modelValue', props.modelValue.includes(o) ? props.modelValue.filter(x => x !== o) : [...props.modelValue, o]) }
@@ -15,20 +16,20 @@ onMounted(() => document.addEventListener('mousedown', onDoc))
 onUnmounted(() => document.removeEventListener('mousedown', onDoc))
 </script>
 <template>
-  <div ref="root" :style="{ position: 'relative', width: typeof width === 'number' ? width + 'px' : width, ...style }">
-    <div @click="!disabled && (open = !open)" :style="{ minHeight: 'var(--h-input)', borderRadius: 'var(--radius-md)', border: `1px solid ${open ? 'var(--focus-border)' : 'var(--border-control)'}`, boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', background: 'var(--bg-surface)', padding: '5px 30px 5px 8px', boxSizing: 'border-box', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, position: 'relative' }">
-      <span v-if="modelValue.length === 0" style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-muted);padding-left:4px">{{ placeholder }}</span>
+  <div ref="root" :data-size="size" :style="{ position: 'relative', width: typeof width === 'number' ? width + 'px' : width, ...style }">
+    <div :data-field="disabled ? undefined : ''" @click="!disabled && (open = !open)" :style="{ minHeight: 'var(--control-h)', borderRadius: 'var(--radius-md)', border: `1px solid ${open ? 'var(--focus-border)' : 'var(--field-border, var(--border-control))'}`, boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', background: 'var(--bg-surface)', padding: 'calc((var(--control-h) - var(--tag-h) - 2px) / 2) calc(var(--control-px) + var(--control-icon) * 2 + 8px) calc((var(--control-h) - var(--tag-h) - 2px) / 2) calc(var(--control-px) - 4px)', boxSizing: 'border-box', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, position: 'relative' }">
+      <span v-if="modelValue.length === 0" style="font-family:var(--font-sans);font-size:var(--control-text);line-height:var(--control-leading);letter-spacing:var(--control-tracking);color:var(--text-muted);padding-left:4px">{{ placeholder }}</span>
       <Tag v-for="v in shown" :key="v" removable @remove="toggle(v)">{{ v }}</Tag>
       <Tag v-if="extra > 0">+{{ extra }}</Tag>
-      <span style="position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;color:var(--text-muted)">
-        <button v-if="modelValue.length" type="button" @click.stop="emit('update:modelValue', [])" style="border:none;background:transparent;cursor:pointer;color:inherit;display:flex;padding:0"><Icon name="x" :size="13" /></button>
-        <span :style="{ display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-down" :size="14" /></span>
+      <span style="position:absolute;right:var(--control-px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;color:var(--text-muted)">
+        <button v-if="modelValue.length" type="button" aria-label="Clear" data-ink="" @click.stop="emit('update:modelValue', [])" style="border:none;background:transparent;cursor:pointer;color:var(--ink, var(--text-muted));display:flex;padding:0"><Icon name="x" :size="16" :style="tierIcon" /></button>
+        <span :style="{ display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-down" :size="16" :style="tierIcon" /></span>
       </span>
     </div>
     <div v-if="open" style="position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-menu);background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-menu);padding:4px;max-height:208px;overflow-y:auto">
-      <div v-for="o in options" :key="o" role="option" :aria-selected="modelValue.includes(o)" tabindex="0" @click="toggle(o)" class="kb-ms-row" style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer">
-        <Checkbox size="sm" :checked="modelValue.includes(o)" @change="toggle(o)" />
-        <span style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-heading)">{{ o }}</span>
+      <div v-for="o in options" :key="o" role="option" :aria-selected="modelValue.includes(o)" tabindex="0" @click="toggle(o)" class="kb-ms-row" style="display:flex;align-items:center;gap:8px;height:var(--control-h);padding:0 10px;box-sizing:border-box;border-radius:var(--radius-sm);cursor:pointer">
+        <Checkbox :checked="modelValue.includes(o)" @change="toggle(o)" />
+        <span style="font-family:var(--font-sans);font-size:var(--control-text);letter-spacing:var(--control-tracking);color:var(--text-heading)">{{ o }}</span>
       </div>
     </div>
   </div>

package/components/forms/NumberStepper.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
-/** Segmented −/value/+ number stepper (25.5px, r4) — "Preview rows" control. */
+/** Segmented −/value/+ number stepper at the region's tier height, r8 — "Preview rows" control. */
 export interface NumberStepperProps {
+  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   value?: number;
   onChange?: (next: number) => void;
   step?: number;

package/components/forms/NumberStepper.jsx

@@ -1,15 +1,15 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Segmented − / value / + stepper, 25.5px tall, r4 ("Preview rows"). Buttons disable themselves at min/max. */
-export function NumberStepper({ value = 100, onChange, step = 10, min = 0, max, disabled, style }) {
+/** Segmented − / value / + stepper, r8, tier height ("Preview rows" — omit `size` to inherit the region's tier). Buttons disable themselves at min/max. */
+export function NumberStepper({ value = 100, onChange, step = 10, min = 0, max, disabled, size, style }) {
   const atMin = value <= min, atMax = max != null && value >= max;
-  const seg = (dis) => ({ width: 30, display: "flex", alignItems: "center", justifyContent: "center", cursor: dis ? "not-allowed" : "pointer", color: dis ? "var(--text-muted)" : "var(--text-body)", alignSelf: "stretch", background: "transparent", border: "none", padding: 0 });
+  const seg = (dis) => ({ width: "var(--control-h)", display: "flex", alignItems: "center", justifyContent: "center", cursor: dis ? "not-allowed" : "pointer", color: dis ? "var(--text-muted)" : "var(--text-body)", alignSelf: "stretch", background: dis ? "transparent" : "var(--wash, transparent)", transition: "var(--t-hover)", border: "none", padding: 0 });
   return (
-    <div style={{ display: "inline-flex", alignItems: "center", height: 25.5, borderRadius: "var(--radius-sm)", border: "1px solid var(--border-control)", overflow: "hidden", background: "var(--bg-surface)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...style }}>
-      <button type="button" disabled={disabled || atMin} style={seg(disabled || atMin)} onClick={() => onChange && onChange(Math.max(min, value - step))}><Icon name="minus" size={12} /></button>
-      <span style={{ minWidth: 34, textAlign: "center", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-primary)", borderLeft: "1px solid var(--border-control)", borderRight: "1px solid var(--border-control)", alignSelf: "stretch", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0 6px" }}>{value}</span>
-      <button type="button" disabled={disabled || atMax} style={seg(disabled || atMax)} onClick={() => onChange && onChange(max != null ? Math.min(max, value + step) : value + step)}><Icon name="plus" size={12} /></button>
+    <div data-size={size} data-field={disabled ? undefined : ""} style={{ display: "inline-flex", alignItems: "center", height: "var(--control-h)", borderRadius: "var(--radius-md)", border: "1px solid var(--field-border, var(--border-control))", overflow: "hidden", background: "var(--bg-surface)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...style }}>
+      <button type="button" disabled={disabled || atMin} data-wash="" aria-label="Decrease" style={seg(disabled || atMin)} onClick={() => onChange && onChange(Math.max(min, value - step))}><Icon name="minus" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /></button>
+      <span style={{ minWidth: 34, textAlign: "center", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", fontVariantNumeric: "tabular-nums", color: "var(--text-primary)", borderLeft: "1px solid var(--border-control)", borderRight: "1px solid var(--border-control)", alignSelf: "stretch", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0 6px" }}>{value}</span>
+      <button type="button" disabled={disabled || atMax} data-wash="" aria-label="Increase" style={seg(disabled || atMax)} onClick={() => onChange && onChange(max != null ? Math.min(max, value + step) : value + step)}><Icon name="plus" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /></button>
     </div>
   );
 }

package/components/forms/NumberStepper.vue

@@ -1,17 +1,18 @@
 <script setup>
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Segmented − / value / + stepper, 25.5px tall, r4 ("Preview rows"). Buttons disable themselves at min/max.
-const props = defineProps({ modelValue: { type: Number, default: 100 }, step: { type: Number, default: 10 }, min: { type: Number, default: 0 }, max: Number, disabled: Boolean, style: Object })
+// Segmented − / value / + stepper, r8, tier height ("Preview rows" — omit `size` to inherit the region's tier). Buttons disable themselves at min/max.
+const props = defineProps({ modelValue: { type: Number, default: 100 }, step: { type: Number, default: 10 }, min: { type: Number, default: 0 }, max: Number, disabled: Boolean, size: String, style: Object })
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
 const emit = defineEmits(['update:modelValue'])
 const atMin = computed(() => props.modelValue <= props.min)
 const atMax = computed(() => props.max != null && props.modelValue >= props.max)
-function seg(dis) { return { width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: dis ? 'not-allowed' : 'pointer', color: dis ? 'var(--text-muted)' : 'var(--text-body)', alignSelf: 'stretch', background: 'transparent', border: 'none', padding: 0 } }
+function seg(dis) { return { width: 'var(--control-h)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: dis ? 'not-allowed' : 'pointer', color: dis ? 'var(--text-muted)' : 'var(--text-body)', alignSelf: 'stretch', background: dis ? 'transparent' : 'var(--wash, transparent)', transition: 'var(--t-hover)', border: 'none', padding: 0 } }
 </script>
 <template>
-  <div :style="{ display: 'inline-flex', alignItems: 'center', height: 25.5, borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-control)', overflow: 'hidden', background: 'var(--bg-surface)', boxSizing: 'border-box', opacity: disabled ? .5 : 1, ...style }">
-    <button type="button" :disabled="disabled || atMin" :style="seg(disabled || atMin)" @click="emit('update:modelValue', Math.max(min, modelValue - step))"><Icon name="minus" :size="12" /></button>
-    <span style="min-width:34px;text-align:center;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);border-left:1px solid var(--border-control);border-right:1px solid var(--border-control);align-self:stretch;display:inline-flex;align-items:center;justify-content:center;padding:0 6px">{{ modelValue }}</span>
-    <button type="button" :disabled="disabled || atMax" :style="seg(disabled || atMax)" @click="emit('update:modelValue', max != null ? Math.min(max, modelValue + step) : modelValue + step)"><Icon name="plus" :size="12" /></button>
+  <div :data-size="size" :data-field="disabled ? undefined : ''" :style="{ display: 'inline-flex', alignItems: 'center', height: 'var(--control-h)', borderRadius: 'var(--radius-md)', border: '1px solid var(--field-border, var(--border-control))', overflow: 'hidden', background: 'var(--bg-surface)', boxSizing: 'border-box', opacity: disabled ? .5 : 1, ...style }">
+    <button type="button" :disabled="disabled || atMin" data-wash="" aria-label="Decrease" :style="seg(disabled || atMin)" @click="emit('update:modelValue', Math.max(min, modelValue - step))"><Icon name="minus" :size="16" :style="tierIcon" /></button>
+    <span style="min-width:34px;text-align:center;font-family:var(--font-sans);font-size:var(--control-text);letter-spacing:var(--control-tracking);font-variant-numeric:tabular-nums;color:var(--text-primary);border-left:1px solid var(--border-control);border-right:1px solid var(--border-control);align-self:stretch;display:inline-flex;align-items:center;justify-content:center;padding:0 6px">{{ modelValue }}</span>
+    <button type="button" :disabled="disabled || atMax" data-wash="" aria-label="Increase" :style="seg(disabled || atMax)" @click="emit('update:modelValue', max != null ? Math.min(max, modelValue + step) : modelValue + step)"><Icon name="plus" :size="16" :style="tierIcon" /></button>
   </div>
 </template>

package/components/forms/Radio.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/** Radio — circle at the region's tier (sm 14 · md/lg 16); filled action-blue dot when selected. Hover darkens the ring, focus shows the 2px ring. */
+export interface RadioProps {
+  checked?: boolean;
+  onChange?: (checked: true) => void;
+  label?: string;
+  /** Muted second line under the label */
+  description?: string;
+  /** Size tier. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Radio(props: RadioProps): JSX.Element;
+/** Single choice from a small set. Arrow keys move between enabled options. */
+export interface RadioGroupProps {
+  options?: Array<string | { label: string; value: string; description?: string; disabled?: boolean }>;
+  value?: string;
+  onChange?: (value: string) => void;
+  /** Horizontal layout */
+  row?: boolean;
+  /** Size tier for the whole group. Omit to inherit (the default). */
+  size?: "sm" | "md" | "lg";
+  /** plain (default) · cards — each option is a bordered selectable card */
+  variant?: "plain" | "cards";
+  /** Disables the whole group */
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;

package/components/forms/Radio.jsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/**
+ * Radio — circle at the region's tier (sm 14 · md/lg 16, --check-size), 1.5px border, filled action-blue dot when selected.
+ * hover darkens the ring; keyboard focus shows the 2px focus ring; disabled = 50% opacity.
+ * description renders a muted second line under the label (settings-style choices).
+ */
+export function Radio({ checked, onChange, label, description, size, disabled, style }) {
+  const d = { box: "var(--check-size)", dot: "calc(var(--check-size) / 2)" };
+  const [hover, setHover] = React.useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const ring = checked ? "var(--action-primary)" : hover && !disabled ? "var(--text-muted)" : "var(--checkbox-border)";
+  return (
+    <label role="radio" data-size={size} aria-checked={!!checked} aria-disabled={disabled || undefined} tabIndex={disabled ? -1 : 0}
+      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
+      onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); !disabled && onChange && onChange(true); } }}
+      style={{ display: "inline-flex", alignItems: description ? "flex-start" : "center", verticalAlign: "middle", lineHeight: "var(--control-leading)", gap: "var(--control-gap)", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, outline: "none", ...style }}
+      onClick={() => !disabled && onChange && onChange(true)}>
+      <span style={{ width: d.box, height: d.box, marginTop: description ? 2 : 0, borderRadius: "var(--radius-full)", boxSizing: "border-box", border: `1.5px solid ${ring}`, background: "var(--bg-surface)", boxShadow: focus && !disabled ? "0 0 0 2px var(--focus-ring)" : "none", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "var(--t-hover)" }}>
+        {checked ? <span style={{ width: d.dot, height: d.dot, borderRadius: "var(--radius-full)", background: "var(--action-primary)" }}></span> : null}
+      </span>
+      {label || description ? <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-body)" }}>{label}</span> : null}
+        {description ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-muted)" }}>{description}</span> : null}
+      </span> : null}
+    </label>
+  );
+}
+
+/**
+ * RadioGroup — single choice from a small set. Vertical (default) or `row`.
+ * options: string[] | { label, value, description?, disabled? }[]
+ * Arrow keys move the selection between enabled options (WAI-ARIA radiogroup).
+ * variant="cards" renders each option as a bordered selectable card (plan pickers, migration strategies).
+ */
+export function RadioGroup({ options = [], value, onChange, row, size, variant = "plain", disabled, style }) {
+  const opts = options.map((o) => (typeof o === "string" ? { label: o, value: o } : o));
+  const enabled = opts.filter((o) => !o.disabled && !disabled);
+  const onKey = (e) => {
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key) || !enabled.length) return;
+    e.preventDefault();
+    const i = enabled.findIndex((o) => o.value === value);
+    const next = e.key === "ArrowDown" || e.key === "ArrowRight" ? enabled[(i + 1) % enabled.length] : enabled[(i - 1 + enabled.length) % enabled.length];
+    onChange && onChange(next.value);
+  };
+  if (variant === "cards") {
+    return (
+      <div role="radiogroup" data-size={size} onKeyDown={onKey} style={{ display: "flex", flexDirection: row ? "row" : "column", gap: 8, ...style }}>
+        {opts.map((o) => {
+          const on = value === o.value, off = o.disabled || disabled;
+          return <div key={o.value} onClick={() => !off && onChange && onChange(o.value)}
+            style={{ flex: row ? 1 : "none", padding: "10px 12px", borderRadius: "var(--radius-md)", border: `1px solid ${on ? "var(--action-primary)" : "var(--border-card)"}`, background: on ? "var(--soft-bg)" : "var(--bg-surface)", cursor: off ? "not-allowed" : "pointer", opacity: off ? .5 : 1, transition: "var(--t-hover)" }}>
+            <Radio checked={on} onChange={() => onChange && onChange(o.value)} label={o.label} description={o.description} disabled={off} style={{ opacity: 1, cursor: "inherit" }} />
+          </div>;
+        })}
+      </div>
+    );
+  }
+  return (
+    <div role="radiogroup" data-size={size} onKeyDown={onKey} style={{ display: "flex", flexDirection: row ? "row" : "column", gap: row ? "var(--group-gap)" : 10, ...style }}>
+      {opts.map((o) => <Radio key={o.value} label={o.label} description={o.description} disabled={o.disabled || disabled} checked={value === o.value} onChange={() => onChange && onChange(o.value)} />)}
+    </div>
+  );
+}

package/components/forms/Radio.vue

@@ -1,16 +1,24 @@
 <script setup>
-import { computed } from 'vue'
-// Radio — 16px (sm: 13px) circle, 1.5px border, filled dot when selected.
-const dims = { sm: { box: 13, dot: 6 }, md: { box: 16, dot: 8 } }
-const props = defineProps({ checked: Boolean, label: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
+import { ref, computed } from 'vue'
+// Radio — circle at the region's tier (sm 14 · md/lg 16, --check-size), 1.5px border, filled dot when selected. Hover darkens the ring, focus shows the 2px ring, disabled = 50% opacity.
+// description renders a muted second line under the label.
+const props = defineProps({ checked: Boolean, label: String, description: String, size: String, disabled: Boolean, style: Object })
 const emit = defineEmits(['change'])
-const d = computed(() => dims[props.size] || dims.md)
+const d = { box: 'var(--check-size)', dot: 'calc(var(--check-size) / 2)' }
+const hover = ref(false), focus = ref(false)
+const ring = computed(() => props.checked ? 'var(--action-primary)' : hover.value && !props.disabled ? 'var(--text-muted)' : 'var(--checkbox-border)')
+const pick = () => { if (!props.disabled) emit('change', true) }
 </script>
 <template>
-  <label :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: 6, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('change', true)">
-    <span :style="{ width: d.box + 'px', height: d.box + 'px', borderRadius: 'var(--radius-full)', boxSizing: 'border-box', border: `1.5px solid ${checked ? 'var(--action-primary)' : 'var(--checkbox-border)'}`, background: 'var(--bg-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'var(--t-hover)' }">
-      <span v-if="checked" :style="{ width: d.dot + 'px', height: d.dot + 'px', borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }" />
+  <label role="radio" :data-size="size" :aria-checked="checked" :aria-disabled="disabled || undefined" :tabindex="disabled ? -1 : 0"
+    @mouseenter="hover = true" @mouseleave="hover = false" @focus="focus = true" @blur="focus = false" @click="pick" @keydown.space.prevent="pick" @keydown.enter.prevent="pick"
+    :style="{ display: 'inline-flex', alignItems: description ? 'flex-start' : 'center', verticalAlign: 'middle', lineHeight: 'var(--control-leading)', gap: 'var(--control-gap)', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, outline: 'none', ...style }">
+    <span :style="{ width: d.box, height: d.box, marginTop: description ? '2px' : 0, borderRadius: 'var(--radius-full)', boxSizing: 'border-box', border: `1.5px solid ${ring}`, background: 'var(--bg-surface)', boxShadow: focus && !disabled ? '0 0 0 2px var(--focus-ring)' : 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'var(--t-hover)' }">
+      <span v-if="checked" :style="{ width: d.dot, height: d.dot, borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }"></span>
+    </span>
+    <span v-if="label || description" style="display:flex;flex-direction:column;gap:2px">
+      <span v-if="label" style="font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--control-text);line-height:var(--control-leading);letter-spacing:var(--control-tracking);color:var(--text-body)">{{ label }}</span>
+      <span v-if="description" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)">{{ description }}</span>
     </span>
-    <span v-if="label" :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-body)' }">{{ label }}</span>
   </label>
 </template>

package/components/forms/RadioGroup.vue

@@ -1,11 +1,29 @@
 <script setup>
+import { computed } from 'vue'
 import Radio from './Radio.vue'
-// Vertical or horizontal group of Radios.
-defineProps({ options: { type: Array, default: () => [] }, modelValue: String, row: Boolean, size: { type: String, default: 'md' }, style: Object })
+// RadioGroup — single choice. Vertical (default) or `row`. options: string[] | { label, value, description?, disabled? }[].
+// Arrow keys move between enabled options. variant="cards" renders bordered selectable cards. v-model.
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, row: Boolean, size: String, variant: { type: String, default: 'plain' }, disabled: Boolean, style: Object })
 const emit = defineEmits(['update:modelValue'])
+const opts = computed(() => props.options.map(o => typeof o === 'string' ? { label: o, value: o } : o))
+const enabled = computed(() => opts.value.filter(o => !o.disabled && !props.disabled))
+function onKey(e) {
+  if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(e.key) || !enabled.value.length) return
+  e.preventDefault()
+  const i = enabled.value.findIndex(o => o.value === props.modelValue), n = enabled.value.length
+  const next = (e.key === 'ArrowDown' || e.key === 'ArrowRight') ? enabled.value[(i + 1) % n] : enabled.value[(i - 1 + n) % n]
+  emit('update:modelValue', next.value)
+}
+const pick = (o) => { if (!(o.disabled || props.disabled)) emit('update:modelValue', o.value) }
 </script>
 <template>
-  <div :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: (row ? 16 : 10) + 'px', ...style }">
-    <Radio v-for="o in options" :key="o" :label="o" :size="size" :checked="modelValue === o" @change="emit('update:modelValue', o)" />
+  <div v-if="variant === 'cards'" role="radiogroup" :data-size="size" @keydown="onKey" :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: '8px', ...style }">
+    <div v-for="o in opts" :key="o.value" @click="pick(o)"
+      :style="{ flex: row ? 1 : 'none', padding: '10px 12px', borderRadius: 'var(--radius-md)', border: `1px solid ${modelValue === o.value ? 'var(--action-primary)' : 'var(--border-card)'}`, background: modelValue === o.value ? 'var(--soft-bg)' : 'var(--bg-surface)', cursor: (o.disabled || disabled) ? 'not-allowed' : 'pointer', opacity: (o.disabled || disabled) ? .5 : 1, transition: 'var(--t-hover)' }">
+      <Radio :checked="modelValue === o.value" :label="o.label" :description="o.description" :disabled="o.disabled || disabled" :style="{ opacity: 1, cursor: 'inherit' }" @change="pick(o)" />
+    </div>
+  </div>
+  <div v-else role="radiogroup" :data-size="size" @keydown="onKey" :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: row ? 'var(--group-gap)' : '10px', ...style }">
+    <Radio v-for="o in opts" :key="o.value" :label="o.label" :description="o.description" :disabled="o.disabled || disabled" :checked="modelValue === o.value" @change="pick(o)" />
   </div>
 </template>

package/components/forms/SearchInput.d.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
-/** Search field. Default: r10 hairline card filter. bare: borderless 13px top-bar flavor. Shows a clear (×) button once there's a value; uncontrolled if `value` is omitted. */
+/** Search field at the region's tier height. Default: r8 hairline card filter. bare: borderless top-bar flavor. Shows a clear (×) button once there's a value; uncontrolled if `value` is omitted. */
 export interface SearchInputProps {
   placeholder?: string;
   bare?: boolean;
+  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   value?: string;
   /** Receives the new string value (consistent with Select / Combobox / MultiSelect) */
   onChange?: (value: string) => void;

package/components/forms/SearchInput.jsx

@@ -1,17 +1,17 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Bordered search field (r10) with leading search glyph; bare=true renders the borderless top-bar flavor. Shows a clear (×) button once there's a value. */
-export function SearchInput({ placeholder = "Search...", bare, value, onChange, disabled, style }) {
+/** Bordered search field (r8, tier height — omit `size` to inherit the region's tier) with leading search glyph; bare=true renders the borderless top-bar flavor. Shows a clear (×) button once there's a value. */
+export function SearchInput({ placeholder = "Search...", bare, size, value, onChange, disabled, style }) {
   const [inner, setInner] = React.useState("");
   const val = value != null ? value : inner;
   const set = (v) => { if (value == null) setInner(v); onChange && onChange(v); };
   return (
-    <div style={{ display: "flex", alignItems: "center", gap: bare ? 12 : 8, opacity: disabled ? .5 : 1, ...(bare ? null : { border: "1px solid var(--border-control)", borderRadius: "var(--radius-lg)", padding: "6px 12px", background: "var(--bg-surface)" }), ...style }}>
-      <span style={{ color: "var(--text-muted)" }}><Icon name="search" size={bare ? 16 : 14} /></span>
+    <div data-size={size} data-field={bare || disabled ? undefined : ""} style={{ display: "flex", alignItems: "center", gap: bare ? 12 : 8, height: "var(--control-h)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...(bare ? null : { border: "1px solid var(--field-border, var(--border-control))", borderRadius: "var(--radius-md)", padding: "0 var(--control-px)", background: "var(--bg-surface)" }), ...style }}>
+      <span style={{ color: "var(--text-muted)", display: "inline-flex" }}><Icon name="search" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /></span>
       <input value={val} disabled={disabled} onChange={(e) => set(e.target.value)} placeholder={placeholder}
-        style={{ border: "none", outline: "none", background: "transparent", flex: 1, minWidth: 0, fontFamily: "var(--font-sans)", fontSize: bare ? "var(--text-base)" : "var(--text-sm)", letterSpacing: bare ? "var(--tracking-base)" : 0, color: "var(--text-primary)", cursor: disabled ? "not-allowed" : "text" }} />
-      {val && !disabled ? <button type="button" onClick={() => set("")} style={{ border: "none", background: "transparent", cursor: "pointer", color: "var(--text-muted)", display: "flex", padding: 0 }}><Icon name="x" size={13} /></button> : null}
+        style={{ border: "none", outline: "none", background: "transparent", flex: 1, minWidth: 0, padding: 0, fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-primary)", cursor: disabled ? "not-allowed" : "text" }} />
+      {val && !disabled ? <button type="button" onClick={() => set("")} aria-label="Clear" data-ink="" style={{ border: "none", background: "transparent", cursor: "pointer", color: "var(--ink, var(--text-muted))", display: "flex", padding: 0 }}><Icon name="x" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /></button> : null}
     </div>
   );
 }