@keyfunc/keybricks-ds 1.0.3 → 1.0.4

package/components/forms/Radio.jsx

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

package/components/forms/Radio.vue

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

package/components/forms/RadioGroup.vue

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

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 — 36×20 pill (lg 44×24), 16/20px knob, 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;
+  /** sm 28×16 · md 36×20 (default) · lg 44×24 — use lg whenever the knob carries a 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,92 @@
 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 — 36×20 pill, 16px knob, 160ms ease-out slide.
+ *
+ * checked / onChange(next)   controlled boolean
+ * disabled                   50% opacity, no pointer
+ * size                       "md" (36×20, default) | "lg" (44×24 — needed 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>
-  );
-}
+const SIZES = {
+  sm: { w: 28, h: 16, knob: 12, pad: 2, inside: 9, glyph: 8, label: "var(--text-xs)" },
+  md: { w: 36, h: 20, knob: 16, pad: 2, inside: 10, glyph: 10, label: "var(--text-sm)" },
+  lg: { w: 44, h: 24, knob: 20, pad: 2, inside: 11, glyph: 12, label: "var(--text-sm)" }
+};
+
+const pick = (v, on) => (v && typeof v === "object" ? (on ? v.on : v.off) : v);
+
+export function Switch({ checked = false, onChange, disabled, size = "md", 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;
+  const s = SIZES[size] || SIZES.md;
+  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
+  const insideExtra = hasInside ? Math.max(0, Math.max(String(insideOn ?? "").length, String(insideOff ?? "").length) * (s.inside * .68) + 6 - (s.w - s.knob - s.pad * 2)) : 0;
+  const w = s.w + insideExtra;
+
+  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 ? w - s.knob - s.pad : s.pad;
+
+  const knob = <span aria-hidden="true" style={{ position: "absolute", top: s.pad, left: knobX, width: s.knob, height: s.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: s.glyph, lineHeight: 1, fontWeight: 600, fontFamily: "var(--font-sans)", overflow: "hidden" }}>
+    {loading
+      ? <span style={{ width: s.glyph, height: s.glyph, borderRadius: "50%", border: `1.5px solid ${track}`, borderRightColor: "transparent", animation: "kb-spin 720ms linear infinite" }}></span>
+      : glyphIcon ? <Icon name={glyphIcon} size={s.glyph} strokeWidth={2.5} />
+      : glyphText ? <span>{String(glyphText).slice(0, 1)}</span> : null}
+  </span>;
+
+  const insideStyle = (side) => ({ position: "absolute", top: 0, bottom: 0, [side]: s.pad + 4, display: "flex", alignItems: "center", fontSize: s.inside, lineHeight: 1, fontWeight: 600, 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: s.h, borderRadius: "var(--radius-full)", background: 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>;
+
+  if (single) return <span style={{ display: "inline-flex", alignItems: "center", gap: 8, opacity: disabled ? .5 : 1, ...style }}>{pill}<span onClick={flip} style={{ fontSize: s.label, lineHeight: 1, fontFamily: "var(--font-sans)", fontWeight: 500, color: "var(--text-body)", cursor: inert ? "default" : "pointer", userSelect: "none" }}>{label}</span></span>;
+  if (labelOn == null && labelOff == null) return <span style={{ display: "inline-flex", alignItems: "center", opacity: disabled ? .5 : 1, ...style }}>{pill}</span>;
+
+  const cap = (text, active) => text == null ? null : <span style={{ fontSize: s.label, lineHeight: 1, fontFamily: "var(--font-sans)", fontWeight: active ? 500 : 400, color: active ? "var(--text-heading)" : "var(--text-muted)", transition: "color 160ms ease-out", cursor: inert ? "default" : "pointer", userSelect: "none" }} onClick={flip}>{text}</span>;
+  return <span style={{ display: "inline-flex", alignItems: "center", gap: 8, opacity: disabled ? .5 : 1, ...style }}>
+    {cap(labelOff, !checked)}{pill}{cap(labelOn, checked)}
+  </span>;
 }
+
+export default Switch;

package/components/forms/Switch.vue

@@ -1,16 +1,61 @@
 <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 — 36×20 pill (lg 44×24), 16/20px knob, 160ms slide. v-model:checked.
+// 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: { type: String, default: 'md' }, 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 SIZES = { sm: { w: 28, h: 16, knob: 12, pad: 2, inside: 9, glyph: 8 }, md: { w: 36, h: 20, knob: 16, pad: 2, inside: 10, glyph: 10 }, lg: { w: 44, h: 24, knob: 20, pad: 2, inside: 11, glyph: 12 } }
+const s = computed(() => SIZES[props.size] || SIZES.md)
+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)
+const width = computed(() => { if (!hasInside.value) return s.value.w; const n = Math.max((props.insideOn || '').length, (props.insideOff || '').length); return s.value.w + Math.max(0, n * (s.value.inside * .68) + 6 - (s.value.w - s.value.knob - s.value.pad * 2)) })
+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 ? width.value - s.value.knob - s.value.pad : s.value.pad)
+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]: (s.value.pad + 4) + 'px', display: 'flex', alignItems: 'center', fontSize: s.value.inside + 'px', lineHeight: 1, fontWeight: 600, 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: props.size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 1, fontFamily: 'var(--font-sans)', fontWeight: active ? 500 : 400, 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 :style="{ display: 'inline-flex', alignItems: 'center', gap: '8px', 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 + 'px', height: s.h + 'px', borderRadius: 'var(--radius-full)', background: 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: s.pad + 'px', left: knobX + 'px', width: s.knob + 'px', height: s.knob + 'px', 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: s.glyph + 'px', lineHeight: 1, fontWeight: 600, fontFamily: 'var(--font-sans)', overflow: 'hidden' }">
+        <span v-if="isLoading" :style="{ width: s.glyph + 'px', height: s.glyph + 'px', borderRadius: '50%', border: '1.5px solid ' + track, borderRightColor: 'transparent', animation: 'kb-spin 720ms linear infinite' }"></span>
+        <Icon v-else-if="glyphIcon" :name="glyphIcon" :size="s.glyph" :stroke-width="2.5" />
+        <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: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 1, fontFamily: 'var(--font-sans)', fontWeight: 500, color: 'var(--text-body)', cursor: inert ? 'default' : 'pointer', userSelect: 'none' }" @click="flip">{{ label }}</span>
+  </span>
 </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: default 36×20 blue-on / border-strong-off; `size="lg"` (44×24) whenever the knob carries a glyph — `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/index.d.ts

@@ -65,6 +65,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

@@ -80,10 +80,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/tabs/SegmentedControl.d.ts

@@ -1,11 +1,18 @@
 import * as React from "react";
-/** Inset segmented control with a raised active segment. Addition — not in the source file. */
+/** Inset segmented control with a raised active segment — switches views of the same data, applies instantly. ← → move between enabled segments. */
 export interface SegmentedControlProps {
-  /** Plain labels, or {label, icon} entries */
-  options?: (string | { label: string; icon?: string })[];
+  /** Plain labels, or { label, icon?, disabled? } entries. Value is matched by label. */
+  options?: (string | { label: string; icon?: string; disabled?: boolean })[];
   value?: string;
   onChange?: (value: string) => void;
+  /** md 32px (default) · sm 26px */
   size?: "sm" | "md";
+  /** Hide labels; each label becomes the segment's aria-label and tooltip */
+  iconOnly?: boolean;
+  /** Greys the whole control */
+  disabled?: boolean;
+  /** Stretch to the container, segments share the width evenly */
+  fullWidth?: boolean;
   style?: React.CSSProperties;
 }
 export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;

package/components/tabs/SegmentedControl.jsx

@@ -1,18 +1,33 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Segmented control — inset track, raised active segment. options: string[] or [{label,icon}]. */
-export function SegmentedControl({ options = [], value, onChange, size = "md", style }) {
+/**
+ * Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
+ * options: string[] | { label, icon?, disabled? }[]   value/onChange by label
+ * size "md" (32) | "sm" (26) · iconOnly hides labels (label becomes aria-label / title)
+ * disabled greys the whole control · fullWidth stretches segments evenly
+ * Keyboard: ← → move between enabled segments.
+ */
+export function SegmentedControl({ options = [], value, onChange, size = "md", iconOnly, disabled, fullWidth, style }) {
   const h = size === "sm" ? 26 : 32;
+  const opts = options.map((o) => (typeof o === "string" ? { label: o } : o));
+  const enabled = opts.filter((o) => !o.disabled);
+  const onKey = (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" || disabled || !enabled.length) return;
+    e.preventDefault();
+    const i = enabled.findIndex((o) => o.label === value);
+    const n = e.key === "ArrowRight" ? enabled[(i + 1) % enabled.length] : enabled[(i - 1 + enabled.length) % enabled.length];
+    onChange && onChange(n.label);
+  };
   return (
-    <div style={{ display: "inline-flex", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", ...style }}>
-      {options.map((o) => {
-        const label = typeof o === "string" ? o : o.label;
-        const is = value === label;
+    <div role="tablist" aria-disabled={disabled || undefined} onKeyDown={onKey} style={{ display: fullWidth ? "flex" : "inline-flex", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...style }}>
+      {opts.map((o) => {
+        const is = value === o.label, off = disabled || o.disabled;
         return (
-          <button key={label} type="button" onClick={() => onChange && onChange(label)}
-            style={{ height: h - 6, padding: "0 10px", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", color: is ? "var(--text-heading)" : "var(--text-secondary)", whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
-            {typeof o === "object" && o.icon ? <Icon name={o.icon} size={13} /> : null}{label}
+          <button key={o.label} type="button" role="tab" aria-selected={is} aria-label={iconOnly ? o.label : undefined} title={iconOnly ? o.label : undefined} disabled={off} tabIndex={is ? 0 : -1}
+            onClick={() => !off && onChange && onChange(o.label)}
+            style={{ height: h - 6, padding: iconOnly ? "0 8px" : "0 10px", flex: fullWidth ? 1 : "none", justifyContent: "center", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: off ? "not-allowed" : "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", color: is ? "var(--text-heading)" : "var(--text-secondary)", opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
+            {o.icon ? <Icon name={o.icon} size={13} /> : null}{iconOnly ? null : o.label}
           </button>
         );
       })}

package/components/tabs/SegmentedControl.vue

@@ -1,15 +1,27 @@
 <script setup>
+import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Segmented control — inset track, raised active segment. options: string[] or [{label,icon}].
-const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: { type: String, default: 'md' }, style: Object })
+// Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
+// options: string[] | { label, icon?, disabled? }[] · v-model by label · size md (32) | sm (26)
+// iconOnly hides labels (label → aria-label/title) · disabled greys the control · fullWidth stretches segments · ← → keyboard.
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: { type: String, default: 'md' }, iconOnly: Boolean, disabled: Boolean, fullWidth: Boolean, style: Object })
 const emit = defineEmits(['update:modelValue'])
-function label(o) { return typeof o === 'string' ? o : o.label }
+const opts = computed(() => props.options.map(o => typeof o === 'string' ? { label: o } : o))
+const enabled = computed(() => opts.value.filter(o => !o.disabled))
+const h = computed(() => props.size === 'sm' ? 26 : 32)
+const pick = (o) => { if (!(props.disabled || o.disabled)) emit('update:modelValue', o.label) }
+function onKey(e) {
+  if ((e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') || props.disabled || !enabled.value.length) return
+  e.preventDefault()
+  const i = enabled.value.findIndex(o => o.label === props.modelValue), n = enabled.value.length
+  emit('update:modelValue', (e.key === 'ArrowRight' ? enabled.value[(i + 1) % n] : enabled.value[(i - 1 + n) % n]).label)
+}
 </script>
 <template>
-  <div :style="{ display: 'inline-flex', padding: 2, gap: 2, background: 'var(--bg-inset)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box', ...style }">
-    <button v-for="o in options" :key="label(o)" type="button" @click="emit('update:modelValue', label(o))"
-      :style="{ height: (size === 'sm' ? 26 : 32) - 6, padding: '0 10px', display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 'var(--radius-sm)', border: 'none', cursor: 'pointer', background: modelValue === label(o) ? 'var(--bg-surface)' : 'transparent', boxShadow: modelValue === label(o) ? '0 1px 2px rgba(0,0,0,.08)' : 'none', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', color: modelValue === label(o) ? 'var(--text-heading)' : 'var(--text-secondary)', whiteSpace: 'nowrap', transition: 'var(--t-hover)' }">
-      <Icon v-if="typeof o === 'object' && o.icon" :name="o.icon" :size="13" />{{ label(o) }}
+  <div role="tablist" :aria-disabled="disabled || undefined" @keydown="onKey" :style="{ display: fullWidth ? 'flex' : 'inline-flex', padding: '2px', gap: '2px', background: 'var(--bg-inset)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box', opacity: disabled ? .5 : 1, ...style }">
+    <button v-for="o in opts" :key="o.label" type="button" role="tab" :aria-selected="modelValue === o.label" :aria-label="iconOnly ? o.label : undefined" :title="iconOnly ? o.label : undefined" :disabled="disabled || o.disabled" :tabindex="modelValue === o.label ? 0 : -1" @click="pick(o)"
+      :style="{ height: (h - 6) + 'px', padding: iconOnly ? '0 8px' : '0 10px', flex: fullWidth ? 1 : 'none', justifyContent: 'center', display: 'inline-flex', alignItems: 'center', gap: '6px', borderRadius: 'var(--radius-sm)', border: 'none', cursor: (disabled || o.disabled) ? 'not-allowed' : 'pointer', background: modelValue === o.label ? 'var(--bg-surface)' : 'transparent', boxShadow: modelValue === o.label ? '0 1px 2px rgba(0,0,0,.08)' : 'none', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', color: modelValue === o.label ? 'var(--text-heading)' : 'var(--text-secondary)', opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: 'nowrap', transition: 'var(--t-hover)' }">
+      <Icon v-if="o.icon" :name="o.icon" :size="13" /><template v-if="!iconOnly">{{ o.label }}</template>
     </button>
   </div>
 </template>

package/components/tabs/tabs.prompt.md

@@ -7,8 +7,10 @@ Tab systems: `Tabs` (13px underline — page level), `PanelTabs` (12px underline
 <ViewToggle value={view} onChange={setView}/>
 ```
 
-`SegmentedControl` (addition) for view/range switches:
+`SegmentedControl` (addition) for view/range switches — same data, instant; never a saved value and never page navigation. `iconOnly`, per-option `disabled`, `fullWidth`:
 
 ```jsx
 <SegmentedControl options={[{label:"List",icon:"list"},{label:"Grid",icon:"layout-grid"}]} value={v} onChange={setV}/>
+<SegmentedControl iconOnly options={[{icon:"table",label:"Table"},{icon:"chart-column",label:"Chart"}]} value={m} onChange={setM}/>
+<SegmentedControl fullWidth options={["Overview","Details","History"]} value={t} onChange={setT}/>
 ```