@keyfunc/keybricks-ds 1.0.4 → 2.1.1

package/components/feedback/Accordion.jsx

@@ -8,11 +8,11 @@ export function Accordion({ title, subtitle, defaultOpen, open: openProp, onTogg
   const toggle = () => (onToggle ? onToggle(!open) : setOpenState(!open));
   return (
     <div style={{ borderBottom: "1px solid var(--border-card)", ...style }}>
-      <div onClick={toggle} style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 4px", cursor: "pointer" }}>
+      <div onClick={toggle} data-wash="" style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 8px", margin: "0 -4px", borderRadius: "var(--radius-md)", background: "var(--wash, transparent)", transition: "var(--t-hover)", cursor: "pointer" }}>
         <span style={{ color: "var(--text-muted)", display: "inline-flex", transform: open ? "rotate(90deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-right" size={14} /></span>
         <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
           <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-          {subtitle ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-secondary)" }}>{subtitle}</span> : null}
+          {subtitle ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{subtitle}</span> : null}
         </div>
       </div>
       {open ? <div style={{ padding: "0 4px 16px 28px" }}>{children}</div> : null}

package/components/feedback/Accordion.vue

@@ -10,11 +10,11 @@ function toggle() { if (props.open != null) emit('toggle', !open.value); else op
 </script>
 <template>
   <div :style="{ borderBottom: '1px solid var(--border-card)', ...style }">
-    <div @click="toggle" style="display:flex;align-items:center;gap:10px;padding:14px 4px;cursor:pointer">
+    <div @click="toggle" data-wash="" style="display:flex;align-items:center;gap:10px;padding:14px 8px;margin:0 -4px;border-radius:var(--radius-md);background:var(--wash, transparent);transition:var(--t-hover);cursor:pointer">
       <span :style="{ color: 'var(--text-muted)', display: 'inline-flex', transform: open ? 'rotate(90deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-right" :size="14" /></span>
       <div style="display:flex;flex-direction:column;flex:1">
         <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-        <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-secondary)">{{ subtitle }}</span>
+        <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ subtitle }}</span>
       </div>
     </div>
     <div v-if="open" style="padding:0 4px 16px 28px"><slot /></div>

package/components/feedback/ActivityItem.d.ts

@@ -1,10 +1,12 @@
 import * as React from "react";
-/** Feed row: 32px blue-tint icon tile, 13px/500 title, 12px meta, right action text ("Open"). */
+/** Feed row: 32px blue-tint icon tile, 14px/500 title, 12px meta, right action text ("Open"). */
 export interface ActivityItemProps {
   icon?: string;
   title?: string;
   meta?: string;
   action?: React.ReactNode;
+  /** Fires when the action text is clicked. Vue: `@action`. */
+  onAction?: () => void;
   style?: React.CSSProperties;
 }
 export declare function ActivityItem(props: ActivityItemProps): JSX.Element;

package/components/feedback/ActivityItem.jsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { IconTile } from "../display/Badge.jsx";
 
-/** Activity feed row: 32px icon tile + 13px/500 title + 12px meta + optional right action. */
-export function ActivityItem({ icon = "file-text", title, meta, action, style }) {
+/** Activity feed row: 32px icon tile + 14px/500 title + 12px meta + optional right text action (a text link: ink darkens on hover). */
+export function ActivityItem({ icon = "file-text", title, meta, action, onAction, style }) {
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", ...style }}>
       <IconTile icon={icon} kind="row" style={{ background: "var(--info-bg)", border: "none", color: "var(--info-fg)" }} />
       <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
         <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{meta}</span> : null}
+        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{meta}</span> : null}
       </div>
-      {action ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-secondary)", cursor: "pointer" }}>{action}</span> : null}
+      {action ? <button type="button" onClick={onAction} data-ink="" style={{ border: "none", background: "transparent", padding: 0, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--ink, var(--text-secondary))", cursor: "pointer", whiteSpace: "nowrap" }}>{action}</button> : null}
     </div>
   );
 }
@@ -22,7 +22,7 @@ export function DotActivity({ tone = "success", text, time, style }) {
     <div style={{ display: "flex", gap: 8, alignItems: "flex-start", ...style }}>
       <span style={{ width: 8, height: 8, borderRadius: "var(--radius-full)", background: tones[tone], marginTop: 5, flexShrink: 0 }} />
       <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
-        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-heading)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{text}</span>
+        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: "var(--text-heading)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{text}</span>
         <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)" }}>{time}</span>
       </div>
     </div>

package/components/feedback/ActivityItem.vue

@@ -1,15 +1,16 @@
 <script setup>
 import IconTile from '../display/Badge.vue'
-// Activity feed row: 32px icon tile + 13px/500 title + 12px meta + optional right action.
+// Activity feed row: 32px icon tile + 14px/500 title + 12px meta + optional right text action (emits `action`).
 defineProps({ icon: { type: String, default: 'file-text' }, title: String, meta: String, action: String, style: Object })
+const emit = defineEmits(['action'])
 </script>
 <template>
-  <div :style="{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', ...style }">
+  <div :style="{ display: 'flex', alignItems: 'center', gap: '12px', padding: '12px 16px', ...style }">
     <IconTile :icon="icon" kind="row" style="background:var(--info-bg);border:none;color:var(--info-fg)" />
     <div style="display:flex;flex-direction:column;flex:1;min-width:0">
       <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ meta }}</span>
+      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ meta }}</span>
     </div>
-    <span v-if="action" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);letter-spacing:var(--tracking-base);color:var(--text-secondary);cursor:pointer">{{ action }}</span>
+    <button v-if="action" type="button" data-ink="" @click="emit('action')" style="border:none;background:transparent;padding:0;font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--ink, var(--text-secondary));cursor:pointer;white-space:nowrap">{{ action }}</button>
   </div>
 </template>

package/components/feedback/Alert.jsx

@@ -8,15 +8,15 @@ const alertTones = {
   danger: { bg: "var(--danger-bg)", fg: "var(--danger-text)", icon: "triangle-alert" },
 };
 
-/** Inline banner — tinted, no border, 13px title + 12px body. */
+/** Inline banner — tinted, no border; title and body at the base size. The icon is centred on the first text line, never on the block. */
 export function Alert({ tone = "info", title, children, action, style }) {
   const t = alertTones[tone];
   return (
     <div style={{ display: "flex", gap: 10, alignItems: "flex-start", background: t.bg, borderRadius: "var(--radius-md)", padding: "10px 12px", ...style }}>
-      <span style={{ color: t.fg, display: "inline-flex", marginTop: 1 }}><Icon name={t.icon} size={15} /></span>
+      <span style={{ color: t.fg, display: "inline-flex", alignItems: "center", flexShrink: 0, height: "var(--leading-base)" }}><Icon name={t.icon} size={15} /></span>
       <div style={{ display: "flex", flexDirection: "column", gap: 2, flex: 1, minWidth: 0 }}>
         {title ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: t.fg }}>{title}</span> : null}
-        {children ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{children}</span> : null}
+        {children ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: "var(--text-body)" }}>{children}</span> : null}
       </div>
       {action}
     </div>
@@ -29,7 +29,7 @@ export function EmptyState({ icon = "file-text", title, hint, action, style }) {
     <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, padding: "40px 24px", textAlign: "center", ...style }}>
       <span style={{ color: "var(--text-muted)", marginBottom: 6 }}><Icon name={icon} size={22} strokeWidth={1.5} /></span>
       <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-      {hint ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)", maxWidth: 320 }}>{hint}</span> : null}
+      {hint ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: "var(--text-secondary)", maxWidth: 320 }}>{hint}</span> : null}
       {action ? <span style={{ paddingTop: 10 }}>{action}</span> : null}
     </div>
   );

package/components/feedback/Alert.vue

@@ -12,11 +12,11 @@ const props = defineProps({ tone: { type: String, default: 'info' }, title: Stri
 const t = computed(() => alertTones[props.tone])
 </script>
 <template>
-  <div :style="{ display: 'flex', gap: 10, alignItems: 'flex-start', background: t.bg, borderRadius: 'var(--radius-md)', padding: '10px 12px', ...style }">
-    <span :style="{ color: t.fg, display: 'inline-flex', marginTop: 1 }"><Icon :name="t.icon" :size="15" /></span>
+  <div :style="{ display: 'flex', gap: '10px', alignItems: 'flex-start', background: t.bg, borderRadius: 'var(--radius-md)', padding: '10px 12px', ...style }">
+    <span :style="{ color: t.fg, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><Icon :name="t.icon" :size="15" /></span>
     <div style="display:flex;flex-direction:column;gap:2px;flex:1;min-width:0">
       <span v-if="title" :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: t.fg }">{{ title }}</span>
-      <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-body)"><slot /></span>
+      <span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-body)"><slot /></span>
     </div>
     <slot name="action" />
   </div>

package/components/feedback/Banner.jsx

@@ -13,13 +13,13 @@ const bannerTones = {
 export function Banner({ tone = "info", title, action, onAction, dismissible, onDismiss, children, style }) {
   const t = bannerTones[tone];
   return (
-    <div style={{ display: "flex", alignItems: "center", gap: 10, background: t.bg, borderLeft: `3px solid ${t.fg}`, padding: "10px 12px 10px 14px", boxSizing: "border-box", ...style }}>
-      <span style={{ color: t.fg, display: "inline-flex", flexShrink: 0 }}><Icon name={t.icon} size={16} /></span>
-      <span style={{ flex: 1, minWidth: 0, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>
+    <div style={{ display: "flex", alignItems: "flex-start", gap: 10, background: t.bg, borderLeft: `3px solid ${t.fg}`, padding: "10px 12px 10px 14px", boxSizing: "border-box", ...style }}>
+      <span style={{ color: t.fg, display: "inline-flex", alignItems: "center", flexShrink: 0, height: "var(--leading-base)" }}><Icon name={t.icon} size={16} /></span>
+      <span style={{ flex: 1, minWidth: 0, fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: "var(--text-body)" }}>
         {title && <strong style={{ fontWeight: "var(--weight-medium)", color: t.fg, paddingRight: 6 }}>{title}</strong>}{children}
       </span>
-      {action && <button type="button" onClick={onAction} style={{ border: "none", background: "transparent", cursor: "pointer", padding: 0, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", color: t.fg, textDecoration: "underline", whiteSpace: "nowrap", flexShrink: 0 }}>{action}</button>}
-      {dismissible && <IconButton icon="x" size="xs" muted label="Dismiss" onClick={onDismiss} />}
+      {action && <button type="button" onClick={onAction} data-link="" style={{ border: "none", background: "transparent", cursor: "pointer", padding: 0, height: "var(--leading-base)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", color: t.fg, textDecorationLine: "underline", textDecorationThickness: "var(--link-thick, 1px)", textUnderlineOffset: 2, whiteSpace: "nowrap", flexShrink: 0 }}>{action}</button>}
+      {dismissible && <IconButton icon="x" size="sm" muted label="Dismiss" onClick={onDismiss} style={{ margin: "-2px 0" }} />}
     </div>
   );
 }

package/components/feedback/Banner.vue

@@ -14,12 +14,12 @@ const emit = defineEmits(['action', 'dismiss'])
 const t = computed(() => bannerTones[props.tone])
 </script>
 <template>
-  <div :style="{ display: 'flex', alignItems: 'center', gap: '10px', background: t.bg, borderLeft: `3px solid ${t.fg}`, padding: '10px 12px 10px 14px', boxSizing: 'border-box', ...style }">
-    <span :style="{ color: t.fg, display: 'inline-flex', flexShrink: 0 }"><Icon :name="t.icon" :size="16" /></span>
-    <span style="flex:1;min-width:0;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-body)">
+  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', background: t.bg, borderLeft: `3px solid ${t.fg}`, padding: '10px 12px 10px 14px', boxSizing: 'border-box', ...style }">
+    <span :style="{ color: t.fg, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><Icon :name="t.icon" :size="16" /></span>
+    <span style="flex:1;min-width:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-body)">
       <strong v-if="title" :style="{ fontWeight: 'var(--weight-medium)', color: t.fg, paddingRight: '6px' }">{{ title }}</strong><slot />
     </span>
-    <button v-if="action" type="button" @click="emit('action')" :style="{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 0, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', color: t.fg, textDecoration: 'underline', whiteSpace: 'nowrap', flexShrink: 0 }">{{ action }}</button>
-    <IconButton v-if="dismissible" icon="x" size="xs" muted label="Dismiss" @click="emit('dismiss')" />
+    <button v-if="action" type="button" data-link="" @click="emit('action')" :style="{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 0, height: 'var(--leading-base)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', color: t.fg, textDecorationLine: 'underline', textDecorationThickness: 'var(--link-thick, 1px)', textUnderlineOffset: '2px', whiteSpace: 'nowrap', flexShrink: 0 }">{{ action }}</button>
+    <IconButton v-if="dismissible" icon="x" size="sm" muted label="Dismiss" :style="{ margin: '-2px 0' }" @click="emit('dismiss')" />
   </div>
 </template>

package/components/feedback/ContextMenu.d.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
-/** Floating context menu — r10, soft shadow, 13px rows, red danger row. */
+/** Floating context menu — r10, soft shadow, control-height rows at the region's tier (32px / 14px at md), red danger row. */
 export interface ContextMenuProps {
   items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean }[];
   onSelect?: (label: string) => void;
+  /** Size tier of the rows. Omit to inherit the tier of the control that opened the menu (the default). */
+  size?: "sm" | "md" | "lg";
   style?: React.CSSProperties;
 }
 export declare function ContextMenu(props: ContextMenuProps): JSX.Element;

package/components/feedback/ContextMenu.jsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider}]. */
-export function ContextMenu({ items = [], onSelect, style }) {
+/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides. */
+export function ContextMenu({ items = [], onSelect, size, style }) {
   const [hover, setHover] = React.useState(-1);
   return (
-    <div style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-menu)", padding: 4, minWidth: 148, display: "inline-flex", flexDirection: "column", ...style }}>
+    <div role="menu" data-size={size} style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-menu)", padding: 4, minWidth: 148, display: "inline-flex", flexDirection: "column", ...style }}>
       {items.map((it, i) => it.divider ? <div key={i} style={{ height: 1, background: "var(--border-subtle)", margin: "4px 0" }} /> : (
         <button key={i} type="button" onClick={() => onSelect && onSelect(it.label)}
           onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(-1)}
-          style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 10px", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: hover === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: it.danger ? "var(--danger)" : "var(--text-heading)", textAlign: "left" }}>
-          {it.icon ? <Icon name={it.icon} size={15} /> : null}{it.label}
+          role="menuitem" style={{ display: "flex", alignItems: "center", gap: 10, height: "var(--control-h)", padding: "0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: hover === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: it.danger ? "var(--danger)" : "var(--text-heading)", textAlign: "left", whiteSpace: "nowrap" }}>
+          {it.icon ? <Icon name={it.icon} size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /> : null}{it.label}
         </button>
       ))}
     </div>

package/components/feedback/ContextMenu.vue

@@ -1,18 +1,18 @@
 <script setup>
 import { ref } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider}].
-defineProps({ items: { type: Array, default: () => [] }, style: Object })
+// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
+defineProps({ items: { type: Array, default: () => [] }, size: String, style: Object })
 const emit = defineEmits(['select'])
 const hover = ref(-1)
 </script>
 <template>
-  <div :style="{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: 4, minWidth: 148, display: 'inline-flex', flexDirection: 'column', ...style }">
+  <div role="menu" :data-size="size" :style="{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: '4px', minWidth: '148px', display: 'inline-flex', flexDirection: 'column', ...style }">
     <template v-for="(it, i) in items" :key="i">
       <div v-if="it.divider" style="height:1px;background:var(--border-subtle);margin:4px 0" />
       <button v-else type="button" @click="emit('select', it.label)" @mouseenter="hover = i" @mouseleave="hover = -1"
-        :style="{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 10px', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', background: hover === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: it.danger ? 'var(--danger)' : 'var(--text-heading)', textAlign: 'left' }">
-        <Icon v-if="it.icon" :name="it.icon" :size="15" />{{ it.label }}
+        role="menuitem" :style="{ display: 'flex', alignItems: 'center', gap: '10px', height: 'var(--control-h)', padding: '0 10px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', background: hover === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: it.danger ? 'var(--danger)' : 'var(--text-heading)', textAlign: 'left', whiteSpace: 'nowrap' }">
+        <Icon v-if="it.icon" :name="it.icon" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)' }" />{{ it.label }}
       </button>
     </template>
   </div>

package/components/feedback/DotActivity.vue

@@ -5,10 +5,10 @@ const props = defineProps({ tone: { type: String, default: 'success' }, text: St
 const dot = computed(() => tonesMap[props.tone])
 </script>
 <template>
-  <div :style="{ display: 'flex', gap: 8, alignItems: 'flex-start', ...style }">
-    <span :style="{ width: 8, height: 8, borderRadius: 'var(--radius-full)', background: dot, marginTop: 5, flexShrink: 0 }" />
+  <div :style="{ display: 'flex', gap: '8px', alignItems: 'flex-start', ...style }">
+    <span :style="{ width: '8px', height: '8px', borderRadius: 'var(--radius-full)', background: dot, marginTop: '5px', flexShrink: 0 }" />
     <div style="display:flex;flex-direction:column;min-width:0">
-      <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ text }}</span>
+      <span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ text }}</span>
       <span style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted)">{{ time }}</span>
     </div>
   </div>

package/components/feedback/Drawer.d.ts

@@ -11,6 +11,8 @@ export interface DrawerProps {
   inline?: boolean;
   /** Inline height (default 420) */
   height?: number | string;
+  /** Size tier of the drawer region. Omit to inherit (→ md): drawers are working surfaces, not dialogs. */
+  size?: "sm" | "md" | "lg";
   footer?: React.ReactNode;
   onClose?: () => void;
   children?: React.ReactNode;

package/components/feedback/Drawer.jsx

@@ -1,20 +1,20 @@
 import React from "react";
 import { IconButton } from "../buttons/IconButton.jsx";
 
-/** Right slide-out panel over a scrim: 17.5px title + subtitle, scrollable body, right-aligned footer slot. inline=true renders it in-flow for embedding in cards/demos. */
-export function Drawer({ open = true, title, subtitle, width = 400, inline, height, footer, onClose, children, style }) {
+/** Right slide-out panel over a scrim: title + subtitle, scrollable body, right-aligned footer slot. inline=true renders it in-flow for embedding in cards/demos. A size region (default inherit → md: drawers are working surfaces, not dialogs); pass `size` to override. */
+export function Drawer({ open = true, title, subtitle, width = 400, inline, height, size, footer, onClose, children, style }) {
   if (!open) return null;
   const panel = (
-    <div style={{ width, maxWidth: "100%", height: inline ? (height || 420) : "100%", background: "var(--bg-raised)", borderLeft: "1px solid var(--border-card)", boxShadow: inline ? "var(--shadow-menu)" : "-8px 0 24px rgba(0,0,0,.12)", display: "flex", flexDirection: "column", boxSizing: "border-box", ...(inline ? { border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)" } : null), ...style }}>
+    <div role="dialog" aria-label={title} data-size={size} style={{ width, maxWidth: "100%", height: inline ? (height || 420) : "100%", background: "var(--bg-raised)", borderLeft: "1px solid var(--border-card)", boxShadow: inline ? "var(--shadow-menu)" : "-8px 0 24px rgba(0,0,0,.12)", display: "flex", flexDirection: "column", boxSizing: "border-box", ...(inline ? { border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)" } : null), ...style }}>
       <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", padding: "16px 16px 12px", borderBottom: "1px solid var(--border-card)", flexShrink: 0 }}>
         <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
           <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)" }}>{title}</span>
-          {subtitle && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{subtitle}</span>}
+          {subtitle && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{subtitle}</span>}
         </div>
-        <IconButton icon="x" size="md" label="Close" onClick={onClose} />
+        <IconButton icon="x" label="Close" onClick={onClose} style={{ margin: "calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0" }} />
       </div>
       <div style={{ flex: 1, overflowY: "auto", padding: 16 }}>{children}</div>
-      {footer && <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: "12px 16px", borderTop: "1px solid var(--border-card)", flexShrink: 0 }}>{footer}</div>}
+      {footer && <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--control-gap)", padding: "12px 16px", borderTop: "1px solid var(--border-card)", flexShrink: 0 }}>{footer}</div>}
     </div>
   );
   if (inline) return panel;

package/components/feedback/Drawer.vue

@@ -1,24 +1,31 @@
 <script setup>
+import { px } from '../px.js'
 import IconButton from '../buttons/IconButton.vue'
-// Right slide-out panel over a scrim; inline=true renders in-flow for demos. Header, scrollable body, footer slot.
-defineProps({ open: { type: Boolean, default: true }, title: String, subtitle: String, width: { type: Number, default: 400 }, inline: Boolean, height: { type: [Number, String], default: 420 }, style: Object })
+// Right slide-out panel over a scrim: title + subtitle, scrollable body, right-aligned footer slot.
+// inline=true renders it in-flow (cards, demos); otherwise it teleports to <body> over a scrim. Click the scrim or × to emit close.
+// A size region (default inherit → md: drawers are working surfaces, not dialogs); pass `size` to override.
+const props = defineProps({ open: { type: Boolean, default: true }, title: String, subtitle: String, width: { type: [Number, String], default: 400 }, inline: Boolean, height: { type: [Number, String], default: 420 }, size: String, style: Object })
 const emit = defineEmits(['close'])
+const contents = { display: 'contents' }
 </script>
 <template>
-  <component :is="inline ? 'div' : 'teleport'" v-if="open" v-bind="inline ? {} : { to: 'body' }">
-    <div v-if="!inline" @click="emit('close')" style="position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg-scrim);display:flex;justify-content:flex-end;animation:kb-fade-in var(--dur-fast) var(--ease-out)">
-      <div @click.stop style="height:100%;animation:kb-slide-in var(--dur) var(--ease-out)"><DrawerPanel /></div>
-    </div>
-    <div :style="{ width: width + 'px', height: inline ? (typeof height === 'number' ? height + 'px' : height) : '100%', background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: inline ? 'var(--radius-lg)' : 0, boxShadow: 'var(--shadow-menu)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', ...style }">
-      <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--border-card);flex-shrink:0">
-        <div style="display:flex;flex-direction:column;gap:3px">
-          <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);color:var(--text-heading)">{{ title }}</span>
-          <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-secondary)">{{ subtitle }}</span>
+  <Teleport to="body" :disabled="inline">
+    <div v-if="open" @click="!inline && emit('close')"
+      :style="inline ? contents : { position: 'fixed', inset: 0, zIndex: 'var(--z-modal)', background: 'var(--bg-scrim)', display: 'flex', justifyContent: 'flex-end', animation: 'kb-fade-in var(--dur-fast) var(--ease-out)' }">
+      <div @click.stop :style="inline ? contents : { height: '100%', animation: 'kb-slide-in var(--dur) var(--ease-out)' }">
+        <div role="dialog" :aria-label="title" :data-size="size"
+          :style="{ width: px(width), maxWidth: '100%', height: inline ? px(height) : '100%', background: 'var(--bg-raised)', borderLeft: '1px solid var(--border-card)', boxShadow: inline ? 'var(--shadow-menu)' : '-8px 0 24px rgba(0,0,0,.12)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', ...(inline ? { border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)' } : null), ...style }">
+          <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--border-card);flex-shrink:0">
+            <div style="display:flex;flex-direction:column;gap:3px">
+              <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading)">{{ title }}</span>
+              <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ subtitle }}</span>
+            </div>
+            <IconButton icon="x" label="Close" :style="{ margin: 'calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0' }" @click="emit('close')" />
+          </div>
+          <div style="flex:1;overflow-y:auto;padding:16px"><slot /></div>
+          <div v-if="$slots.footer" style="display:flex;justify-content:flex-end;gap:var(--control-gap);padding:12px 16px;border-top:1px solid var(--border-card);flex-shrink:0"><slot name="footer" /></div>
         </div>
-        <IconButton icon="x" size="md" label="Close" @click="emit('close')" />
       </div>
-      <div style="flex:1;overflow-y:auto;padding:16px"><slot /></div>
-      <div v-if="$slots.footer" style="display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border-card);flex-shrink:0"><slot name="footer" /></div>
     </div>
-  </component>
+  </Teleport>
 </template>

package/components/feedback/EmptyState.vue

@@ -3,10 +3,10 @@ import Icon from '../icons/Icon.vue'
 defineProps({ icon: { type: String, default: 'file-text' }, title: String, hint: String, style: Object })
 </script>
 <template>
-  <div :style="{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '40px 24px', textAlign: 'center', ...style }">
+  <div :style="{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '6px', padding: '40px 24px', textAlign: 'center', ...style }">
     <span style="color:var(--text-muted);margin-bottom:6px"><Icon :name="icon" :size="22" :stroke-width="1.5" /></span>
     <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-    <span v-if="hint" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary);max-width:320px">{{ hint }}</span>
+    <span v-if="hint" style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-secondary);max-width:320px">{{ hint }}</span>
     <span v-if="$slots.action" style="padding-top:10px"><slot name="action" /></span>
   </div>
 </template>

package/components/feedback/LogViewer.vue

@@ -2,7 +2,7 @@
 defineProps({ lines: { type: Array, default: () => [] }, height: [Number, String], style: Object })
 </script>
 <template>
-  <div :style="{ background: 'var(--bg-inset)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 6, overflowY: 'auto', height, boxSizing: 'border-box', ...style }">
+  <div :style="{ background: 'var(--bg-inset)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: '6px', overflowY: 'auto', height, boxSizing: 'border-box', ...style }">
     <span v-for="(l, i) in lines" :key="i" :style="{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', color: typeof l === 'object' ? (l.color || 'var(--text-body)') : 'var(--text-body)', whiteSpace: 'pre' }">{{ typeof l === 'object' ? l.text : l }}</span>
   </div>
 </template>

package/components/feedback/Modal.d.ts

@@ -16,6 +16,8 @@ export interface ModalProps {
   /** Right-aligned footer buttons */
   footer?: React.ReactNode;
   width?: number;
+  /** Size tier of the dialog region. Defaults to "lg" (36px controls) regardless of the page behind it — a dialog does not compete for space. */
+  size?: "sm" | "md" | "lg";
   children?: React.ReactNode;
   style?: React.CSSProperties;
 }

package/components/feedback/Modal.jsx

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

package/components/feedback/Modal.vue

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

package/components/feedback/Skeleton.vue

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

package/components/feedback/Spinner.vue

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

package/components/feedback/Stepper.vue

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

package/components/feedback/Timeline.jsx

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

package/components/feedback/Timeline.vue

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