@keyfunc/keybricks-ds 1.0.4 → 2.1.1

package/components/feedback/Toast.vue

@@ -8,12 +8,12 @@ const emit = defineEmits(['close'])
 const t = computed(() => toastTones[props.tone])
 </script>
 <template>
-  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: 10, minWidth: 280, maxWidth: 380, background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
-    <span :style="{ color: t.color, display: 'inline-flex', marginTop: 1 }"><Icon :name="t.icon" :size="16" /></span>
+  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', minWidth: '280px', maxWidth: '380px', background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
+    <span :style="{ color: t.color, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><Icon :name="t.icon" :size="16" /></span>
     <div style="display:flex;flex-direction:column;flex:1;min-width:0">
       <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ meta }}</span>
+      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ meta }}</span>
     </div>
-    <IconButton v-if="dismissible" icon="x" size="xs" muted label="Dismiss" @click="emit('close')" />
+    <IconButton v-if="dismissible" icon="x" size="sm" muted label="Dismiss" :style="{ margin: '-2px 0' }" @click="emit('close')" />
   </div>
 </template>

package/components/feedback/ToastStack.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Toast from './Toast.vue'
+// Fixed bottom-right stack of toasts. toasts: [{ id, tone, title, meta }]. Emits dismiss(id).
+defineProps({ toasts: { type: Array, default: () => [] }, style: Object })
+const emit = defineEmits(['dismiss'])
+</script>
+<template>
+  <div :style="{ position: 'fixed', right: '24px', bottom: '24px', zIndex: 'var(--z-toast)', display: 'flex', flexDirection: 'column', gap: '8px', ...style }">
+    <Toast v-for="t in toasts" :key="t.id" :tone="t.tone" :title="t.title" :meta="t.meta" dismissible @close="emit('dismiss', t.id)" />
+  </div>
+</template>

package/components/feedback/Tooltip.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { ref, computed } from 'vue'
+// Hover tooltip around any inline content. placement: top | bottom | left | right. Dark pill, 11px, fades in.
+const props = defineProps({ label: String, placement: { type: String, default: 'top' }, style: Object })
+const show = ref(false)
+const POS = {
+  top: { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: '6px' },
+  bottom: { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: '6px' },
+  left: { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: '6px' },
+  right: { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: '6px' }
+}
+const pos = computed(() => POS[props.placement] || POS.top)
+</script>
+<template>
+  <span :style="{ position: 'relative', display: 'inline-flex', ...style }" @mouseenter="show = true" @mouseleave="show = false">
+    <slot />
+    <span v-if="show" role="tooltip" :style="{ position: 'absolute', zIndex: 'var(--z-tooltip)', whiteSpace: 'nowrap', background: 'var(--tooltip-bg)', color: 'var(--tooltip-fg)', borderRadius: 'var(--radius-md)', padding: '5px 8px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', boxShadow: 'var(--shadow-menu)', pointerEvents: 'none', animation: 'kb-fade-in var(--dur-fast) var(--ease-out)', ...pos }">{{ label }}</span>
+  </span>
+</template>

package/components/feedback/feedback.prompt.md

@@ -12,17 +12,17 @@ Additions (not in the source file): `Tooltip`, `Modal`, `Toast`/`ToastStack`, `A
 ```jsx
 <Tooltip label="Run a test execution"><Button variant="ghost" icon="play">Run Test</Button></Tooltip>
 <Modal open={o} title="Delete node?" subtitle="This removes its 2 edges." onClose={close}
-  footer={<><Button variant="outline" size="sm" onClick={close}>Cancel</Button><Button size="sm" style={{background:"var(--danger)"}}>Delete Node</Button></>}/>
+  footer={<><Button variant="outline" onClick={close}>Cancel</Button><Button variant="danger">Delete Node</Button></>}/>   // Modal is an lg region: 36px buttons
 <ToastStack toasts={toasts} onDismiss={dismiss}/>
 <Alert tone="warning" title="4 configurations differ">Review before continuing.</Alert>
-<EmptyState icon="file-text" title="No documents yet" hint="..." action={<Button icon="plus" size="sm">New Document</Button>}/>
-<Skeleton width={140} height={13}/> <Spinner/>
+<EmptyState icon="file-text" title="No documents yet" hint="..." action={<Button icon="plus">New Document</Button>}/>
+<Skeleton width={140} height={14}/> <Spinner/>
 ```
 
 `Menu` (addition) — trigger-anchored dropdown (vs. `ContextMenu`, which opens at a click point):
 
 ```jsx
-<Menu trigger={<Button variant="dark" icon="chevron-down" size="sm">Show</Button>}
+<Menu trigger={<Button variant="dark" icon="chevron-down">Show</Button>}
   items={[{label:"Preview",icon:"eye"},{label:"Export",icon:"download"},{label:"Delete",icon:"trash-2",danger:true}]}/>
 ```
 

package/components/forms/Checkbox.d.ts

@@ -1,12 +1,13 @@
 import * as React from "react";
-/** Checkbox with optional 12px/500 label ("Debug Mode"). md 16px · sm 13px (tables). */
+/** Checkbox with optional label ("Debug Mode"). Box sm 14 · md/lg 16; the label uses the tier's control text and is the click target. */
 export interface CheckboxProps {
   checked?: boolean;
   /** Dash glyph, same fill as checked — for "some of N selected" parent rows */
   indeterminate?: boolean;
   onChange?: (checked: boolean) => void;
   label?: string;
-  size?: "md" | "sm";
+  /** Size tier. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   disabled?: boolean;
   style?: React.CSSProperties;
 }

package/components/forms/Checkbox.jsx

@@ -1,17 +1,17 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** 16px (sm: 13px) checkbox — 1.5px #d1d5db border, r4; checked = blue fill + white check; indeterminate = blue fill + dash; disabled = 50% opacity. */
-export function Checkbox({ checked, indeterminate, onChange, label, size = "md", disabled, style }) {
-  const box = size === "sm" ? 13 : 16;
+/** Checkbox — box at the region's tier (sm 14 · md/lg 16, tokens/layout.css --check-size), 1.5px border, r4; checked = blue fill + white check; indeterminate = blue fill + dash; disabled = 50% opacity. The label is the click target and uses the tier's control text. */
+export function Checkbox({ checked, indeterminate, onChange, label, size, disabled, style }) {
+  const box = "var(--check-size)", glyph = { width: "calc(var(--check-size) - 4px)", height: "calc(var(--check-size) - 4px)" };
   const filled = checked || indeterminate;
   return (
-    <label style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 6, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, ...style }}
+    <label data-size={size} data-check={disabled ? undefined : ""} style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--control-leading)", gap: "var(--control-gap)", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, ...style }}
       onClick={() => !disabled && onChange && onChange(!checked)}>
-      <span style={{ width: box, height: box, borderRadius: 4, boxSizing: "border-box", border: filled ? "none" : "1.5px solid var(--checkbox-border)", background: filled ? "var(--action-primary)" : "var(--bg-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--on-accent)", flexShrink: 0, transition: "var(--t-hover)" }}>
-        {checked ? <Icon name="check" size={box - 4} strokeWidth={3} /> : indeterminate ? <Icon name="minus" size={box - 4} strokeWidth={3} /> : null}
+      <span style={{ width: box, height: box, borderRadius: 4, boxSizing: "border-box", border: filled ? "none" : "1.5px solid var(--check-border, var(--checkbox-border))", background: filled ? "var(--action-primary)" : "var(--bg-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--on-accent)", flexShrink: 0, transition: "var(--t-hover)" }}>
+        {checked ? <Icon name="check" size={12} strokeWidth={3} style={glyph} /> : indeterminate ? <Icon name="minus" size={12} strokeWidth={3} style={glyph} /> : null}
       </span>
-      {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</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}
     </label>
   );
 }

package/components/forms/Checkbox.vue

@@ -1,18 +1,18 @@
 <script setup>
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// 16px (sm: 13px) checkbox — 1.5px border, r4; checked = blue fill + white check; indeterminate = blue fill + dash; disabled = 50% opacity.
-const props = defineProps({ checked: Boolean, indeterminate: Boolean, label: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
+// Checkbox — box at the region's tier (sm 14 · md/lg 16, tokens/layout.css --check-size), 1.5px border, r4; checked = blue fill + white check; indeterminate = blue fill + dash; disabled = 50% opacity. The label is the click target and uses the tier's control text.
+const props = defineProps({ checked: Boolean, indeterminate: Boolean, label: String, size: String, disabled: Boolean, style: Object })
 const emit = defineEmits(['change'])
-const box = computed(() => props.size === 'sm' ? 13 : 16)
+const box = 'var(--check-size)', glyph = { width: 'calc(var(--check-size) - 4px)', height: 'calc(var(--check-size) - 4px)' }
 const filled = computed(() => props.checked || props.indeterminate)
 </script>
 <template>
-  <label :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: 6, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('change', !checked)">
-    <span :style="{ width: box, height: box, borderRadius: 4, boxSizing: 'border-box', border: filled ? 'none' : '1.5px solid var(--checkbox-border)', background: filled ? 'var(--action-primary)' : 'var(--bg-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-accent)', flexShrink: 0, transition: 'var(--t-hover)' }">
-      <Icon v-if="checked" name="check" :size="box - 4" :stroke-width="3" />
-      <Icon v-else-if="indeterminate" name="minus" :size="box - 4" :stroke-width="3" />
+  <label :data-size="size" :data-check="disabled ? undefined : ''" :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--control-leading)', gap: 'var(--control-gap)', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('change', !checked)">
+    <span :style="{ width: box, height: box, borderRadius: '4px', boxSizing: 'border-box', border: filled ? 'none' : '1.5px solid var(--check-border, var(--checkbox-border))', background: filled ? 'var(--action-primary)' : 'var(--bg-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-accent)', flexShrink: 0, transition: 'var(--t-hover)' }">
+      <Icon v-if="checked" name="check" :size="12" :stroke-width="3" :style="glyph" />
+      <Icon v-else-if="indeterminate" name="minus" :size="12" :stroke-width="3" :style="glyph" />
     </span>
-    <span v-if="label" style="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>
+    <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>
   </label>
 </template>

package/components/forms/Combobox.d.ts

@@ -8,6 +8,8 @@ export interface ComboboxProps {
   disabled?: boolean;
   error?: 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/Combobox.jsx

@@ -2,8 +2,10 @@ import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { inputBase } from "./Input.jsx";
 
-/** Typeahead single-select: type to filter options, click or Enter to pick. Chevron toggles the list; shows "No results" when the filter matches nothing. */
-export function Combobox({ options = [], value = "", placeholder = "Select...", disabled, error, width, onChange, style }) {
+const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
+
+/** Typeahead single-select: type to filter options, click or Enter to pick. Chevron toggles the list; shows "No results" when the filter matches nothing. Field and option rows take the region's tier height (omit `size` to inherit). */
+export function Combobox({ options = [], value = "", placeholder = "Select...", disabled, error, width, size, onChange, style }) {
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState(null);
   const [hov, setHov] = React.useState(-1);
@@ -12,21 +14,21 @@ export function Combobox({ options = [], value = "", placeholder = "Select...",
   const shown = query == null ? options : options.filter(o => o.toLowerCase().includes(query.toLowerCase()));
   const pick = (o) => { onChange && onChange(o); setOpen(false); setQuery(null); };
   return (
-    <div ref={root} style={{ position: "relative", width, ...style }}>
-      <div style={{ position: "relative" }}>
+    <div ref={root} data-size={size} style={{ position: "relative", width, ...style }}>
+      <div data-field={disabled ? undefined : ""} style={{ position: "relative" }}>
         <input value={query != null ? query : value} placeholder={placeholder} disabled={disabled}
           onFocus={() => setOpen(true)} onChange={(e) => { setQuery(e.target.value); setOpen(true); setHov(0); }}
           onKeyDown={(e) => { if (e.key === "ArrowDown") setHov(Math.min(hov + 1, shown.length - 1)); if (e.key === "ArrowUp") setHov(Math.max(hov - 1, 0)); if (e.key === "Enter" && shown[hov]) pick(shown[hov]); if (e.key === "Escape") { setOpen(false); setQuery(null); } }}
-          style={{ ...inputBase, paddingRight: 32, borderColor: error ? "var(--danger)" : open ? "var(--focus-border)" : "var(--border-control)", boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", opacity: disabled ? .5 : 1, cursor: disabled ? "not-allowed" : "text" }} />
-        <button type="button" disabled={disabled} onClick={() => { setOpen(!open); setQuery(null); }} style={{ position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", width: 26, height: 26, border: "none", background: "transparent", cursor: "pointer", color: "var(--text-muted)", display: "flex", alignItems: "center", justifyContent: "center", padding: 0 }}>
-          <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>
+          style={{ ...inputBase, paddingRight: "calc(var(--control-px) + var(--control-icon) + 6px)", borderColor: error ? "var(--danger)" : open ? "var(--focus-border)" : "var(--field-border, var(--border-control))", boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", opacity: disabled ? .5 : 1, cursor: disabled ? "not-allowed" : "text" }} />
+        <button type="button" disabled={disabled} onClick={() => { setOpen(!open); setQuery(null); }} style={{ position: "absolute", right: 1, top: "50%", transform: "translateY(-50%)", width: "calc(var(--control-h) - 2px)", height: "calc(var(--control-h) - 2px)", border: "none", background: "transparent", cursor: "pointer", color: "var(--text-muted)", display: "flex", alignItems: "center", justifyContent: "center", padding: 0 }}>
+          <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>
         </button>
       </div>
       {open && !disabled && <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" }}>
-        {shown.length === 0 && <div style={{ padding: "8px 10px", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>No results</div>}
+        {shown.length === 0 && <div style={{ height: "var(--control-h)", display: "flex", alignItems: "center", padding: "0 10px", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", color: "var(--text-muted)" }}>No results</div>}
         {shown.map((o, i) => <button key={o} type="button" onClick={() => pick(o)} onMouseEnter={() => setHov(i)}
-          style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", padding: "7px 10px", borderRadius: "var(--radius-sm)", border: "none", cursor: "pointer", background: hov === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-heading)", textAlign: "left" }}>
-          {o}{o === value && <span style={{ color: "var(--action-primary)", display: "inline-flex" }}><Icon name="check" size={13} /></span>}
+          style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", height: "var(--control-h)", padding: "0 10px", borderRadius: "var(--radius-sm)", border: "none", cursor: "pointer", background: hov === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", color: "var(--text-heading)", textAlign: "left" }}>
+          {o}{o === value && <span style={{ color: "var(--action-primary)", display: "inline-flex" }}><Icon name="check" size={16} style={tierIcon} /></span>}
         </button>)}
       </div>}
     </div>

package/components/forms/Combobox.vue

@@ -2,8 +2,9 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import Icon from '../icons/Icon.vue'
 import { inputBase } from './input-base.js'
-// Typeahead single-select: type to filter options, click or Enter to pick; "No results" empty row.
-const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Select...' }, disabled: Boolean, error: Boolean, width: [Number, String], style: Object })
+// Typeahead single-select: type to filter options, click or Enter to pick; "No results" empty row. Field and option rows take the region's tier height (omit `size` to inherit).
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Select...' }, disabled: Boolean, error: 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), query = ref(null), hov = ref(-1), root = ref(null)
 const shown = computed(() => query.value == null ? props.options : props.options.filter(o => o.toLowerCase().includes(query.value.toLowerCase())))
@@ -13,22 +14,22 @@ 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 style="position:relative">
+  <div ref="root" :data-size="size" :style="{ position: 'relative', width: typeof width === 'number' ? width + 'px' : width, ...style }">
+    <div :data-field="disabled ? undefined : ''" style="position:relative">
       <input :value="query != null ? query : modelValue" :placeholder="placeholder" :disabled="disabled"
         @focus="open = true" @input="query = $event.target.value; open = true; hov = 0"
         @keydown.down="hov = Math.min(hov + 1, shown.length - 1)" @keydown.up="hov = Math.max(hov - 1, 0)"
         @keydown.enter="shown[hov] && pick(shown[hov])" @keydown.esc="open = false; query = null"
-        :style="{ ...inputBase, paddingRight: '32px', borderColor: error ? 'var(--danger)' : open ? 'var(--focus-border)' : 'var(--border-control)', boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', opacity: disabled ? .5 : 1 }" />
-      <button type="button" :disabled="disabled" @click="open = !open; query = null" style="position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;padding:0">
-        <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>
+        :style="{ ...inputBase, paddingRight: 'calc(var(--control-px) + var(--control-icon) + 6px)', borderColor: error ? 'var(--danger)' : open ? 'var(--focus-border)' : 'var(--field-border, var(--border-control))', boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', opacity: disabled ? .5 : 1 }" />
+      <button type="button" :disabled="disabled" @click="open = !open; query = null" style="position:absolute;right:1px;top:50%;transform:translateY(-50%);width:calc(var(--control-h) - 2px);height:calc(var(--control-h) - 2px);border:none;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;padding:0">
+        <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>
       </button>
     </div>
     <div v-if="open && !disabled" 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-if="shown.length === 0" style="padding:8px 10px;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-muted)">No results</div>
+      <div v-if="shown.length === 0" style="height:var(--control-h);display:flex;align-items:center;padding:0 10px;font-family:var(--font-sans);font-size:var(--control-text);letter-spacing:var(--control-tracking);color:var(--text-muted)">No results</div>
       <button v-for="(o, i) in shown" :key="o" type="button" @click="pick(o)" @mouseenter="hov = i"
-        :style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', padding: '7px 10px', borderRadius: 'var(--radius-sm)', border: 'none', cursor: 'pointer', background: hov === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-heading)', textAlign: 'left' }">
-        {{ o }}<span v-if="o === modelValue" style="color:var(--action-primary);display:inline-flex"><Icon name="check" :size="13" /></span>
+        :style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: 'var(--control-h)', padding: '0 10px', borderRadius: 'var(--radius-sm)', border: 'none', cursor: 'pointer', background: hov === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-heading)', textAlign: 'left' }">
+        {{ o }}<span v-if="o === modelValue" style="color:var(--action-primary);display:inline-flex"><Icon name="check" :size="16" :style="tierIcon" /></span>
       </button>
     </div>
   </div>

package/components/forms/DatePicker.d.ts

@@ -7,6 +7,10 @@ export interface DatePickerProps {
   disabled?: boolean;
   error?: 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";
+  /** BCP 47 locale for the month title, weekday initials and the field label (default "en-US"; e.g. "zh-CN", "ja-JP") */
+  locale?: string;
   onChange?: (isoDate: string) => void;
   style?: React.CSSProperties;
 }

package/components/forms/DatePicker.jsx

@@ -3,12 +3,15 @@ import { Icon } from "../icons/Icon.jsx";
 import { IconButton } from "../buttons/IconButton.jsx";
 import { inputBase } from "./Input.jsx";
 
-const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 const pad = (n) => String(n).padStart(2, "0");
 const iso = (d) => d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
+const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
+/** Month title, weekday initials and the field label come from Intl for the given locale (en-US, zh-CN, ja-JP…), so the picker reads right in every site language. */
+const fmt = (locale, opts) => { try { return new Intl.DateTimeFormat(locale, opts); } catch (e) { return new Intl.DateTimeFormat("en-US", opts); } };
+const weekdays = (locale) => Array.from({ length: 7 }, (_, i) => fmt(locale, { weekday: "short" }).format(new Date(2024, 0, 1 + i))); // 2024-01-01 is a Monday
 
-/** Date picker: input with calendar glyph opening a month-grid popover — chevron month nav, today outlined, selected day filled blue. value/onChange use "YYYY-MM-DD". */
-export function DatePicker({ value = "", placeholder = "Select date", disabled, error, width = 180, onChange, style }) {
+/** Date picker: input with calendar glyph opening a month-grid popover — chevron month nav, today outlined, selected day filled blue. value/onChange use "YYYY-MM-DD"; `locale` localises the labels; the field takes the region's tier (omit `size` to inherit). */
+export function DatePicker({ value = "", placeholder = "Select date", disabled, error, width = 180, size, locale = "en-US", onChange, style }) {
   const [open, setOpen] = React.useState(false);
   const sel = value ? new Date(value + "T00:00:00") : null;
   const [view, setView] = React.useState(() => { const d = sel || new Date(); return { y: d.getFullYear(), m: d.getMonth() }; });
@@ -19,26 +22,27 @@ export function DatePicker({ value = "", placeholder = "Select date", disabled,
   const days = new Date(view.y, view.m + 1, 0).getDate();
   const todayIso = iso(new Date());
   const nav = (d) => { let m = view.m + d, y = view.y; if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; } setView({ y, m }); };
-  const label = sel ? MONTHS[sel.getMonth()].slice(0, 3) + " " + sel.getDate() + ", " + sel.getFullYear() : "";
+  const label = sel ? fmt(locale, { year: "numeric", month: "short", day: "numeric" }).format(sel) : "";
+  const monthTitle = fmt(locale, { year: "numeric", month: "long" }).format(new Date(view.y, view.m, 1));
   return (
-    <div ref={root} style={{ position: "relative", width, ...style }}>
-      <div onClick={() => !disabled && setOpen(!open)} style={{ ...inputBase, display: "flex", alignItems: "center", justifyContent: "space-between", cursor: disabled ? "not-allowed" : "pointer", borderColor: error ? "var(--danger)" : open ? "var(--focus-border)" : "var(--border-control)", boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", opacity: disabled ? .5 : 1, color: label ? "var(--text-primary)" : "var(--text-muted)" }}>
-        {label || placeholder}<span style={{ color: "var(--text-muted)", display: "inline-flex" }}><Icon name="calendar" size={14} /></span>
+    <div ref={root} data-size={size} style={{ position: "relative", width, ...style }}>
+      <div data-field={disabled ? undefined : ""} onClick={() => !disabled && setOpen(!open)} style={{ ...inputBase, display: "flex", alignItems: "center", justifyContent: "space-between", cursor: disabled ? "not-allowed" : "pointer", borderColor: error ? "var(--danger)" : open ? "var(--focus-border)" : "var(--field-border, var(--border-control))", boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", opacity: disabled ? .5 : 1, color: label ? "var(--text-primary)" : "var(--text-muted)" }}>
+        {label || placeholder}<span style={{ color: "var(--text-muted)", display: "inline-flex" }}><Icon name="calendar" size={16} style={tierIcon} /></span>
       </div>
       {open && <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: "var(--z-menu)", width: 252, background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", padding: 12, boxSizing: "border-box" }}>
         <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 8 }}>
-          <IconButton icon="chevron-left" size="sm" label="Previous month" onClick={() => nav(-1)} />
-          <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", color: "var(--text-heading)" }}>{MONTHS[view.m]} {view.y}</span>
-          <IconButton icon="chevron-right" size="sm" label="Next month" onClick={() => nav(1)} />
+          <IconButton icon="chevron-left" label="Previous month" onClick={() => nav(-1)} />
+          <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", color: "var(--text-heading)" }}>{monthTitle}</span>
+          <IconButton icon="chevron-right" label="Next month" onClick={() => nav(1)} />
         </div>
         <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 2 }}>
-          {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map(d => <span key={d} style={{ textAlign: "center", fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-2xs)", color: "var(--text-muted)", padding: "2px 0" }}>{d}</span>)}
+          {weekdays(locale).map((d, i) => <span key={i} style={{ textAlign: "center", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)", padding: "2px 0", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d}</span>)}
           {Array.from({ length: start }, (_, i) => <span key={"e" + i}></span>)}
           {Array.from({ length: days }, (_, i) => {
             const dIso = view.y + "-" + pad(view.m + 1) + "-" + pad(i + 1);
             const isSel = value === dIso, isToday = todayIso === dIso;
             return <button key={i} type="button" onClick={() => { onChange && onChange(dIso); setOpen(false); }}
-              style={{ height: 28, borderRadius: "var(--radius-sm)", border: isToday && !isSel ? "1px solid var(--action-primary)" : "1px solid transparent", cursor: "pointer", background: isSel ? "var(--action-primary)" : "transparent", color: isSel ? "var(--on-accent)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", padding: 0, boxSizing: "border-box" }}
+              style={{ height: 28, borderRadius: "var(--radius-sm)", border: isToday && !isSel ? "1px solid var(--action-primary)" : "1px solid transparent", cursor: "pointer", background: isSel ? "var(--action-primary)" : "transparent", color: isSel ? "var(--on-accent)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", fontVariantNumeric: "tabular-nums", padding: 0, boxSizing: "border-box" }}
               onMouseEnter={(e) => { if (!isSel) e.currentTarget.style.background = "var(--bg-hover)"; }} onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = "transparent"; }}>{i + 1}</button>;
           })}
         </div>

package/components/forms/DatePicker.vue

@@ -4,9 +4,11 @@ import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
 import { inputBase } from './input-base.js'
 // Date picker: input with calendar glyph opening a month-grid popover — Monday-first, today outlined, selected filled. v-model is "YYYY-MM-DD".
-const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December']
+// `locale` localises month title, weekday initials and the field label through Intl; the field takes the region's tier (omit `size` to inherit).
 const pad = (n) => String(n).padStart(2, '0')
-const props = defineProps({ modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Select date' }, disabled: Boolean, error: Boolean, width: { type: [Number, String], default: 180 }, style: Object })
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
+const fmt = (locale, opts) => { try { return new Intl.DateTimeFormat(locale, opts) } catch (e) { return new Intl.DateTimeFormat('en-US', opts) } }
+const props = defineProps({ modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Select date' }, disabled: Boolean, error: Boolean, width: { type: [Number, String], default: 180 }, size: String, locale: { type: String, default: 'en-US' }, style: Object })
 const emit = defineEmits(['update:modelValue'])
 const open = ref(false), root = ref(null)
 const sel = computed(() => props.modelValue ? new Date(props.modelValue + 'T00:00:00') : null)
@@ -15,7 +17,9 @@ const view = ref({ y: d0.getFullYear(), m: d0.getMonth() })
 const start = computed(() => (new Date(view.value.y, view.value.m, 1).getDay() + 6) % 7)
 const days = computed(() => new Date(view.value.y, view.value.m + 1, 0).getDate())
 const todayIso = (() => { const d = new Date(); return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) })()
-const label = computed(() => sel.value ? MONTHS[sel.value.getMonth()].slice(0, 3) + ' ' + sel.value.getDate() + ', ' + sel.value.getFullYear() : '')
+const label = computed(() => sel.value ? fmt(props.locale, { year: 'numeric', month: 'short', day: 'numeric' }).format(sel.value) : '')
+const monthTitle = computed(() => fmt(props.locale, { year: 'numeric', month: 'long' }).format(new Date(view.value.y, view.value.m, 1)))
+const weekdays = computed(() => Array.from({ length: 7 }, (_, i) => fmt(props.locale, { weekday: 'short' }).format(new Date(2024, 0, 1 + i)))) // 2024-01-01 is a Monday
 function nav(d) { let m = view.value.m + d, y = view.value.y; if (m < 0) { m = 11; y-- } if (m > 11) { m = 0; y++ } view.value = { y, m } }
 function dayIso(i) { return view.value.y + '-' + pad(view.value.m + 1) + '-' + pad(i) }
 function pick(i) { emit('update:modelValue', dayIso(i)); open.value = false }
@@ -24,21 +28,21 @@ 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="{ ...inputBase, display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: disabled ? 'not-allowed' : 'pointer', borderColor: error ? 'var(--danger)' : open ? 'var(--focus-border)' : 'var(--border-control)', boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', opacity: disabled ? .5 : 1, color: label ? 'var(--text-primary)' : 'var(--text-muted)' }">
-      {{ label || placeholder }}<span style="color:var(--text-muted);display:inline-flex"><Icon name="calendar" :size="14" /></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="{ ...inputBase, display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: disabled ? 'not-allowed' : 'pointer', borderColor: error ? 'var(--danger)' : open ? 'var(--focus-border)' : 'var(--field-border, var(--border-control))', boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', opacity: disabled ? .5 : 1, color: label ? 'var(--text-primary)' : 'var(--text-muted)' }">
+      {{ label || placeholder }}<span style="color:var(--text-muted);display:inline-flex"><Icon name="calendar" :size="16" :style="tierIcon" /></span>
     </div>
     <div v-if="open" style="position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-menu);width:252px;background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-menu);padding:12px;box-sizing:border-box">
       <div style="display:flex;align-items:center;justify-content:space-between;padding-bottom:8px">
-        <IconButton icon="chevron-left" size="sm" label="Previous month" @click="nav(-1)" />
-        <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);color:var(--text-heading)">{{ MONTHS[view.m] }} {{ view.y }}</span>
-        <IconButton icon="chevron-right" size="sm" label="Next month" @click="nav(1)" />
+        <IconButton icon="chevron-left" label="Previous month" @click="nav(-1)" />
+        <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--control-text);letter-spacing:var(--control-tracking);color:var(--text-heading)">{{ monthTitle }}</span>
+        <IconButton icon="chevron-right" label="Next month" @click="nav(1)" />
       </div>
       <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:2px">
-        <span v-for="d in ['Mo','Tu','We','Th','Fr','Sa','Su']" :key="d" style="text-align:center;font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding:2px 0">{{ d }}</span>
+        <span v-for="(d, i) in weekdays" :key="i" style="text-align:center;font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted);padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ d }}</span>
         <span v-for="i in start" :key="'e' + i" />
         <button v-for="i in days" :key="i" type="button" @click="pick(i)" class="kb-dp-day"
-          :style="{ height: '28px', borderRadius: 'var(--radius-sm)', border: todayIso === dayIso(i) && modelValue !== dayIso(i) ? '1px solid var(--action-primary)' : '1px solid transparent', cursor: 'pointer', background: modelValue === dayIso(i) ? 'var(--action-primary)' : 'transparent', color: modelValue === dayIso(i) ? 'var(--on-accent)' : 'var(--text-body)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', padding: 0, boxSizing: 'border-box' }">{{ i }}</button>
+          :style="{ height: '28px', borderRadius: 'var(--radius-sm)', border: todayIso === dayIso(i) && modelValue !== dayIso(i) ? '1px solid var(--action-primary)' : '1px solid transparent', cursor: 'pointer', background: modelValue === dayIso(i) ? 'var(--action-primary)' : 'transparent', color: modelValue === dayIso(i) ? 'var(--on-accent)' : 'var(--text-body)', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', letterSpacing: 'var(--control-tracking)', fontVariantNumeric: 'tabular-nums', padding: 0, boxSizing: 'border-box' }">{{ i }}</button>
       </div>
     </div>
   </div>

package/components/forms/Dropzone.jsx

@@ -13,7 +13,7 @@ export function Dropzone({ title = "Click to upload or drag and drop", hint = "J
       <div 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 }}>
         <span style={{ color: "var(--success-strong)" }}><Icon name="file-check" size={22} strokeWidth={1.5} /></span>
         <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", color: "var(--text-heading)" }}>{file}</span>
-        <button type="button" onClick={onRemove} style={{ display: "flex", alignItems: "center", gap: 4, border: "none", background: "transparent", cursor: "pointer", color: "var(--danger)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", padding: 0 }}>
+        <button type="button" onClick={onRemove} data-link="" style={{ display: "flex", alignItems: "center", gap: 4, border: "none", background: "transparent", cursor: "pointer", color: "var(--danger)", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", padding: 0, textDecorationLine: "var(--link-line, none)", textUnderlineOffset: 2 }}>
           <Icon name="trash-2" size={13} />Remove
         </button>
       </div>
@@ -30,7 +30,7 @@ export function Dropzone({ title = "Click to upload or drag and drop", hint = "J
       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} strokeWidth={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>
   );
 }

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} />