@keyfunc/keybricks-ds 1.0.4 → 2.3.1

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 (40px 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 (40px 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

@@ -12,9 +12,9 @@ defineProps({ items: { type: Array, default: () => [] }, style: Object })
         <span v-if="i < items.length - 1" style="width:1.5px;flex:1;min-height:14px;background:var(--border-control)" />
       </div>
       <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 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)">{{ it.title }}</span>
+        <span v-if="it.meta" 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)">{{ it.meta }}</span>
+        <span v-if="it.body" style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-body);padding-top:4px">{{ it.body }}</span>
       </div>
     </div>
   </div>

package/components/feedback/Toast.vue

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

package/components/feedback/ToastStack.vue

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

package/components/feedback/Tooltip.vue

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

package/components/feedback/feedback.prompt.md

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

package/components/forms/Checkbox.d.ts

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