@scattered-light/loomiere 0.6.0 → 0.7.1

package/figma/library/pages/18-custom/16-collection.js

@@ -0,0 +1,255 @@
+// Custom: Collection parts. Run after Empty state. Not named Custom, so it does not replace the Badge set.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+var fill = C.fill, bind = C.bind, add = C.add, T = C.T, page = C.page, comp = C.comp, textProp = C.textProp, place = C.place, removeOld = C.removeOld;
+await page('Custom');
+
+function frameSet(set, cols, colW, rowH) {
+  set.layoutMode = 'NONE';
+  set.children.forEach(function (c, i) { c.x = 24 + (i % cols) * colW; c.y = 24 + Math.floor(i / cols) * rowH; });
+  fill(set, 'Theme:surface/canvas');
+  set.strokes = [{ type: 'SOLID', color: { r: 0.592, g: 0.278, b: 1 } }];
+  set.dashPattern = [6, 4]; set.strokeWeight = 1; set.cornerRadius = 8; set.clipsContent = false;
+  set.resize(24 + cols * colW, 24 + Math.ceil(set.children.length / cols) * rowH);
+}
+
+async function label(text, style, color, width) {
+  var node = await T(text, style, color, width);
+  return node;
+}
+
+function rowFill(state) {
+  if (state === 'hover') return 'Theme:table/row-hover';
+  if (state === 'selected') return 'Theme:table/row-selected';
+  if (state === 'current') return 'Theme:table/row-current';
+  return 'Theme:table/background';
+}
+
+function hugHeight(node, token) {
+  node.counterAxisSizingMode = 'FIXED';
+  node.primaryAxisSizingMode = 'AUTO';
+  node.resize(8, 32);
+  bind(node, 'height', token);
+}
+
+async function symbol(name) {
+  var node = await T(name, 'body-condense', 'Theme:table/subtle-color');
+  var fonts = await figma.listAvailableFontsAsync();
+  var font = null;
+  for (var i = 0; i < fonts.length; i++) if (fonts[i].fontName.family === 'Material Symbols Outlined') font = fonts[i].fontName;
+  if (font) { await figma.loadFontAsync(font); node.fontName = font; }
+  return node;
+}
+
+function variantNamed(set, name) {
+  var found = set.children.filter(function (node) { return node.name === name; })[0] || set.defaultVariant;
+  return found.createInstance();
+}
+
+var checkboxSet = await C.setOn('Fields', 'Checkbox');
+var tabSet = await C.setOn('Disclosure and navigation', 'Tab');
+var inputSet = await C.setOn('Fields', 'Input');
+var selectSet = await C.setOn('Fields', 'Select');
+var buttonSet = await C.setOn('Buttons', 'Button');
+
+removeOld('Header cell');
+var headerComps = [];
+var sorts = ['none', 'ascending', 'descending'];
+var aligns = ['start', 'end'];
+for (var s = 0; s < sorts.length; s++) for (var a = 0; a < aligns.length; a++) {
+  var hc = comp('Sort=' + sorts[s] + ', Align=' + aligns[a], 'HORIZONTAL');
+  hc.primaryAxisAlignItems = aligns[a] === 'end' ? 'MAX' : 'MIN';
+  hc.counterAxisAlignItems = 'CENTER';
+  bind(hc, ['paddingLeft', 'paddingRight'], 'Size:table/cell-padding-inline');
+  fill(hc, 'Theme:table/header-background');
+  hugHeight(hc, 'Size:collection/header-height-sm');
+  add(hc, [await label('Date', 'subtitle-condense', 'Theme:table/header-color')]);
+  if (sorts[s] === 'ascending') add(hc, [await symbol('arrow_upward')]);
+  if (sorts[s] === 'descending') add(hc, [await symbol('arrow_downward')]);
+  headerComps.push(hc);
+}
+var headerSet = figma.combineAsVariants(headerComps, figma.currentPage);
+headerSet.name = 'Header cell';
+frameSet(headerSet, aligns.length, 200, 72);
+textProp(headerSet, 'Text', 'Date', 'Text');
+headerSet.description = 'A sortable header. Sort is none, ascending or descending. Align is start or end. The label is one text value across the set.';
+place(headerSet);
+
+removeOld('Cell');
+var kinds = ['text', 'money', 'date', 'status', 'checkbox', 'actions'];
+var cellComps = [];
+for (var k = 0; k < kinds.length; k++) for (var a2 = 0; a2 < aligns.length; a2++) {
+  var cc = comp('Kind=' + kinds[k] + ', Align=' + aligns[a2], 'HORIZONTAL');
+  cc.primaryAxisAlignItems = aligns[a2] === 'end' ? 'MAX' : 'MIN';
+  cc.counterAxisAlignItems = 'CENTER';
+  bind(cc, ['paddingLeft', 'paddingRight'], 'Size:table/cell-padding-inline');
+  fill(cc, 'Theme:table/background');
+  hugHeight(cc, 'Size:table/row-height');
+  if (kinds[k] === 'checkbox') add(cc, [variantNamed(checkboxSet, 'Size=sm, Value=Off, State=Default')]);
+  else if (kinds[k] === 'actions') add(cc, [await symbol('more_horiz')]);
+  else {
+    var sample = kinds[k] === 'money' ? '$12.00' : kinds[k] === 'date' ? 'Oct 3, 2026' : kinds[k] === 'status' ? 'For Review' : 'Joshua Tree';
+    add(cc, [await label(sample, 'body-condense', 'Theme:table/color')]);
+  }
+  cellComps.push(cc);
+}
+var cellSet = figma.combineAsVariants(cellComps, figma.currentPage);
+cellSet.name = 'Cell';
+frameSet(cellSet, aligns.length, 200, 64);
+textProp(cellSet, 'Text', 'Joshua Tree', 'Text');
+cellSet.description = 'A data cell. Kind is text, money, date, status, checkbox or actions. Money and dates align end. The text prop is shared across the set.';
+place(cellSet);
+
+removeOld('Row');
+var states = ['default', 'hover', 'selected', 'current'];
+var rowComps = [];
+for (var r = 0; r < states.length; r++) {
+  var rc = comp('State=' + states[r], 'HORIZONTAL');
+  rc.counterAxisAlignItems = 'CENTER';
+  fill(rc, rowFill(states[r]));
+  hugHeight(rc, 'Size:table/row-height');
+  if (states[r] === 'current') {
+    var bar = figma.createFrame(); bar.name = 'Current mark'; bar.layoutAlign = 'STRETCH';
+    bar.resize(3, 8); bind(bar, 'width', 'Size:stroke/strong'); fill(bar, 'Theme:border/accent');
+    add(rc, [bar]);
+  }
+  add(rc, [variantNamed(cellSet, 'Kind=text, Align=start'), variantNamed(cellSet, 'Kind=date, Align=end'), variantNamed(cellSet, 'Kind=money, Align=end')]);
+  rowComps.push(rc);
+}
+var rowSet = figma.combineAsVariants(rowComps, figma.currentPage);
+rowSet.name = 'Row';
+frameSet(rowSet, 2, 520, 64);
+rowSet.description = 'A data row. Hover, selected and current use the table row tokens. Current is the open row and is quieter than selected.';
+place(rowSet);
+
+removeOld('Group row');
+var groupComps = [];
+for (var g = 0; g < 2; g++) {
+  var expanded = g === 0;
+  var gc = comp('Expanded=' + (expanded ? 'true' : 'false'), 'HORIZONTAL');
+  gc.counterAxisAlignItems = 'CENTER';
+  bind(gc, ['paddingLeft', 'paddingRight'], 'Size:table/cell-padding-inline');
+  fill(gc, 'Theme:table/group-header-background');
+  hugHeight(gc, 'Size:table/row-height');
+  add(gc, [await symbol(expanded ? 'expand_more' : 'chevron_right'), variantNamed(cellSet, 'Kind=text, Align=start'), variantNamed(cellSet, 'Kind=money, Align=end')]);
+  groupComps.push(gc);
+}
+var groupSet = figma.combineAsVariants(groupComps, figma.currentPage);
+groupSet.name = 'Group row';
+frameSet(groupSet, 1, 520, 64);
+textProp(groupSet, 'Label', 'Joshua Tree', 'Label');
+textProp(groupSet, 'Count', '12', 'Count');
+textProp(groupSet, 'Subtotal', '$120.00', 'Subtotal');
+groupSet.description = 'A group header. Expanded shows the chevron open. The subtotal lines up with the amount column.';
+place(groupSet);
+
+removeOld('Footer row');
+var footer = comp('Footer', 'HORIZONTAL');
+footer.counterAxisAlignItems = 'CENTER';
+fill(footer, 'Theme:table/header-background');
+hugHeight(footer, 'Size:table/row-height');
+add(footer, [variantNamed(cellSet, 'Kind=text, Align=start'), variantNamed(cellSet, 'Kind=money, Align=end')]);
+var footerSet = figma.combineAsVariants([footer], figma.currentPage);
+footerSet.name = 'Footer row';
+frameSet(footerSet, 1, 520, 64);
+footerSet.description = 'Column totals over the filtered rows. The first cell says Total.';
+place(footerSet);
+
+removeOld('List item');
+var listModes = [
+  ['Selected=false, Current=false, Status=false, Extra=false'],
+  ['Selected=true, Current=false, Status=false, Extra=false'],
+  ['Selected=false, Current=true, Status=true, Extra=false'],
+  ['Selected=false, Current=false, Status=true, Extra=true'],
+];
+var listComps = [];
+for (var i = 0; i < listModes.length; i++) {
+  var lc = comp(listModes[i], 'VERTICAL');
+  bind(lc, 'itemSpacing', 'Size:collection/list-row-gap');
+  bind(lc, ['paddingTop', 'paddingBottom'], 'Size:collection/list-row-padding-block');
+  bind(lc, ['paddingLeft', 'paddingRight'], 'Size:table/cell-padding-inline');
+  var selected = listModes[i].indexOf('Selected=true') >= 0;
+  var current = listModes[i].indexOf('Current=true') >= 0;
+  fill(lc, selected ? 'Theme:table/row-selected' : current ? 'Theme:table/row-current' : 'Theme:table/background');
+  lc.primaryAxisSizingMode = 'AUTO';
+  lc.counterAxisSizingMode = 'AUTO';
+  if (current) {
+    var listBar = figma.createFrame(); listBar.name = 'Current mark'; listBar.resize(3, 8);
+    bind(listBar, 'width', 'Size:stroke/strong'); fill(listBar, 'Theme:border/accent'); add(lc, [listBar]);
+  }
+  add(lc, [await label('Chase deposit', 'subtitle-condense', 'Theme:table/color', 240)]);
+  add(lc, [await label('Joshua Tree · Oct 3, 2026', 'body-condense', 'Theme:table/subtle-color', 240)]);
+  if (listModes[i].indexOf('Extra=true') >= 0) add(lc, [await label('Account', 'body-condense', 'Theme:table/subtle-color', 240)]);
+  listComps.push(lc);
+}
+var listSet = figma.combineAsVariants(listComps, figma.currentPage);
+listSet.name = 'List item';
+frameSet(listSet, 2, 400, 110);
+listSet.description = 'One row of a DataList. Selected and current use the same table tokens as the table. Extra is the inline slot under the meta line.';
+place(listSet);
+
+removeOld('Collection toolbar');
+var toolbarComps = [];
+for (var m = 0; m < 2; m++) {
+  var modeName = m === 0 ? 'filters' : 'selection';
+  var tc = comp('Mode=' + modeName, 'HORIZONTAL');
+  tc.counterAxisAlignItems = 'CENTER';
+  bind(tc, 'itemSpacing', 'Size:collection/toolbar-gap');
+  hugHeight(tc, 'Size:control/height-md');
+  add(tc, [variantNamed(tabSet, tabSet.defaultVariant.name), variantNamed(inputSet, inputSet.defaultVariant.name)]);
+  add(tc, [variantNamed(modeName === 'selection' ? buttonSet : selectSet, (modeName === 'selection' ? buttonSet : selectSet).defaultVariant.name)]);
+  toolbarComps.push(tc);
+}
+var toolbarSet = figma.combineAsVariants(toolbarComps, figma.currentPage);
+toolbarSet.name = 'Collection toolbar';
+frameSet(toolbarSet, 1, 680, 72);
+toolbarSet.description = 'Filters mode shows the selects. Selection mode swaps only the trailing controls. Tabs and search stay.';
+place(toolbarSet);
+
+removeOld('Pagination');
+var pag = comp('Pagination', 'HORIZONTAL');
+bind(pag, 'itemSpacing', 'Size:collection/toolbar-gap');
+pag.counterAxisAlignItems = 'CENTER';
+hugHeight(pag, 'Size:control/height-md');
+add(pag, [await label('1–25 of 312', 'body-condense', 'Theme:table/subtle-color', 140), await label('Previous', 'body-condense', 'Theme:text/primary', 80), await label('Next', 'body-condense', 'Theme:text/primary', 60)]);
+var pagSet = figma.combineAsVariants([pag], figma.currentPage);
+pagSet.name = 'Pagination';
+frameSet(pagSet, 1, 400, 64);
+pagSet.description = 'Which page you are on. Previous and Next are quiet. It does not need a collection.';
+place(pagSet);
+
+removeOld('Editable row');
+var editComps = [];
+var layouts = ['row', 'stacked'];
+var editStates = ['default', 'invalid'];
+for (var L = 0; L < layouts.length; L++) for (var E = 0; E < editStates.length; E++) {
+  var ec = comp('Layout=' + layouts[L] + ', State=' + editStates[E], layouts[L] === 'stacked' ? 'VERTICAL' : 'HORIZONTAL');
+  bind(ec, 'itemSpacing', 'Size:collection/toolbar-gap');
+  fill(ec, editStates[E] === 'invalid' ? 'Theme:status/error-light' : 'Theme:table/background');
+  if (layouts[L] === 'stacked') ec.primaryAxisSizingMode = 'AUTO';
+  else hugHeight(ec, 'Size:table/row-height');
+  add(ec, [await label('Fees', 'body-condense', 'Theme:table/color', 120), await label('$60.00', 'body-condense', 'Theme:table/color', 80), await label('Entrance', 'body-condense', 'Theme:table/subtle-color', 120)]);
+  editComps.push(ec);
+}
+var editSet = figma.combineAsVariants(editComps, figma.currentPage);
+editSet.name = 'Editable row';
+frameSet(editSet, 2, 520, 150);
+editSet.description = 'A repeating form row. Stacked is the narrow layout: the same fields, with the column names visible. Invalid outlines the row.';
+place(editSet);
+
+removeOld('Balance');
+var tones = [['balanced', 'Allocated $100.00 of $100.00 · balanced'], ['under', 'Allocated $97.00 of $100.00 · $3.00 left'], ['over', 'Allocated $103.00 of $100.00 · $3.00 over']];
+var balComps = [];
+for (var b = 0; b < tones.length; b++) {
+  var bc = comp('Tone=' + tones[b][0], 'HORIZONTAL');
+  bc.counterAxisAlignItems = 'CENTER';
+  hugHeight(bc, 'Size:control/height-md');
+  add(bc, [await label(tones[b][1], 'body-condense', 'Theme:text/primary', 400)]);
+  balComps.push(bc);
+}
+var balSet = figma.combineAsVariants(balComps, figma.currentPage);
+balSet.name = 'Balance';
+frameSet(balSet, 1, 460, 56);
+textProp(balSet, 'Text', 'Allocated $100.00 of $100.00 · balanced', 'Text');
+balSet.description = 'How an editable list adds up. Balanced, under or over. The words are one text value across the set; the tone is the variant.';
+place(balSet);

package/figma/library/pages/18-custom/17-collection-doc.js

@@ -0,0 +1,43 @@
+// Custom: Collection doc. Run after 16. Not named Custom, so it does not replace the Badge doc.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var K = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+await K.page('Custom');
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docKit'))(figma);
+var AL = L.AL, add = L.add, T = L.T, docFrame = L.docFrame, section = L.section, hrow = L.hrow, divider = L.divider;
+var inst = L.inst, notes = L.notes, captioned = L.captioned, usage = L.usage, stage = L.stage;
+
+var doc = await docFrame('Collection', 'COMPONENTS', 'Collection', 'The same rows as a table or as a list. People work through them. A spreadsheet is AG Grid, and the code should say why.');
+// The Custom docs sit on a 1600 grid. This one starts the row under Date picker, clear of Money field and Empty state.
+doc.x = 0; doc.y = 2400;
+
+var which = await section(doc, 'Which one when', 'One set of columns. Change the view, not the data.');
+var rows = [
+  ['Data list', 'A review queue, an inbox, search results, a narrow pane.'],
+  ['Data table', 'Rows compared across several columns.'],
+  ['Plain table', 'A static table or a formatted report. No search, no selection.'],
+  ['Editable list', 'Repeating form rows: line items, allocations, source fields.'],
+  ['AG Grid', 'Cell-by-cell editing, ranges, or tens of thousands of rows.'],
+];
+var table = AL('VERTICAL', { name: 'Which' }); add(which, [table]); table.layoutSizingHorizontal = 'FILL';
+for (var i = 0; i < rows.length; i++) {
+  var line = hrow(table); divider(line);
+  add(line, [await T(rows[i][0], 'subtitle-base', 'Theme:text/accent', 200), await T(rows[i][1], 'body-condense', 'Theme:text/secondary', 640)]);
+}
+
+var look = await section(doc, 'Same data, two views', 'Park fees. The table compares columns. The list is the same rows for a queue.');
+var side = stage(look, 'Views');
+add(side, [await captioned(inst('Row', 'State=default'), 'Table row')]);
+add(side, [await captioned(inst('List item', 'Selected=false, Current=false, Status=false, Extra=false'), 'List row')]);
+add(side, [await captioned(inst('Group row', 'Expanded=true'), 'Group')]);
+add(side, [await captioned(inst('Collection toolbar', 'Mode=filters'), 'Toolbar')]);
+add(side, [await captioned(inst('Balance', 'Tone=under'), 'Balance')]);
+
+await usage(look,
+  ['For Review as a list, Posted as a table, from one collection.', 'A chart of accounts as a tree. Search keeps the parents.', 'Allocations that have to add up, with a balance line.'],
+  ['A report or a statement. That stays a plain table.', 'A spreadsheet. That is AG Grid, and the code says why.', 'User column show/hide, row reorder, or inline cell editing. Those are not built.']);
+await notes(look, [
+  ['Open row', 'table/row-current', 'Quieter than a selected row, so both can show.'],
+  ['Group', 'table/group-header-background', 'The tray, like the column header.'],
+  ['Narrow', 'collection/narrow-width', 'Below this, a table can become the list.'],
+  ['Stack', 'collection/editable-list-stack-width', 'Below this, editable rows stack.'],
+]);

package/figma/library/run-order.json

@@ -18,6 +18,7 @@
     { "page": "Display", "files": ["pages/14-display/01-display.js", "pages/14-display/02-more-display.js", "pages/14-display/03-labels.js", "pages/14-display/04-doc.js"] },
     { "page": "Placeholders", "files": ["pages/16-placeholders/01-placeholders.js", "pages/16-placeholders/02-labels.js", "pages/16-placeholders/03-doc.js"] },
     { "page": "Annotations", "files": ["pages/17-annotations/01-annotations.js", "pages/17-annotations/02-labels.js", "pages/17-annotations/03-doc.js"] },
+    { "page": "Custom", "files": ["pages/18-custom/01-custom.js", "pages/18-custom/02-labels.js", "pages/18-custom/03-doc.js", "pages/18-custom/04-date-picker.js", "pages/18-custom/05-date-picker-labels.js", "pages/18-custom/06-date-picker-doc.js", "pages/18-custom/07-money-field.js", "pages/18-custom/08-money-field-labels.js", "pages/18-custom/09-money-field-doc.js", "pages/18-custom/10-splitter.js", "pages/18-custom/11-splitter-labels.js", "pages/18-custom/12-splitter-doc.js", "pages/18-custom/13-empty-state.js", "pages/18-custom/14-empty-state-labels.js", "pages/18-custom/15-empty-state-doc.js", "pages/18-custom/16-collection.js", "pages/18-custom/17-collection-doc.js"] },
     { "page": "Cover", "files": ["pages/15-cover.js"] }
   ]
 }

package/lib/contrast.mjs

@@ -55,11 +55,16 @@ const PAIRS = [
   ['content.prose-color', 'content.page-background', TEXT, 'prose'],
   ['content.prose-color', 'content.mark-background', TEXT, 'marked text'],
   ['text.on-inverse-surface', 'surface.inverse', TEXT, 'tooltip text'],
+  // popup.background aliases surface.base, which aliases canvas. The description still gets its own
+  // pair so a popup surface that stops being the page color is checked on its own.
+  ['text.primary', 'popup.background', TEXT, 'empty title on a popup'],
+  ['text.secondary', 'popup.background', TEXT, 'empty description on a popup'],
   ['text.on-inverse', 'fill.inverse', TEXT, 'keycap text'],
   ['text.on-tint', 'interactive.tint', TEXT, 'text on a tint'],
   ['text.on-tint-strong', 'interactive.tint-strong', TEXT, 'text on a strong tint'],
   ...['error', 'warning', 'success', 'info'].map((s) => [`status.${s}-dark`, `status.${s}-light`, TEXT, 'alert text']),
   ...['error', 'warning', 'success', 'info'].map((s) => [`scope.${s}.on-soft`, `scope.${s}.soft`, TEXT, 'tinted toast text']),
+  ...['success', 'warning', 'error'].map((s) => [`scope.${s}.on-soft`, `scope.${s}.soft`, TEXT, 'editable list balance']),
   ...['accent', 'primary', 'secondary', 'tertiary', 'quaternary', 'error', 'warning', 'success', 'info'].map((s) => [`scope.${s}.solid`, 'gauge.track-color', UI, 'meter fill on its track']),
   ['table.color', 'table.background', TEXT, 'grid cell text'],
   ['table.subtle-color', 'table.background', TEXT, 'grid secondary text'],
@@ -67,6 +72,12 @@ const PAIRS = [
   ['table.subtle-color', 'table.header-background', TEXT, 'grid side bar text'],
   ['table.color', 'table.row-hover', TEXT, 'grid text on a hovered row'],
   ['table.color', 'table.row-selected', TEXT, 'grid text on a selected row'],
+  ['table.subtle-color', 'table.row-hover', TEXT, 'secondary text on a hovered row'],
+  ['table.subtle-color', 'table.row-selected', TEXT, 'secondary text on a selected row'],
+  ['table.color', 'table.row-current', TEXT, 'text on the open row'],
+  ['table.subtle-color', 'table.row-current', TEXT, 'secondary text on the open row'],
+  ['table.header-color', 'table.group-header-background', TEXT, 'group header text'],
+  ['table.subtle-color', 'table.group-header-background', TEXT, 'group header count'],
   ['table.color', 'table.range-background', TEXT, 'grid text in a range selection'],
   ['table.range-border', 'table.background', UI, 'focused cell edge'],
   ['table.range-border', 'table.row-selected', UI, 'focused cell edge on a selected row'],
@@ -78,6 +89,12 @@ const PAIRS = [
   ['focus.ring', 'surface.raised', UI, 'focus ring'],
   ['scope.chrome.focus', 'surface.canvas', UI, 'neutral focus ring'],
   ['scope.accent.focus', 'surface.canvas', UI, 'accent focus ring'],
+  ['text.on-tint-strong', 'interactive.tint-active', TEXT, 'days inside a date range'],
+  ['border.accent', 'surface.canvas', UI, 'today ring on a calendar that sits on the page'],
+  ['border.accent', 'popup.background', UI, 'today ring on the calendar popup'],
+  ['border.accent', 'interactive.tint-active', UI, 'date range band edge'],
+  ['text.secondary', 'field.background', TEXT, 'money field affix'],
+  ['text.secondary', 'field.background-disabled', TEXT, 'money field affix in a disabled field'],
 ];
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Turns a small brand file into a full design token theme: OKLCH color ramps, a type scale, light, dark and high-contrast modes, plus Tailwind, MUI, Chakra, AG Grid and Figma exports.",
   "keywords": ["design-tokens", "theme", "style-dictionary", "dtcg", "oklch", "base-ui", "ag-grid", "tailwind"],
   "repository": {

package/tokens/README.md

@@ -95,7 +95,7 @@ The accent can be any brand color; a red brand might keep red for errors and pic
 
 **Concept picks.** `roles.concepts` in the brand file replaces a role's default step for one concept, in light, dark or both: `"chrome.fg": { "light": "primary.1000" }` sets body text to the brand's text color without touching any palette. A pick is `palette.step`, `white` (paper), `black` (ink) or a hex. The Concepts section of `loomiere studio` shows every concept in light and dark with its contrast and what uses it, and Reset drops a pick. Spot palettes share a contrast table, so `solid` has the same contrast in every hue; that is why any palette can stand in for another. `--sl-scope-<slot>` is the scope in effect: the accent by default, any palette under `data-color="secondary"` (or `error`, `chrome`…).
 
-**Emphasis.** Styles are `solid`, `soft`, `outline` and `ghost`. `data-emphasis="subtle"` sets `--sl-e-bg`, `-bg-hover`, `-bg-active`, `-fg`, `-border` and `-border-hover` from the level's style. Accent levels follow the scope around them, so a `data-color` on a section re-colors them; chrome and named-palette levels stay put unless the element sets its own `data-color`. In React: `<Button emphasis="bold">`, `<Button emphasis="subtle" palette="error">`. Emphasis isn't only for buttons: each component that has a loudness choice starts at a level of its own (Button bold, Toggle's pressed state standard, Avatar initials bold) and paints with `--sl-e-*`, so `data-emphasis` on it picks another level, and on a Toggle Group sets every toggle in it. A new component joins by reading `--sl-e-*` and getting a default level in `DEFAULT_LEVELS` (build/build-tokens.mjs).
+**Emphasis.** Styles are `solid`, `soft`, `outline` and `ghost`. `data-emphasis="subtle"` sets `--sl-e-bg`, `-bg-hover`, `-bg-active`, `-fg`, `-border` and `-border-hover` from the level's style. Accent levels follow the scope around them, so a `data-color` on a section re-colors them; chrome and named-palette levels stay put unless the element sets its own `data-color`. A default level is either pinned or follows the scope (`followsScope` on its `DEFAULT_LEVELS` entry). Pinned keeps the level's own color when a parent has `data-color` (Badge stays chrome subtle). Follows-scope also drops that pin for an ancestor `data-color`, so the section recolors it (an empty state's circle). In React: `<Button emphasis="bold">`, `<Button emphasis="subtle" palette="error">`. Emphasis isn't only for buttons: each component that has a loudness choice starts at a level of its own (Button bold, Toggle's pressed state standard, Avatar initials bold, Badge subtle, a selected calendar day bold, empty-state media subtle) and paints with `--sl-e-*`, so `data-emphasis` on it picks another level, and on a Toggle Group sets every toggle in it. A new component joins by reading `--sl-e-*` and getting a default level in `DEFAULT_LEVELS` (build/build-tokens.mjs).
 
 **Statuses.** `data-status="info|success|warning|error"` on any element gives every emphasis level inside it that status's version: by default the level's style in the status's palette, chrome levels included, so `<div data-status="warning" data-emphasis="subtle">` is a soft warning banner and a bold button inside it is solid warning. A toast's type is its status. `roles.status` in the brand file lets a brand pair stand in for a level, per status: `{ "default": { "bold": "mirage-deep" }, "warning": { "subtle": "dune-soft" } }`. The pair paints the element: `bg` and `fg`, with `bg-hover` and `bg-active` mixed from them (`pair.<name>.bg-hover`, kept at AA). Levels left out stay automatic. The tokens are `status-level.<status>.<level>.<part>` (`tokens/semantic/status.json`, generated); `emphasis.<level>.<part>` is the default status's row.
 
@@ -134,15 +134,22 @@ Reduced motion is handled once, in `reset-accessibility.css`: every transition a
 
 Some looks belong to a family of components, not to one. Those are concepts in the semantic layer, so the family stays consistent without one component borrowing another's tokens:
 
-- `field.*` (`semantic/field.json`): anything you type into or pick a value from. Input, Field, Select, Combobox, Autocomplete and Number field point here. Sizes stay in `control.*`.
+- `field.*` (`semantic/field.json`): anything you type into or pick a value from. Input, Field, Select, Combobox, Autocomplete, Number field and Money field point here. `field.affix-color` is the muted prefix or suffix inside the field (a currency symbol). Sizes stay in `control.*`. Money field keeps only a picker width in `component/money-field.json`.
 - `popup.*` (`semantic/popup.json`): the floating layer of menus, listboxes, popovers and preview cards. `popup.radius-field` is for lists that drop from a field. Arrows take `popup.arrow-*`, so an arrow always matches its popup in both themes. `popup.min-width` is the narrowest a menu or popover gets. Context menu, Menu and Menubar have no component tokens; they are built from `popup.*` and `item.*`.
 - `modal.*` (`semantic/modal.json`): dialogs, alert dialogs and drawers. One surface (`surface.modal`, a Concepts row: paper in light, a step above the page in dark), scrim, heading, spacing and motion. Dialog and Alert dialog have no component tokens; Drawer keeps only its size and grab bar.
 - `bar.*` (`semantic/bar.json`): the strip behind a row of controls (toolbars, toggle groups), on `surface.tray` (a Concepts row). Toggle group has no component tokens; Toolbar keeps only its field width.
 - `disclosure.*` (`semantic/disclosure.json`): controls that show and hide a panel (Accordion, Collapsible, Tabs): hover and press fills, chevron, divider, selected tab line and motion. None of the three has component tokens.
 - Tooltip, Preview card and Navigation menu are built from existing concepts. Tooltip uses `surface.inverse` with `text.on-inverse-surface`, which has its own Concepts row. Preview card uses `popup.*`. Navigation menu uses `bar.*` for the strip, `popup.*` for the panel, and item hover for links. Each keeps only size tokens.
+- `empty.*` (`semantic/empty.json`): the block a page, pane, table, list or popup shows when there is nothing to show. Sizes only (padding, gap, circle, the description's measure). The media tint is the subtle emphasis level, so a status or a parent `data-color` recolors the circle and the title stays the normal text color. `popup.empty-padding-block` points at the compact padding, so a plain "No results" line and a compact empty state take the same space.
+- `table.row-current` is the open row beside a detail pane. It uses the tray, a step off the page, because secondary text on the subtle fill misses AA in dark. A selected row keeps its own tint, so both can show. `table.group-header-background` is the same tray, so a group reads as chrome. Collection sizes live in `component/collection.json` (row and header heights, tree indent, list padding, toolbar gap, the width where a table becomes a list, the width where an editable list stacks, the selection column). No colors.
 - `notice.*` (`semantic/notice.json`): toasts, on the popup surface. A toast whose type is success, warning, error or info takes that palette's soft fill, edge and text (the build points the scope at it); `data-color` picks any other palette. Toast keeps only the stack's width and corner margins.
 - `gauge.*` (`semantic/gauge.json`): Meter and Progress share one bar. The track is `fill.track` (a Concepts row, near the page in dark mode so every palette's fill reads 3:1 on it); the fill is the scope's solid color, so `data-color` on the root sets a zone or status. Neither has component tokens. Slider is a gauge you can drag: its track, fill and label row are `gauge.*` (thin size), the knob is field-colored and ringed in the scope's solid color, and it keeps only its knob size and vertical length.
-- Avatar, Separator and Scroll area are built from existing tokens. Avatar initials paint with the bold emphasis level (data-emphasis picks another), its ring is the page color, and it keeps only its five sizes. Separator is `border.default`; Scroll area is `content.scrollbar-*`. Neither has component tokens. Badge, Card and Dropdown token files were removed: no style read them (Base UI has no Badge or Card; menus and selects use `popup.*` and `item.*`).
+- Avatar, Separator and Scroll area are built from existing tokens. Avatar initials paint with the bold emphasis level (data-emphasis picks another), its ring is the page color, and it keeps only its five sizes. Separator is `border.default`; Scroll area is `content.scrollbar-*`. Neither has component tokens. Card and Dropdown token files were removed: no style read them (Base UI has no Card; menus and selects use `popup.*` and `item.*`).
+- Badge is a Loomiere component, not a Base UI part. It paints with the emphasis levels (subtle unless `data-emphasis` says otherwise) and keeps only its sizes in `component/badge.json`: height, inline padding, gap and dot. Type is the `trigger-*` style of the same tier, and the shape is `radius.pill`.
+- `calendar.*` (`semantic/calendar.json`): the month grid for DatePicker. Day size, radius, the range band and the today ring. Selected days are the bold emphasis level (`--sl-e-*`), not a calendar color, so they follow `data-color`. No component token file: the trigger is a field, and every size the grid needs is in this concept.
+- Money field is a Loomiere component, not a Base UI part. It is a field: border, fill, focus, error and disabled come from `field.*`, and the affix uses `field.affix-color`. The only component token is `money-field.picker-min-inline-size`, because the currency list is wider than the code trigger. Text is the same body style as Input at that size.
+- Splitter keeps only sizes in `component/splitter.json`: the hairline, the coarse hit area (`a11y.min-touch-target`, 44px), the grip dot, and the arrow-key steps. A fine pointer uses `a11y.min-target` (24px, WCAG 2.5.8) so the grab area stays off the scrollbar. The line is `border.default`, and hover and dragging use `border.strong`. Collapse uses `duration.normal`.
+- List detail keeps only sizes in `component/list-detail.json`: the width where it becomes a splitter, the detail's share, and the header's gap and padding. The list stays on the page. The detail uses `surface.raised`. A narrow drawer uses the modal concept instead.
 - `item.*` (`semantic/item.json`): rows inside menus and listboxes, and the check or dot that marks a chosen row. `item.padding-block-dense` is for menus.
 - `icon-button.*` (`semantic/icon-button.json`): small icon-only buttons, such as the X that dismisses a popover, dialog or toast, and a field's clear and open buttons.
 - `check.*` (`semantic/check.json`): the box or circle you tick. Checkbox, Radio and the Switch track share it, and AG Grid's checkboxes point at it.

package/tokens/component/badge.json

@@ -0,0 +1,53 @@
+{
+  "badge": {
+    "$description": "Badge sizes only. Colors are the emphasis levels (--sl-e-bg, --sl-e-fg, --sl-e-border), type is the trigger text style of the same tier, and the shape is radius.pill. Control heights are touch targets, so a badge keeps its own shorter steps.",
+    "height-minimize": {
+      "$value": "{space.5}",
+      "$description": "20px. The smallest pill that still holds trigger-minimize."
+    },
+    "height-condense": {
+      "$value": "{space.6}",
+      "$description": "24px, the default. Sits in a line of text and in dense rows."
+    },
+    "height-base": {
+      "$value": "{space.7}",
+      "$description": "28px, the small control height, for a badge beside base text."
+    },
+    "padding-inline-minimize": {
+      "$value": "{space.1}",
+      "$description": "4px. Tighter than a control so a short label stays a pill, not a button."
+    },
+    "padding-inline-condense": {
+      "$value": "{space.1-5}",
+      "$description": "6px, the default."
+    },
+    "padding-inline-base": {
+      "$value": "{space.2}",
+      "$description": "8px, still inside the small control's inline padding."
+    },
+    "gap-minimize": {
+      "$value": "{space.1}",
+      "$description": "4px between a dot or icon and the label at the smallest size."
+    },
+    "gap-condense": {
+      "$value": "{space.1}",
+      "$description": "4px, the default. The same gap as the smallest control."
+    },
+    "gap-base": {
+      "$value": "{space.1-5}",
+      "$description": "6px, a step wider once the label is base-sized."
+    },
+    "dot-minimize": {
+      "$value": "{space.1-5}",
+      "$description": "6px status dot. Smaller than icon-size-minimize so it reads as a mark, not an icon."
+    },
+    "dot-condense": {
+      "$value": "{space.2}",
+      "$description": "8px, the default."
+    },
+    "dot-base": {
+      "$value": "{space.2}",
+      "$description": "8px. The base badge is taller, but the dot stays a mark."
+    }
+  }
+}

package/tokens/component/collection.json

@@ -0,0 +1,53 @@
+{
+  "collection": {
+    "$description": "Size-only measures for a collection: the table and list sizes, the toolbar, tree indent and the width where a table becomes a list or an editable list stacks. Colors stay on the table concept.",
+    "row-height-sm": {
+      "$value": "{control.height-sm}",
+      "$description": "The dense row, the same height the plain table already uses, so a checkbox fits."
+    },
+    "row-height-md": {
+      "$value": "{control.height-md}",
+      "$description": "A roomier row when the collection is the page rather than a dense register."
+    },
+    "header-height-sm": {
+      "$value": "{control.height-md}",
+      "$description": "The dense header, a step above the dense row, matching today's table header."
+    },
+    "header-height-md": {
+      "$value": "{control.height-lg}",
+      "$description": "The header for the roomier row."
+    },
+    "tree-indent": {
+      "$value": "{space.4}",
+      "$description": "How far each deeper level steps in, so a child sits under its parent's text."
+    },
+    "list-row-padding-block": {
+      "$value": "{space.3}",
+      "$description": "Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit."
+    },
+    "list-row-gap": {
+      "$value": "{space.2}",
+      "$description": "Between the checkbox, the text, the amount and the actions in a list row."
+    },
+    "toolbar-gap": {
+      "$value": "{space.2}",
+      "$description": "Between the search, the filters and the actions."
+    },
+    "search-min-width": {
+      "$value": "{space.60}",
+      "$description": "The narrowest the toolbar search gets beside the filters and actions. Under it, the search wraps to its own line, so a few words of a query still show."
+    },
+    "narrow-width": {
+      "$value": "{space.96}",
+      "$description": "Below this, a table with narrow=\"list\" becomes a list, and the toolbar's search takes the full width. A 360px pane is under it."
+    },
+    "editable-list-stack-width": {
+      "$value": "{space.80}",
+      "$description": "Below this, editable rows stack and show their own labels. 320px matches."
+    },
+    "selection-column-width": {
+      "$value": "{space.10}",
+      "$description": "The checkbox column. Wide enough for the control, no wider, so the data keeps the room."
+    }
+  }
+}

package/tokens/component/list-detail.json

@@ -0,0 +1,29 @@
+{
+  "list-detail": {
+    "$description": "Sizes for a list beside its detail. The list stays on the page surface. The detail uses surface.raised. Drawer mode uses the modal concept instead of these colors. No colors live here.",
+    "split-min-width": {
+      "$value": "720px",
+      "$description": "Side by side once this element, not the window, is this wide. Dryden used 1100px of the window. A container needs less: a list around 320px and a form around 400px still read at 720px. Narrower, the detail becomes a drawer or a page."
+    },
+    "detail-default-size": {
+      "$value": "45%",
+      "$description": "The detail's share when it opens. The list fills the rest, about 55%, which is the split Dryden started from."
+    },
+    "detail-min-size": {
+      "$value": "35%",
+      "$description": "The detail cannot be dragged narrower than this, so the form stays readable."
+    },
+    "detail-max-size": {
+      "$value": "65%",
+      "$description": "The detail cannot cover more than this, so the list stays usable. Dryden kept the detail between 35% and 65%."
+    },
+    "header-gap": {
+      "$value": "{space.3}",
+      "$description": "Space between the title, the actions and Close."
+    },
+    "header-padding": {
+      "$value": "{space.4}",
+      "$description": "Padding inside the detail header. One step under a dialog, because this is a pane, not a modal."
+    }
+  }
+}

package/tokens/component/money-field.json

@@ -0,0 +1,9 @@
+{
+  "money-field": {
+    "$description": "Sizes only. Colors, the border and the focus halo are the field concept. Text is the same text style as Input at that size.",
+    "picker-min-inline-size": {
+      "$value": "{space.56}",
+      "$description": "The currency list shows a code, a name and a symbol, so the popup is wider than the code trigger inside the field."
+    }
+  }
+}

package/tokens/component/splitter.json

@@ -0,0 +1,25 @@
+{
+  "splitter": {
+    "$description": "Sizes for a window splitter. The line and its hover use border.default and border.strong. Focus uses the shared focus ring. No colors live here.",
+    "handle-size": {
+      "$value": "{stroke.default}",
+      "$description": "The visible separator. One stroke, the same hairline as Separator, so a splitter reads as a divider you can grab."
+    },
+    "handle-hit-size": {
+      "$value": "{a11y.min-touch-target}",
+      "$description": "The part a finger grabs. The line stays one stroke. A fine pointer uses a11y.min-target (24px) instead, so the grab area does not cover the panel's scrollbar. Coarse pointers keep this 44px."
+    },
+    "grip-size": {
+      "$value": "{space.1}",
+      "$description": "4px. The diameter of one grip dot. Small enough to sit on the hairline without becoming a second control."
+    },
+    "key-step": {
+      "$value": "5%",
+      "$description": "One arrow press moves the handle by 5% of the splitter. Dryden used 5%: a nudge you can see, not a jump."
+    },
+    "key-step-large": {
+      "$value": "10%",
+      "$description": "The Shift step. Twice the arrow step, so a few presses cross the panel without holding the key."
+    }
+  }
+}

package/tokens/semantic/accessibility.json

@@ -20,6 +20,10 @@
       "$value": "0.125em",
       "$description": "A slight em-based rounding so inline focus rings hug the text."
     },
+    "min-target": {
+      "$value": "24px",
+      "$description": "Smallest target for a fine pointer (WCAG 2.5.8). A mouse can hit 24px; a finger still needs min-touch-target. The splitter handle uses this so the grab area does not cover the scrollbar beside it."
+    },
     "min-touch-target": {
       "$value": "44px",
       "$description": "Smallest tap area for any control (WCAG 2.5.5 and Apple HIG both use 44px)."