@scattered-light/loomiere 0.5.3 → 0.7.0

package/figma/library/pages/18-custom/04-date-picker.js

@@ -0,0 +1,327 @@
+// Custom: Date picker. Day, Month, Preset, and two examples. Colors are Theme variables; text is a shared style.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+var fill = C.fill, stroke = C.stroke, bind = C.bind, radius = C.radius, add = C.add, T = C.T, mode = C.mode, page = C.page;
+var comp = C.comp, textProp = C.textProp, place = C.place, removeOld = C.removeOld, icon = C.icon;
+await page('Custom');
+var ES = {};
+(await figma.getLocalEffectStylesAsync()).forEach(function (s) { ES[s.name] = s; });
+
+var STATES = ['Default', 'Hover', 'Focus', 'Today', 'Selected', 'Range start', 'Range middle', 'Range end', 'Preview', 'Outside', 'Disabled'];
+
+function dayPaint(state) {
+  if (state === 'Selected' || state === 'Range start' || state === 'Range end') return { fill: 'Emphasis:emphasis/bg', text: 'Emphasis:emphasis/fg', emphasis: 'Bold' };
+  if (state === 'Range middle' || state === 'Preview') return { fill: 'Theme:calendar/range-background', text: 'Theme:calendar/range-color' };
+  if (state === 'Hover') return { fill: 'Theme:calendar/day-background-hover', text: 'Theme:calendar/day-color' };
+  if (state === 'Outside') return { fill: null, text: 'Theme:calendar/day-color-outside' };
+  if (state === 'Disabled') return { fill: null, text: 'Theme:calendar/day-color-disabled' };
+  return { fill: null, text: 'Theme:calendar/day-color' };
+}
+
+removeOld('Day');
+var days = [];
+for (var i = 0; i < STATES.length; i++) {
+  var state = STATES[i];
+  var paint = dayPaint(state);
+  var c = comp('State=' + state);
+  c.primaryAxisAlignItems = 'CENTER';
+  c.counterAxisAlignItems = 'CENTER';
+  c.resize(40, 40);
+  bind(c, ['width', 'height'], 'Size:calendar/day-size');
+  if (paint.emphasis) mode(c, 'Emphasis', paint.emphasis);
+  var endcap = state === 'Range start' || state === 'Range end';
+  if (endcap) {
+    // A circle on a half-width band, the same shape as the CSS.
+    c.itemSpacing = 0;
+    c.clipsContent = true;
+    var band = figma.createRectangle();
+    band.name = 'Band';
+    fill(band, 'Theme:calendar/range-background');
+    band.layoutPositioning = 'ABSOLUTE';
+    band.resize(20, 40);
+    band.x = state === 'Range start' ? 20 : 0;
+    band.y = 0;
+    band.constraints = { horizontal: 'SCALE', vertical: 'STRETCH' };
+    c.appendChild(band);
+    var circle = figma.createFrame();
+    circle.name = 'Circle';
+    circle.layoutMode = 'HORIZONTAL';
+    circle.primaryAxisAlignItems = 'CENTER';
+    circle.counterAxisAlignItems = 'CENTER';
+    fill(circle, paint.fill);
+    mode(circle, 'Emphasis', 'Bold');
+    radius(circle, 'Size:calendar/day-radius');
+    circle.layoutSizingHorizontal = 'FILL';
+    circle.layoutSizingVertical = 'FILL';
+    var cap = await T('24', 'selected-condense', paint.text);
+    cap.name = 'Number';
+    add(circle, [cap]);
+    add(c, [circle]);
+  } else {
+    if (paint.fill) fill(c, paint.fill);
+    if (state === 'Range middle' || state === 'Preview') c.cornerRadius = 0;
+    else radius(c, 'Size:calendar/day-radius');
+    if (state === 'Today') {
+      stroke(c, 'Theme:calendar/today-ring', 'Size:stroke/default');
+      c.strokeAlign = 'INSIDE';
+    }
+    if (state === 'Focus' && ES['focus/ring']) await c.setEffectStyleIdAsync(ES['focus/ring'].id);
+    var n = await T('24', state === 'Selected' ? 'selected-condense' : 'trigger-condense', paint.text);
+    n.name = 'Number';
+    add(c, [n]);
+  }
+  days.push(c);
+}
+var daySet = figma.combineAsVariants(days, figma.currentPage);
+daySet.name = 'Day';
+daySet.description = 'One day in a month grid. State covers rest, hover, focus, today, the selected circle, the range band, a preview, a day outside the month, and a disabled day. Selected uses the Bold emphasis. The range band is calendar/range-background.';
+place(daySet);
+textProp(daySet, 'Number', 'Number', '24');
+
+function setP(node, props) {
+  var next = {};
+  Object.keys(node.componentProperties).forEach(function (key) {
+    var name = key.split('#')[0];
+    if (props[name] !== undefined) next[key] = props[name];
+  });
+  node.setProperties(next);
+  return node;
+}
+
+function dayInst(state, number) {
+  var node = daySet.defaultVariant.createInstance();
+  setP(node, { State: state, Number: String(number) });
+  return node;
+}
+
+/** Sunday-first. marks is a day-of-month to a Day state. */
+function monthCells(year, month, marks) {
+  var lead = new Date(Date.UTC(year, month - 1, 1)).getUTCDay();
+  var count = new Date(Date.UTC(year, month, 0)).getUTCDate();
+  var prevCount = new Date(Date.UTC(year, month - 1, 0)).getUTCDate();
+  var cells = [];
+  for (var i = 0; i < lead; i++) cells.push({ n: prevCount - lead + 1 + i, state: 'Outside' });
+  for (var d = 1; d <= count; d++) cells.push({ n: d, state: (marks && marks[d]) || 'Default' });
+  var next = 1;
+  while (cells.length < 42) cells.push({ n: next++, state: 'Outside' });
+  return cells;
+}
+
+var WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+async function monthFrame(name, title, cells, withTitle) {
+  var frame = figma.createFrame();
+  frame.name = name;
+  frame.layoutMode = 'VERTICAL';
+  frame.fills = [];
+  bind(frame, 'itemSpacing', 'Size:calendar/header-gap');
+  if (withTitle) {
+    var heading = await T(title, 'subtitle-base', 'Theme:text/primary');
+    heading.name = 'Title';
+    add(frame, [heading]);
+  }
+  var grid = figma.createFrame();
+  grid.name = 'Grid';
+  grid.layoutMode = 'VERTICAL';
+  grid.fills = [];
+  bind(grid, 'itemSpacing', 'Size:calendar/grid-gap');
+  var head = figma.createFrame();
+  head.name = 'Weekdays';
+  head.layoutMode = 'HORIZONTAL';
+  head.itemSpacing = 0;
+  head.fills = [];
+  for (var w = 0; w < 7; w++) {
+    var slot = figma.createFrame();
+    slot.name = 'Weekday';
+    slot.layoutMode = 'HORIZONTAL';
+    slot.primaryAxisAlignItems = 'CENTER';
+    slot.counterAxisAlignItems = 'CENTER';
+    slot.fills = [];
+    slot.resize(40, 24);
+    bind(slot, 'width', 'Size:calendar/day-size');
+    add(slot, [await T(WEEKDAYS[w], 'eyebrow-minimize', 'Theme:calendar/weekday-color')]);
+    add(head, [slot]);
+  }
+  add(grid, [head]);
+  for (var row = 0; row < 6; row++) {
+    var line = figma.createFrame();
+    line.name = 'Week';
+    line.layoutMode = 'HORIZONTAL';
+    line.itemSpacing = 0;
+    line.fills = [];
+    for (var col = 0; col < 7; col++) {
+      var cell = cells[row * 7 + col];
+      add(line, [dayInst(cell.state, cell.n)]);
+    }
+    add(grid, [line]);
+  }
+  add(frame, [grid]);
+  return frame;
+}
+
+var octoberMarks = { 5: 'Range start', 12: 'Range end', 20: 'Disabled', 24: 'Today' };
+for (var mid = 6; mid <= 11; mid++) octoberMarks[mid] = 'Range middle';
+
+removeOld('Month');
+var month = comp('Month');
+month.layoutMode = 'VERTICAL';
+bind(month, 'itemSpacing', 'Size:calendar/header-gap');
+var built = await monthFrame('October', 'October 2026', monthCells(2026, 10, octoberMarks), true);
+built.children.slice().forEach(function (child) { month.appendChild(child); });
+built.remove();
+month.description = 'October 2026, Sunday first. The 5th through the 12th is a range, the 24th is today, the 20th is disabled, and days from September and November are outside.';
+place(month);
+
+var PRESET_STATES = ['Rest', 'Hover', 'Selected'];
+removeOld('Preset');
+var presets = [];
+for (var p = 0; p < PRESET_STATES.length; p++) for (var layout = 0; layout < 2; layout++) {
+  var pst = PRESET_STATES[p];
+  var chip = layout === 1;
+  var rowC = comp('Layout=' + (chip ? 'Chip' : 'List') + ', State=' + pst);
+  rowC.layoutMode = chip ? 'HORIZONTAL' : 'VERTICAL';
+  bind(rowC, 'itemSpacing', 'Size:space/0-5');
+  bind(rowC, ['paddingTop', 'paddingBottom'], 'Size:item/padding-block');
+  bind(rowC, ['paddingLeft', 'paddingRight'], 'Size:item/padding-inline');
+  radius(rowC, 'Size:item/radius');
+  if (pst === 'Hover') fill(rowC, 'Theme:item/background-hover');
+  if (pst === 'Selected') fill(rowC, 'Theme:item/background-selected');
+  var labelColor = pst === 'Selected' ? 'Theme:item/color-selected' : 'Theme:item/color';
+  var lab = await T('Last 7 days', 'trigger-condense', labelColor);
+  lab.name = 'Label';
+  var hint = await T('Oct 18 – Oct 24', 'body-minimize', pst === 'Selected' ? 'Theme:item/color-selected' : 'Theme:text/tertiary');
+  hint.name = 'Hint';
+  add(rowC, [lab, hint]);
+  presets.push(rowC);
+}
+var presetSet = figma.combineAsVariants(presets, figma.currentPage);
+presetSet.name = 'Preset';
+presetSet.description = 'A quick selection. List is the side column; Chip is the scrolling row. Selected uses the item selected tint.';
+place(presetSet);
+textProp(presetSet, 'Label', 'Label', 'Last 7 days');
+
+function presetInst(layout, state) {
+  var node = presetSet.defaultVariant.createInstance();
+  node.setProperties({ Layout: layout, State: state });
+  return node;
+}
+
+var BTN = await C.setOn('Buttons', 'Button');
+function textButton(emphasis, label) {
+  var node = BTN.children.find(function (child) { return child.name === 'Emphasis=' + emphasis + ', Size=sm, State=Default, Content=Label'; });
+  if (!node) throw new Error('Button ' + emphasis);
+  var inst = node.createInstance();
+  setP(inst, { Label: label });
+  mode(inst, 'Emphasis', emphasis);
+  return inst;
+}
+var LEFT = 'M 10 4 L 6 8 L 10 12', RIGHT = 'M 6 4 L 10 8 L 6 12';
+function navButton(name, path) {
+  var button = figma.createFrame();
+  button.name = name;
+  button.layoutMode = 'HORIZONTAL';
+  button.primaryAxisAlignItems = 'CENTER';
+  button.counterAxisAlignItems = 'CENTER';
+  mode(button, 'Emphasis', 'Quiet');
+  fill(button, 'Emphasis:emphasis/bg');
+  radius(button, 'Size:button/radius');
+  button.resize(32, 32);
+  bind(button, ['width', 'height'], 'Size:control/height-sm');
+  var glyph = icon('Icon', path, 16, 'Emphasis:emphasis/fg');
+  bind(glyph, ['width', 'height'], 'Size:icon-size/base');
+  add(button, [glyph]);
+  return button;
+}
+
+removeOld('Date picker examples');
+var desktop = figma.createFrame();
+desktop.name = 'Date picker, desktop';
+desktop.layoutMode = 'HORIZONTAL';
+desktop.primaryAxisAlignItems = 'MIN';
+bind(desktop, ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], 'Size:calendar/panel-padding');
+bind(desktop, 'itemSpacing', 'Size:calendar/month-gap');
+fill(desktop, 'Theme:popup/background');
+radius(desktop, 'Size:popup/radius');
+var col = figma.createFrame();
+col.name = 'Presets';
+col.layoutMode = 'VERTICAL';
+col.fills = [];
+bind(col, 'itemSpacing', 'Size:space/1');
+add(col, [presetInst('List', 'Selected'), presetInst('List', 'Rest'), presetInst('List', 'Hover'), presetInst('List', 'Rest')]);
+var main = figma.createFrame();
+main.name = 'Calendar';
+main.layoutMode = 'VERTICAL';
+main.fills = [];
+bind(main, 'itemSpacing', 'Size:space/4');
+var nav = figma.createFrame();
+nav.name = 'Nav';
+nav.layoutMode = 'HORIZONTAL';
+nav.primaryAxisAlignItems = 'CENTER';
+nav.fills = [];
+nav.layoutSizingHorizontal = 'FILL';
+bind(nav, 'itemSpacing', 'Size:space/2');
+var octoberTitle = await T('October 2026', 'subtitle-base', 'Theme:text/primary');
+var novemberTitle = await T('November 2026', 'subtitle-base', 'Theme:text/primary');
+octoberTitle.layoutSizingHorizontal = 'FILL';
+novemberTitle.layoutSizingHorizontal = 'FILL';
+octoberTitle.textAlignHorizontal = 'CENTER';
+novemberTitle.textAlignHorizontal = 'CENTER';
+add(nav, [navButton('Previous month', LEFT), octoberTitle, novemberTitle, navButton('Next month', RIGHT)]);
+var months = figma.createFrame();
+months.name = 'Months';
+months.layoutMode = 'HORIZONTAL';
+months.fills = [];
+bind(months, 'itemSpacing', 'Size:calendar/month-gap');
+add(months, [
+  await monthFrame('October', 'October 2026', monthCells(2026, 10, octoberMarks), false),
+  await monthFrame('November', 'November 2026', monthCells(2026, 11, null), false),
+]);
+var footer = figma.createFrame();
+footer.name = 'Footer';
+footer.layoutMode = 'HORIZONTAL';
+footer.primaryAxisAlignItems = 'CENTER';
+footer.fills = [];
+footer.layoutSizingHorizontal = 'FILL';
+bind(footer, 'itemSpacing', 'Size:space/3');
+var summary = await T('Oct 5 – Oct 12 · 8 days', 'body-condense', 'Theme:text/secondary');
+summary.layoutSizingHorizontal = 'FILL';
+var actions = figma.createFrame();
+actions.name = 'Actions';
+actions.layoutMode = 'HORIZONTAL';
+actions.primaryAxisAlignItems = 'CENTER';
+actions.fills = [];
+bind(actions, 'itemSpacing', 'Size:space/2');
+add(actions, [textButton('Quiet', 'Clear'), textButton('Standard', 'Cancel'), textButton('Bold', 'Apply')]);
+add(footer, [summary, actions]);
+add(main, [nav, months, footer]);
+add(desktop, [col, main]);
+place(desktop);
+
+var mobile = figma.createFrame();
+mobile.name = 'Date picker, mobile';
+mobile.layoutMode = 'VERTICAL';
+bind(mobile, ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], 'Size:calendar/panel-padding');
+bind(mobile, 'itemSpacing', 'Size:space/3');
+fill(mobile, 'Theme:surface/modal');
+var chips = figma.createFrame();
+chips.name = 'Presets';
+chips.layoutMode = 'HORIZONTAL';
+chips.fills = [];
+bind(chips, 'itemSpacing', 'Size:space/2');
+add(chips, [presetInst('Chip', 'Selected'), presetInst('Chip', 'Rest'), presetInst('Chip', 'Rest')]);
+var apply = textButton('Bold', 'Apply');
+apply.layoutSizingHorizontal = 'FILL';
+var mobileFooter = figma.createFrame();
+mobileFooter.name = 'Footer';
+mobileFooter.layoutMode = 'VERTICAL';
+mobileFooter.fills = [];
+mobileFooter.layoutSizingHorizontal = 'FILL';
+bind(mobileFooter, 'itemSpacing', 'Size:space/2');
+var mobileSummary = await T('Oct 5 – Oct 12 · 8 days', 'body-condense', 'Theme:text/secondary');
+add(mobileFooter, [mobileSummary, apply]);
+add(mobile, [
+  chips,
+  await monthFrame('October', 'October 2026', monthCells(2026, 10, octoberMarks), true),
+  mobileFooter,
+]);
+place(mobile);

package/figma/library/pages/18-custom/05-date-picker-labels.js

@@ -0,0 +1,9 @@
+// Custom: headers for the date picker sets. Run after 04.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+await C.page('Custom');
+return await C.labelSets({
+  Day: 'One day. Selected is Bold emphasis. The range band is calendar/range-background. Today keeps an accent ring, including when it is selected.',
+  Month: 'October 2026. Sunday first, a range from the 5th to the 12th, today on the 24th, the 20th disabled, and outside days muted.',
+  Preset: 'A quick selection. List sits beside the months; Chip is the scrolling row on a narrow panel.',
+});

package/figma/library/pages/18-custom/06-date-picker-doc.js

@@ -0,0 +1,25 @@
+// Date picker doc frame. Run after 04 and 05.
+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;
+
+function day(state) { return inst('Day', 'State=' + state); }
+
+var doc = await docFrame('Custom', 'COMPONENTS', 'Date picker', 'Pick one date or a period. The developer chooses which; the person using it cannot switch. Quick selections sit beside the months on a wide panel and in a scrolling row when the panel is narrow. Input type=date is only for a page that cannot load React. Components sit to the right.');
+doc.x = 0; doc.y = 1400;
+
+var pick = await section(doc, 'Choosing', 'Start from what is being picked.');
+var picks = [['One date or a period', 'DatePicker', 'A field that opens the calendar.'], ['A calendar that stays on the page', 'Calendar', 'The month grid, no popup.'], ['Quick selections on their own', 'DatePresets', 'The same list the picker uses.'], ['A date the browser must provide', 'Input', 'type=date, when React is not available.']];
+var pt = AL('VERTICAL', { name: 'Picker' }); add(pick, [pt]); pt.layoutSizingHorizontal = 'FILL';
+for (var i = 0; i < picks.length; i++) { var r = hrow(pt); divider(r); add(r, [await T(picks[i][0], 'body-base', 'Theme:text/primary', 380), await T(picks[i][1], 'subtitle-base', 'Theme:text/accent', 200), await T(picks[i][2], 'body-condense', 'Theme:text/secondary', 520)]); }
+
+var look = await section(doc, 'Day', 'Every state of a day. Selected is the bold emphasis, so a data-color around the picker recolors it.');
+var s1 = stage(look, 'States');
+var shown = ['Default', 'Hover', 'Focus', 'Today', 'Selected', 'Range start', 'Range middle', 'Range end', 'Preview', 'Outside', 'Disabled'];
+for (var s = 0; s < shown.length; s++) add(s1, [await captioned(day(shown[s]), shown[s])]);
+await usage(look, ['A single date, or the start and end of a period.', 'A range that runs across more than one month.', 'Quick selections for the common periods.'], ['Free text the person types. The field is a button; typed entry is not part of this component.', 'Switching between one date and a period. The developer sets mode.', 'A list of choices that is not dates. Use Radio or an item row.']);
+await notes(look, [['Day', 'calendar/day-size · day-radius', 'Seven columns fit a phone. Touch layouts use the minimum touch target.'], ['Selected', 'emphasis/bg · fg', 'Bold, so it follows data-color.'], ['Range', 'calendar/range-background · range-color', 'The band between the circles. High contrast adds an accent edge.'], ['Today', 'calendar/today-ring', 'An inset ring, still there when today is selected.'], ['Presets', 'item/*', 'The same row as a menu item. A chip is that row in one line.'], ['Text', 'trigger-condense · selected-condense · eyebrow-minimize · subtitle-base · body-minimize · body-condense', 'One whole style each.']]);
+return { id: doc.id, h: Math.round(doc.height), overflow: L.overflow(doc) };

package/figma/library/pages/18-custom/07-money-field.js

@@ -0,0 +1,107 @@
+// Custom: Money field and Currency item. Built from the Input field look. Not run from here.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+var v = C.v, fill = C.fill, stroke = C.stroke, bind = C.bind, radius = C.radius, pad = C.pad, add = C.add, T = C.T, page = C.page;
+var icon = C.icon, comp = C.comp, textProp = C.textProp, place = C.place, removeOld = C.removeOld, arrange = C.arrange;
+var ES = {}; (await figma.getLocalEffectStylesAsync()).forEach(function (s) { ES[s.name] = s; });
+await page('Custom');
+var SIZES = { xs: ['body-minimize', 'xs'], sm: ['body-condense', 'sm'], md: ['body-base', ''], lg: ['body-magnify', 'lg'] };
+var CHEV = 'M 4 6 L 8 10 L 12 6';
+var AFFIXES = ['Start', 'End', 'Picker'];
+var STATES = ['Default', 'Hover', 'Focus', 'Invalid', 'Disabled', 'Read-only'];
+var SIZE_NAMES = ['xs', 'sm', 'md', 'lg'];
+
+async function money(affix, size, state) {
+  var c = comp('Affix=' + affix + ', State=' + state + ', Size=' + size, 'HORIZONTAL');
+  c.counterAxisAlignItems = 'CENTER';
+  var sfx = SIZES[size][1] ? '-' + SIZES[size][1] : '';
+  var disabled = state === 'Disabled';
+  fill(c, disabled ? 'Theme:surface/overlay' : 'Theme:surface/canvas');
+  var edge = state === 'Invalid' ? 'Theme:status/error' : state === 'Focus' ? 'Theme:focus/ring' : state === 'Hover' ? 'Theme:border/control-hover' : 'Theme:border/control';
+  stroke(c, edge, 'Size:field/border-width');
+  radius(c, 'Size:field/radius');
+  if (state === 'Focus') await c.setEffectStyleIdAsync(ES['focus/field'].id);
+  var textColor = disabled ? 'Theme:text/disabled' : 'Theme:text/primary';
+  var affixColor = disabled ? 'Theme:text/disabled' : 'Theme:text/secondary';
+  var amount = await T(size === 'sm' ? '12.00' : '1,234.50', SIZES[size][0], textColor);
+  amount.name = 'Amount';
+  var mark = await T(affix === 'Picker' ? 'USD' : '$', SIZES[size][0], affixColor);
+  mark.name = 'Currency';
+  function affixRow() {
+    var row = figma.createFrame();
+    row.name = 'Affix';
+    row.layoutMode = 'HORIZONTAL';
+    row.counterAxisAlignItems = 'CENTER';
+    row.itemSpacing = 4;
+    bind(row, 'itemSpacing', 'Size:space/1');
+    row.fills = [];
+    add(row, [mark]);
+    if (affix === 'Picker') {
+      var ic = icon('Chevron', CHEV, 16, affixColor);
+      add(row, [ic]);
+      var iconSize = size === 'lg' ? 'magnify' : size === 'sm' ? 'condense' : size === 'xs' ? 'minimize' : 'base';
+      bind(ic, ['width', 'height'], 'Size:icon-size/' + iconSize);
+    }
+    return row;
+  }
+  function hairline() {
+    var line = figma.createRectangle();
+    line.name = 'Divider';
+    fill(line, 'Theme:border/control');
+    bind(line, 'width', 'Size:field/border-width');
+    line.layoutAlign = 'STRETCH';
+    line.layoutSizingHorizontal = 'FIXED';
+    return line;
+  }
+  var row = affixRow();
+  var line = affix === 'Picker' ? hairline() : null;
+  if (affix === 'End') add(c, line ? [amount, line, row] : [amount, row]);
+  else add(c, line ? [row, line, amount] : [row, amount]);
+  amount.layoutSizingHorizontal = 'FILL';
+  pad(c, 'Size:control/padding-block' + sfx, 'Size:control/padding-inline' + sfx);
+  c.resize(280, 44);
+  // resize() flips the axis modes. Put them back on purpose, then bind the height.
+  c.primaryAxisSizingMode = 'FIXED';
+  c.counterAxisSizingMode = 'AUTO';
+  bind(c, 'height', 'Size:control/height-' + size);
+  return c;
+}
+
+removeOld('Money field');
+var comps = [];
+for (var a = 0; a < AFFIXES.length; a++) {
+  for (var s = 0; s < STATES.length; s++) {
+    for (var z = 0; z < SIZE_NAMES.length; z++) comps.push(await money(AFFIXES[a], SIZE_NAMES[z], STATES[s]));
+  }
+}
+var set = figma.combineAsVariants(comps, figma.currentPage);
+set.name = 'Money field';
+arrange(set, 980);
+set.clipsContent = false;
+textProp(set, 'Amount', '1,234.50', 'Amount');
+textProp(set, 'Currency', '$', 'Currency');
+set.description = 'An amount of money. Affix is the currency symbol at the start, at the end, or a picker that shows the code with a divider. State matches the field. Size is xs, sm, md or lg. The amount is minor units in code; this text is the formatted major amount.';
+place(set);
+
+removeOld('Currency item');
+figma.currentPage.findAll(function (n) { return n.name === 'Currency item' && n.type === 'COMPONENT'; }).forEach(function (n) { if (!n.removed) n.remove(); });
+var item = comp('Currency item', 'HORIZONTAL');
+item.counterAxisAlignItems = 'CENTER';
+item.itemSpacing = 12;
+bind(item, 'itemSpacing', 'Size:space/3');
+item.resize(240, 36);
+item.primaryAxisSizingMode = 'FIXED';
+item.counterAxisSizingMode = 'AUTO';
+bind(item, 'height', 'Size:control/height-sm');
+fill(item, 'Theme:surface/canvas');
+pad(item, 'Size:item/padding-block', 'Size:item/padding-inline');
+var code = await T('USD · US dollar', 'body-base', 'Theme:text/primary');
+code.name = 'Label';
+code.layoutSizingHorizontal = 'FILL';
+var sym = await T('$', 'body-base', 'Theme:text/secondary');
+sym.name = 'Symbol';
+add(item, [code, sym]);
+textProp(item, 'Label', 'USD · US dollar', 'Label');
+textProp(item, 'Symbol', '$', 'Symbol');
+item.description = 'One row in the currency picker: the code, the currency name, and the symbol.';
+place(item);

package/figma/library/pages/18-custom/08-money-field-labels.js

@@ -0,0 +1,8 @@
+// Custom: a header for the Money field set. Run after 07.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+await C.page('Custom');
+return await C.labelSets({
+  'Money field': 'An amount of money. The symbol sits at the start or the end, following the locale, or the affix is a picker that shows the code with a divider. Sizes are xs, sm, md and lg. Invalid, disabled and read-only match the field. The amount in code is minor units.',
+  'Currency item': 'One currency in the picker: code, name, and a muted symbol.',
+});

package/figma/library/pages/18-custom/09-money-field-doc.js

@@ -0,0 +1,101 @@
+// Custom doc frame for Money field. Run after 07 and 08. Do not run this file from the repo.
+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;
+
+function M(affix, state, size) {
+  return inst('Money field', 'Affix=' + affix + ', State=' + (state || 'Default') + ', Size=' + (size || 'md'));
+}
+
+function setP(node, props) {
+  var p = {};
+  Object.keys(node.componentProperties).forEach(function (k) {
+    var base = k.split('#')[0];
+    if (props[base] !== undefined) p[k] = props[base];
+  });
+  node.setProperties(p);
+  return node;
+}
+
+var doc = await docFrame('Custom', 'COMPONENTS', 'Money field', 'Type an amount of money in one currency, or pick the currency. The value in code is an integer in minor units (cents, yen, fils). Number field is for a plain quantity. Components sit to the right.');
+doc.x = 1600;
+doc.y = 400;
+
+var pick = await section(doc, 'Choosing', 'Start from what the person is entering.');
+var picks = [
+  ['An amount of money', 'Money field', 'One currency, or a picker when there are several.'],
+  ['A plain quantity', 'Number field', 'Counts, percentages, anything that is not money.'],
+  ['A line of text', 'Input', 'Names, email, search.'],
+];
+var pt = AL('VERTICAL', { name: 'Picker' });
+add(pick, [pt]);
+pt.layoutSizingHorizontal = 'FILL';
+for (var i = 0; i < picks.length; i++) {
+  var r = hrow(pt);
+  divider(r);
+  add(r, [
+    await T(picks[i][0], 'body-base', 'Theme:text/primary', 380),
+    await T(picks[i][1], 'subtitle-base', 'Theme:text/accent', 200),
+    await T(picks[i][2], 'body-condense', 'Theme:text/secondary', 520),
+  ]);
+}
+
+var look = await section(doc, 'Amounts', 'The symbol follows the locale. USD and JPY put it first. German euro and Kuwaiti dinar put it last. JPY has no decimals. KWD has three.');
+var row = stage(look, 'Currencies');
+var usd = M('Start', 'Default', 'md');
+var jpy = M('Start', 'Default', 'md');
+var kwd = M('End', 'Default', 'md');
+var eur = M('End', 'Default', 'md');
+add(row, [
+  await captioned(usd, 'USD'),
+  await captioned(jpy, 'JPY'),
+  await captioned(kwd, 'KWD'),
+  await captioned(eur, 'EUR, German'),
+]);
+
+var signed = await section(doc, 'Negative', 'A negative amount takes the text color of the palette set on the field. data-color="error" makes it error-colored. A palette on a parent does not.');
+var signedRow = stage(signed, 'Signed');
+var loss = setP(M('Start', 'Default', 'md'), { Amount: '-1,250.00' });
+add(signedRow, [await captioned(loss, 'data-color="error"')]);
+
+var open = await section(doc, 'Picker', 'The open list is Currency item rows. The trigger shows the code, and a divider separates it from the amount.');
+var list = AL('VERTICAL', { name: 'Open list' });
+add(open, [list]);
+list.layoutSizingHorizontal = 'HUG';
+[
+  ['USD · US dollar', '$'],
+  ['EUR · Euro', '€'],
+  ['JPY · Japanese yen', '¥'],
+].forEach(function (pair) {
+  add(list, [setP(inst('Currency item'), { Label: pair[0], Symbol: pair[1] })]);
+});
+
+var err = await section(doc, 'Errors', 'Minimum, maximum and a missing amount, written as money.');
+var er = stage(err, 'Messages');
+add(er, [
+  await captioned(M('Start', 'Invalid', 'md'), 'Enter an amount of at least $5.00'),
+  await captioned(M('Start', 'Invalid', 'md'), 'Enter an amount of $10,000.00 or less'),
+  await captioned(M('Start', 'Invalid', 'md'), 'Enter an amount'),
+]);
+
+await usage(look, [
+  'A price, a balance, a refund, or a budget.',
+  'A picker when the person chooses the currency. The trigger shows the code.',
+  'The symbol on the side the locale uses, so a German amount ends with the symbol.',
+], [
+  'A quantity that is not money. Use Number field.',
+  'An exchange rate. Changing currency re-rounds the typed number. It does not convert.',
+  'The symbol inside the typed text. It lives in the affix.',
+]);
+await notes(look, [
+  ['Value', 'Minor units', 'Cents, yen, fils. Empty is null, not zero.'],
+  ['Digits', 'The currency, or fractionDigits', 'USD 2, JPY 0, KWD 3.'],
+  ['Affix', 'field/affix-color', 'Muted, inside the field border.'],
+  ['Divider', 'field border', 'Between the picker and the amount.'],
+  ['Text', 'body-minimize · body-condense · body-base · body-magnify', 'The same style as Input at that size, including xs.'],
+  ['Popup', 'money-field/picker-min-inline-size', 'The list is wider than the code trigger.'],
+]);
+return { id: doc.id, h: Math.round(doc.height), overflow: L.overflow(doc) };