@keyfunc/keybricks-ds 2.7.0 → 2.8.0

package/components/data/data.prompt.md

@@ -31,3 +31,5 @@ Data lists: `Table` (hairline table, mono cells, selectable; a size region — `
 ```jsx
 <CodeBlock language="sql" code={"SELECT * FROM sales_orders"}/>
 ```
+
+`Table rowOpen="row"` — with `onRowOpen` / `@row-open`, a click anywhere on a body row opens it (hand cursor on the whole row); buttons, checkboxes, inputs, links, the ⋯ menu, the tree arrow and text selection are left alone. Default `"title"` keeps opening on the tile and title only.

package/components/data/row-open.js

@@ -0,0 +1,13 @@
+/* Table rowOpen="row": decides whether a click on a body row opens it. Clicks on controls inside the row (buttons — the ⋯ menu and
+   the tree arrow included — checkboxes, inputs, links, menus), on the title / tile that open the row themselves, and clicks that end a
+   text selection do not. Header cells and resize handles sit outside the body rows, so they never reach here. */
+const SKIP = 'button, a[href], input, select, textarea, label, summary, [contenteditable=""], [contenteditable="true"], [role="button"], [role="checkbox"], [role="switch"], [role="radio"], [role="menuitem"], [role="menu"], [role="link"], [role="combobox"], [role="slider"], [data-row-open], [data-row-skip]';
+export function rowOpenFromClick(e) {
+  const tr = e.currentTarget, t = e.target;
+  if (!tr || e.defaultPrevented || (e.button != null && e.button !== 0)) return false;
+  const hit = t && t.closest ? t.closest(SKIP) : null;
+  if (hit && tr.contains(hit)) return false;
+  const sel = typeof window !== "undefined" && window.getSelection ? window.getSelection() : null;
+  if (sel && !sel.isCollapsed && String(sel).length > 0) return false;
+  return true;
+}

package/components/feedback/Modal.d.ts

@@ -7,15 +7,35 @@ export interface TooltipProps {
   style?: React.CSSProperties;
 }
 export declare function Tooltip(props: TooltipProps): JSX.Element;
-/** Centered dialog with scrim, title/subtitle, close, footer slot. Addition. */
+/** Centered dialog with scrim, title/subtitle, close, footer slot. Focus moves into the dialog ([data-autofocus] first), Tab stays inside, and focus returns on close. */
 export interface ModalProps {
   open?: boolean;
-  title?: string;
+  /** Vue: also a #title slot */
+  title?: React.ReactNode;
   subtitle?: string;
-  onClose?: () => void;
+  /** Why it closed: "close" (×), "esc" or "scrim". Vue: @close(reason). */
+  onClose?: (reason: "close" | "esc" | "scrim") => void;
+  /** Esc closes the topmost dialog (default true) */
+  closeOnEsc?: boolean;
+  /** A click on the scrim closes it (default true; turn off for confirmations that must be answered) */
+  closeOnScrim?: boolean;
+  /** The × in the header (default true) */
+  showClose?: boolean;
+  /** Stops the page behind from scrolling while open (default true) */
+  lockScroll?: boolean;
+  /** Dims the page behind (default true) */
+  scrim?: boolean;
+  /** Moves focus in on open (default true) */
+  autoFocus?: boolean;
+  /** role="alertdialog" — for confirmations and warnings that need an answer */
+  alert?: boolean;
+  /** Overrides --z-modal */
+  zIndex?: number | string;
+  /** aria-label of the × (default "Close") */
+  closeLabel?: string;
   /** Right-aligned footer buttons */
   footer?: React.ReactNode;
-  width?: number;
+  width?: number | string;
   /** 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;
@@ -27,6 +47,8 @@ export interface ToastProps {
   tone?: "success" | "danger" | "warning" | "info";
   title?: string;
   meta?: string;
+  /** Repeat count: 2 or more shows "× n" after the title */
+  count?: number;
   /** Replaces the tone glyph (Vue: #icon slot) */
   icon?: React.ReactNode;
   /** Content in place of title (Vue: default slot) */
@@ -38,10 +60,39 @@ export interface ToastProps {
   style?: React.CSSProperties;
 }
 export declare function Toast(props: ToastProps): JSX.Element;
-/** Fixed bottom-right toast stack. */
+export interface ToastStackItem {
+  id: string | number;
+  tone?: "success" | "danger" | "warning" | "info";
+  title?: string;
+  meta?: string;
+  /** Content in place of title (Vue: string | VNode | () => VNode) */
+  content?: React.ReactNode;
+  /** Glyph name or element in place of the tone glyph */
+  icon?: string | React.ReactNode;
+  /** "× n" after the title; a change restarts the timer */
+  count?: number;
+  /** ms, overrides the stack's duration; 0 = stay */
+  duration?: number;
+  /** Shows the × (default true) */
+  dismissible?: boolean;
+  closeLabel?: string;
+  /** Vue: class */
+  className?: string;
+  style?: React.CSSProperties;
+}
+/** Fixed stack of toasts. Toasts are role="status" (danger / warning: role="alert"), so screen readers announce them. */
 export interface ToastStackProps {
-  toasts?: { id: string | number; tone?: string; title?: string; meta?: string }[];
-  onDismiss?: (id: string | number) => void;
+  toasts?: ToastStackItem[];
+  /** Where the stack sits (default "bottom-right"). Vue Message uses "top-center". */
+  placement?: "bottom-right" | "top-center" | "top-right" | "bottom-center";
+  /** Distance from the edges in px (default 24) */
+  offset?: number;
+  /** Auto-dismiss after ms (default 0 = stay). Paused while the pointer or focus is on a toast. */
+  duration?: number;
+  /** Overrides --z-toast */
+  zIndex?: number | string;
+  /** "close" (×) or "timeout". Vue: @dismiss(id, reason). */
+  onDismiss?: (id: string | number, reason: "close" | "timeout") => void;
   style?: React.CSSProperties;
 }
 export declare function ToastStack(props: ToastStackProps): JSX.Element;

package/components/feedback/Modal.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconButton } from "../buttons/IconButton.jsx";
+import { modalOpen } from "./modal-behavior.js";
 
 /** Hover tooltip — 11px, inverted surface, 6px offset. Wraps its children. */
 export function Tooltip({ label, placement = "top", children, style }) {
@@ -21,20 +22,29 @@ export function Tooltip({ label, placement = "top", children, style }) {
   );
 }
 
-/** Centered modal dialog with scrim. width defaults to 440. */
-/** 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 }) {
+/** 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.
+ *  Keyboard and focus (always): focus moves into the dialog ([data-autofocus] first) and Tab stays inside it; on close focus returns to where it was.
+ *  Options (defaults keep the usual dialog): closeOnEsc · closeOnScrim · showClose · lockScroll · scrim · alert (role="alertdialog" for confirmations) · zIndex.
+ *  onClose(reason): "close" (×) | "esc" | "scrim". */
+export function Modal({ open, title, subtitle, onClose, footer, width = 440, size = "lg", alert, closeOnEsc = true, closeOnScrim = true, showClose = true, lockScroll = true, scrim = true, autoFocus = true, zIndex, closeLabel = "Close", children, style }) {
+  const panel = React.useRef(null);
+  const uid = React.useId();
+  const opts = React.useRef({});
+  opts.current.closeOnEsc = closeOnEsc;
+  opts.current.onEsc = () => onClose && onClose("esc");
+  React.useEffect(() => { if (!open) return undefined; return modalOpen(panel.current, Object.assign(opts.current, { lockScroll, autoFocus })); }, [open]);
   if (!open) return null;
+  const close = (reason) => onClose && onClose(reason);
   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 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={{ position: "fixed", inset: 0, zIndex: zIndex ?? "var(--z-modal)", background: scrim ? "var(--bg-scrim)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center", animation: "kb-fade-in var(--dur-fast) var(--ease-out)" }} onClick={closeOnScrim ? () => close("scrim") : undefined}>
+      <div ref={panel} role={alert ? "alertdialog" : "dialog"} aria-modal="true" aria-labelledby={uid + "-t"} tabIndex={-1} data-size={size} onClick={(e) => e.stopPropagation()}
+        style={{ width, maxWidth: "92vw", maxHeight: "92vh", overflow: "auto", boxSizing: "border-box", outline: "none", 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", 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>
+          <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
+            <span id={uid + "-t"} 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)", overflowWrap: "anywhere" }}>{title}</span>
             {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" onClick={onClose} label="Close" style={{ margin: "calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0" }} />
+          {showClose ? <IconButton icon="x" onClick={() => close("close")} label={closeLabel} style={{ margin: "calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0" }} /> : null}
         </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>
@@ -46,13 +56,13 @@ export function Modal({ open, title, subtitle, onClose, footer, width = 440, siz
 const toastTones = { success: { icon: "circle-check", bg: "var(--success-bg)", border: "var(--success)", fg: "var(--success-text)" }, danger: { icon: "triangle-alert", bg: "var(--danger-bg)", border: "var(--danger)", fg: "var(--danger-text)" }, warning: { icon: "triangle-alert", bg: "var(--warning-bg)", border: "var(--warning)", fg: "var(--warning-text)" }, info: { icon: "info", bg: "var(--info-bg)", border: "var(--focus-border)", fg: "var(--info-fg)" } };
 
 /** Single toast row — tinted: tone wash over --bg-raised, solid tone border, tone-coloured icon, title and dismiss. */
-export function Toast({ tone = "success", title, meta, icon, closeLabel = "Dismiss", onClose, children, style }) {
+export function Toast({ tone = "success", title, meta, icon, count, closeLabel = "Dismiss", onClose, children, style }) {
   const t = toastTones[tone] || toastTones.info;
   return (
-    <div style={{ display: "flex", alignItems: "flex-start", gap: 10, minWidth: 280, maxWidth: 380, backgroundColor: "var(--bg-raised)", backgroundImage: `linear-gradient(${t.bg}, ${t.bg})`, border: `1px solid ${t.border}`, borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", padding: "12px 12px 12px 14px", animation: "kb-toast-in var(--dur) var(--ease-out)", ...style }}>
+    <div role={tone === "danger" || tone === "warning" ? "alert" : "status"} style={{ display: "flex", alignItems: "flex-start", gap: 10, minWidth: 280, maxWidth: 380, backgroundColor: "var(--bg-raised)", backgroundImage: `linear-gradient(${t.bg}, ${t.bg})`, border: `1px solid ${t.border}`, 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.fg, display: "inline-flex", alignItems: "center", flexShrink: 0, height: "var(--leading-base)" }}>{icon || <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: t.fg, overflowWrap: "anywhere" }}>{children ?? title}</span>
+        <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, overflowWrap: "anywhere" }}>{children ?? title}{count > 1 ? <span style={{ color: "var(--text-secondary)", fontWeight: "var(--weight-regular)", fontVariantNumeric: "tabular-nums" }}> × {count}</span> : null}</span>
         {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-body)" }}>{meta}</span> : null}
       </div>
       {onClose ? <IconButton icon="x" size="sm" muted onClick={onClose} label={closeLabel} style={{ margin: "-2px 0", color: t.fg }} /> : null}
@@ -60,11 +70,31 @@ export function Toast({ tone = "success", title, meta, icon, closeLabel = "Dismi
   );
 }
 
-/** Fixed bottom-right stack of toasts. */
-export function ToastStack({ toasts = [], onDismiss, style }) {
+const STACK_PLACE = {
+  "top-center": (o) => ({ top: o, left: "50%", transform: "translateX(-50%)", alignItems: "center" }),
+  "top-right": (o) => ({ top: o, right: o, alignItems: "flex-end" }),
+  "bottom-right": (o) => ({ bottom: o, right: o, alignItems: "flex-end" }),
+  "bottom-center": (o) => ({ bottom: o, left: "50%", transform: "translateX(-50%)", alignItems: "center" }),
+};
+function StackItem({ t, duration, onDismiss }) {
+  const [paused, setPaused] = React.useState(false);
+  const ms = t.duration ?? duration;
+  React.useEffect(() => { if (paused || !(ms > 0)) return undefined; const h = setTimeout(() => onDismiss && onDismiss(t.id, "timeout"), ms); return () => clearTimeout(h); }, [paused, ms, t.count, t.id]);
+  const icon = typeof t.icon === "string" ? <Icon name={t.icon} size={16} /> : t.icon;
   return (
-    <div style={{ position: "fixed", right: 24, bottom: 24, zIndex: "var(--z-toast)", display: "flex", flexDirection: "column", gap: 8, ...style }}>
-      {toasts.map((t) => <Toast key={t.id} tone={t.tone} title={t.title} meta={t.meta} onClose={() => onDismiss && onDismiss(t.id)} />)}
+    <div className={t.className} style={{ maxWidth: "92vw" }} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)}>
+      <Toast tone={t.tone} title={t.title} meta={t.meta} icon={icon} count={t.count} closeLabel={t.closeLabel} style={t.style} onClose={t.dismissible === false ? undefined : () => onDismiss && onDismiss(t.id, "close")}>{t.content}</Toast>
+    </div>
+  );
+}
+
+/** Fixed stack of toasts. placement: "bottom-right" (default) | "top-center" | "top-right" | "bottom-center"; offset from the edges (default 24).
+ *  duration (ms, default 0 = stay) auto-dismisses — paused while the pointer or focus is on a toast, restarted when its count changes.
+ *  Items: { id, tone, title, meta, content, icon, count, duration, dismissible, closeLabel, className, style }. onDismiss(id, "close" | "timeout"). */
+export function ToastStack({ toasts = [], onDismiss, placement = "bottom-right", offset = 24, duration = 0, zIndex, style }) {
+  return (
+    <div style={{ position: "fixed", zIndex: zIndex ?? "var(--z-toast)", display: "flex", flexDirection: "column", gap: 8, ...(STACK_PLACE[placement] || STACK_PLACE["bottom-right"])(offset), ...style }}>
+      {toasts.map((t) => <StackItem key={t.id} t={t} duration={duration} onDismiss={onDismiss} />)}
     </div>
   );
 }

package/components/feedback/Modal.vue

@@ -1,19 +1,37 @@
 <script setup>
 import { px } from '../px.js'
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
 import IconButton from '../buttons/IconButton.vue'
+import { modalOpen } from './modal-behavior.js'
 // 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 })
+// Keyboard and focus (always): focus moves into the dialog ([data-autofocus] first) and Tab stays inside it; on close focus returns to where it was.
+// Options (defaults keep the usual dialog): closeOnEsc · closeOnScrim · showClose · lockScroll · scrim · alert (role="alertdialog") · zIndex. Emits close(reason): 'close' (×) | 'esc' | 'scrim'.
+// Slots: default (body), #footer, #title (instead of the title prop).
+const props = defineProps({ open: Boolean, title: String, subtitle: String, width: { type: [Number, String], default: 440 }, size: { type: String, default: 'lg' }, alert: Boolean, closeOnEsc: { type: Boolean, default: true }, closeOnScrim: { type: Boolean, default: true }, showClose: { type: Boolean, default: true }, lockScroll: { type: Boolean, default: true }, scrim: { type: Boolean, default: true }, autoFocus: { type: Boolean, default: true }, zIndex: [Number, String], closeLabel: { type: String, default: 'Close' }, style: Object })
 const emit = defineEmits(['close'])
+let seed = 0
+const uid = 'kb-modal-' + Math.random().toString(36).slice(2, 8) + (++seed)
+const panel = ref(null)
+const opts = { onEsc: () => emit('close', 'esc') }
+let cleanup = null
+watch(() => props.closeOnEsc, (v) => { opts.closeOnEsc = v }, { immediate: true })
+watch(() => props.open, async (v) => {
+  if (cleanup) { cleanup(); cleanup = null }
+  if (!v) return
+  await nextTick()
+  if (props.open && panel.value) cleanup = modalOpen(panel.value, Object.assign(opts, { lockScroll: props.lockScroll, autoFocus: props.autoFocus }))
+}, { immediate: true })
+onBeforeUnmount(() => { if (cleanup) cleanup() })
 </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 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 v-if="open" :style="{ position: 'fixed', inset: 0, zIndex: zIndex ?? 'var(--z-modal)', background: scrim ? 'var(--bg-scrim)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'kb-fade-in var(--dur-fast) var(--ease-out)' }" @click="closeOnScrim && emit('close', 'scrim')">
+    <div ref="panel" :role="alert ? 'alertdialog' : 'dialog'" aria-modal="true" :aria-labelledby="uid + '-t'" tabindex="-1" :data-size="size" @click.stop :style="{ width: px(width), maxWidth: '92vw', maxHeight: '92vh', overflow: 'auto', boxSizing: 'border-box', outline: 'none', 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>
+        <div style="display:flex;flex-direction:column;gap:2px;min-width:0">
+          <span :id="uid + '-t'" 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);overflow-wrap:anywhere"><slot name="title">{{ title }}</slot></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')" />
+        <IconButton v-if="showClose" icon="x" :label="closeLabel" :style="{ margin: 'calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0' }" @click="emit('close', 'close')" />
       </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>

package/components/feedback/Toast.vue

@@ -3,15 +3,15 @@ import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
 const toastTones = { success: { icon: 'circle-check', bg: 'var(--success-bg)', border: 'var(--success)', fg: 'var(--success-text)' }, danger: { icon: 'triangle-alert', bg: 'var(--danger-bg)', border: 'var(--danger)', fg: 'var(--danger-text)' }, warning: { icon: 'triangle-alert', bg: 'var(--warning-bg)', border: 'var(--warning)', fg: 'var(--warning-text)' }, info: { icon: 'info', bg: 'var(--info-bg)', border: 'var(--focus-border)', fg: 'var(--info-fg)' } }
-const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, closeLabel: { type: String, default: 'Dismiss' }, style: Object })
+const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, count: Number, closeLabel: { type: String, default: 'Dismiss' }, style: Object })
 const emit = defineEmits(['close'])
 const t = computed(() => toastTones[props.tone] || toastTones.info)
 </script>
 <template>
-  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', minWidth: '280px', maxWidth: '380px', backgroundColor: 'var(--bg-raised)', backgroundImage: `linear-gradient(${t.bg}, ${t.bg})`, border: `1px solid ${t.border}`, borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
+  <div :role="tone === 'danger' || tone === 'warning' ? 'alert' : 'status'" :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', minWidth: '280px', maxWidth: '380px', backgroundColor: 'var(--bg-raised)', backgroundImage: `linear-gradient(${t.bg}, ${t.bg})`, border: `1px solid ${t.border}`, 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.fg, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><slot name="icon"><Icon :name="t.icon" :size="16" /></slot></span>
     <div style="display:flex;flex-direction:column;flex:1;min-width:0">
-      <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, overflowWrap: 'anywhere' }"><slot>{{ title }}</slot></span>
+      <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, overflowWrap: 'anywhere' }"><slot>{{ title }}</slot><span v-if="count > 1" style="color:var(--text-secondary);font-weight:var(--weight-regular);font-variant-numeric:tabular-nums"> × {{ count }}</span></span>
       <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-body)">{{ meta }}</span>
     </div>
     <IconButton v-if="dismissible" icon="x" size="sm" muted :label="closeLabel" :style="{ margin: '-2px 0', color: t.fg }" @click="emit('close')" />

package/components/feedback/ToastStack.vue

@@ -1,11 +1,44 @@
 <script setup>
+import { computed, h, watch, onBeforeUnmount } from 'vue'
 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 })
+import Icon from '../icons/Icon.vue'
+// Fixed stack of toasts. placement: 'bottom-right' (default) | 'top-center' | 'top-right' | 'bottom-center'; offset from the edges (default 24).
+// duration (ms, default 0 = stay) auto-dismisses — paused while the pointer or focus is on a toast, restarted when its count changes.
+// toasts: [{ id, tone, title, meta, content (string | VNode | () => VNode), icon (name | VNode), count, duration, dismissible, closeLabel, class, style }]. Emits dismiss(id, 'close' | 'timeout').
+const props = defineProps({ toasts: { type: Array, default: () => [] }, placement: { type: String, default: 'bottom-right' }, offset: { type: Number, default: 24 }, duration: { type: Number, default: 0 }, zIndex: [Number, String], style: Object })
 const emit = defineEmits(['dismiss'])
+const PLACE = {
+  'top-center': (o) => ({ top: o + 'px', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }),
+  'top-right': (o) => ({ top: o + 'px', right: o + 'px', alignItems: 'flex-end' }),
+  'bottom-right': (o) => ({ bottom: o + 'px', right: o + 'px', alignItems: 'flex-end' }),
+  'bottom-center': (o) => ({ bottom: o + 'px', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }),
+}
+const box = computed(() => ({ position: 'fixed', zIndex: props.zIndex ?? 'var(--z-toast)', display: 'flex', flexDirection: 'column', gap: '8px', ...(PLACE[props.placement] || PLACE['bottom-right'])(props.offset), ...props.style }))
+const timers = new Map(), seen = new Map(), paused = new Set()
+const ms = (t) => t.duration ?? props.duration
+function arm(t) {
+  clearTimeout(timers.get(t.id)); timers.delete(t.id)
+  if (paused.has(t.id) || !(ms(t) > 0)) return
+  timers.set(t.id, setTimeout(() => emit('dismiss', t.id, 'timeout'), ms(t)))
+}
+watch(() => props.toasts.map((t) => t.id + ':' + (t.count || 1) + ':' + ms(t)).join('|'), () => {
+  const ids = new Set()
+  for (const t of props.toasts) { ids.add(t.id); const sig = (t.count || 1) + ':' + ms(t); if (seen.get(t.id) !== sig) { seen.set(t.id, sig); arm(t) } }
+  for (const id of [...seen.keys()]) if (!ids.has(id)) { clearTimeout(timers.get(id)); timers.delete(id); seen.delete(id); paused.delete(id) }
+}, { immediate: true })
+const pause = (t) => { paused.add(t.id); clearTimeout(timers.get(t.id)); timers.delete(t.id) }
+const resume = (t) => { paused.delete(t.id); arm(t) }
+onBeforeUnmount(() => timers.forEach((x) => clearTimeout(x)))
+const Node = (p) => (typeof p.c === 'function' ? p.c() : p.c)
+const IconNode = (p) => (typeof p.c === 'string' ? h(Icon, { name: p.c, size: 16 }) : Node(p))
 </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 :style="box">
+    <div v-for="t in toasts" :key="t.id" :class="t.class" style="max-width:92vw" @mouseenter="pause(t)" @mouseleave="resume(t)" @focusin="pause(t)" @focusout="resume(t)">
+      <Toast :tone="t.tone" :title="t.title" :meta="t.meta" :count="t.count" :dismissible="t.dismissible !== false" :close-label="t.closeLabel || 'Dismiss'" :style="t.style" @close="emit('dismiss', t.id, 'close')">
+        <template v-if="t.icon" #icon><IconNode :c="t.icon" /></template>
+        <template v-if="t.content != null" #default><Node :c="t.content" /></template>
+      </Toast>
+    </div>
   </div>
 </template>

package/components/feedback/feedback.prompt.md

@@ -34,4 +34,8 @@ Additions (not in the source file): `Tooltip`, `Modal`, `Toast`/`ToastStack`, `A
 </Accordion>
 ```
 
-Vue only: imperative `Message` (`@keyfunc/keybricks-ds/vue/message`) and `MessageBox` (`@keyfunc/keybricks-ds/vue/message-box`) services, drop-in for most `ElMessage` / `ElMessageBox` calls. Message renders the Keybricks `Toast`; MessageBox renders a DS dialog with DS Buttons. Limits and Element Plus mapping: `MESSAGE_SERVICES.md`.
+**Rule:** notices = `Toast` / `ToastStack`, dialogs = `Modal`. Do not build another notice or dialog; please check with Felix before building a new component.
+
+`Modal` options: `closeOnEsc`, `closeOnScrim`, `showClose`, `lockScroll`, `scrim`, `autoFocus` (default true), `alert` for must-answer dialogs; `onClose(reason)`. Put `data-autofocus` on the control that should take focus. `ToastStack`: `placement`, `duration`, items with `count`.
+
+Vue only: imperative `Message` (`@keyfunc/keybricks-ds/vue/message`) and `MessageBox` (`@keyfunc/keybricks-ds/vue/message-box`) services, drop-in for most `ElMessage` / `ElMessageBox` calls. Message renders the Keybricks `Toast`; MessageBox renders a DS dialog with DS Buttons. Source lives outside `components/` in `_vue-services/` (Vue-only, so the React docs preview never loads it). Limits and Element Plus mapping: `_vue-services/MESSAGE_SERVICES.md`.

package/components/feedback/modal-behavior.js

@@ -0,0 +1,50 @@
+/* Modal keyboard + focus behaviour, shared by Modal.jsx and Modal.vue (framework-neutral).
+   While a dialog is open: focus moves into it ([data-autofocus] first, else the panel), Tab / Shift+Tab cycle inside it,
+   Esc closes only the topmost dialog, the page behind stops scrolling (counted, so stacked dialogs unlock once),
+   and on close focus returns to the element that had it. */
+const stack = [];
+let locks = 0, prevOverflow = "";
+const FOCUSABLE = 'button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+
+/** Call when the panel is in the DOM. Returns the cleanup to call on close / unmount. opts: { closeOnEsc, lockScroll, autoFocus, onEsc } */
+export function modalOpen(panel, opts) {
+  if (!panel || typeof document === "undefined") return () => {};
+  const entry = { panel, opts };
+  stack.push(entry);
+  const top = () => stack[stack.length - 1] === entry;
+  const prev = document.activeElement;
+  if (opts.lockScroll !== false && locks++ === 0) { prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; }
+  const onKey = (e) => {
+    if (!top()) return;
+    if (e.key === "Escape") {
+      if (e.isComposing) return;
+      e.preventDefault(); e.stopImmediatePropagation();
+      if (entry.opts.closeOnEsc !== false && entry.opts.onEsc) entry.opts.onEsc(e);
+      return;
+    }
+    if (e.key !== "Tab") return;
+    const list = [...panel.querySelectorAll(FOCUSABLE)].filter((n) => n.getClientRects().length);
+    if (!list.length) { e.preventDefault(); panel.focus(); return; }
+    const first = list[0], last = list[list.length - 1], at = document.activeElement;
+    if (e.shiftKey && (at === first || !panel.contains(at))) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && (at === last || !panel.contains(at))) { e.preventDefault(); first.focus(); }
+  };
+  const onFocusIn = (e) => { if (top() && !panel.contains(e.target)) panel.focus(); };
+  document.addEventListener("keydown", onKey, true);
+  document.addEventListener("focusin", onFocusIn);
+  if (opts.autoFocus !== false) {
+    const a = panel.querySelector("[data-autofocus]");
+    const t = (a && (a.matches(FOCUSABLE) ? a : a.querySelector(FOCUSABLE))) || panel;
+    try { t.focus({ preventScroll: true }); } catch (err) { t.focus(); }
+    if (t.select && t.tagName !== "BUTTON") t.select();
+  }
+  let done = false;
+  return () => {
+    if (done) return; done = true;
+    document.removeEventListener("keydown", onKey, true);
+    document.removeEventListener("focusin", onFocusIn);
+    const i = stack.indexOf(entry); if (i >= 0) stack.splice(i, 1);
+    if (opts.lockScroll !== false && --locks === 0) document.body.style.overflow = prevOverflow;
+    if (prev && prev.isConnected && prev.focus) prev.focus();
+  };
+}

package/components/navigation/Tree.d.ts

@@ -6,7 +6,8 @@ export interface TreeItem {
   /** Row text; `label` is accepted as an alias */
   title?: string;
   label?: string;
-  icon?: string;
+  /** Glyph name; false = no glyph on this row and no space kept for one — the text follows the expand arrow (e.g. a "Documents" root). Works with showIcon on. */
+  icon?: string | false;
   /** Leaf glyph hue: orange | green | purple | blue | teal | gray */
   hue?: string;
   /** Right-aligned count */
@@ -37,6 +38,8 @@ export interface TreeDropInfo {
  * Nested tree view: expand/collapse, single or multiple selection, cascading checkboxes with
  * indeterminate parents, disabled nodes, connector lines, async loading, search highlight,
  * drag to move, keyboard navigation.
+ * Follows the size tier of its region (data-size): row height --control-h (sm 28 · md 32 · lg 40), text --control-text / --control-leading /
+ * --control-tracking (sm 12px, 13px in CJK · md 14px), glyph --control-icon − 1px (sm 13 · md 15). md looks exactly as before.
  */
 export interface TreeProps {
   items?: TreeItem[];
@@ -63,6 +66,7 @@ export interface TreeProps {
   multiple?: boolean;
   /** false = rows only expand, never select */
   selectable?: boolean;
+  /** Glyph before each title (default true); a node with icon: false skips it either way */
   showIcon?: boolean;
   /** Draw connector lines instead of plain indentation */
   showLine?: boolean;

package/components/navigation/Tree.jsx

@@ -154,7 +154,7 @@ function Row({ item, state, cfg, api }) {
         onKeyDown={(e) => api.keyDown(e, item)}
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{
-          position: "relative", minHeight: "var(--h-tree-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 6,
+          position: "relative", minHeight: "var(--control-h)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 6,
           padding: cfg.showLine ? "0 8px 0 2px" : "5px 8px", paddingLeft: cfg.showLine ? 2 : 8 + depth * INDENT, boxSizing: "border-box",
           cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.45 : 1,
           background: dropAt === "inside" ? "var(--soft-bg)" : selected ? "var(--bg-active)" : hover && !disabled ? "var(--bg-hover)" : "transparent",
@@ -169,12 +169,12 @@ function Row({ item, state, cfg, api }) {
             <Checkbox checked={checked} indeterminate={half} disabled={disabled || node.disableCheckbox} tabIndex={-1} onChange={() => api.check(key)} />
           </span>
         ) : null}
-        {cfg.showIcon ? (
+        {cfg.showIcon && node.icon !== false ? (
           <span style={{ color: branch ? "var(--text-muted)" : docHues[node.hue || "gray"], display: "inline-flex", flexShrink: 0 }}>
-            <Icon name={node.icon || (branch ? (open ? "folder-open" : "folder") : "file-text")} size={15} />
+            <Icon name={node.icon || (branch ? (open ? "folder-open" : "folder") : "file-text")} size={15} style={{ width: "calc(var(--control-icon) - 1px)", height: "calc(var(--control-icon) - 1px)" }} />
           </span>
         ) : null}
-        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", fontWeight: selected ? "var(--weight-medium)" : "var(--weight-regular)", color: disabled ? "var(--text-muted)" : "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", fontWeight: selected ? "var(--weight-medium)" : "var(--weight-regular)", color: disabled ? "var(--text-muted)" : "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
           <Highlight text={titleOf(node)} query={cfg.searchValue} />
         </span>
         {node.tag ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: 1, padding: "2px 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", color: "var(--text-secondary)", flexShrink: 0 }}>{node.tag}</span> : null}
@@ -182,7 +182,7 @@ function Row({ item, state, cfg, api }) {
         {cfg.rowActions && !disabled ? <span style={{ marginLeft: node.count != null ? 6 : "auto", display: "flex", gap: 2, opacity: hover ? 1 : 0, transition: "var(--t-hover)" }} onClick={(e) => e.stopPropagation()}>{cfg.rowActions(node)}</span> : null}
       </div>
       {open && loading && !kids.length ? (
-        <div style={{ paddingLeft: 8 + (depth + 1) * INDENT + 14, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-muted)", height: "var(--h-tree-item)", display: "flex", alignItems: "center" }}>Loading…</div>
+        <div style={{ paddingLeft: 8 + (depth + 1) * INDENT + 14, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-muted)", height: "var(--control-h)", display: "flex", alignItems: "center" }}>Loading…</div>
       ) : null}
     </>
   );
@@ -193,7 +193,9 @@ function Row({ item, state, cfg, api }) {
  * (with indeterminate parents and `checkStrictly` opt-out), disabled nodes and disabled
  * checkboxes, connector lines, async child loading, search highlighting, drag to move,
  * and full keyboard navigation. Node shape: { key, title, icon, hue, count, tag, children,
- * disabled, disableCheckbox, selectable, checkable, isLeaf }.
+ * disabled, disableCheckbox, selectable, checkable, isLeaf }. icon: false drops that row's glyph (no gap kept), e.g. a root.
+ * Follows the size tier of its region: row --control-h (sm 28 · md 32 · lg 40), text --control-text / -leading / -tracking,
+ * glyph --control-icon − 1px (md 15, as before).
  */
 export function Tree({
   items = [], treeData,
@@ -356,7 +358,7 @@ export function Tree({
     <div role="tree" aria-multiselectable={multiple || undefined} style={{ display: "flex", flexDirection: "column", gap: showLine ? 0 : 1, minWidth: 0, ...style }}>
       <style>{"@keyframes kb-tree-spin{to{transform:rotate(360deg)}}"}</style>
       {rows.length === 0 ? (
-        <div style={{ padding: "10px 8px", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", color: "var(--text-muted)" }}>No matching items</div>
+        <div style={{ padding: "10px 8px", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", color: "var(--text-muted)" }}>No matching items</div>
       ) : rows.map((r) => <Row key={r.key} item={r} state={state} cfg={cfg} api={api} />)}
     </div>
   );

package/components/navigation/Tree.vue

@@ -4,7 +4,8 @@ import Icon from '../icons/Icon.vue'
 import Checkbox from '../forms/Checkbox.vue'
 // Nested tree view: expand/collapse, single or multiple selection, cascading checkboxes with
 // indeterminate parents (checkStrictly opts out), disabled nodes, connector lines, async
-// loadData, search highlight, drag to move, keyboard navigation.
+// loadData, search highlight, drag to move, keyboard navigation. A node with icon: false has no glyph and keeps no gap for one.
+// Follows the size tier of its region: row --control-h (sm 28 · md 32 · lg 40), text --control-text / -leading / -tracking, glyph --control-icon − 1px (md 15).
 const docHues = { orange: 'var(--cat-transform)', green: 'var(--cat-source)', purple: 'var(--cat-merge)', blue: 'var(--info-fg)', teal: 'var(--cat-output)', gray: 'var(--text-muted)' }
 const INDENT = 18
 // Insert marker (reorder before / after): a 2px --action-primary line with a 6px dot at its left end, drawn between rows.
@@ -235,7 +236,7 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
       @click="rowClick(row.n)" @contextmenu="onCtx($event, row.key)" @keydown="keyDown($event, row)"
       :class="{ 'is-disabled': row.n.disabled }"
       :style="{
-        position: 'relative', minHeight: 'var(--h-tree-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '6px',
+        position: 'relative', minHeight: 'var(--control-h)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '6px',
         padding: showLine ? '0 8px 0 2px' : '5px 8px', paddingLeft: showLine ? '2px' : (8 + row.depth * INDENT) + 'px', boxSizing: 'border-box',
         cursor: row.n.disabled ? 'not-allowed' : 'pointer', opacity: row.n.disabled ? 0.45 : 1,
         background: dropAt(row.key) === 'inside' ? 'var(--soft-bg)' : selected.includes(row.key) ? 'var(--bg-active)' : 'transparent',
@@ -260,10 +261,10 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
         <Checkbox :checked="view.full.has(row.key)" :indeterminate="view.half.has(row.key)"
           :disabled="row.n.disabled || row.n.disableCheckbox" :tabindex="-1" @change="check(row.key)" />
       </span>
-      <span v-if="showIcon" :style="{ color: isBranch(row.n) ? 'var(--text-muted)' : docHues[row.n.hue || 'gray'], display: 'inline-flex', flexShrink: 0 }">
-        <Icon :name="row.n.icon || (isBranch(row.n) ? (openKeys.includes(row.key) ? 'folder-open' : 'folder') : 'file-text')" :size="15" />
+      <span v-if="showIcon && row.n.icon !== false" :style="{ color: isBranch(row.n) ? 'var(--text-muted)' : docHues[row.n.hue || 'gray'], display: 'inline-flex', flexShrink: 0 }">
+        <Icon :name="row.n.icon || (isBranch(row.n) ? (openKeys.includes(row.key) ? 'folder-open' : 'folder') : 'file-text')" :size="15" :style="{ width: 'calc(var(--control-icon) - 1px)', height: 'calc(var(--control-icon) - 1px)' }" />
       </span>
-      <span :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', fontWeight: selected.includes(row.key) ? 'var(--weight-medium)' : 'var(--weight-regular)', color: row.n.disabled ? 'var(--text-muted)' : 'var(--text-heading)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
+      <span :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', fontWeight: selected.includes(row.key) ? 'var(--weight-medium)' : 'var(--weight-regular)', color: row.n.disabled ? 'var(--text-muted)' : 'var(--text-heading)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
         <template v-for="(p, i) in parts(titleOf(row.n))" :key="i"><mark v-if="p.hit" style="background:var(--soft-bg);color:var(--info-fg);font-weight:var(--weight-medium);padding:0;border-radius:2px">{{ p.t }}</mark><template v-else>{{ p.t }}</template></template>
       </span>
       <span v-if="row.n.tag" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:1;padding:2px 5px;border-radius:var(--radius-sm);background:var(--bg-inset);color:var(--text-secondary);flex-shrink:0">{{ row.n.tag }}</span>
@@ -271,7 +272,7 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
       <!-- row actions: #row-actions="{ node }" slot, or rowActions(node) returning a VNode; shown on hover / focus -->
       <span v-if="(rowActions || $slots['row-actions']) && !row.n.disabled" class="kb-tree-actions" @click.stop :style="{ marginLeft: row.n.count != null ? '6px' : 'auto', display: 'flex', gap: '2px', flexShrink: 0 }"><slot name="row-actions" :node="row.n"><Cell v-if="rowActions" :v="rowActions(row.n)" /></slot></span>
     </div>
-    <div v-if="!rows.length" style="padding:10px 8px;font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-muted)">No matching items</div>
+    <div v-if="!rows.length" style="padding:10px 8px;font-family:var(--font-sans);font-size:var(--control-text);line-height:var(--control-leading);color:var(--text-muted)">No matching items</div>
   </div>
 </template>
 <style scoped>

package/components/navigation/navigation.prompt.md

@@ -22,3 +22,5 @@ applyStoredTheme();                   // call once at app start
 ```
 
 App chrome: `<Sidebar tone="recessed" version="Version 2.4.0" onSelect={…}/>` (items default to `KEYBRICKS_NAV`, footer to `KEYBRICKS_NAV_FOOTER`; `trailing: true` items open a `<SidePanel title="Documents" onClose={…}>` docked beside the rail — same `tone`) and `<TopBar user={{ name, email }} userMenu={<UserMenu … theme={t} onThemeChange={setT}/>}/>`.
+
+`Tree` follows the size tier of its region (`data-size`): sm 28px rows / 12px text (13px CJK), md 32px / 14px, lg 40px. A node with `icon: false` draws no glyph and keeps no gap for one — use it for a root such as "Documents".

package/index.html

@@ -113,7 +113,7 @@ section{margin-bottom:52px;scroll-margin-top:78px}
 .cl-new{background:var(--info-bg);color:var(--info-fg)}
 .cl-improved{background:var(--bg-hover);color:var(--text-body)}
 .cl-fixed{background:var(--success-bg);color:var(--success-text)}
-.cl-breaking{background:var(--danger-bg);color:var(--danger-text)}
+.cl-breaking{background:var(--danger-bg);color:var(--danger-text)}.cl-rule{background:var(--warning-bg);color:var(--warning-text)}
 .cl-removed{background:var(--bg-hover);color:var(--text-secondary)}
 @media (max-width:720px){.cl-rel{grid-template-columns:minmax(0,1fr);gap:10px}.cl-head{flex-direction:row;align-items:baseline;gap:10px}}
 
@@ -176,7 +176,7 @@ section{margin-bottom:52px;scroll-margin-top:78px}
 const GROUPS=[["Brand","品牌","ブランド"],["Colors","颜色","カラー"],["Type","字体排印","タイポグラフィ"],["Foundations","基础规范","基盤仕様"],["Components","组件","コンポーネント"],["Charts","图表","チャート"],["Icons","图标库","アイコン"]];
 
 const S={
-brandsub:["Design System · v2.7.0","设计系统 · v2.7.0","デザインシステム · v2.7.0"],
+brandsub:["Design System · v2.8.0","设计系统 · v2.8.0","デザインシステム · v2.8.0"],
 doc_readme:["Readme","说明文档","ドキュメント"],
 doc_design:["DESIGN.md","下载 DESIGN.md","DESIGN.md"],
 doc_integration:["Integration","接入指南","導入ガイド"],
@@ -347,7 +347,7 @@ function settleOn(target){
 }
 
 /* ---------- changelog (data: changelog.js) ---------- */
-const CL_TAGS={new:["New","新增","新規"],improved:["Improved","改进","改善"],fixed:["Fixed","修复","修正"],breaking:["Breaking","不兼容变更","互換性のない変更"],removed:["Removed","移除","削除"]};
+const CL_TAGS={new:["New","新增","新規"],improved:["Improved","改进","改善"],fixed:["Fixed","修复","修正"],breaking:["Breaking","不兼容变更","互換性のない変更"],rule:["Team rule","团队规则","チームルール"],removed:["Removed","移除","削除"]};
 function renderChangelog(){
   const s=document.createElement("section");s.id="changelog";
   s.appendChild(make("h2","cl-title",S.nav_changelog));