@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/components/buttons/Button.jsx

@@ -1,7 +1,11 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-const btnBase = { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", border: "1px solid transparent", cursor: "pointer", whiteSpace: "nowrap", boxSizing: "border-box", background: "transparent", transition: "var(--t-hover)" };
+/* Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding
+   switch together when a region declares data-size="sm" | "md" | "lg". A `size` prop only stamps that attribute on
+   the button itself — the default is to inherit, so siblings in one bar can never disagree. */
+const btnBase = { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, height: "var(--control-h)", padding: "0 var(--control-px)", borderRadius: "var(--radius-md)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", border: "1px solid transparent", cursor: "pointer", whiteSpace: "nowrap", boxSizing: "border-box", background: "transparent", transition: "var(--t-hover)" };
+const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
 
 const variants = {
   primary: { background: "var(--action-primary)", color: "var(--on-accent)" },
@@ -16,7 +20,7 @@ const variants = {
 const hovers = {
   primary: "var(--action-primary-hover)", dark: "var(--action-dark-hover)",
   outline: "var(--bg-hover)", ghost: "var(--bg-hover)", "primary-soft": "var(--soft-hover)",
-  danger: "var(--danger-text)", "danger-soft": "var(--danger-bg)",
+  danger: "var(--danger-text)", "danger-soft": "var(--danger-soft-hover)",
 };
 /** Press (mouse-down) fills — one step past hover. */
 const presses = {
@@ -26,20 +30,13 @@ const presses = {
 };
 /** Variants that change text color (+ underline) on hover instead of a background wash. */
 const colorHoverVariants = { text: "var(--text-heading)" };
-const sizes = {
-  sm: { height: 30, padding: "6px 12px", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", letterSpacing: 0, borderRadius: "var(--radius-md)" },
-  md: { height: 32, padding: "6px 12px", borderRadius: "var(--radius-md)" },
-  lg: { height: 35.5, padding: "8px 16px", fontWeight: "var(--weight-medium)", borderRadius: "var(--radius-lg)" },
-};
-const iconOnlyPad = { sm: 0, md: 0, lg: 0 };
-const iconOnlyBox = { sm: 30, md: 32, lg: 36 };
 
 function Spinner({ size, color }) {
-  return <span style={{ display: "inline-block", width: size, height: size, borderRadius: "var(--radius-full)", border: "2px solid currentColor", borderTopColor: "transparent", opacity: .9, color, animation: "kb-spin .7s linear infinite", flexShrink: 0 }} />;
+  return <span style={{ display: "inline-block", width: size, height: size, ...(size ? null : tierIcon), borderRadius: "var(--radius-full)", border: "2px solid currentColor", borderTopColor: "transparent", opacity: .9, color, animation: "kb-spin .7s linear infinite", flexShrink: 0 }} />;
 }
 
-/** Keybricks button. variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm | md | lg. Interaction states: hover (one step darker) · press (two steps, set via mouse-down) · keyboard focus ring · loading · disabled. */
-export function Button({ variant = "primary", size = "md", icon, iconSize, iconPosition = "left", medium, disabled, loading, fullWidth, iconOnly, label, pressed, focused, children, style, onClick, ...rest }) {
+/** Keybricks button. variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default). Interaction states: hover (one step darker) · press (two steps, set via mouse-down) · keyboard focus ring · loading · disabled. */
+export function Button({ variant = "primary", size, icon, iconSize, iconPosition = "left", medium, disabled, loading, fullWidth, iconOnly, label, pressed, focused, children, style, onClick, ...rest }) {
   const [hover, setHover] = React.useState(false);
   const [press, setPress] = React.useState(false);
   const [focus, setFocus] = React.useState(false);
@@ -47,10 +44,10 @@ export function Button({ variant = "primary", size = "md", icon, iconSize, iconP
   const isPressed = press || pressed;
   const isFocused = focus || focused;
   const s = {
-    ...btnBase, ...sizes[size], ...variants[variant],
+    ...btnBase, ...variants[variant],
     ...(medium ? { fontWeight: "var(--weight-medium)" } : null),
     ...(fullWidth ? { width: "100%" } : null),
-    ...(iconOnly ? { width: iconOnlyBox[size], padding: iconOnlyPad[size], gap: 0 } : null),
+    ...(iconOnly ? { width: "var(--control-h)", padding: 0, gap: 0 } : null),
     ...(busy ? { opacity: .55, cursor: "default" } : null),
     ...style,
   };
@@ -65,11 +62,11 @@ export function Button({ variant = "primary", size = "md", icon, iconSize, iconP
     }
     if (isFocused) s.boxShadow = "var(--ring-focus)";
   }
-  const iSize = iconSize || (size === "sm" ? 12 : 14);
-  const leading = loading ? <Spinner size={iSize} color={s.color} /> : (icon && iconPosition === "left" ? <Icon name={icon} size={iSize} /> : null);
-  const trailing = !loading && icon && iconPosition === "right" ? <Icon name={icon} size={iSize} /> : null;
+  const iconStyle = iconSize ? null : tierIcon;
+  const leading = loading ? <Spinner size={iconSize} color={s.color} /> : (icon && iconPosition === "left" ? <Icon name={icon} size={iconSize || 16} style={iconStyle} /> : null);
+  const trailing = !loading && icon && iconPosition === "right" ? <Icon name={icon} size={iconSize || 16} style={iconStyle} /> : null;
   return (
-    <button type="button" data-press="own" style={s} disabled={busy} aria-label={iconOnly ? label : undefined} onClick={onClick}
+    <button type="button" data-press="own" data-size={size} style={s} disabled={busy} aria-label={iconOnly ? label : undefined} onClick={onClick}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
       onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}
       onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") setPress(true); }} onKeyUp={() => setPress(false)}

package/components/buttons/Button.vue

@@ -1,8 +1,13 @@
 <script setup>
+import { px } from '../px.js'
 import { computed, ref } from 'vue'
 import Icon from '../icons/Icon.vue'
 
-const btnBase = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-regular)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', border: '1px solid transparent', cursor: 'pointer', whiteSpace: 'nowrap', boxSizing: 'border-box', background: 'transparent', transition: 'var(--t-hover)' }
+// Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding
+// switch together when a region declares data-size="sm" | "md" | "lg". The `size` prop only stamps that attribute on
+// the button itself — the default is to inherit, so siblings in one bar can never disagree.
+const btnBase = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '6px', height: 'var(--control-h)', padding: '0 var(--control-px)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-regular)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', border: '1px solid transparent', cursor: 'pointer', whiteSpace: 'nowrap', boxSizing: 'border-box', background: 'transparent', transition: 'var(--t-hover)' }
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
 const variants = {
   primary: { background: 'var(--action-primary)', color: 'var(--on-accent)' },
   dark: { background: 'var(--action-dark)', color: 'var(--action-dark-fg)' },
@@ -13,20 +18,13 @@ const variants = {
   'danger-soft': { background: 'var(--danger-bg)', color: 'var(--danger-text)' },
   text: { color: 'var(--text-secondary)', padding: '0', height: 'auto' },
 }
-const hovers = { primary: 'var(--action-primary-hover)', dark: 'var(--action-dark-hover)', outline: 'var(--bg-hover)', ghost: 'var(--bg-hover)', 'primary-soft': 'var(--soft-hover)', danger: 'var(--danger-text)', 'danger-soft': 'var(--danger-bg)' }
+const hovers = { primary: 'var(--action-primary-hover)', dark: 'var(--action-dark-hover)', outline: 'var(--bg-hover)', ghost: 'var(--bg-hover)', 'primary-soft': 'var(--soft-hover)', danger: 'var(--danger-text)', 'danger-soft': 'var(--danger-soft-hover)' }
 const presses = { primary: 'var(--action-primary-active)', dark: 'var(--action-dark-active)', outline: 'var(--bg-press)', ghost: 'var(--bg-press)', 'primary-soft': 'var(--soft-active)', danger: 'var(--danger-active)', 'danger-soft': 'var(--danger-soft-active)' }
 const colorHoverVariants = { text: 'var(--text-heading)' }
-const sizes = {
-  sm: { height: 30, padding: '6px 12px', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', letterSpacing: 0, borderRadius: 'var(--radius-md)' },
-  md: { height: 32, padding: '6px 12px', borderRadius: 'var(--radius-md)' },
-  lg: { height: 35.5, padding: '8px 16px', fontWeight: 'var(--weight-medium)', borderRadius: 'var(--radius-lg)' },
-}
-const iconOnlyPad = { sm: 0, md: 0, lg: 0 }
-const iconOnlyBox = { sm: 30, md: 32, lg: 36 }
 
-// Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm | md | lg.
+// Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default).
 const props = defineProps({
-  variant: { type: String, default: 'primary' }, size: { type: String, default: 'md' },
+  variant: { type: String, default: 'primary' }, size: String,
   icon: String, iconSize: Number, iconPosition: { type: String, default: 'left' },
   medium: Boolean, disabled: Boolean, loading: Boolean, fullWidth: Boolean, iconOnly: Boolean,
   label: String, pressed: Boolean, focused: Boolean, style: Object,
@@ -37,10 +35,10 @@ const busy = computed(() => props.disabled || props.loading)
 const isPressed = computed(() => press.value || props.pressed)
 const isFocused = computed(() => focus.value || props.focused)
 const s = computed(() => {
-  const base = { ...btnBase, ...sizes[props.size], ...variants[props.variant],
+  const base = { ...btnBase, ...variants[props.variant],
     ...(props.medium ? { fontWeight: 'var(--weight-medium)' } : null),
     ...(props.fullWidth ? { width: '100%' } : null),
-    ...(props.iconOnly ? { width: iconOnlyBox[props.size], padding: iconOnlyPad[props.size], gap: 0 } : null),
+    ...(props.iconOnly ? { width: 'var(--control-h)', padding: 0, gap: 0 } : null),
     ...(busy.value ? { opacity: .55, cursor: 'default' } : null), ...props.style }
   if (!busy.value) {
     if (colorHoverVariants[props.variant]) {
@@ -52,16 +50,17 @@ const s = computed(() => {
   }
   return base
 })
-const iSize = computed(() => props.iconSize || (props.size === 'sm' ? 12 : 14))
+const iSize = computed(() => props.iconSize || 16)
+const iconStyle = computed(() => props.iconSize ? null : tierIcon)
 </script>
 <template>
-  <button type="button" data-press="own" :style="s" :disabled="busy" :aria-label="iconOnly ? label : undefined"
+  <button type="button" data-press="own" :data-size="size" :style="s" :disabled="busy" :aria-label="iconOnly ? label : undefined"
     @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false; press = false"
     @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false"
     @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false">
-    <span v-if="loading" :style="{ display: 'inline-block', width: iSize, height: iSize, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" />
-    <Icon v-else-if="icon && iconPosition === 'left'" :name="icon" :size="iSize" />
+    <span v-if="loading" :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" />
+    <Icon v-else-if="icon && iconPosition === 'left'" :name="icon" :size="iSize" :style="iconStyle" />
     <slot v-if="!iconOnly" />
-    <Icon v-if="!loading && icon && iconPosition === 'right'" :name="icon" :size="iSize" />
+    <Icon v-if="!loading && icon && iconPosition === 'right'" :name="icon" :size="iSize" :style="iconStyle" />
   </button>
 </template>

package/components/buttons/ButtonGroup.vue

@@ -10,7 +10,7 @@ const items = computed(() => slots.default ? slots.default() : [])
       <component :is="child" :style="{ borderRadius: 0,
         ...(i === 0 ? { borderTopLeftRadius: 'var(--radius-md)', borderBottomLeftRadius: 'var(--radius-md)' } : null),
         ...(i === items.length - 1 ? { borderTopRightRadius: 'var(--radius-md)', borderBottomRightRadius: 'var(--radius-md)' } : null),
-        marginLeft: i === 0 ? 0 : -1 }" />
+        marginLeft: i === 0 ? 0 : '-1px' }" />
     </template>
   </div>
 </template>

package/components/buttons/IconButton.d.ts

@@ -3,7 +3,8 @@ import * as React from "react";
 export interface IconButtonProps {
   /** Icon glyph name */
   icon: string;
-  /** xs 22/r8 · sm 26/r4 (view toggle) · md 28/r8 (toolbar) · lg 34/r8 (top bar) */
+  /** Size tier: a square of sm 28 · md 32 · lg 40 with a 14/16/16 icon. Omit to inherit the enclosing region's tier
+   *  (the default). "xs" is a deprecated alias of "sm". */
   size?: "xs" | "sm" | "md" | "lg";
   /** Pressed/selected state (#f5f5f5 wash) */
   active?: boolean;

package/components/buttons/IconButton.jsx

@@ -1,28 +1,32 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-const ibSizes = { xs: { box: 22, icon: 14, radius: "var(--radius-md)" }, sm: { box: 26, icon: 14, radius: "var(--radius-sm)" }, md: { box: 28, icon: 16, radius: "var(--radius-md)" }, lg: { box: 34, icon: 18, radius: "var(--radius-md)" } };
+/* A square of the region's control height, icon at the tier's icon size (tokens/layout.css). `size` stamps
+   data-size on the button; omit it to inherit — the default. "xs" is kept as an alias of "sm" for 1.x callers. */
+const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
 
-/** Square ghost icon button (toolbar/back/bell/view toggles). size: xs 22 | sm 26 | md 28 | lg 34. danger tints red; loading shows a spinner and disables interaction. States: hover · press · keyboard focus ring · active (persistent toggle-on) · disabled. */
-export function IconButton({ icon, size = "md", active, muted, danger, disabled, loading, label, pressed, focused, style, onClick, ...rest }) {
+/** Square ghost icon button (toolbar/back/bell/view toggles). size: sm 28 | md 32 | lg 40 — omit to inherit the region's tier. danger tints red; loading shows a spinner and disables interaction. States: hover · press · keyboard focus ring · active (persistent toggle-on) · disabled. */
+export function IconButton({ icon, size, active, muted, danger, disabled, loading, label, pressed, focused, style, onClick, ...rest }) {
   const [hover, setHover] = React.useState(false);
   const [press, setPress] = React.useState(false);
   const [focus, setFocus] = React.useState(false);
-  const t = ibSizes[size];
+  const tier = size === "xs" ? "sm" : size;
   const busy = disabled || loading;
   const isPressed = (press || pressed) && !busy;
   const color = danger ? "var(--danger)" : muted ? "var(--text-muted)" : "var(--text-body)";
-  const bg = isPressed ? (danger ? "var(--danger-soft-active)" : "var(--bg-press)")
+  // hover / press are alpha overlays, not solid steps: the button sits on white rows, grey table headers and grey bars alike,
+  // and an overlay darkens whatever is underneath by the same amount (a solid --bg-hover vanishes on a --bg-table-header).
+  const bg = isPressed ? (danger ? "var(--danger-soft-active)" : "var(--overlay-press)")
     : active ? "var(--bg-active)"
-    : hover && !busy ? (danger ? "var(--danger-bg)" : "var(--bg-hover)") : "transparent";
+    : hover && !busy ? (danger ? "var(--danger-bg)" : "var(--overlay-hover)") : "transparent";
   return (
-    <button type="button" data-press="own" aria-label={label} disabled={busy} onClick={onClick}
+    <button type="button" data-press="own" data-size={tier} aria-label={label} disabled={busy} onClick={onClick}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
       onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}
       onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") setPress(true); }} onKeyUp={() => setPress(false)}
       onFocus={(e) => { try { setFocus(e.target.matches(":focus-visible")); } catch (err) { setFocus(true); } }} onBlur={() => setFocus(false)}
-      style={{ width: t.box, height: t.box, borderRadius: t.radius, border: "none", cursor: busy ? "default" : "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", background: bg, color, opacity: busy ? .5 : 1, boxShadow: (focus || focused) && !busy ? "var(--ring-focus)" : "none", transition: "var(--t-hover)", padding: 0, flexShrink: 0, ...style }} {...rest}>
-      {loading ? <span style={{ display: "inline-block", width: t.icon, height: t.icon, borderRadius: "var(--radius-full)", border: "2px solid currentColor", borderTopColor: "transparent", animation: "kb-spin .7s linear infinite" }} /> : <Icon name={icon} size={t.icon} />}
+      style={{ width: "var(--control-h)", height: "var(--control-h)", borderRadius: "var(--radius-md)", border: "none", cursor: busy ? "default" : "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", background: bg, color, opacity: busy ? .5 : 1, boxShadow: (focus || focused) && !busy ? "var(--ring-focus)" : "none", transition: "var(--t-hover)", padding: 0, flexShrink: 0, ...style }} {...rest}>
+      {loading ? <span style={{ display: "inline-block", ...tierIcon, borderRadius: "var(--radius-full)", border: "2px solid currentColor", borderTopColor: "transparent", animation: "kb-spin .7s linear infinite" }} /> : <Icon name={icon} size={16} style={tierIcon} />}
     </button>
   );
 }

package/components/buttons/IconButton.vue

@@ -1,21 +1,24 @@
 <script setup>
 import { ref, computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-const ibSizes = { xs: { box: 22, icon: 14, radius: 'var(--radius-md)' }, sm: { box: 26, icon: 14, radius: 'var(--radius-sm)' }, md: { box: 28, icon: 16, radius: 'var(--radius-md)' }, lg: { box: 34, icon: 18, radius: 'var(--radius-md)' } }
-// Square ghost icon button (toolbar/back/bell/view toggles). size: xs 22 | sm 26 | md 28 | lg 34.
-const props = defineProps({ icon: String, size: { type: String, default: 'md' }, active: Boolean, muted: Boolean, danger: Boolean, disabled: Boolean, loading: Boolean, label: String, pressed: Boolean, focused: Boolean, style: Object })
+// A square of the region's control height, icon at the tier's icon size (tokens/layout.css). `size` stamps data-size on
+// the button; omit it to inherit — the default. "xs" is kept as an alias of "sm" for 1.x callers.
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
+// Square ghost icon button (toolbar/back/bell/view toggles). size: sm 28 | md 32 | lg 40 — omit to inherit the region's tier.
+const props = defineProps({ icon: String, size: String, active: Boolean, muted: Boolean, danger: Boolean, disabled: Boolean, loading: Boolean, label: String, pressed: Boolean, focused: Boolean, style: Object })
 defineEmits(['click'])
 const hover = ref(false), press = ref(false), focus = ref(false)
-const t = computed(() => ibSizes[props.size])
+const tier = computed(() => props.size === 'xs' ? 'sm' : props.size)
 const busy = computed(() => props.disabled || props.loading)
 const isPressed = computed(() => (press.value || props.pressed) && !busy.value)
 const color = computed(() => props.danger ? 'var(--danger)' : props.muted ? 'var(--text-muted)' : 'var(--text-body)')
-const bg = computed(() => isPressed.value ? (props.danger ? 'var(--danger-soft-active)' : 'var(--bg-press)') : props.active ? 'var(--bg-active)' : (hover.value && !busy.value ? (props.danger ? 'var(--danger-bg)' : 'var(--bg-hover)') : 'transparent'))
-const s = computed(() => ({ width: t.value.box, height: t.value.box, borderRadius: t.value.radius, border: 'none', cursor: busy.value ? 'default' : 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: bg.value, color: color.value, opacity: busy.value ? .5 : 1, boxShadow: (focus.value || props.focused) && !busy.value ? 'var(--ring-focus)' : 'none', transition: 'var(--t-hover)', padding: 0, flexShrink: 0, ...props.style }))
+// hover / press are alpha overlays so the step is the same on white rows, grey table headers and grey bars
+const bg = computed(() => isPressed.value ? (props.danger ? 'var(--danger-soft-active)' : 'var(--overlay-press)') : props.active ? 'var(--bg-active)' : (hover.value && !busy.value ? (props.danger ? 'var(--danger-bg)' : 'var(--overlay-hover)') : 'transparent'))
+const s = computed(() => ({ width: 'var(--control-h)', height: 'var(--control-h)', borderRadius: 'var(--radius-md)', border: 'none', cursor: busy.value ? 'default' : 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: bg.value, color: color.value, opacity: busy.value ? .5 : 1, boxShadow: (focus.value || props.focused) && !busy.value ? 'var(--ring-focus)' : 'none', transition: 'var(--t-hover)', padding: 0, flexShrink: 0, ...props.style }))
 </script>
 <template>
-  <button type="button" data-press="own" :aria-label="label" :disabled="busy" @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false; press = false" @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false" @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false" :style="s">
-    <span v-if="loading" :style="{ display: 'inline-block', width: t.icon, height: t.icon, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', animation: 'kb-spin .7s linear infinite' }" />
-    <Icon v-else :name="icon" :size="t.icon" />
+  <button type="button" data-press="own" :data-size="tier" :aria-label="label" :disabled="busy" @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false; press = false" @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false" @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false" :style="s">
+    <span v-if="loading" :style="{ display: 'inline-block', ...tierIcon, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', animation: 'kb-spin .7s linear infinite' }" />
+    <Icon v-else :name="icon" :size="16" :style="tierIcon" />
   </button>
 </template>

package/components/buttons/buttons.prompt.md

@@ -1,19 +1,20 @@
-Buttons: `Button` (primary/dark/outline/ghost/primary-soft; sm/md/lg), `IconButton` (square ghost), `ActionChip` (tinted bulk actions).
+Buttons: `Button` (primary/dark/outline/ghost/primary-soft), `IconButton` (square ghost), `ActionChip` (tinted bulk actions). Height, text and padding come from the region's size tier — `data-size="sm" | "md" | "lg"` = 24 / 32 / 36px — so leave `size` off and set the tier on the bar.
 
 ```jsx
 <Button icon="send">Submit</Button>
 <Button variant="dark" icon="sparkles">AI Assistant</Button>
 <Button variant="ghost" icon="play">Run Test</Button>
 <Button variant="text">Cancel</Button>
-<Button variant="primary-soft" icon="eye" size="sm">Data Preview</Button>
+<Button variant="primary-soft" icon="eye">Data Preview</Button>
 <Button variant="danger" icon="trash-2">Delete Node</Button>
 <Button loading>Submit</Button>
 <Button icon="bell" iconOnly label="Notifications" variant="outline"/>
 <Button fullWidth icon="upload">Upload Configuration File</Button>
-<ButtonGroup><Button variant="outline" size="sm">Day</Button><Button variant="outline" size="sm">Week</Button></ButtonGroup>
-<IconButton icon="bell" size="lg"/>
+<ButtonGroup><Button variant="outline">Day</Button><Button variant="outline">Week</Button></ButtonGroup>
+<IconButton icon="bell"/>
+<div data-size="sm"><Button icon="filter">Filter</Button><IconButton icon="x" label="Clear"/></div>   // one tier for the whole bar
 <IconButton icon="trash-2" danger label="Delete"/>
 <ActionChip tone="success">Mark as New</ActionChip>
 ```
 
-Primary = the single blue CTA per view. Dark = brand-level actions (AI Assistant, Show). Ghost text buttons sit beside the CTA ("Back", "Run Test"). `text` = no background/border ever, underlines on hover — for tertiary actions like "Cancel"/"View all", never a page's main action. Danger/danger-soft = destructive actions. lg (r10, 500 weight) only in wizard footers. `loading` swaps the icon for a spinner and disables the button without changing its size; `iconOnly` needs a `label` for accessibility; `ButtonGroup` fuses adjacent buttons into one segmented control or a split button (main action + attached icon-only).
+Primary = the single blue CTA per view. Dark = brand-level actions (AI Assistant, Show). Ghost = no box at rest, grey wash on hover — the default for actions in card and section headers, table toolbars and panel chrome ("Export", "Filter", "Run Test", "Back"); same height as outline so it lines up. `text` = bare label, underline on hover — links that happen to be buttons ("View all", "Clear filters"), never beside a boxed button and never a toolbar action. Emphasis is always the variant, never the size: a quieter action gets `ghost` or `text`, not `size="sm"`. Danger/danger-soft = destructive actions. lg (36px) comes from an lg region — dialogs and wizard footers; `Modal` sets it for you. A `size` prop on a single button is only for a control that stands alone, never to adjust one button inside a bar. `loading` swaps the icon for a spinner and disables the button without changing its size; `iconOnly` needs a `label` for accessibility; `ButtonGroup` fuses adjacent buttons into one segmented control or a split button (main action + attached icon-only).

package/components/charts/Bar3D.jsx

@@ -53,7 +53,7 @@ export function Bar3D({ series = [], categories = [], width = 460, height = 300,
         {vTicks.map((t, i) => (
           <g key={"vt" + i}>
             <line x1={t.p.x - 4} y1={t.p.y} x2={t.p.x} y2={t.p.y} stroke="var(--chart-guide)" strokeWidth="1" />
-            <text x={t.p.x - 7} y={t.p.y + 3} textAnchor="end" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>{t.v}</text>
+            <text x={t.p.x - 7} y={t.p.y + 3} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{t.v}</text>
           </g>
         ))}
         {categories.map((c, i) => {
@@ -63,7 +63,7 @@ export function Bar3D({ series = [], categories = [], width = 460, height = 300,
           const p0 = P(i / n - 0.5 + 0.5 / n, -0.46, zE);
           const ctr = P(0, -0.46, 0);
           const dx = p0.x - ctr.x, dy = p0.y - ctr.y, len = Math.hypot(dx, dy) || 1;
-          return <text key={"c" + i} x={p0.x + (dx / len) * 18} y={p0.y + (dy / len) * 18 + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{c}</text>;
+          return <text key={"c" + i} x={p0.x + (dx / len) * 18} y={p0.y + (dy / len) * 18 + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{c}</text>;
         })}
         {drawn.map((b) => (
           <g key={b.key} opacity={hover == null || hover === b.key ? 1 : 0.45}

package/components/charts/Bar3D.vue

@@ -56,9 +56,9 @@ const g = computed(() => {
       <line :x1="g.vAxis[0].x" :y1="g.vAxis[0].y" :x2="g.vAxis[1].x" :y2="g.vAxis[1].y" stroke="var(--chart-guide)" stroke-width="1"/>
       <g v-for="(t,i) in g.vTicks" :key="'vt'+i">
         <line :x1="t.p.x-4" :y1="t.p.y" :x2="t.p.x" :y2="t.p.y" stroke="var(--chart-guide)" stroke-width="1"/>
-        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ t.v }}</text>
+        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ t.v }}</text>
       </g>
-      <text v-for="(l,i) in g.labels" :key="'c'+i" :x="l.x" :y="l.y" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ l.c }}</text>
+      <text v-for="(l,i) in g.labels" :key="'c'+i" :x="l.x" :y="l.y" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ l.c }}</text>
       <g v-for="b in g.drawn" :key="b.key" :opacity="hover==null||hover===b.key?1:0.45"
         @mouseenter="interactive && (hover=b.key)" @mouseleave="interactive && (hover=null)"
         style="transition:opacity var(--dur-fast) var(--ease-out)">
@@ -67,7 +67,7 @@ const g = computed(() => {
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.drawn.find(b=>b.key===hover).top.x+'px',top:g.drawn.find(b=>b.key===hover).top.y+'px',transform:g.drawn.find(b=>b.key===hover).top.x>width*0.6?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
       <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px">{{ categories[g.drawn.find(b=>b.key===hover).i] }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ g.drawn.find(b=>b.key===hover).s.name }} · {{ valueFormat(g.drawn.find(b=>b.key===hover).v) }}</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ g.drawn.find(b=>b.key===hover).s.name }} · {{ valueFormat(g.drawn.find(b=>b.key===hover).v) }}</div>
     </div>
     <div style="display:flex;gap:14px;padding-top:6px;line-height:normal">
       <span v-for="(s,i) in series" :key="s.name" style="display:inline-flex;align-items:center;gap:6px">

package/components/charts/BarChart.jsx

@@ -92,11 +92,11 @@ export function BarChart({ series = [], categories = [], mode = "grouped", orien
             {ticks.map((t) => (
               <g key={t}>
                 <line x1={sv(t)} x2={sv(t)} y1={pad.t} y2={height - pad.b} stroke={t === 0 ? "var(--chart-axis)" : "var(--chart-grid)"} strokeWidth="1" />
-                <text x={sv(t)} y={height - pad.b + 15} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{pct ? t + "%" : yFormat(t)}</text>
+                <text x={sv(t)} y={height - pad.b + 15} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{pct ? t + "%" : yFormat(t)}</text>
               </g>
             ))}
             {categories.map((c, i) => (
-              <text key={i} x={pad.l - 8} y={mid(i) + 3.5} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fill: hover === i ? "var(--text-heading)" : "var(--chart-label)" }}>{c}</text>
+              <text key={i} x={pad.l - 8} y={mid(i) + 3.5} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: hover === i ? "var(--text-heading)" : "var(--chart-label)" }}>{c}</text>
             ))}
           </g>
         ) : null}
@@ -107,13 +107,13 @@ export function BarChart({ series = [], categories = [], mode = "grouped", orien
         {showValues ? rects.map((r) => (
           (horiz ? r.w : r.h) < 22 ? null : (
             <text key={"v" + r.key} x={horiz ? r.x + r.w - 5 : r.x + r.w / 2} y={horiz ? r.y + r.h / 2 + 3.5 : r.y + 12}
-              textAnchor={horiz ? "end" : "middle"} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--on-accent)" }}>{fmtVal(r.s, r.i)}</text>
+              textAnchor={horiz ? "end" : "middle"} style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--on-accent)" }}>{fmtVal(r.s, r.i)}</text>
           )
         )) : null}
         {oScale ? <g>
           <path d={linePath(overlay.values.map((v, i) => [mid(i), oScale.sy(v)]))} fill="none" stroke={overlay.color || "var(--chart-total)"} strokeWidth="1.5" />
           {overlay.values.map((v, i) => <circle key={i} cx={mid(i)} cy={oScale.sy(v)} r="2.5" fill={overlay.color || "var(--chart-total)"} />)}
-          {axes ? oScale.ticks.map((t) => <text key={t} x={width - pad.r + 6} y={oScale.sy(t) + 3} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{overlayFormat(t)}</text>) : null}
+          {axes ? oScale.ticks.map((t) => <text key={t} x={width - pad.r + 6} y={oScale.sy(t) + 3} style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{overlayFormat(t)}</text>) : null}
         </g> : null}
       </svg>
       {hover != null && interactive ? (

package/components/charts/BarChart.vue

@@ -89,8 +89,8 @@ function rowVal(s){
         <g v-for="t in g.ticks" :key="t">
           <line v-if="g.horiz" :x1="g.sv(t)" :x2="g.sv(t)" :y1="g.pad.t" :y2="height-g.pad.b" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
           <line v-else :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sv(t)" :y2="g.sv(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
-          <text v-if="g.horiz" :x="g.sv(t)" :y="height-g.pad.b+15" text-anchor="middle" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ g.fmtAxis(t) }}</text>
-          <text v-else :x="g.pad.l-8" :y="g.sv(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ g.fmtAxis(t) }}</text>
+          <text v-if="g.horiz" :x="g.sv(t)" :y="height-g.pad.b+15" text-anchor="middle" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ g.fmtAxis(t) }}</text>
+          <text v-else :x="g.pad.l-8" :y="g.sv(t)+3" text-anchor="end" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ g.fmtAxis(t) }}</text>
         </g>
         <text v-for="(c,i) in categories" :key="'c'+i"
           :x="g.horiz ? g.pad.l-8 : g.mid(i)" :y="g.horiz ? g.mid(i)+3.5 : height-g.pad.b+16"
@@ -103,12 +103,12 @@ function rowVal(s){
       <template v-if="showValues">
         <text v-for="r in g.rects.filter(r=>(g.horiz?r.w:r.h)>=22)" :key="'v'+r.key"
           :x="g.horiz ? r.x+r.w-5 : r.x+r.w/2" :y="g.horiz ? r.y+r.h/2+3.5 : r.y+12"
-          :text-anchor="g.horiz ? 'end' : 'middle'" style="font-family:var(--font-mono);font-size:10px;fill:var(--on-accent)">{{ r.text }}</text>
+          :text-anchor="g.horiz ? 'end' : 'middle'" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--on-accent)">{{ r.text }}</text>
       </template>
       <template v-if="g.ov">
         <path :d="g.ov.path" fill="none" :stroke="g.ov.color" stroke-width="1.5"/>
         <circle v-for="(d,i) in g.ov.dots" :key="'o'+i" :cx="d[0]" :cy="d[1]" r="2.5" :fill="g.ov.color"/>
-        <text v-if="axes" v-for="t in g.ov.ticks" :key="'ot'+t" :x="width-g.pad.r+6" :y="g.ov.osy(t)+3" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ overlayFormat(t) }}</text>
+        <text v-if="axes" v-for="t in g.ov.ticks" :key="'ot'+t" :x="width-g.pad.r+6" :y="g.ov.osy(t)+3" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ overlayFormat(t) }}</text>
       </template>
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:(g.horiz ? Math.min(width-20, g.pad.l+(width-g.pad.l-g.pad.r)*0.5) : g.mid(hover))+'px',top:(g.horiz ? g.pad.t+g.band*hover+g.band/2 : height/2-10)+'px',transform:(g.horiz || g.mid(hover)>width*0.62)?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
@@ -116,12 +116,12 @@ function rowVal(s){
       <div v-for="s in g.shown" :key="s.name" style="display:flex;align-items:center;gap:6px;padding:1px 0">
         <span :style="{width:'7px',height:'7px',borderRadius:'2px',background:mode==='diverging'?(s.values[hover]>=0?'var(--chart-pos)':'var(--chart-neg)'):g.colorOf(s),flexShrink:0}"/>
         <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ s.name }}</span>
-        <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ rowVal(s) }}</span>
+        <span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ rowVal(s) }}</span>
       </div>
       <div v-if="overlay" style="display:flex;align-items:center;gap:6px;padding:1px 0">
         <span :style="{width:'7px',height:'7px',borderRadius:'2px',background:overlay.color||'var(--chart-total)'}"/>
         <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ overlay.name }}</span>
-        <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ overlayFormat(overlay.values[hover]) }}</span>
+        <span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ overlayFormat(overlay.values[hover]) }}</span>
       </div>
     </div>
     <div v-if="legend && (series.length>1 || overlay)" style="display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:8px;line-height:normal">

package/components/charts/BarList.jsx

@@ -16,10 +16,10 @@ export function BarList({ rows = [], max, width = 360, valueFormat = fmtNum, sho
           onClick={onSelect ? () => onSelect(r) : undefined}
           style={{ opacity: hover == null || hover === r.label ? 1 : 0.5, cursor: onSelect ? "pointer" : "default", transition: "var(--t-hover)" }}>
           <div style={{ display: "flex", alignItems: "baseline", gap: 8, paddingBottom: 4 }}>
-            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.label}</span>
-            <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)" }}>{valueFormat(r.value)}</span>
-            {hover === r.label && r.delta == null ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", paddingLeft: 6 }}>{((r.value / total) * 100).toFixed(1)}%</span> : null}
-            {r.delta != null ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: r.delta >= 0 ? "var(--chart-pos)" : "var(--chart-neg)", minWidth: 38, textAlign: "right" }}>{(r.delta >= 0 ? "+" : "") + r.delta.toFixed(1)}%</span> : null}
+            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.label}</span>
+            <span style={{ marginLeft: "auto", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-heading)" }}>{valueFormat(r.value)}</span>
+            {hover === r.label && r.delta == null ? <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", color: "var(--text-muted)", paddingLeft: 6 }}>{((r.value / total) * 100).toFixed(1)}%</span> : null}
+            {r.delta != null ? <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", color: r.delta >= 0 ? "var(--chart-pos)" : "var(--chart-neg)", minWidth: 38, textAlign: "right" }}>{(r.delta >= 0 ? "+" : "") + r.delta.toFixed(1)}%</span> : null}
           </div>
           <div style={{ height: barHeight, borderRadius: "var(--radius-full)", background: showTrack ? "var(--chart-track)" : "transparent", overflow: "hidden" }}>
             <div style={{ width: Math.max(1, (r.value / top) * 100) + "%", height: "100%", borderRadius: "var(--radius-full)", background: r.color || "var(--series-1)", filter: hover === r.label ? "brightness(1.08)" : "none", transition: "width var(--dur) var(--ease-out), filter var(--dur-fast) var(--ease-out)" }} />

package/components/charts/BarList.vue

@@ -12,10 +12,10 @@ const hover = ref(null)
     <div v-for="r in rows" :key="r.label" @mouseenter="interactive && (hover=r.label)" @mouseleave="interactive && (hover=null)"
       :style="{opacity:hover==null||hover===r.label?1:0.5,transition:'var(--t-hover)'}">
       <div style="display:flex;align-items:baseline;gap:8px;padding-bottom:4px">
-        <span style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ r.label }}</span>
-        <span style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(r.value) }}</span>
-        <span v-if="hover===r.label && r.delta==null" style="font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);padding-left:6px">{{ ((r.value/total)*100).toFixed(1) }}%</span>
-        <span v-if="r.delta!=null" :style="{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',color:r.delta>=0?'var(--chart-pos)':'var(--chart-neg)',minWidth:'38px',textAlign:'right'}">{{ (r.delta>=0?'+':'')+r.delta.toFixed(1) }}%</span>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ r.label }}</span>
+        <span style="margin-left:auto;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(r.value) }}</span>
+        <span v-if="hover===r.label && r.delta==null" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);color:var(--text-muted);padding-left:6px">{{ ((r.value/total)*100).toFixed(1) }}%</span>
+        <span v-if="r.delta!=null" :style="{fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-2xs-mono)',color:r.delta>=0?'var(--chart-pos)':'var(--chart-neg)',minWidth:'38px',textAlign:'right'}">{{ (r.delta>=0?'+':'')+r.delta.toFixed(1) }}%</span>
       </div>
       <div :style="{height:barHeight+'px',borderRadius:'var(--radius-full)',background:showTrack?'var(--chart-track)':'transparent',overflow:'hidden'}">
         <div :style="{width:Math.max(1,(r.value/top)*100)+'%',height:'100%',borderRadius:'var(--radius-full)',background:r.color||'var(--series-1)',filter:hover===r.label?'brightness(1.08)':'none',transition:'width var(--dur) var(--ease-out), filter var(--dur-fast) var(--ease-out)'}"/>

package/components/charts/BoxPlot.jsx

@@ -47,7 +47,7 @@ export function BoxPlot({ groups = [], width = 560, height = 260, axes = true, v
               <rect x={x - bw / 2} y={sy(b.q3)} width={bw} height={Math.max(1, sy(b.q1) - sy(b.q3))} rx="2" fill={c} fillOpacity="0.28" stroke={c} strokeWidth="1.2" />
               <line x1={x - bw / 2} x2={x + bw / 2} y1={sy(b.med)} y2={sy(b.med)} stroke={c} strokeWidth="2" />
               {(b.outliers || []).map((o, oi) => <circle key={oi} cx={x} cy={sy(o)} r="2.2" fill="none" stroke={c} strokeWidth="1" />)}
-              <text x={x} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{b.label}</text>
+              <text x={x} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{b.label}</text>
             </g>
           );
         })}

package/components/charts/BoxPlot.vue

@@ -34,7 +34,7 @@ function move(e){
       <template v-if="axes">
         <g v-for="t in g.ticks" :key="t">
           <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(t)" :y2="g.sy(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
-          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ valueFormat(t) }}</text>
+          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ valueFormat(t) }}</text>
         </g>
       </template>
       <g v-for="(b,i) in g.boxes" :key="b.label" :opacity="hover==null||hover===i?1:0.45" style="transition:opacity var(--dur-fast) var(--ease-out)">
@@ -45,12 +45,12 @@ function move(e){
         <rect :x="b.x-b.bw/2" :y="g.sy(b.q3)" :width="b.bw" :height="Math.max(1,g.sy(b.q1)-g.sy(b.q3))" rx="2" :fill="b.color" fill-opacity="0.28" :stroke="b.color" stroke-width="1.2"/>
         <line :x1="b.x-b.bw/2" :x2="b.x+b.bw/2" :y1="g.sy(b.med)" :y2="g.sy(b.med)" :stroke="b.color" stroke-width="2"/>
         <circle v-for="(o,oi) in (b.outliers||[])" :key="oi" :cx="b.x" :cy="g.sy(o)" r="2.2" fill="none" :stroke="b.color" stroke-width="1"/>
-        <text :x="b.x" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ b.label }}</text>
+        <text :x="b.x" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ b.label }}</text>
       </g>
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.boxes[hover].x+'px',top:(height/2-10)+'px',transform:g.boxes[hover].x>width*0.62?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
       <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px">{{ g.boxes[hover].label }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">
         {{ valueFormat(g.boxes[hover].lo) }} · Q1 {{ valueFormat(g.boxes[hover].q1) }} · med {{ valueFormat(g.boxes[hover].med) }} · Q3 {{ valueFormat(g.boxes[hover].q3) }} · {{ valueFormat(g.boxes[hover].hi) }}
       </div>
     </div>

package/components/charts/BulletChart.jsx

@@ -20,15 +20,15 @@ export function BulletChart({ rows = [], width = 360, valueFormat = fmtNum, tone
           <div key={r.label} onMouseEnter={interactive ? () => setHover(r.label) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
             style={{ opacity: hover == null || on ? 1 : 0.55, transition: "var(--t-hover)" }}>
             <div style={{ display: "flex", alignItems: "baseline", paddingBottom: 4 }}>
-              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-body)" }}>{r.label}</span>
-              <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)" }}>{valueFormat(r.value)}</span>
-              <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", paddingLeft: 6 }}>/ {valueFormat(r.target)}</span>
-              {on ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: missed ? "var(--chart-neg)" : "var(--chart-pos)", paddingLeft: 8 }}>{(missed ? "" : "+") + (((r.value - r.target) / (r.target || 1)) * 100).toFixed(1)}%</span> : null}
+              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-body)" }}>{r.label}</span>
+              <span style={{ marginLeft: "auto", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-heading)" }}>{valueFormat(r.value)}</span>
+              <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", color: "var(--text-muted)", paddingLeft: 6 }}>/ {valueFormat(r.target)}</span>
+              {on ? <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", color: missed ? "var(--chart-neg)" : "var(--chart-pos)", paddingLeft: 8 }}>{(missed ? "" : "+") + (((r.value - r.target) / (r.target || 1)) * 100).toFixed(1)}%</span> : null}
             </div>
             <div style={{ position: "relative", height: 12, borderRadius: 3, background: "var(--chart-track)", overflow: "hidden" }}>
               {r.ranges ? <>
-                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: pc(r.ranges[0]), background: "var(--alpha-heavy, rgba(0,0,0,.12))", opacity: 0.5 }} />
-                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: pc(r.ranges[1]), background: "var(--alpha-heavy, rgba(0,0,0,.12))", opacity: 0.25 }} />
+                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: pc(r.ranges[0]), background: "var(--neutral-alpha-12)", opacity: 0.5 }} />
+                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: pc(r.ranges[1]), background: "var(--neutral-alpha-12)", opacity: 0.25 }} />
               </> : null}
               <div style={{ position: "absolute", left: 0, top: 3, bottom: 3, width: pc(r.value), borderRadius: 2, background: bar, transition: "width var(--dur) var(--ease-out)" }} />
               <div style={{ position: "absolute", left: pc(r.target), top: 0, bottom: 0, width: 2, background: "var(--chart-total)" }} />

package/components/charts/BulletChart.vue

@@ -15,15 +15,15 @@ function geom(r){
     <div v-for="r in rows" :key="r.label" @mouseenter="interactive && (hover=r.label)" @mouseleave="interactive && (hover=null)"
       :style="{opacity:hover==null||hover===r.label?1:0.55,transition:'var(--t-hover)'}">
       <div style="display:flex;align-items:baseline;padding-bottom:4px">
-        <span style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-body)">{{ r.label }}</span>
-        <span style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(r.value) }}</span>
-        <span style="font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);padding-left:6px">/ {{ valueFormat(r.target) }}</span>
-        <span v-if="hover===r.label" :style="{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',paddingLeft:'8px',color:r.value<r.target?'var(--chart-neg)':'var(--chart-pos)'}">{{ (r.value<r.target?'':'+')+(((r.value-r.target)/(r.target||1))*100).toFixed(1) }}%</span>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-body)">{{ r.label }}</span>
+        <span style="margin-left:auto;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(r.value) }}</span>
+        <span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);color:var(--text-muted);padding-left:6px">/ {{ valueFormat(r.target) }}</span>
+        <span v-if="hover===r.label" :style="{fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-2xs-mono)',paddingLeft:'8px',color:r.value<r.target?'var(--chart-neg)':'var(--chart-pos)'}">{{ (r.value<r.target?'':'+')+(((r.value-r.target)/(r.target||1))*100).toFixed(1) }}%</span>
       </div>
       <div style="position:relative;height:12px;border-radius:3px;background:var(--chart-track);overflow:hidden">
         <template v-if="r.ranges">
-          <div :style="{position:'absolute',left:0,top:0,bottom:0,width:geom(r).pc(r.ranges[0]),background:'rgba(0,0,0,.12)',opacity:.5}"/>
-          <div :style="{position:'absolute',left:0,top:0,bottom:0,width:geom(r).pc(r.ranges[1]),background:'rgba(0,0,0,.12)',opacity:.25}"/>
+          <div :style="{position:'absolute',left:0,top:0,bottom:0,width:geom(r).pc(r.ranges[0]),background:'var(--neutral-alpha-12)',opacity:.5}"/>
+          <div :style="{position:'absolute',left:0,top:0,bottom:0,width:geom(r).pc(r.ranges[1]),background:'var(--neutral-alpha-12)',opacity:.25}"/>
         </template>
         <div :style="{position:'absolute',left:0,top:'3px',bottom:'3px',width:geom(r).pc(r.value),borderRadius:'2px',background:geom(r).bar,transition:'width var(--dur) var(--ease-out)'}"/>
         <div :style="{position:'absolute',left:geom(r).pc(r.target),top:0,bottom:0,width:'2px',background:'var(--chart-total)'}"/>

package/components/charts/CandlestickChart.jsx

@@ -32,7 +32,7 @@ export function CandlestickChart({ candles = [], width = 620, height = 300, axes
       <svg width={width} height={height} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img">
         {axes ? <PlotGrid w={width} h={height} pad={pad} ticks={ticks} sy={sy} xLabels={[]} sxLabel={() => 0} yFormat={valueFormat} /> : null}
         {hover != null ? <rect x={pad.l + slot * hover} y={pad.t} width={slot} height={height - pad.t - (axes ? 22 : 4)} fill="var(--bg-hover)" /> : null}
-        {avg ? <path d={"M" + avg.map((v, i) => (v == null ? null : cx(i).toFixed(1) + " " + sy(v).toFixed(1))).filter(Boolean).join(" L")} fill="none" stroke="var(--series-8)" strokeWidth="1.3" /> : null}
+        {avg ? <path d={"M" + avg.map((v, i) => (v == null ? null : cx(i).toFixed(1) + " " + sy(v).toFixed(1))).filter(Boolean).join(" L")} fill="none" stroke="var(--chart-total)" strokeWidth="1.3" /> : null}
         {candles.map((c, i) => {
           const col = up(c) ? "var(--chart-pos)" : "var(--chart-neg)";
           const yO = sy(c.o), yC = sy(c.c);
@@ -48,7 +48,7 @@ export function CandlestickChart({ candles = [], width = 620, height = 300, axes
         })}
         {volume ? <line x1={pad.l} x2={width - pad.r} y1={height - (axes ? 22 : 4)} y2={height - (axes ? 22 : 4)} stroke="var(--chart-axis)" strokeWidth="1" /> : null}
         {axes ? candles.map((c, i) => (i % Math.ceil(candles.length / 6) ? null : (
-          <text key={"t" + i} x={cx(i)} y={height - 6} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{c.t}</text>
+          <text key={"t" + i} x={cx(i)} y={height - 6} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{c.t}</text>
         ))) : null}
       </svg>
       {h && interactive ? (