@keyfunc/keybricks-ds 1.0.3 → 2.1.1

package/components/forms/SearchInput.vue

@@ -1,14 +1,15 @@
 <script setup>
 import Icon from '../icons/Icon.vue'
-// Bordered search field (r10) with leading search glyph; bare=true renders the borderless top-bar flavor. Shows a clear (×) button once there's a value.
-defineProps({ modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Search...' }, bare: Boolean, disabled: Boolean, style: Object })
+// Bordered search field (r8, tier height — omit `size` to inherit the region's tier) with leading search glyph; bare=true renders the borderless top-bar flavor. Shows a clear (×) button once there's a value.
+defineProps({ modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Search...' }, bare: Boolean, size: String, disabled: Boolean, style: Object })
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
 const emit = defineEmits(['update:modelValue'])
 </script>
 <template>
-  <div :style="{ display: 'flex', alignItems: 'center', gap: bare ? 12 : 8, opacity: disabled ? .5 : 1, ...(bare ? null : { border: '1px solid var(--border-control)', borderRadius: 'var(--radius-lg)', padding: '6px 12px', background: 'var(--bg-surface)' }), ...style }">
-    <span style="color:var(--text-muted)"><Icon name="search" :size="bare ? 16 : 14" /></span>
+  <div :data-size="size" :data-field="bare || disabled ? undefined : ''" :style="{ display: 'flex', alignItems: 'center', gap: bare ? '12px' : '8px', height: 'var(--control-h)', boxSizing: 'border-box', opacity: disabled ? .5 : 1, ...(bare ? null : { border: '1px solid var(--field-border, var(--border-control))', borderRadius: 'var(--radius-md)', padding: '0 var(--control-px)', background: 'var(--bg-surface)' }), ...style }">
+    <span style="color:var(--text-muted);display:inline-flex"><Icon name="search" :size="16" :style="tierIcon" /></span>
     <input :value="modelValue" :disabled="disabled" @input="emit('update:modelValue', $event.target.value)" :placeholder="placeholder"
-      :style="{ border: 'none', outline: 'none', background: 'transparent', flex: 1, minWidth: 0, fontFamily: 'var(--font-sans)', fontSize: bare ? 'var(--text-base)' : 'var(--text-sm)', letterSpacing: bare ? 'var(--tracking-base)' : 0, color: 'var(--text-primary)', cursor: disabled ? 'not-allowed' : 'text' }" />
-    <button v-if="modelValue && !disabled" type="button" @click="emit('update:modelValue', '')" style="border:none;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;padding:0"><Icon name="x" :size="13" /></button>
+      :style="{ border: 'none', outline: 'none', background: 'transparent', flex: 1, minWidth: 0, padding: 0, fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-primary)', cursor: disabled ? 'not-allowed' : 'text' }" />
+    <button v-if="modelValue && !disabled" type="button" aria-label="Clear" data-ink="" @click="emit('update:modelValue', '')" style="border:none;background:transparent;cursor:pointer;color:var(--ink, var(--text-muted));display:flex;padding:0"><Icon name="x" :size="16" :style="tierIcon" /></button>
   </div>
 </template>

package/components/forms/Select.d.ts

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

package/components/forms/Select.jsx

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

package/components/forms/Select.vue

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

package/components/forms/Slider.jsx

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

package/components/forms/Slider.vue

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

package/components/forms/Switch.d.ts

@@ -1,31 +1,39 @@
 import * as React from "react";
-/** 34×20 switch for settings-style booleans. Addition — not in the source file. */
+/**
+ * Switch — pill track at the region's tier (sm 28×16 · md 36×20 · lg 44×24), knob 4px smaller, 160ms ease-out slide. Controlled.
+ * Variants: knob glyph (icon or one character), text inside the pill, captions beside it,
+ * a semantic red→green tone, and an async gate that shows a spinner in the knob.
+ */
 export interface SwitchProps {
   checked?: boolean;
-  onChange?: (checked: boolean) => void;
-  label?: string;
-  size?: "md" | "sm";
+  onChange?(next: boolean): void;
   disabled?: boolean;
-  style?: React.CSSProperties;
-}
-export declare function Switch(props: SwitchProps): JSX.Element;
-/** 16px (sm: 13px) radio. Addition — not in the source file. */
-export interface RadioProps {
-  checked?: boolean;
-  onChange?: (checked: boolean) => void;
+  /** Size tier: sm 28×16 · md 36×20 · lg 44×24. Omit to inherit the enclosing region's tier (the default); lg is roomy enough for a knob glyph */
+  size?: "sm" | "md" | "lg";
+  /** primary = action blue on / border-strong off · semantic = success on / danger off */
+  tone?: "primary" | "semantic";
+  /** Explicit track colors; override tone. Prefer tokens. */
+  onColor?: string;
+  offColor?: string;
+  /** Icon inside the knob, or a pair for each state */
+  knobIcon?: string | { on: string; off: string };
+  /** ONE letter or ONE CJK character inside the knob, or a pair */
+  knobText?: string | { on: string; off: string };
+  /** Text inside the pill opposite the knob — keep it to 1–3 characters */
+  insideOn?: string;
+  insideOff?: string;
+  /** Alias for the insideOn/insideOff pair */
+  inlinePrompt?: { on: string; off: string };
+  /** Single caption to the right (settings rows) — text-body, state-independent */
   label?: string;
-  size?: "md" | "sm";
-  disabled?: boolean;
-  style?: React.CSSProperties;
-}
-export declare function Radio(props: RadioProps): JSX.Element;
-/** Radio set; `row` lays them horizontally. */
-export interface RadioGroupProps {
-  options?: string[];
-  value?: string;
-  onChange?: (value: string) => void;
-  row?: boolean;
-  size?: "md" | "sm";
+  /** Captions beside the pill; the active side takes text-heading */
+  labelOn?: string;
+  labelOff?: string;
+  /** Controlled loading: spinner in the knob, input inert */
+  loading?: boolean;
+  /** Async gate — Switch shows loading until it settles; flips only on truthy */
+  beforeChange?(next: boolean): Promise<boolean> | boolean;
   style?: React.CSSProperties;
 }
-export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+export declare function Switch(props: SwitchProps): JSX.Element;
+export default Switch;

package/components/forms/Switch.jsx

@@ -1,40 +1,90 @@
 import React from "react";
+import { Icon } from "../icons/Icon.jsx";
 
-const switchDims = { sm: { w: 28, h: 16, knob: 12 }, md: { w: 34, h: 20, knob: 16 } };
-/** Switch — 34×20 (sm: 28×16) track, knob. Keybricks has no switch in the source file; this follows the button radii + action color. */
-export function Switch({ checked, onChange, label, size = "md", disabled, style }) {
-  const d = switchDims[size] || switchDims.md;
-  return (
-    <label style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 8, cursor: disabled ? "default" : "pointer", opacity: disabled ? .5 : 1, ...style }}
-      onClick={() => !disabled && onChange && onChange(!checked)}>
-      <span style={{ width: d.w, height: d.h, borderRadius: "var(--radius-full)", background: checked ? "var(--action-primary)" : "var(--track)", position: "relative", flexShrink: 0, transition: "var(--t-hover)" }}>
-        <span style={{ position: "absolute", top: 2, left: checked ? d.w - d.knob - 2 : 2, width: d.knob, height: d.knob, borderRadius: "var(--radius-full)", background: "var(--on-accent)", boxShadow: "0 1px 2px rgba(0,0,0,.2)", transition: "left var(--dur-fast) var(--ease-out)" }} />
-      </span>
-      {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
-    </label>
-  );
-}
+/**
+ * Switch — pill track sized by the region's tier (sm 28×16 · md 36×20 · lg 44×24), knob 4px smaller, 160ms ease-out slide.
+ * Track, knob, glyph and label all read the tier tokens (tokens/layout.css), so a Switch in a form row matches its neighbours.
+ *
+ * checked / onChange(next)   controlled boolean
+ * disabled                   50% opacity, no pointer
+ * size                       "sm" | "md" | "lg" — omit to inherit the region's tier; lg is roomy enough for knobIcon / knobText
+ * tone                       "primary" (default, action blue) | "semantic" (red off → green on)
+ * onColor / offColor         explicit track colors; override tone
+ * knobIcon / knobText        glyph inside the knob: string | { on, off }. knobText is ONE letter or ONE CJK character.
+ * insideOn / insideOff       text inside the pill on the far side of the knob (short — "ON"/"OFF", "开"/"关", "Y"/"N")
+ * labelOn / labelOff         captions beside the pill; active caption takes text-heading, inactive takes text-muted
+ * loading                    controlled: knob shows a spinner, input is inert
+ * beforeChange(next) => Promise|boolean
+ *                            async gate — Switch enters loading, flips only if the promise resolves truthy
+ * inlinePrompt               (Vue-friendly alias of insideOn/insideOff pair {on,off})
+ */
 
-const radioDims = { sm: { box: 13, dot: 6 }, md: { box: 16, dot: 8 } };
-/** Radio — 16px (sm: 13px) circle, 1.5px border, filled dot when selected. */
-export function Radio({ checked, onChange, label, size = "md", disabled, style }) {
-  const d = radioDims[size] || radioDims.md;
-  return (
-    <label style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 6, cursor: disabled ? "default" : "pointer", opacity: disabled ? .5 : 1, ...style }}
-      onClick={() => !disabled && onChange && onChange(true)}>
-      <span style={{ width: d.box, height: d.box, borderRadius: "var(--radius-full)", boxSizing: "border-box", border: `1.5px solid ${checked ? "var(--action-primary)" : "var(--checkbox-border)"}`, background: "var(--bg-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "var(--t-hover)" }}>
-        {checked ? <span style={{ width: d.dot, height: d.dot, borderRadius: "var(--radius-full)", background: "var(--action-primary)" }} /> : null}
-      </span>
-      {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
-    </label>
-  );
-}
+/* Geometry in CSS so it follows the tier without JavaScript: knob = track height − 4, glyph = half the track height. */
+const H = "var(--switch-h)", W = "var(--switch-w)", KNOB = "calc(var(--switch-h) - 4px)", GLYPH = "calc(var(--switch-h) * .5)";
+
+const pick = (v, on) => (v && typeof v === "object" ? (on ? v.on : v.off) : v);
+
+export function Switch({ checked = false, onChange, disabled, size, tone = "primary", onColor, offColor, knobIcon, knobText, insideOn, insideOff, inlinePrompt, label, labelOn, labelOff, loading: loadingProp, beforeChange, style }) {
+  // `label` = single caption to the right, shown in text-body regardless of state (settings-row usage)
+  const single = label != null && labelOn == null && labelOff == null;
+  const [busy, setBusy] = React.useState(false);
+  const alive = React.useRef(true);
+  React.useEffect(() => () => { alive.current = false; }, []);
+  const loading = loadingProp || busy;
+  if (inlinePrompt) { insideOn = insideOn ?? inlinePrompt.on; insideOff = insideOff ?? inlinePrompt.off; }
+  const hasInside = insideOn != null || insideOff != null;
+  // inside text needs a wider track so the knob never covers the word: text runs at half the track height, ~.68em per character
+  const insideChars = hasInside ? Math.max(String(insideOn ?? "").length, String(insideOff ?? "").length) : 0;
+  const w = hasInside ? `max(${W}, calc(${H} * ${(1 + insideChars * .34).toFixed(2)} + 6px))` : W;
+
+  const onTrack = onColor || (tone === "semantic" ? "var(--success)" : "var(--action-primary)");
+  const offTrack = offColor || (tone === "semantic" ? "var(--danger)" : "var(--border-strong)");
+  const track = checked ? onTrack : offTrack;
+  const inert = disabled || loading;
+
+  const flip = async () => {
+    if (inert) return;
+    const next = !checked;
+    if (beforeChange) {
+      setBusy(true);
+      let ok = false;
+      try { ok = await beforeChange(next); } catch (e) { ok = false; }
+      if (!alive.current) return;
+      setBusy(false);
+      if (!ok) return;
+    }
+    onChange && onChange(next);
+  };
 
-/** Vertical or horizontal group of Radios. */
-export function RadioGroup({ options = [], value, onChange, row, size = "md", style }) {
-  return (
-    <div style={{ display: "flex", flexDirection: row ? "row" : "column", gap: row ? 16 : 10, ...style }}>
-      {options.map((o) => <Radio key={o} label={o} size={size} checked={value === o} onChange={() => onChange && onChange(o)} />)}
-    </div>
-  );
+  const glyphIcon = pick(knobIcon, checked);
+  const glyphText = pick(knobText, checked);
+  const knobX = checked ? `calc(100% - ${H} + 2px)` : 2;
+
+  const knob = <span aria-hidden="true" style={{ position: "absolute", top: 2, left: knobX, width: KNOB, height: KNOB, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", boxShadow: "0 1px 2px rgba(0,0,0,.18)", transition: "left 160ms ease-out", display: "flex", alignItems: "center", justifyContent: "center", color: track, fontSize: GLYPH, lineHeight: 1, fontWeight: "var(--weight-semibold)", fontFamily: "var(--font-sans)", overflow: "hidden" }}>
+    {loading
+      ? <span style={{ width: GLYPH, height: GLYPH, borderRadius: "50%", border: `1.5px solid ${track}`, borderRightColor: "transparent", animation: "kb-spin 720ms linear infinite" }}></span>
+      : glyphIcon ? <Icon name={glyphIcon} size={10} strokeWidth={2.5} style={{ width: GLYPH, height: GLYPH }} />
+      : glyphText ? <span>{String(glyphText).slice(0, 1)}</span> : null}
+  </span>;
+
+  const insideStyle = (side) => ({ position: "absolute", top: 0, bottom: 0, [side]: 6, display: "flex", alignItems: "center", fontSize: GLYPH, lineHeight: 1, fontWeight: "var(--weight-semibold)", fontFamily: "var(--font-sans)", letterSpacing: ".2px", color: "var(--on-accent)", transition: "opacity 160ms ease-out", pointerEvents: "none", whiteSpace: "nowrap" });
+
+  const pill = <span role="switch" aria-checked={checked} aria-busy={loading || undefined} aria-disabled={disabled || undefined} tabIndex={inert ? -1 : 0} onClick={flip}
+    onKeyDown={e => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); flip(); } }}
+    style={{ position: "relative", display: "inline-block", width: w, height: H, borderRadius: "var(--radius-full)", "--sw-track": track, background: "var(--sw-bg, var(--sw-track))", transition: "background 160ms ease-out", cursor: inert ? (loading ? "progress" : "not-allowed") : "pointer", flexShrink: 0, verticalAlign: "middle", outline: "none" }}>
+    {hasInside && <span style={{ ...insideStyle("left"), opacity: checked ? 1 : 0 }}>{insideOn}</span>}
+    {hasInside && <span style={{ ...insideStyle("right"), opacity: checked ? 0 : 1 }}>{insideOff}</span>}
+    {knob}
+  </span>;
+
+  const capBase = { fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", fontFamily: "var(--font-sans)", cursor: inert ? "default" : "pointer", userSelect: "none" };
+  if (single) return <span data-size={size} data-sw="" style={{ display: "inline-flex", alignItems: "center", gap: "var(--control-gap)", opacity: disabled ? .5 : 1, ...style }}>{pill}<span onClick={flip} style={{ ...capBase, fontWeight: "var(--weight-regular)", color: "var(--text-body)" }}>{label}</span></span>;
+  if (labelOn == null && labelOff == null) return <span data-size={size} style={{ display: "inline-flex", alignItems: "center", opacity: disabled ? .5 : 1, ...style }}>{pill}</span>;
+
+  const cap = (text, active) => text == null ? null : <span style={{ ...capBase, fontWeight: active ? "var(--weight-medium)" : "var(--weight-regular)", color: active ? "var(--text-heading)" : "var(--text-muted)", transition: "color 160ms ease-out" }} onClick={flip}>{text}</span>;
+  return <span data-size={size} data-sw="" style={{ display: "inline-flex", alignItems: "center", gap: "var(--control-gap)", opacity: disabled ? .5 : 1, ...style }}>
+    {cap(labelOff, !checked)}{pill}{cap(labelOn, checked)}
+  </span>;
 }
+
+export default Switch;

package/components/forms/Switch.vue

@@ -1,16 +1,62 @@
 <script setup>
-import { computed } from 'vue'
-// Switch — 34×20 (sm: 28×16) track, knob.
-const dims = { sm: { w: 28, h: 16, knob: 12 }, md: { w: 34, h: 20, knob: 16 } }
-const props = defineProps({ modelValue: Boolean, label: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
-const emit = defineEmits(['update:modelValue'])
-const d = computed(() => dims[props.size] || dims.md)
+import { ref, computed, onBeforeUnmount } from 'vue'
+import Icon from '../icons/Icon.vue'
+// Switch — pill track sized by the region's tier (sm 28×16 · md 36×20 · lg 44×24), knob 4px smaller, 160ms slide. v-model:checked.
+// Geometry is CSS (tokens/layout.css --switch-w/-h), so it follows the tier without JavaScript; `size` stamps data-size to override.
+// tone "primary" | "semantic" (red off → green on); onColor/offColor override.
+// knobIcon / knobText: string | { on, off } — knobText is ONE letter or ONE CJK char.
+// insideOn / insideOff: text inside the pill opposite the knob. labelOn / labelOff: captions beside the pill.
+// loading: controlled spinner. beforeChange(next) → Promise|boolean gates the flip and shows loading meanwhile.
+const props = defineProps({
+  checked: Boolean, disabled: Boolean, loading: Boolean,
+  size: String, tone: { type: String, default: 'primary' },
+  onColor: String, offColor: String,
+  knobIcon: [String, Object], knobText: [String, Object],
+  insideOn: String, insideOff: String, label: String, labelOn: String, labelOff: String,
+  beforeChange: Function, style: Object
+})
+const emit = defineEmits(['update:checked', 'change'])
+const H = 'var(--switch-h)', W = 'var(--switch-w)', KNOB = 'calc(var(--switch-h) - 4px)', GLYPH = 'calc(var(--switch-h) * .5)'
+const busy = ref(false); let alive = true; onBeforeUnmount(() => { alive = false })
+const isLoading = computed(() => props.loading || busy.value)
+const inert = computed(() => props.disabled || isLoading.value)
+const hasInside = computed(() => props.insideOn != null || props.insideOff != null)
+// inside text needs a wider track so the knob never covers the word: text runs at half the track height, ~.68em per character
+const width = computed(() => { if (!hasInside.value) return W; const n = Math.max((props.insideOn || '').length, (props.insideOff || '').length); return `max(${W}, calc(${H} * ${(1 + n * .34).toFixed(2)} + 6px))` })
+const track = computed(() => props.checked ? (props.onColor || (props.tone === 'semantic' ? 'var(--success)' : 'var(--action-primary)')) : (props.offColor || (props.tone === 'semantic' ? 'var(--danger)' : 'var(--border-strong)')))
+const pick = (v) => v && typeof v === 'object' ? (props.checked ? v.on : v.off) : v
+const glyphIcon = computed(() => pick(props.knobIcon))
+const glyphText = computed(() => { const t = pick(props.knobText); return t ? String(t).slice(0, 1) : '' })
+const knobX = computed(() => props.checked ? `calc(100% - ${H} + 2px)` : '2px')
+async function flip() {
+  if (inert.value) return
+  const next = !props.checked
+  if (props.beforeChange) {
+    busy.value = true; let ok = false
+    try { ok = await props.beforeChange(next) } catch (e) { ok = false }
+    if (!alive) return
+    busy.value = false
+    if (!ok) return
+  }
+  emit('update:checked', next); emit('change', next)
+}
+const insideStyle = (side, on) => ({ position: 'absolute', top: 0, bottom: 0, [side]: '6px', display: 'flex', alignItems: 'center', fontSize: GLYPH, lineHeight: 1, fontWeight: 'var(--weight-semibold)', fontFamily: 'var(--font-sans)', letterSpacing: '.2px', color: 'var(--on-accent)', transition: 'opacity 160ms ease-out', pointerEvents: 'none', whiteSpace: 'nowrap', opacity: on === props.checked ? 1 : 0 })
+const cap = (active) => ({ fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', fontFamily: 'var(--font-sans)', fontWeight: active ? 'var(--weight-medium)' : 'var(--weight-regular)', color: active ? 'var(--text-heading)' : 'var(--text-muted)', transition: 'color 160ms ease-out', cursor: inert.value ? 'default' : 'pointer', userSelect: 'none' })
 </script>
 <template>
-  <label :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: 8, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('update:modelValue', !modelValue)">
-    <span :style="{ width: d.w + 'px', height: d.h + 'px', borderRadius: 'var(--radius-full)', background: modelValue ? 'var(--action-primary)' : 'var(--track)', position: 'relative', flexShrink: 0, transition: 'var(--t-hover)' }">
-      <span :style="{ position: 'absolute', top: '2px', left: (modelValue ? d.w - d.knob - 2 : 2) + 'px', width: d.knob + 'px', height: d.knob + 'px', borderRadius: 'var(--radius-full)', background: 'var(--on-accent)', boxShadow: '0 1px 2px rgba(0,0,0,.2)', transition: 'left var(--dur-fast) var(--ease-out)' }" />
+  <span :data-size="size" data-sw="" :style="{ display: 'inline-flex', alignItems: 'center', gap: 'var(--control-gap)', opacity: disabled ? .5 : 1, ...style }">
+    <span v-if="labelOff != null" :style="cap(!checked)" @click="flip">{{ labelOff }}</span>
+    <span role="switch" :aria-checked="checked" :aria-busy="isLoading || undefined" :aria-disabled="disabled || undefined" :tabindex="inert ? -1 : 0" @click="flip" @keydown.space.prevent="flip" @keydown.enter.prevent="flip"
+      :style="{ position: 'relative', display: 'inline-block', width: width, height: H, borderRadius: 'var(--radius-full)', '--sw-track': track, background: 'var(--sw-bg, var(--sw-track))', transition: 'background 160ms ease-out', cursor: inert ? (isLoading ? 'progress' : 'not-allowed') : 'pointer', flexShrink: 0, verticalAlign: 'middle', outline: 'none' }">
+      <span v-if="hasInside" :style="insideStyle('left', true)">{{ insideOn }}</span>
+      <span v-if="hasInside" :style="insideStyle('right', false)">{{ insideOff }}</span>
+      <span aria-hidden="true" :style="{ position: 'absolute', top: '2px', left: knobX, width: KNOB, height: KNOB, borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', boxShadow: '0 1px 2px rgba(0,0,0,.18)', transition: 'left 160ms ease-out', display: 'flex', alignItems: 'center', justifyContent: 'center', color: track, fontSize: GLYPH, lineHeight: 1, fontWeight: 'var(--weight-semibold)', fontFamily: 'var(--font-sans)', overflow: 'hidden' }">
+        <span v-if="isLoading" :style="{ width: GLYPH, height: GLYPH, borderRadius: '50%', border: '1.5px solid ' + track, borderRightColor: 'transparent', animation: 'kb-spin 720ms linear infinite' }"></span>
+        <Icon v-else-if="glyphIcon" :name="glyphIcon" :size="10" :stroke-width="2.5" :style="{ width: GLYPH, height: GLYPH }" />
+        <span v-else-if="glyphText">{{ glyphText }}</span>
+      </span>
     </span>
-    <span v-if="label" :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-body)' }">{{ label }}</span>
-  </label>
+    <span v-if="labelOn != null" :style="cap(checked)" @click="flip">{{ labelOn }}</span>
+    <span v-if="label != null && labelOn == null && labelOff == null" :style="{ fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-regular)', color: 'var(--text-body)', cursor: inert ? 'default' : 'pointer', userSelect: 'none' }" @click="flip">{{ label }}</span>
+  </span>
 </template>

package/components/forms/Textarea.vue

@@ -1,20 +1,20 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { inputBase } from './input-base.js'
-// Multiline textarea, r8, default 90px tall. v-model. showCount + maxLength renders a bottom-right "n/max" counter (red past the limit).
-const props = defineProps({ modelValue: String, rows: { type: Number, default: 4 }, error: Boolean, disabled: Boolean, showCount: Boolean, maxLength: Number, style: Object })
+// Multiline textarea, r8, default 90px tall; text follows the region's tier. v-model. showCount + maxLength renders a bottom-right "n/max" counter (red past the limit).
+const props = defineProps({ modelValue: String, rows: { type: Number, default: 4 }, error: Boolean, disabled: Boolean, showCount: Boolean, maxLength: Number, size: String, style: Object })
 defineEmits(['update:modelValue'])
 const focus = ref(false)
 const len = computed(() => (props.modelValue || '').length)
 const over = computed(() => props.maxLength != null && len.value > props.maxLength)
-const s = computed(() => ({ ...inputBase, height: '90px', resize: 'vertical', paddingBottom: props.showCount ? '22px' : '8px',
+const s = computed(() => ({ ...inputBase, height: '90px', resize: 'vertical', paddingTop: '8px', paddingBottom: props.showCount ? '22px' : '8px',
   ...((props.error || over.value) ? { borderColor: 'var(--danger)' } : null),
   ...(focus.value && !props.disabled ? { borderColor: (props.error || over.value) ? 'var(--danger)' : 'var(--focus-border)', boxShadow: `0 0 0 2px ${(props.error || over.value) ? 'var(--danger-bg)' : 'var(--focus-ring)'}` } : null),
   ...(props.disabled ? { opacity: .5, cursor: 'not-allowed', background: 'var(--bg-inset)' } : null), ...props.style }))
 </script>
 <template>
   <div style="position:relative">
-    <textarea :rows="rows" :disabled="disabled" :maxlength="showCount ? undefined : maxLength" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @focus="focus = true" @blur="focus = false" :style="s"></textarea>
+    <textarea :rows="rows" :disabled="disabled" :data-size="size" :data-field="disabled ? undefined : ''" :maxlength="showCount ? undefined : maxLength" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @focus="focus = true" @blur="focus = false" :style="s"></textarea>
     <span v-if="showCount" :style="{ position: 'absolute', right: '10px', bottom: '7px', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: over ? 'var(--danger)' : 'var(--text-muted)' }">{{ len }}{{ maxLength != null ? `/${maxLength}` : '' }}</span>
   </div>
 </template>

package/components/forms/forms.prompt.md

@@ -15,9 +15,12 @@ Form controls, split by component (each with its own specimen card covering defa
 Everything is 12px text in 36px controls; readOnly inputs go #fafafa; disabled = 50% opacity; error = red border + red helper text via `Field`'s `error` prop.
 
 
-`Switch` / `Radio` / `RadioGroup` (additions, not in the source file):
+`Switch` / `Radio` / `RadioGroup` (additions, not in the source file). Switch: the track follows the size tier (sm 28×16 · md 36×20 · lg 44×24), blue-on / border-strong-off; a knob glyph needs the lg tier (`size="lg"` only when the switch stands alone) — `knobIcon` (string or `{on,off}`) or `knobText` (ONE letter / ONE CJK char); `insideOn`/`insideOff` put 1–3 characters inside the pill; `labelOn`/`labelOff` put captions on both sides with the active one in text-heading; `tone="semantic"` = danger off → success on, only for states with consequence (a live integration, a kill switch); `beforeChange` async-gates the flip with a spinner in the knob, `loading` does the same under your control.
 
 ```jsx
 <Switch label="Debug Mode" checked={on} onChange={setOn}/>
+<Switch size="lg" tone="semantic" knobIcon={{on:"check",off:"x"}} checked={live} beforeChange={n=>api.setLive(n)}/>
+<Switch labelOff="Monthly" labelOn="Annual" checked={annual} onChange={setAnnual}/>
 <RadioGroup options={["New","Overwrite","Skip"]} value={v} onChange={setV}/>
+<RadioGroup variant="cards" row value={m} onChange={setM} options={[{label:"Merge",value:"merge",description:"Keep target values, add new keys"},{label:"Overwrite",value:"overwrite",description:"Target takes source values"}]}/>
 ```

package/components/forms/input-base.js

@@ -1,3 +1,4 @@
 // Shared base style for text-like controls (Input, Textarea, Combobox, DatePicker).
 // Lives in a plain module because <script setup> cannot export values.
-export const inputBase = { height: 'var(--h-input)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-control)', background: 'var(--bg-surface)', padding: '8px 12px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-primary)', outline: 'none', boxSizing: 'border-box', width: '100%' }
+// Height, text and padding come from the size tier of the enclosing region (tokens/layout.css): sm 24 · md 32 · lg 36.
+export const inputBase = { height: 'var(--control-h)', borderRadius: 'var(--radius-md)', border: '1px solid var(--field-border, var(--border-control))', background: 'var(--bg-surface)', padding: '0 var(--control-px)', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-primary)', outline: 'none', boxSizing: 'border-box', width: '100%' }

package/components/index.d.ts

@@ -1,5 +1,4 @@
 /* Generated barrel — do not edit by hand. */
-export * from "./brand/BrandVisual";
 export * from "./buttons/ActionChip";
 export * from "./buttons/Button";
 export * from "./buttons/IconButton";
@@ -32,7 +31,6 @@ export * from "./charts/TreemapChart";
 export * from "./charts/WaterfallChart";
 export * from "./charts/WorldMap";
 export * from "./data/CodeBlock";
-export * from "./data/DataTable";
 export * from "./data/DiffValue";
 export * from "./data/FilterBar";
 export * from "./data/KeyValue";
@@ -40,6 +38,7 @@ export * from "./data/ListRow";
 export * from "./data/Pagination";
 export * from "./data/SmartTable";
 export * from "./data/Spreadsheet";
+export * from "./data/Table";
 export * from "./display/Avatar";
 export * from "./display/Badge";
 export * from "./display/Card";
@@ -65,6 +64,7 @@ export * from "./forms/Field";
 export * from "./forms/Input";
 export * from "./forms/MultiSelect";
 export * from "./forms/NumberStepper";
+export * from "./forms/Radio";
 export * from "./forms/SearchInput";
 export * from "./forms/Select";
 export * from "./forms/Slider";

package/components/index.js

@@ -1,9 +1,6 @@
 /* Generated barrel — do not edit by hand. Run: node scripts/build-index.mjs
    Source-only package: consumers compile these .jsx files with their own toolchain. */
 
-/* brand/ */
-export { BrandVisual } from "./brand/BrandVisual.jsx";
-
 /* buttons/ */
 export { ActionChip } from "./buttons/ActionChip.jsx";
 export { Button, ButtonGroup } from "./buttons/Button.jsx";
@@ -41,7 +38,6 @@ export { WorldMap } from "./charts/WorldMap.jsx";
 
 /* data/ */
 export { CodeBlock } from "./data/CodeBlock.jsx";
-export { DataTable } from "./data/DataTable.jsx";
 export { DiffValue } from "./data/DiffValue.jsx";
 export { FilterBar } from "./data/FilterBar.jsx";
 export { KeyValue, KeyValueList } from "./data/KeyValue.jsx";
@@ -49,6 +45,9 @@ export { ListRow } from "./data/ListRow.jsx";
 export { Pagination } from "./data/Pagination.jsx";
 export { SmartTable } from "./data/SmartTable.jsx";
 export { Spreadsheet } from "./data/Spreadsheet.jsx";
+export { Table } from "./data/Table.jsx";
+/** @deprecated renamed to Table in 1.0.6 — still exported in 2.x, removed in 3.0 */
+export { Table as DataTable } from "./data/Table.jsx";
 
 /* display/ */
 export { Avatar, AvatarGroup } from "./display/Avatar.jsx";
@@ -80,10 +79,11 @@ export { Field } from "./forms/Field.jsx";
 export { Input, Textarea } from "./forms/Input.jsx";
 export { MultiSelect } from "./forms/MultiSelect.jsx";
 export { NumberStepper } from "./forms/NumberStepper.jsx";
+export { Radio, RadioGroup } from "./forms/Radio.jsx";
 export { SearchInput } from "./forms/SearchInput.jsx";
 export { Select } from "./forms/Select.jsx";
 export { Slider } from "./forms/Slider.jsx";
-export { Radio, RadioGroup, Switch } from "./forms/Switch.jsx";
+export { Switch } from "./forms/Switch.jsx";
 
 /* icons/ */
 export { ICON_PATHS, Icon } from "./icons/Icon.jsx";

package/components/navigation/Breadcrumb.jsx

@@ -9,7 +9,7 @@ function Crumb({ label, last, hovered, onSelect }) {
       onClick={() => !last && onSelect && onSelect(label)}
       onKeyDown={(e) => { if (!last && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); onSelect && onSelect(label); } }}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
-      style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: last || on ? "var(--text-heading)" : "var(--text-secondary)", fontWeight: last ? "var(--weight-medium)" : "var(--weight-regular)", cursor: last ? "default" : "pointer", borderRadius: "var(--radius-sm)", transition: "var(--t-hover)" }}>{label}</span>
+      style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: last || on ? "var(--text-heading)" : "var(--text-secondary)", fontWeight: last ? "var(--weight-medium)" : "var(--weight-regular)", cursor: last ? "default" : "pointer", borderRadius: "var(--radius-sm)", transition: "var(--t-hover)" }}>{label}</span>
   );
 }
 
@@ -34,7 +34,7 @@ function Overflow({ items, onSelect }) {
         onClick={() => setOpen(!open)}
         onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen(!open); } if (e.key === "Escape") setOpen(false); }}
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
-        style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 20, height: 18, borderRadius: "var(--radius-sm)", cursor: "pointer", color: open || hover ? "var(--text-heading)" : "var(--text-muted)", background: open ? "var(--bg-active)" : hover ? "var(--bg-hover)" : "transparent", transition: "var(--t-hover)" }}>
+        style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 24, height: 24, borderRadius: "var(--radius-sm)", cursor: "pointer", color: open || hover ? "var(--text-heading)" : "var(--text-muted)", background: open ? "var(--bg-active)" : hover ? "var(--bg-hover)" : "transparent", transition: "var(--t-hover)" }}>
         <Icon name="ellipsis" size={14} />
       </span>
       {open ? (
@@ -52,7 +52,7 @@ function OverflowItem({ label, depth, onSelect }) {
     <span role="menuitem" tabIndex={0} onClick={() => onSelect(label)}
       onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onSelect(label); } }}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
-      style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 9px", paddingLeft: 9 + depth * 12, borderRadius: "var(--radius-sm)", cursor: "pointer", background: hover ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", transition: "var(--t-hover)" }}>
+      style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 9px", paddingLeft: 9 + depth * 12, borderRadius: "var(--radius-sm)", cursor: "pointer", background: hover ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", transition: "var(--t-hover)" }}>
       {depth > 0 ? <span style={{ color: "var(--text-muted)", display: "inline-flex", flexShrink: 0 }}><Icon name="chevron-right" size={11} /></span> : null}
       {label}
     </span>