@keyfunc/keybricks-ds 1.0.3 → 2.1.1

package/components/feedback/Modal.jsx

@@ -22,21 +22,22 @@ export function Tooltip({ label, placement = "top", children, style }) {
 }
 
 /** Centered modal dialog with scrim. width defaults to 440. */
-export function Modal({ open, title, subtitle, onClose, footer, width = 440, children, style }) {
+/** Modal dialog. A size region that defaults to lg (36px controls) whatever the page behind it uses — a dialog does not compete for space; pass `size` to override. 24px padding, footer buttons 8px apart. */
+export function Modal({ open, title, subtitle, onClose, footer, width = 440, size = "lg", children, style }) {
   if (!open) return null;
   return (
     <div style={{ position: "fixed", inset: 0, zIndex: "var(--z-modal)", background: "var(--bg-scrim)", display: "flex", alignItems: "center", justifyContent: "center", animation: "kb-fade-in var(--dur-fast) var(--ease-out)" }} onClick={onClose}>
-      <div onClick={(e) => e.stopPropagation()}
+      <div role="dialog" aria-modal="true" data-size={size} onClick={(e) => e.stopPropagation()}
         style={{ width, maxWidth: "92vw", background: "var(--bg-raised)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-modal)", animation: "kb-rise var(--dur) var(--ease-out)", ...style }}>
-        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", padding: "17px 17px 0" }}>
-          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, padding: "24px 24px 0" }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
             <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)" }}>{title}</span>
-            {subtitle ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{subtitle}</span> : null}
+            {subtitle ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{subtitle}</span> : null}
           </div>
-          <IconButton icon="x" size="md" onClick={onClose} label="Close" />
+          <IconButton icon="x" onClick={onClose} label="Close" style={{ margin: "calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0" }} />
         </div>
-        {children ? <div style={{ padding: "16px 17px 0" }}>{children}</div> : null}
-        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: 17 }}>{footer}</div>
+        {children ? <div style={{ padding: "20px 24px 0" }}>{children}</div> : null}
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--control-gap)", padding: 24 }}>{footer}</div>
       </div>
     </div>
   );
@@ -49,12 +50,12 @@ export function Toast({ tone = "success", title, meta, onClose, style }) {
   const t = toastTones[tone];
   return (
     <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>
+      <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", flexDirection: "column", flex: 1, minWidth: 0 }}>
         <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{meta}</span> : null}
+        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{meta}</span> : null}
       </div>
-      {onClose ? <IconButton icon="x" size="xs" muted onClick={onClose} label="Dismiss" /> : null}
+      {onClose ? <IconButton icon="x" size="sm" muted onClick={onClose} label="Dismiss" style={{ margin: "-2px 0" }} /> : null}
     </div>
   );
 }

package/components/feedback/Modal.vue

@@ -1,20 +1,22 @@
 <script setup>
+import { px } from '../px.js'
 import IconButton from '../buttons/IconButton.vue'
-defineProps({ open: Boolean, title: String, subtitle: String, width: { type: Number, default: 440 }, style: Object })
+// Modal dialog. A size region that defaults to lg (36px controls) whatever the page behind it uses — a dialog does not compete for space; pass `size` to override. 24px padding, footer buttons 8px apart.
+defineProps({ open: Boolean, title: String, subtitle: String, width: { type: [Number, String], default: 440 }, size: { type: String, default: 'lg' }, style: Object })
 const emit = defineEmits(['close'])
 </script>
 <template>
   <div v-if="open" style="position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg-scrim);display:flex;align-items:center;justify-content:center;animation:kb-fade-in var(--dur-fast) var(--ease-out)" @click="emit('close')">
-    <div @click.stop :style="{ width, maxWidth: '92vw', background: 'var(--bg-raised)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-modal)', animation: 'kb-rise var(--dur) var(--ease-out)', ...style }">
-      <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:17px 17px 0">
-        <div style="display:flex;flex-direction:column;gap:4px">
+    <div role="dialog" aria-modal="true" :data-size="size" @click.stop :style="{ width: px(width), maxWidth: '92vw', background: 'var(--bg-raised)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-modal)', animation: 'kb-rise var(--dur) var(--ease-out)', ...style }">
+      <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 0">
+        <div style="display:flex;flex-direction:column;gap:2px">
           <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading)">{{ title }}</span>
-          <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ subtitle }}</span>
+          <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ subtitle }}</span>
         </div>
-        <IconButton icon="x" size="md" label="Close" @click="emit('close')" />
+        <IconButton icon="x" label="Close" :style="{ margin: 'calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0' }" @click="emit('close')" />
       </div>
-      <div v-if="$slots.default" style="padding:16px 17px 0"><slot /></div>
-      <div style="display:flex;justify-content:flex-end;gap:8px;padding:17px"><slot name="footer" /></div>
+      <div v-if="$slots.default" style="padding:20px 24px 0"><slot /></div>
+      <div style="display:flex;justify-content:flex-end;gap:var(--control-gap);padding:24px"><slot name="footer" /></div>
     </div>
   </div>
 </template>

package/components/feedback/Skeleton.vue

@@ -1,6 +1,7 @@
 <script setup>
+import { px } from '../px.js'
 defineProps({ width: { type: [String, Number], default: '100%' }, height: { type: [String, Number], default: 12 }, radius: { type: String, default: 'var(--radius-sm)' }, style: Object })
 </script>
 <template>
-  <span :style="{ display: 'block', width, height, borderRadius: radius, background: 'var(--skeleton)', animation: 'kb-pulse 1.4s var(--ease-in-out) infinite', ...style }" />
+  <span :style="{ display: 'block', width, height, borderRadius: px(radius), background: 'var(--skeleton)', animation: 'kb-pulse 1.4s var(--ease-in-out) infinite', ...style }" />
 </template>

package/components/feedback/Spinner.vue

@@ -1,6 +1,7 @@
 <script setup>
+import { px } from '../px.js'
 defineProps({ size: { type: Number, default: 16 }, color: { type: String, default: 'var(--action-primary)' }, style: Object })
 </script>
 <template>
-  <span :style="{ display: 'inline-block', width: size, height: size, borderRadius: 'var(--radius-full)', border: '2px solid var(--track)', borderTopColor: color, animation: 'kb-spin .7s linear infinite', ...style }" />
+  <span :style="{ display: 'inline-block', width: px(size), height: px(size), borderRadius: 'var(--radius-full)', border: '2px solid var(--track)', borderTopColor: color, animation: 'kb-spin .7s linear infinite', ...style }" />
 </template>

package/components/feedback/Stepper.vue

@@ -8,7 +8,7 @@ defineProps({ steps: { type: Array, default: () => [] }, current: { type: Number
     <template v-for="(s, i) in steps" :key="s.label">
       <div v-if="i > 0" style="flex:1;height:2px;background:var(--track);margin-top:15.25px;margin-left:12px;margin-right:12px;min-width:24px" />
       <div style="display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0">
-        <span :style="{ width: 32, height: 32, borderRadius: 'var(--radius-full)', boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: i < current ? 'var(--success)' : i === current ? 'var(--action-primary)' : 'var(--bg-surface)', border: (i < current || i === current) ? 'none' : '2px solid var(--track)', color: (i < current || i === current) ? 'var(--on-accent)' : 'var(--text-muted)' }">
+        <span :style="{ width: '32px', height: '32px', borderRadius: 'var(--radius-full)', boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: i < current ? 'var(--success)' : i === current ? 'var(--action-primary)' : 'var(--bg-surface)', border: (i < current || i === current) ? 'none' : '2px solid var(--track)', color: (i < current || i === current) ? 'var(--on-accent)' : 'var(--text-muted)' }">
           <Icon :name="i < current ? 'check' : (s.icon || 'file')" :size="16" />
         </span>
         <span :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', fontWeight: i === current ? 'var(--weight-medium)' : 'var(--weight-regular)', color: i === current ? 'var(--text-heading)' : 'var(--text-secondary)', whiteSpace: 'nowrap' }">{{ s.label }}</span>

package/components/feedback/Timeline.jsx

@@ -18,7 +18,7 @@ export function Timeline({ items = [], style }) {
           <div style={{ display: "flex", flexDirection: "column", gap: 2, paddingBottom: i < items.length - 1 ? 18 : 0, minWidth: 0, paddingTop: 3 }}>
             <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{it.title}</span>
             {it.meta && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)" }}>{it.meta}</span>}
-            {it.body && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)", paddingTop: 4 }}>{it.body}</span>}
+            {it.body && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: "var(--text-body)", paddingTop: 4 }}>{it.body}</span>}
           </div>
         </div>
       ))}

package/components/feedback/Timeline.vue

@@ -14,7 +14,7 @@ defineProps({ items: { type: Array, default: () => [] }, style: Object })
       <div :style="{ display: 'flex', flexDirection: 'column', gap: '2px', paddingBottom: i < items.length - 1 ? '18px' : 0, minWidth: 0, paddingTop: '3px' }">
         <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);color:var(--text-heading)">{{ it.title }}</span>
         <span v-if="it.meta" style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted)">{{ it.meta }}</span>
-        <span v-if="it.body" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-body);padding-top:4px">{{ it.body }}</span>
+        <span v-if="it.body" style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-body);padding-top:4px">{{ it.body }}</span>
       </div>
     </div>
   </div>

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>
   );
 }