@keyfunc/keybricks-ds 1.0.4 → 2.1.1

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

@@ -1,12 +1,13 @@
 import * as React from "react";
-/** Radio — 16px (sm: 13px) circle; filled action-blue dot when selected. Hover darkens the ring, focus shows the 2px ring. */
+/** 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?: "sm" | "md";
+  /** Size tier. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   disabled?: boolean;
   style?: React.CSSProperties;
 }
@@ -18,7 +19,8 @@ export interface RadioGroupProps {
   onChange?: (value: string) => void;
   /** Horizontal layout */
   row?: boolean;
-  size?: "sm" | "md";
+  /** 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 */

package/components/forms/Radio.jsx

@@ -1,30 +1,28 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-const radioDims = { sm: { box: 13, dot: 6, font: "var(--text-xs)" }, md: { box: 16, dot: 8, font: "var(--text-sm)" } };
-
 /**
- * Radio — 16px (sm: 13px) circle, 1.5px border, filled action-blue dot when selected.
+ * 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 = "md", disabled, style }) {
-  const d = radioDims[size] || radioDims.md;
+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" aria-checked={!!checked} aria-disabled={disabled || undefined} tabIndex={disabled ? -1 : 0}
+    <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(--leading-sm)", gap: 8, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, outline: "none", ...style }}
+      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 ? 1 : 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 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-medium)", fontSize: d.font, lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
-        {description ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "16px", color: "var(--text-muted)" }}>{description}</span> : null}
+        {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>
   );
@@ -36,7 +34,7 @@ export function Radio({ checked, onChange, label, description, size = "md", disa
  * 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 = "md", variant = "plain", disabled, style }) {
+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) => {
@@ -48,20 +46,20 @@ export function RadioGroup({ options = [], value, onChange, row, size = "md", va
   };
   if (variant === "cards") {
     return (
-      <div role="radiogroup" onKeyDown={onKey} style={{ display: "flex", flexDirection: row ? "row" : "column", gap: 8, ...style }}>
+      <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} size={size} disabled={off} style={{ opacity: 1, cursor: "inherit" }} />
+            <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" onKeyDown={onKey} style={{ display: "flex", flexDirection: row ? "row" : "column", gap: row ? 16 : 10, ...style }}>
-      {opts.map((o) => <Radio key={o.value} label={o.label} description={o.description} size={size} disabled={o.disabled || disabled} checked={value === o.value} onChange={() => onChange && onChange(o.value)} />)}
+    <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,25 +1,24 @@
 <script setup>
 import { ref, computed } from 'vue'
-// Radio — 16px (sm: 13px) circle, 1.5px border, filled dot when selected. Hover darkens the ring, focus shows the 2px ring, disabled = 50% opacity.
+// 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 dims = { sm: { box: 13, dot: 6, font: 'var(--text-xs)' }, md: { box: 16, dot: 8, font: 'var(--text-sm)' } }
-const props = defineProps({ checked: Boolean, label: String, description: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
+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 role="radio" :aria-checked="checked" :aria-disabled="disabled || undefined" :tabindex="disabled ? -1 : 0"
+  <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(--leading-sm)', gap: '8px', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, outline: 'none', ...style }">
-    <span :style="{ width: d.box + 'px', height: d.box + 'px', marginTop: description ? '1px' : 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 + 'px', height: d.dot + 'px', borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }"></span>
+    :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="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: d.font, lineHeight: 'var(--leading-sm)', color: 'var(--text-body)' }">{{ label }}</span>
-      <span v-if="description" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:16px;color:var(--text-muted)">{{ description }}</span>
+      <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>
   </label>
 </template>

package/components/forms/RadioGroup.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import Radio from './Radio.vue'
 // 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: { type: String, default: 'md' }, variant: { type: String, default: 'plain' }, disabled: Boolean, style: Object })
+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))
@@ -17,13 +17,13 @@ function onKey(e) {
 const pick = (o) => { if (!(o.disabled || props.disabled)) emit('update:modelValue', o.value) }
 </script>
 <template>
-  <div v-if="variant === 'cards'" role="radiogroup" @keydown="onKey" :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: '8px', ...style }">
+  <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" :size="size" :disabled="o.disabled || disabled" :style="{ opacity: 1, cursor: 'inherit' }" @change="pick(o)" />
+      <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" @keydown="onKey" :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: (row ? 16 : 10) + 'px', ...style }">
-    <Radio v-for="o in opts" :key="o.value" :label="o.label" :description="o.description" :size="size" :disabled="o.disabled || disabled" :checked="modelValue === o.value" @change="pick(o)" />
+  <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>
   );
 }

package/components/forms/SearchInput.vue

@@ -1,14 +1,15 @@
 <script setup>
 import Icon from '../icons/Icon.vue'
-// 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.
-defineProps({ modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Search...' }, bare: Boolean, disabled: Boolean, style: Object })
+// 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.
+defineProps({ modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Search...' }, bare: Boolean, size: String, disabled: Boolean, style: Object })
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
 const emit = defineEmits(['update:modelValue'])
 </script>
 <template>
-  <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 ? '12px' : '8px', 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="tierIcon" /></span>
     <input :value="modelValue" :disabled="disabled" @input="emit('update:modelValue', $event.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' }" />
-    <button v-if="modelValue && !disabled" type="button" @click="emit('update:modelValue', '')" style="border:none;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;padding:0"><Icon name="x" :size="13" /></button>
+      :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' }" />
+    <button v-if="modelValue && !disabled" type="button" aria-label="Clear" data-ink="" @click="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>
   </div>
 </template>

package/components/forms/Select.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
-/** Hairline select. md 36/r8 for filters, sm 25/r4 inside table rows. disabled fills #fafafa inset like Input's readOnly. */
+/** Hairline select, r8, at the region's tier height (sm 24 · md 32 · lg 36). disabled fills inset like Input's readOnly. */
 export interface SelectProps {
   options?: string[];
-  size?: "md" | "sm";
+  /** 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";
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
   /** Shown as a disabled, muted-color first option when no value is set */

package/components/forms/Select.jsx

@@ -1,17 +1,16 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Native select styled per Keybricks. size md 36/r8 · sm 25/r4 (table rows). disabled = #fafafa inset fill (matches Input readOnly), 50% opacity; error = red border. */
-export function Select({ options = [], size = "md", value, onChange, placeholder, disabled, error, style }) {
-  const sm = size === "sm";
+/** Native select styled per Keybricks: r8, tier height (sm 24 · md 32 · lg 36 — omit `size` to inherit the region's tier). disabled = inset fill (matches Input readOnly), 50% opacity; error = red border. */
+export function Select({ options = [], size, value, onChange, placeholder, disabled, error, style }) {
   return (
-    <div style={{ position: "relative", display: "inline-flex", ...style }}>
-      <select value={value} onChange={onChange} disabled={disabled}
-        style={{ appearance: "none", WebkitAppearance: "none", height: sm ? 25 : 36, borderRadius: sm ? "var(--radius-sm)" : "var(--radius-md)", border: `1px solid ${error ? "var(--danger)" : "var(--border-control)"}`, background: disabled ? "var(--bg-inset)" : "var(--bg-surface)", padding: sm ? "0 26px 0 10px" : "0 32px 0 12px", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: disabled ? "var(--text-secondary)" : value ? "var(--text-primary)" : "var(--text-muted)", outline: "none", cursor: disabled ? "not-allowed" : "pointer", width: "100%", opacity: disabled ? .5 : 1 }}>
+    <div data-size={size} style={{ position: "relative", display: "inline-flex", ...style }}>
+      <select value={value} onChange={onChange} disabled={disabled} data-field={disabled ? undefined : ""}
+        style={{ appearance: "none", WebkitAppearance: "none", height: "var(--control-h)", borderRadius: "var(--radius-md)", border: `1px solid ${error ? "var(--danger)" : "var(--field-border, var(--border-control))"}`, background: disabled ? "var(--bg-inset)" : "var(--bg-surface)", padding: "0 calc(var(--control-px) + var(--control-icon) + 6px) 0 var(--control-px)", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", color: disabled ? "var(--text-secondary)" : value ? "var(--text-primary)" : "var(--text-muted)", outline: "none", cursor: disabled ? "not-allowed" : "pointer", width: "100%", opacity: disabled ? .5 : 1 }}>
         {placeholder ? <option value="" disabled hidden>{placeholder}</option> : null}
         {options.map((o) => <option key={o} value={o}>{o}</option>)}
       </select>
-      <span style={{ position: "absolute", right: sm ? 8 : 10, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--text-muted)" }}><Icon name="chevron-down" size={sm ? 12 : 14} /></span>
+      <span style={{ position: "absolute", right: "var(--control-px)", top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--text-muted)", display: "inline-flex" }}><Icon name="chevron-down" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /></span>
     </div>
   );
 }

package/components/forms/Select.vue

@@ -1,16 +1,16 @@
 <script setup>
 import Icon from '../icons/Icon.vue'
-// Native select styled per Keybricks. size md 36/r8 · sm 25/r4 (table rows). disabled = inset fill (matches Input readonly), 50% opacity; error = red border.
-const props = defineProps({ modelValue: String, options: { type: Array, default: () => [] }, size: { type: String, default: 'md' }, placeholder: String, disabled: Boolean, error: Boolean, style: Object })
+// Native select styled per Keybricks: r8, tier height (sm 24 · md 32 · lg 36 — omit `size` to inherit the region's tier). disabled = inset fill (matches Input readonly), 50% opacity; error = red border.
+const props = defineProps({ modelValue: String, options: { type: Array, default: () => [] }, size: String, placeholder: String, disabled: Boolean, error: Boolean, style: Object })
 defineEmits(['update:modelValue'])
 </script>
 <template>
-  <div :style="{ position: 'relative', display: 'inline-flex', ...style }">
-    <select :value="modelValue" @change="$emit('update:modelValue', $event.target.value)" :disabled="disabled"
-      :style="{ appearance: 'none', height: size === 'sm' ? 25 : 36, borderRadius: size === 'sm' ? 'var(--radius-sm)' : 'var(--radius-md)', border: `1px solid ${error ? 'var(--danger)' : 'var(--border-control)'}`, background: disabled ? 'var(--bg-inset)' : 'var(--bg-surface)', padding: size === 'sm' ? '0 26px 0 10px' : '0 32px 0 12px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: disabled ? 'var(--text-secondary)' : modelValue ? 'var(--text-primary)' : 'var(--text-muted)', outline: 'none', cursor: disabled ? 'not-allowed' : 'pointer', width: '100%', opacity: disabled ? .5 : 1 }">
+  <div :data-size="size" :style="{ position: 'relative', display: 'inline-flex', ...style }">
+    <select :value="modelValue" @change="$emit('update:modelValue', $event.target.value)" :disabled="disabled" :data-field="disabled ? undefined : ''"
+      :style="{ appearance: 'none', height: 'var(--control-h)', borderRadius: 'var(--radius-md)', border: `1px solid ${error ? 'var(--danger)' : 'var(--field-border, var(--border-control))'}`, background: disabled ? 'var(--bg-inset)' : 'var(--bg-surface)', padding: '0 calc(var(--control-px) + var(--control-icon) + 6px) 0 var(--control-px)', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', letterSpacing: 'var(--control-tracking)', color: disabled ? 'var(--text-secondary)' : modelValue ? 'var(--text-primary)' : 'var(--text-muted)', outline: 'none', cursor: disabled ? 'not-allowed' : 'pointer', width: '100%', opacity: disabled ? .5 : 1 }">
       <option v-if="placeholder" value="" disabled hidden>{{ placeholder }}</option>
       <option v-for="o in options" :key="o" :value="o">{{ o }}</option>
     </select>
-    <span :style="{ position: 'absolute', right: size === 'sm' ? 8 : 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: 'var(--text-muted)' }"><Icon name="chevron-down" :size="size === 'sm' ? 12 : 14" /></span>
+    <span :style="{ position: 'absolute', right: 'var(--control-px)', top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: 'var(--text-muted)', display: 'inline-flex' }"><Icon name="chevron-down" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)' }" /></span>
   </div>
 </template>

package/components/forms/Slider.jsx

@@ -9,11 +9,11 @@ export function Slider({ value = 50, min = 0, max = 100, step = 1, labels, showV
   React.useEffect(() => { if (!drag) return; const mv = (e) => set(e.clientX), up = () => setDrag(false); document.addEventListener("mousemove", mv); document.addEventListener("mouseup", up); return () => { document.removeEventListener("mousemove", mv); document.removeEventListener("mouseup", up); }; }, [drag]);
   return (
     <div style={{ width, opacity: disabled ? .5 : 1, ...style }}>
-      <div ref={track} onMouseDown={disabled ? undefined : (e) => { setDrag(true); set(e.clientX); }} style={{ position: "relative", height: 20, display: "flex", alignItems: "center", cursor: disabled ? "not-allowed" : "pointer" }}>
+      <div ref={track} data-thumb={disabled ? undefined : ""} onMouseDown={disabled ? undefined : (e) => { setDrag(true); set(e.clientX); }} style={{ position: "relative", height: 20, display: "flex", alignItems: "center", cursor: disabled ? "not-allowed" : "pointer" }}>
         <div style={{ position: "absolute", left: 0, right: 0, height: 6, borderRadius: "var(--radius-full)", background: "var(--track)" }}></div>
         <div style={{ position: "absolute", left: 0, width: pct + "%", height: 6, borderRadius: "var(--radius-full)", background: "var(--action-primary)" }}></div>
-        <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", width: 16, height: 16, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", border: "2px solid var(--action-primary)", boxSizing: "border-box", boxShadow: "0 1px 2px rgba(0,0,0,.15)" }}></span>
-        {(drag || showValue) && <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", bottom: 22, background: "var(--tooltip-bg)", color: "var(--tooltip-fg)", borderRadius: "var(--radius-sm)", padding: "2px 6px", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", whiteSpace: "nowrap", pointerEvents: "none" }}>{value}{unit}</span>}
+        <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", width: 16, height: 16, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", border: "2px solid var(--action-primary)", boxSizing: "border-box", boxShadow: drag ? "0 0 0 4px var(--focus-ring), 0 1px 2px rgba(0,0,0,.15)" : "var(--thumb-ring, 0 1px 2px rgba(0,0,0,.15))", transition: "box-shadow var(--dur-fast) var(--ease-out)" }}></span>
+        {(drag || showValue) && <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", bottom: 22, background: "var(--tooltip-bg)", color: "var(--tooltip-fg)", borderRadius: "var(--radius-sm)", padding: "2px 6px", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", whiteSpace: "nowrap", pointerEvents: "none" }}>{value}{unit}</span>}
       </div>
       {labels && <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 4, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-muted)" }}><span>{min}{unit}</span><span>{max}{unit}</span></div>}
     </div>

package/components/forms/Slider.vue

@@ -12,11 +12,11 @@ onUnmounted(up)
 </script>
 <template>
   <div :style="{ width: typeof width === 'number' ? width + 'px' : width, opacity: disabled ? .5 : 1, ...style }">
-    <div ref="track" @mousedown="!disabled && (drag = true, set($event.clientX))" :style="{ position: 'relative', height: '20px', display: 'flex', alignItems: 'center', cursor: disabled ? 'not-allowed' : 'pointer' }">
+    <div ref="track" :data-thumb="disabled ? undefined : ''" @mousedown="!disabled && (drag = true, set($event.clientX))" :style="{ position: 'relative', height: '20px', display: 'flex', alignItems: 'center', cursor: disabled ? 'not-allowed' : 'pointer' }">
       <div style="position:absolute;left:0;right:0;height:6px;border-radius:var(--radius-full);background:var(--track)" />
       <div :style="{ position: 'absolute', left: 0, width: pct + '%', height: '6px', borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }" />
-      <span :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', width: '16px', height: '16px', borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', border: '2px solid var(--action-primary)', boxSizing: 'border-box', boxShadow: '0 1px 2px rgba(0,0,0,.15)' }" />
-      <span v-if="drag || showValue" :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', bottom: '22px', background: 'var(--tooltip-bg)', color: 'var(--tooltip-fg)', borderRadius: 'var(--radius-sm)', padding: '2px 6px', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', whiteSpace: 'nowrap', pointerEvents: 'none' }">{{ modelValue }}{{ unit }}</span>
+      <span :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', width: '16px', height: '16px', borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', border: '2px solid var(--action-primary)', boxSizing: 'border-box', boxShadow: drag ? '0 0 0 4px var(--focus-ring), 0 1px 2px rgba(0,0,0,.15)' : 'var(--thumb-ring, 0 1px 2px rgba(0,0,0,.15))', transition: 'box-shadow var(--dur-fast) var(--ease-out)' }" />
+      <span v-if="drag || showValue" :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', bottom: '22px', background: 'var(--tooltip-bg)', color: 'var(--tooltip-fg)', borderRadius: 'var(--radius-sm)', padding: '2px 6px', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', whiteSpace: 'nowrap', pointerEvents: 'none' }">{{ modelValue }}{{ unit }}</span>
     </div>
     <div v-if="labels" style="display:flex;justify-content:space-between;padding-top:4px;font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted)"><span>{{ min }}{{ unit }}</span><span>{{ max }}{{ unit }}</span></div>
   </div>