@keyfunc/keybricks-ds 2.3.1 → 2.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.3.1",
-  "description": "Keybricks design system — design tokens, three size tiers and 117 UI components in React and Vue 3, source-only.",
+  "version": "2.4.0",
+  "description": "Keybricks design system — design tokens, three size tiers and 120 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [

package/readme.md

@@ -34,7 +34,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 - **Backgrounds & imagery**: no photography, no illustration. The pipeline canvas is #fafafa with a subtle dot/curve grid; chart areas use soft blue gradient fills. Only bitmap: the cube logo.
 - **States**: every interactive element carries five states beyond rest. **Hover** moves the fill one step (`--bg-hover` wash on ghost items, `--action-primary-hover` on solid buttons, `--soft-hover` on tinted ones); controls whose colours are inline get it from the hover hooks in `tokens/hover.css`. **Press** moves it a second step: Button and IconButton use explicit tokens (`--action-primary-active`, `--action-dark-active`, `--bg-press`, `--soft-active`, `--danger-active`, `--danger-soft-active`) and opt out of the global layer with `data-press="own"`; every other control — nav rows, tree items, menu items, chips, tabs, list rows, option rows, palette tiles — gets press from the one global rule in `tokens/interaction.css` (`filter: var(--press-filter)` on `:active`, which multiplies whatever wash hover is already showing, and brightens rather than darkens in dark mode). No scale transforms, no shadow shifts; text-only buttons drop to 70% opacity instead. **Keyboard focus** is also global: a 2px `--focus-border` outline at 2px offset on `:focus-visible` only, so a mouse click never draws it. **Selected/active** is persistent, not transient: active nav = `--bg-active` pill + heading-weight text; selected node = blue border + ring. **Disabled** is 55% opacity (50% on icon buttons) with the default cursor.
 - **Motion**: kept minimal by design (see Motion below) — 120–160ms ease-out on hover/selection, nothing bouncy or far-traveling.
-- **Layout chrome**: left sidebar 240px (collapsible to a 64px icon rail), 56px top bar (search left, bell + black "AI Assistant" pill right), optional 240px secondary panel (Documents tree, pipeline palette), 400px right config panel, 250px bottom data-preview drawer.
+- **Layout chrome**: left sidebar 240px (collapsible to a 64px icon rail), 56px top bar (search left; black "AI Assistant" pill, bell, help and the user menu right), sidebar tones recessed (grey, default) · flush · contrast · custom, optional 240px secondary panel (Documents tree, pipeline palette), 400px right config panel, 250px bottom data-preview drawer.
 - **Cards**: white, radius 10, hairline border, 21px padding, 14px/500 title — never elevated.
 - **Density**: high; table rows 32 (sm) · 40 (md) · 44 (lg); header cells the same size as body cells in weight 600, sentence case; amount cells at the row's size with tabular figures; config codes as 12px code chips.
 
@@ -69,7 +69,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 
 **For developers integrating this system**
 - `DESIGN.md` — the rules file for AI coding agents: absolute token values, interaction states, an explicit "do not" list, and voice. Point Claude Code / Cursor / Copilot at this before they generate UI.
-- `INTEGRATION.md` — the integration guide: three steps to first paint, the full 117-component index with import paths, token reference, dark mode, interaction states, versioning.
+- `INTEGRATION.md` — the integration guide: three steps to first paint, the full 120-component index with import paths, token reference, dark mode, interaction states, versioning.
 - `DEPLOY.md` — running the system on GitLab: what ships in the package and what stays on Pages, the entry points, the release flow, and the bundler config each consumer needs.
 - `index.html` · `gallery.html` — the documentation site: the browsable system and the filterable thumbnail grid, both deployed to GitLab Pages by CI.
 - `package.json` · `.gitlab-ci.yml` · `_scripts/` — makes the system an installable package: a version tag publishes to the GitLab Package Registry, the default branch redeploys the docs site, and `npm run check` fails the pipeline if the generated tokens or barrels drift from source.
@@ -81,14 +81,14 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 - `SKILL.md` — agent skill entry file.
 
 ## Components
-- `components/icons/` — Icon (+ ICON_PATHS glyph data + feather-paths.js, the full Feather fallback), Unicon (Unicons CDN webfont).
+- `components/icons/` — Icon (+ ICON_PATHS glyph data + feather-paths.js, the full Feather fallback), DataSourceLogo (+ DATA_SOURCE_LOGOS), Unicon (Unicons CDN webfont).
 - `components/buttons/` — Button, IconButton, ActionChip.
 - `components/forms/` — Field, Input, Textarea, Select, SearchInput, Checkbox, NumberStepper, Dropzone, Switch, Radio, RadioGroup, Combobox, MultiSelect, DatePicker, Slider.
 - `components/tabs/` — Tabs, PanelTabs, PillTabs, ViewToggle, SegmentedControl.
 - `components/display/` — Card, StatCard, Badge, StatusBadge, IconTile, ProgressBar, Donut, AreaChart, MiniBars, Avatar, AvatarGroup, Tag, Divider, Kbd.
 - `components/feedback/` — Stepper, ContextMenu, ActivityItem, DotActivity, LogViewer, Tooltip, Modal, Toast, ToastStack, Alert, EmptyState, Skeleton, Spinner, Menu, Accordion, Banner, Drawer, Timeline.
 - `components/data/` — Table, ListRow, Pagination, KeyValue, KeyValueList, DiffValue, CodeBlock, Spreadsheet, SmartTable, FilterBar.
-- `components/navigation/` — Sidebar (+ KEYBRICKS_NAV), TopBar, PageToolbar, PageHeading, DocTree, Breadcrumb, Tree, ThemeToggle (+ applyStoredTheme).
+- `components/navigation/` — Sidebar (+ KEYBRICKS_NAV, KEYBRICKS_NAV_FOOTER, KEYBRICKS_MGMT, SIDEBAR_COLORS), SidePanel, TopBar, UserMenu, PageToolbar, PageHeading, DocTree, Breadcrumb, Tree, ThemeToggle (+ applyStoredTheme).
 - `components/pipeline/` — NodeCard, Port, PortLabel, PaletteItem, PaletteListItem, PalettePanel (+ PIPELINE_CATALOG), PipelineCanvas, DataPreview, ConfigPanel, ZoomControls.
 - `components/charts/` — 27 chart types: Sparkline, LineChart, BarChart, BarList, DonutChart, ScatterChart, HeatmapChart, WaterfallChart, BulletChart, GaugeChart, FunnelChart, TreemapChart, RadarChart, Histogram, BoxPlot, ParetoChart, CandlestickChart, SankeyChart, ChordChart, SunburstChart, WorldMap, GanttChart, and the 3D set Surface3D, Scatter3D, Bar3D, Pie3D, Ribbon3D (SVG painter's-algorithm rendering, drag to rotate; + ChartKit shared legend/tooltip, `tokens/charts.css` series colors and plot furniture). Three scales: micro inside stat tiles, interactive mid-size inside cards, full-page analysis; every chart keeps its hover read-out at every scale. WorldMap uses real Natural Earth geography and needs the page to load pinned d3 and topojson.
 

package/readme.zh-CN.md

@@ -71,7 +71,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 
 **开发团队接入入口**
 - `DESIGN.md` —— 给 AI 编程代理读的规则文件：绝对数值、交互状态、明确的"禁止"清单、文案语气。让 Claude Code / Cursor / Copilot 在生成界面前先读它。
-- `INTEGRATION.md` —— 接入指南：三步跑通首屏、全部 117 个组件的清单与引入路径、token 速查、深色模式、交互状态、版本策略。
+- `INTEGRATION.md` —— 接入指南：三步跑通首屏、全部 120 个组件的清单与引入路径、token 速查、深色模式、交互状态、版本策略。
 - `DEPLOY.md` —— 在 GitLab 上运行本系统：包里发布什么、什么留在 Pages 上、入口点、发布流程、各消费方需要的构建配置。
 - `index.html` · `gallery.html` —— 文档站：可浏览的系统主页与可筛选的缩略图网格，均由 CI 部署到 GitLab Pages。
 - `package.json` · `.gitlab-ci.yml` · `_scripts/` —— 让本系统成为可安装的包：打版本 tag 即发布到 GitLab Package Registry，默认分支更新即重新部署文档站，生成的 token 或入口文件与源码不一致时 `npm run check` 会让流水线失败。
@@ -90,7 +90,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - `components/display/` —— Card、StatCard、Badge、StatusBadge、IconTile、ProgressBar、Donut、AreaChart、MiniBars、Avatar、AvatarGroup、Tag、Divider、Kbd。
 - `components/feedback/` —— Stepper、ContextMenu、ActivityItem、DotActivity、LogViewer、Tooltip、Modal、Toast、ToastStack、Alert、EmptyState、Skeleton、Spinner、Menu、Accordion、Banner、Drawer、Timeline。
 - `components/data/` —— Table、ListRow、Pagination、KeyValue、KeyValueList、DiffValue、CodeBlock、Spreadsheet、SmartTable、FilterBar。
-- `components/navigation/` —— Sidebar（+ KEYBRICKS_NAV）、TopBar、PageToolbar、PageHeading、DocTree、Breadcrumb、Tree、ThemeToggle（+ applyStoredTheme）。
+- `components/navigation/` —— Sidebar（+ KEYBRICKS_NAV）、SidePanel、TopBar、UserMenu、PageToolbar、PageHeading、DocTree、Breadcrumb、Tree、ThemeToggle（+ applyStoredTheme）。
 - `components/pipeline/` —— NodeCard、Port、PortLabel、PaletteItem、PaletteListItem、PalettePanel（+ PIPELINE_CATALOG）、PipelineCanvas、DataPreview、ConfigPanel、ZoomControls。
 - `components/charts/` —— 27 种图表：Sparkline、LineChart、BarChart、BarList、DonutChart、ScatterChart、HeatmapChart、WaterfallChart、BulletChart、GaugeChart、FunnelChart、TreemapChart、RadarChart、Histogram、BoxPlot、ParetoChart、CandlestickChart、SankeyChart、ChordChart、SunburstChart、WorldMap、GanttChart，以及 3D 系列 Surface3D、Scatter3D、Bar3D、Pie3D、Ribbon3D（SVG 画家算法渲染，拖拽旋转；+ ChartKit 共享图例 / 提示框，`tokens/charts.css` 提供序列色与绘图配件）。三种尺寸：统计卡内的微型、卡片内可交互的中型、整页分析的大型；每种图表在任何尺寸都保留悬停读数。WorldMap 使用真实的 Natural Earth 地理数据，需要页面加载固定版本的 d3 与 topojson。
 

package/tokens/layout.css

@@ -33,6 +33,7 @@
 --cell-px:12px;                                                                           /* horizontal padding of a table cell */
 --check-size:16px;                                                                        /* checkbox and radio box */
 --tag-h:24px;                                                                             /* Tag */
+--count-h:18px;                                                                           /* count badge beside a segment / pill label (12px tabular figures, 6px sides, full radius) */
 --switch-w:36px;--switch-h:20px;                                                          /* Switch track */
 /* Two-line title cell (Table column `twoLine`): row padding, title → description gap, icon tile, tile → text gap. md row = 10 + 20 + 2 + 16 + 10 = 58px */
 --title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px;
@@ -49,6 +50,6 @@
 --z-tooltip:100; /* @kind other */
 }
 /* The three tiers. Declared after :root so a tier set on <html> itself also wins. */
-[data-size="sm"]{--control-h:28px;--control-text:var(--text-xs);--control-leading:var(--leading-xs);--control-tracking:var(--tracking-xs);--control-icon:14px;--control-px:8px;--control-gap:8px;--group-gap:12px;--bar-h:36px;--bar-card-h:44px;--edge-pad:12px;--cell-px:8px;--check-size:14px;--tag-h:20px;--switch-w:28px;--switch-h:16px;--text-code:11px;--leading-code:16px;--title-cell-py:8px;--title-cell-gap:2px;--title-cell-tile:28px;--title-cell-icon:14px;--title-cell-tile-r:8px;--title-cell-tile-gap:8px}
-[data-size="md"]{--control-h:32px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:12px;--control-gap:8px;--group-gap:16px;--bar-h:40px;--bar-card-h:48px;--edge-pad:16px;--cell-px:12px;--check-size:16px;--tag-h:24px;--switch-w:36px;--switch-h:20px;--text-code:12px;--leading-code:18px;--title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px}
-[data-size="lg"]{--control-h:40px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:16px;--control-gap:8px;--group-gap:24px;--bar-h:48px;--bar-card-h:56px;--edge-pad:16px;--cell-px:16px;--check-size:16px;--tag-h:28px;--switch-w:44px;--switch-h:24px;--text-code:12px;--leading-code:18px;--title-cell-py:14px;--title-cell-gap:4px;--title-cell-tile:40px;--title-cell-icon:20px;--title-cell-tile-r:10px;--title-cell-tile-gap:12px}
+[data-size="sm"]{--control-h:28px;--control-text:var(--text-xs);--control-leading:var(--leading-xs);--control-tracking:var(--tracking-xs);--control-icon:14px;--control-px:8px;--control-gap:8px;--group-gap:12px;--bar-h:36px;--bar-card-h:44px;--edge-pad:12px;--cell-px:8px;--check-size:14px;--tag-h:20px;--count-h:16px;--switch-w:28px;--switch-h:16px;--text-code:11px;--leading-code:16px;--title-cell-py:8px;--title-cell-gap:2px;--title-cell-tile:28px;--title-cell-icon:14px;--title-cell-tile-r:8px;--title-cell-tile-gap:8px}
+[data-size="md"]{--control-h:32px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:12px;--control-gap:8px;--group-gap:16px;--bar-h:40px;--bar-card-h:48px;--edge-pad:16px;--cell-px:12px;--check-size:16px;--tag-h:24px;--count-h:18px;--switch-w:36px;--switch-h:20px;--text-code:12px;--leading-code:18px;--title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px}
+[data-size="lg"]{--control-h:40px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:16px;--control-gap:8px;--group-gap:24px;--bar-h:48px;--bar-card-h:56px;--edge-pad:16px;--cell-px:16px;--check-size:16px;--tag-h:28px;--count-h:20px;--switch-w:44px;--switch-h:24px;--text-code:12px;--leading-code:18px;--title-cell-py:14px;--title-cell-gap:4px;--title-cell-tile:40px;--title-cell-icon:20px;--title-cell-tile-r:10px;--title-cell-tile-gap:12px}

package/tokens/tokens.d.ts

@@ -88,6 +88,7 @@ export type TokenName =
   | "--control-px"
   | "--control-text"
   | "--control-tracking"
+  | "--count-h"
   | "--cyan-100"
   | "--cyan-200"
   | "--cyan-300"
@@ -452,6 +453,7 @@ export type TokenKey =
   | "controlPx"
   | "controlText"
   | "controlTracking"
+  | "countH"
   | "cyan100"
   | "cyan200"
   | "cyan300"

package/tokens/tokens.js

@@ -91,6 +91,7 @@ export const cssVar = {
   controlPx: "var(--control-px)",
   controlText: "var(--control-text)",
   controlTracking: "var(--control-tracking)",
+  countH: "var(--count-h)",
   cyan100: "var(--cyan-100)",
   cyan200: "var(--cyan-200)",
   cyan300: "var(--cyan-300)",
@@ -457,6 +458,7 @@ export const light = {
   controlPx: "12px",
   controlText: "14px",
   controlTracking: "-.15px",
+  countH: "18px",
   cyan100: "#d1f4fc",
   cyan200: "#a4eaf9",
   cyan300: "#57daf3",
@@ -823,6 +825,7 @@ export const dark = {
   controlPx: "12px",
   controlText: "14px",
   controlTracking: "-.15px",
+  countH: "18px",
   cyan100: "#d1f4fc",
   cyan200: "#a4eaf9",
   cyan300: "#57daf3",
@@ -1100,6 +1103,6 @@ export const dark = {
   zTooltip: "100",
 };
 
-export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-split","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--cell-px","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--chart-pos","--chart-total","--chart-track","--check-size","--checkbox-border","--control-gap","--control-h","--control-icon","--control-leading","--control-px","--control-text","--control-tracking","--cyan-100","--cyan-200","--cyan-300","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-soft-hover","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--edge-pad","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--group-gap","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-code","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-menu","--shadow-modal","--shadow-node","--shadow-selected","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--teal-950","--text-2xl","--text-2xs","--text-2xs-mono","--text-3xl","--text-4xl","--text-base","--text-body","--text-code","--text-display","--text-glyph-min","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--title-cell-gap","--title-cell-icon","--title-cell-py","--title-cell-tile","--title-cell-tile-gap","--title-cell-tile-r","--tooltip-bg","--tooltip-fg","--topbar-h","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
+export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-split","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--cell-px","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--chart-pos","--chart-total","--chart-track","--check-size","--checkbox-border","--control-gap","--control-h","--control-icon","--control-leading","--control-px","--control-text","--control-tracking","--count-h","--cyan-100","--cyan-200","--cyan-300","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-soft-hover","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--edge-pad","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--group-gap","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-code","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-menu","--shadow-modal","--shadow-node","--shadow-selected","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--teal-950","--text-2xl","--text-2xs","--text-2xs-mono","--text-3xl","--text-4xl","--text-base","--text-body","--text-code","--text-display","--text-glyph-min","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--title-cell-gap","--title-cell-icon","--title-cell-py","--title-cell-tile","--title-cell-tile-gap","--title-cell-tile-r","--tooltip-bg","--tooltip-fg","--topbar-h","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
 
 export default { cssVar, light, dark, tokenNames };

package/tokens/tokens.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "source": "tokens/*.css",
   "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {
@@ -832,6 +832,13 @@
         "value": "-.15px"
       }
     },
+    "--count-h": {
+      "group": "layout",
+      "light": {
+        "raw": "18px",
+        "value": "18px"
+      }
+    },
     "--cyan-100": {
       "group": "colors-extended",
       "light": {