@scattered-light/loomiere 0.4.0 → 0.4.1

package/figma/library/pages/12-overlays/01-overlays.js

@@ -0,0 +1,135 @@
+// Overlays: Dialog, Drawer, Toast. Rebuilds the page's Components column. Uses Button, Field and Checkbox.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+var V = C.V, COL = C.COL, TS = C.TS, v = C.v, paint = C.paint, fill = C.fill, stroke = C.stroke, bind = C.bind, radius = C.radius, pad = C.pad, AL = C.AL, add = C.add, T = C.T, mode = C.mode, page = C.page;
+var shadow = C.shadow, focusRing = C.focusRing, icon = C.icon, comp = C.comp, textProp = C.textProp, boolProp = C.boolProp, place = C.place, removeOld = C.removeOld, arrange = C.arrange;
+var here = function (n) { return figma.currentPage.findOne(function (x) { return x.type === 'COMPONENT_SET' && x.name === n; }); };
+var pp = await page('Overlays');
+figma.currentPage.children.filter(function (n) { return n.name === 'Components'; }).forEach(function (n) { n.remove(); });
+var ES = {}; (await figma.getLocalEffectStylesAsync()).forEach(function (s) { ES[s.name] = s; });
+var XP = 'M 4 4 L 12 12 M 12 4 L 4 12';
+var BTN = await C.setOn('Buttons', 'Button');
+var FIELD = await C.setOn('Fields', 'Field'), CHECK = await C.setOn('Fields', 'Checkbox');
+function row(set, gap) {
+  set.layoutMode = 'NONE'; var x = 32, h = 0;
+  set.children.forEach(function (k) { k.x = x; k.y = 48; x += k.width + (gap || 64); h = Math.max(h, k.height); });
+  set.resize(x - (gap || 64) + 32, h + 96);
+  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;
+}
+function setP(i, props) { var p = {}; Object.keys(i.componentProperties).forEach(function (k) { var b = k.split('#')[0]; if (props[b] !== undefined) p[k] = props[b]; }); i.setProperties(p); return i; }
+function btn(em, label, status) {
+  var i = BTN.children.find(function (c) { return c.name === 'Emphasis=' + em + ', Size=md, State=Default, Content=Label'; }).createInstance();
+  setP(i, { Label: label }); if (status) mode(i, 'Status', status); return i;
+}
+function field(label) { var i = FIELD.children.find(function (c) { return c.name === 'State=Default'; }).createInstance(); setP(i, { Label: label }); return i; }
+function check(label, on) { var i = CHECK.children.find(function (c) { return c.name === 'Size=md, Value=' + (on ? 'On' : 'Off') + ', State=Default'; }).createInstance(); setP(i, { Label: label }); return i; }
+function closeX(colorKey) {
+  var b = AL('HORIZONTAL', { name: 'Close', primaryAxisAlignItems: 'CENTER', counterAxisAlignItems: 'CENTER' });
+  b.resize(24, 24); b.primaryAxisSizingMode = 'FIXED'; b.counterAxisSizingMode = 'FIXED'; bind(b, ['width', 'height'], 'Size:icon-button/size'); radius(b, 'Size:icon-button/radius');
+  add(b, [icon('X', XP, 16, colorKey || 'Theme:text/tertiary')]); return b;
+}
+function pinClose(parent, x, colorKey) {
+  var c = closeX(colorKey); parent.appendChild(c); c.layoutPositioning = 'ABSOLUTE';
+  c.x = parent.width - c.width - 8; c.y = 8; c.constraints = { horizontal: 'MAX', vertical: 'MIN' }; return c;
+}
+async function heading(parent, title, desc, titleStyle, titleColor, descColor) {
+  var t = await T(title, titleStyle || 'title-amplify', titleColor || 'Theme:text/primary'); t.name = 'Title';
+  var d = await T(desc, 'body-base', descColor || 'Theme:text/secondary'); d.name = 'Description';
+  add(parent, [t, d]); [t, d].forEach(function (n) { n.layoutSizingHorizontal = 'FILL'; n.textAutoResize = 'HEIGHT'; });
+  return [t, d];
+}
+function actions(kids, justify) {
+  var a = AL('HORIZONTAL', { name: 'Actions', primaryAxisAlignItems: justify || 'MAX', counterAxisAlignItems: 'CENTER' });
+  bind(a, 'itemSpacing', 'Size:modal/actions-gap'); bind(a, 'paddingTop', 'Size:modal/actions-spacing');
+  add(a, kids); return a;
+}
+async function modalSurface(c) {
+  fill(c, 'Theme:surface/modal'); stroke(c, 'Theme:border/default', 'Size:modal/border-width');
+  bind(c, ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], 'Size:modal/padding'); bind(c, 'itemSpacing', 'Size:modal/gap');
+  await c.setEffectStyleIdAsync(ES['elevation/xl'].id);
+}
+function fillW(n) { n.layoutSizingHorizontal = 'FILL'; return n; }
+function addF(p, n) { p.appendChild(n); return fillW(n); }
+
+// Dialog
+var dl = [];
+var D = [
+  ['Message', 'Before you go', 'Park roads close at sunset from November to March. Plan to be back at the trailhead by 4 pm.', null],
+  ['Form', 'Rename trip', 'The new name shows on your itinerary and in shared links.', null],
+  ['Alert', 'Delete this trip?', 'This removes the itinerary and every booking in it. You can\'t undo this.', null]
+];
+for (var i = 0; i < D.length; i++) {
+  var c = comp('Content=' + D[i][0], 'VERTICAL'); await modalSurface(c); radius(c, 'Size:modal/radius');
+  c.counterAxisSizingMode = 'FIXED'; c.resize(500, 100); bind(c, 'width', 'Size:modal/max-width');
+  await heading(c, D[i][1], D[i][2]);
+  if (D[i][0] === 'Form') { var body = AL('VERTICAL', { name: 'Content' }); bind(body, 'itemSpacing', 'Size:modal/gap'); add(c, [body]); fillW(body); var f1 = field('Trip name'); add(body, [f1]); fillW(f1); }
+  if (D[i][0] === 'Message') addF(c, actions([btn('Bold', 'Got it')]));
+  if (D[i][0] === 'Form') addF(c, actions([btn('Standard', 'Cancel'), btn('Bold', 'Save')]));
+  if (D[i][0] === 'Alert') addF(c, actions([btn('Standard', 'Cancel'), btn('Bold', 'Delete trip', 'Error')]));
+  if (D[i][0] !== 'Alert') pinClose(c);
+  c.clipsContent = true; dl.push(c);
+}
+var dset = figma.combineAsVariants(dl, figma.currentPage); dset.name = 'Dialog'; row(dset, 64);
+// No text props: Figma shares one value across variants, and each variant has its own example text.
+boolProp(dset, 'Close', true, 'Close');
+dset.description = 'A centered modal. Message tells something and has one action; Form collects a little input; Alert asks to confirm something that can\'t be undone, so it has no X and its action takes the Error status. Surface: surface/modal, border/default, modal/radius, elevation/xl; padding modal/padding, gap modal/gap; title-amplify.';
+place(dset);
+
+// Drawer
+var dr = [];
+var b = comp('Side=Bottom', 'VERTICAL'); await modalSurface(b);
+bind(b, ['topLeftRadius', 'topRightRadius'], 'Size:modal/radius'); b.strokeBottomWeight = 0;
+b.counterAxisSizingMode = 'FIXED'; b.resize(390, 100);
+var hw = AL('HORIZONTAL', { name: 'Handle', primaryAxisAlignItems: 'CENTER' }); var hb = figma.createFrame(); hb.name = 'Bar'; hb.resize(40, 4); fill(hb, 'Theme:border/strong'); hb.cornerRadius = 999;
+bind(hb, 'width', 'Size:drawer/handle-width'); bind(hb, 'height', 'Size:drawer/handle-height'); add(hw, [hb]); add(b, [hw]); fillW(hw);
+await heading(b, 'Filters', 'Show only campsites that match.');
+var bc = AL('VERTICAL', { name: 'Content', itemSpacing: 12 }); add(b, [bc]); fillW(bc); add(bc, [check('Free cancellation', true), check('Pets allowed', false), check('Hookups', false)]);
+addF(b, actions([btn('Standard', 'Clear'), btn('Bold', 'Show 24 sites')]));
+b.clipsContent = true; dr.push(b);
+var r = comp('Side=Right', 'VERTICAL'); await modalSurface(r);
+bind(r, ['topLeftRadius', 'bottomLeftRadius'], 'Size:modal/radius'); r.strokeRightWeight = 0;
+r.counterAxisSizingMode = 'FIXED'; r.primaryAxisSizingMode = 'FIXED'; r.resize(420, 640);
+await heading(r, 'Trip details', 'Edit the name and notes. Changes save when you press Save.');
+var rc = AL('VERTICAL', { name: 'Content' }); bind(rc, 'itemSpacing', 'Size:modal/gap'); add(r, [rc]); fillW(rc); rc.layoutSizingVertical = 'FILL';
+var f2 = field('Trip name'), f3 = field('Leaving from'); add(rc, [f2, f3]); fillW(f2); fillW(f3);
+addF(r, actions([btn('Standard', 'Cancel'), btn('Bold', 'Save')]));
+r.clipsContent = true; dr.push(r);
+var drset = figma.combineAsVariants(dr, figma.currentPage); drset.name = 'Drawer'; row(drset, 64);
+drset.description = 'A panel that slides in from an edge. Bottom is the phone sheet, full width with a grab bar; Right (or Left) is a side panel 420 wide. It shares the dialog surface, padding and title, and has no border or rounding on the edge it comes from.';
+place(drset);
+
+// Toast
+function glyph(f, d, colorKey) {
+  var vec = figma.createVector(); vec.vectorPaths = [{ windingRule: 'NONE', data: d }]; vec.fills = []; vec.strokes = [paint(colorKey)]; vec.strokeWeight = 1.5; vec.strokeCap = 'ROUND'; vec.strokeJoin = 'ROUND';
+  var xs = [], ys = []; d.replace(/(-?[\d.]+) (-?[\d.]+)/g, function (m, x, y) { xs.push(+x); ys.push(+y); });
+  f.appendChild(vec); vec.x = Math.min.apply(null, xs); vec.y = Math.min.apply(null, ys); return vec;
+}
+function statusIcon(kind, colorKey) {
+  var f = figma.createFrame(); f.name = 'Icon'; f.fills = []; f.resize(20, 20); f.clipsContent = false;
+  if (kind === 'Warning') glyph(f, 'M 10 2.5 L 18 16.5 L 2 16.5 Z', colorKey);
+  else { var e = figma.createEllipse(); e.name = 'Ring'; e.resize(16, 16); e.x = 2; e.y = 2; e.fills = []; e.strokes = [paint(colorKey)]; e.strokeWeight = 1.5; f.appendChild(e); }
+  var g = { Info: 'M 10 9 L 10 14 M 10 6.4 L 10 6.5', Success: 'M 6.5 10 L 9 12.5 L 13.5 7.5', Warning: 'M 10 7.5 L 10 11 M 10 13.5 L 10 13.6', Error: 'M 7.5 7.5 L 12.5 12.5 M 12.5 7.5 L 7.5 12.5' }[kind];
+  glyph(f, g, colorKey); return f;
+}
+var TT = [['Neutral', 'Trip saved', 'Find it under My trips.'], ['Info', 'Road work ahead', 'Expect delays on Route 62 this weekend.'], ['Success', 'Booking confirmed', 'We sent the details to your email.'], ['Warning', 'Only 2 sites left', 'Book soon to keep these dates.'], ['Error', 'Payment didn\'t go through', 'Check your card details and try again.']];
+var tl = [];
+for (var i = 0; i < TT.length; i++) {
+  var k = TT[i][0], s = k.toLowerCase();
+  var bg = k === 'Neutral' ? 'Theme:surface/canvas' : 'Theme:scope/' + s + '/soft', bd = k === 'Neutral' ? 'Theme:border/default' : 'Theme:scope/' + s + '/border';
+  var fgT = k === 'Neutral' ? 'Theme:text/primary' : 'Theme:scope/' + s + '/on-soft', fgD = k === 'Neutral' ? 'Theme:text/secondary' : fgT, fgX = k === 'Neutral' ? 'Theme:text/tertiary' : fgT;
+  var c = comp('Type=' + k, 'HORIZONTAL'); c.counterAxisAlignItems = 'MIN';
+  fill(c, bg); stroke(c, bd, 'Size:popup/border-width'); radius(c, 'Size:popup/radius'); await c.setEffectStyleIdAsync(ES['elevation/lg'].id);
+  bind(c, ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], 'Size:notice/padding'); bind(c, 'itemSpacing', 'Size:notice/gap');
+  c.primaryAxisSizingMode = 'FIXED'; c.resize(300, 80); c.counterAxisSizingMode = 'AUTO'; bind(c, 'width', 'Size:toast/viewport-width-md');
+  if (k !== 'Neutral') add(c, [statusIcon(k, fgT)]);
+  var ct = AL('VERTICAL', { name: 'Content' }); bind(ct, 'itemSpacing', 'Size:notice/text-gap'); bind(ct, 'paddingRight', 'Size:icon-button/size'); add(c, [ct]); ct.layoutSizingHorizontal = 'FILL';
+  await heading(ct, TT[i][1], TT[i][2], 'title-base', fgT, fgD);
+  pinClose(c, 0, fgX);
+  c.clipsContent = true; tl.push(c);
+}
+var tset = figma.combineAsVariants(tl, figma.currentPage); tset.name = 'Toast'; row(tset, 40);
+boolProp(tset, 'Close', true, 'Close');
+tset.description = 'A short notice that appears in a corner and goes away on its own. Neutral sits on the popup surface; Info, Success, Warning and Error take that palette\'s soft fill, border and text, plus an icon so color is not the only signal. Title in title-base, padding notice/padding.';
+place(tset);
+var col = figma.currentPage.children.filter(function (n) { return n.name === 'Components'; })[0];
+return { col: col.id, sets: [dset.id, drset.id, tset.id] };

package/figma/library/pages/12-overlays/02-labels.js

@@ -0,0 +1,10 @@
+// Overlays: a header and row and column labels for each set. Run after 01.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+await C.page('Overlays');
+// Short header lines; sets not listed use their descriptions.
+return await C.labelSets({
+  Dialog: "A centered modal. Message has one action; Form collects a little input; Alert confirms something that can't be undone, so it has no X and its main action takes the Error status.",
+  Drawer: "A panel that slides in from an edge. Bottom is the phone sheet with a grab bar; Right is a 420-wide side panel. No border or rounding on the edge it comes from.",
+  Toast: "A short notice that goes away on its own. Status types take their palette's soft fill, border and text, plus an icon."
+});

package/figma/library/pages/12-overlays/03-doc.js

@@ -0,0 +1,80 @@
+// Overlays doc frame. Run after 01 and 02.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+var V = L.V, COL = L.COL, v = L.v, paint = L.paint, fill = L.fill, stroke = L.stroke, bind = L.bind, radius = L.radius, pad = L.pad, AL = L.AL, add = L.add, T = L.T, mode = L.mode, page = L.page, docFrame = L.docFrame, section = L.section, hrow = L.hrow, divider = L.divider;
+await page('Overlays');
+var sets = {}; figma.currentPage.findAllWithCriteria({ types: ['COMPONENT_SET'] }).forEach(function (s) { sets[s.name] = s; });
+function inst(set, name, props) {
+  var c = sets[set].children.filter(function (x) { return x.name === name; })[0]; if (!c) throw new Error(set + ' ' + name);
+  var i = c.createInstance();
+  if (props) { var p = {}; Object.keys(i.componentProperties).forEach(function (k) { var base = k.split('#')[0]; if (props[base] !== undefined) p[k] = props[base]; }); i.setProperties(p); }
+  return i;
+}
+async function notes(parent, rows) {
+  var tbl = AL('VERTICAL', { name: 'Spec' }); add(parent, [tbl]); tbl.layoutSizingHorizontal = 'FILL';
+  var hd = hrow(tbl); hd.paddingTop = 0; divider(hd);
+  add(hd, [await T('Part', 'eyebrow-condense', 'Theme:text/tertiary', 180), await T('Token', 'eyebrow-condense', 'Theme:text/tertiary', 340), await T('Why', 'eyebrow-condense', 'Theme:text/tertiary', 640)]);
+  for (var i = 0; i < rows.length; i++) {
+    var r = hrow(tbl); r.counterAxisAlignItems = 'MIN'; r.paddingTop = r.paddingBottom = 10; divider(r);
+    add(r, [await T(rows[i][0], 'subtitle-base', 'Theme:text/primary', 180), await T(rows[i][1], 'code-condense', 'Theme:text/accent', 340), await T(rows[i][2], 'body-condense', 'Theme:text/secondary', 640)]);
+  }
+}
+function stage(parent, name) {
+  var s = AL('HORIZONTAL', { name: name || 'Examples', itemSpacing: 32, counterAxisAlignItems: 'CENTER', paddingTop: 32, paddingBottom: 32, paddingLeft: 32, paddingRight: 32, layoutWrap: 'WRAP', counterAxisSpacing: 24 });
+  fill(s, 'Theme:fill/subtle'); s.cornerRadius = 12; add(parent, [s]); s.layoutSizingHorizontal = 'FILL'; return s;
+}
+async function captioned(node, cap) { var c = AL('VERTICAL', { name: cap, itemSpacing: 10 }); add(c, [node, await T(cap, 'body-condense', 'Theme:text/tertiary')]); return c; }
+async function usage(parent, dos, donts) {
+  var r = AL('HORIZONTAL', { name: 'Usage', itemSpacing: 24 }); add(parent, [r]); r.layoutSizingHorizontal = 'FILL';
+  var pairs = [['Use it for', dos, 'Theme:status/success'], ['Avoid', donts, 'Theme:status/error']];
+  for (var i = 0; i < 2; i++) {
+    var col = AL('VERTICAL', { name: pairs[i][0], itemSpacing: 8, paddingLeft: 16 }); add(r, [col]); col.layoutSizingHorizontal = 'FILL';
+    col.strokes = [paint(pairs[i][2])]; col.strokeLeftWeight = 3; col.strokeTopWeight = col.strokeRightWeight = col.strokeBottomWeight = 0;
+    add(col, [await T(pairs[i][0], 'subtitle-base')]);
+    for (var j = 0; j < pairs[i][1].length; j++) { var t = await T(pairs[i][1][j], 'body-base', 'Theme:text/secondary'); add(col, [t]); t.layoutSizingHorizontal = 'FILL'; t.textAutoResize = 'HEIGHT'; }
+  }
+}
+figma.currentPage.children.filter(function (n) { return n.name === 'Overlays' && n.type === 'FRAME'; }).forEach(function (n) { n.remove(); });
+var doc = await docFrame('Overlays', 'COMPONENTS', 'Overlays', 'Things that cover the page: dialogs and drawers that need an answer before the person goes on, and toasts that report what just happened. Dialogs and drawers share the modal surface (surface/modal, modal/radius, modal/padding, the elevation/xl shadow) and a scrim behind them. Components sit to the right.');
+doc.x = 0; doc.y = 400;
+function scene(parent, name, w, h) {
+  var f = figma.createFrame(); f.name = name; f.resize(w, h); fill(f, 'Theme:surface/canvas'); f.strokes = [paint('Theme:border/subtle')]; f.strokeWeight = 1; f.cornerRadius = 12; f.clipsContent = true;
+  var y = 32; for (var i = 0; i < 6; i++) { var bar = figma.createRectangle(); bar.name = 'Page'; bar.resize(i % 3 === 0 ? w * 0.4 : w - 64, i % 3 === 0 ? 20 : 12); bar.x = 32; bar.y = y; bar.cornerRadius = 4; fill(bar, 'Theme:fill/subtle'); f.appendChild(bar); y += i % 3 === 0 ? 40 : 28; }
+  var sc = figma.createRectangle(); sc.name = 'Scrim'; sc.resize(w, h); fill(sc, 'Theme:modal/backdrop'); f.appendChild(sc);
+  parent.appendChild(f); return f;
+}
+
+var pick = await section(doc, 'Choosing an overlay', 'Overlays interrupt. Start with the least interrupting thing that works.');
+var picks = [['Confirm something that can\'t be undone', 'Dialog · Alert', 'Delete, discard, leave without saving. No X: the person must choose.'], ['A short task that blocks the page', 'Dialog · Form', 'Rename, invite, a few fields. Close X, Cancel and one main action.'], ['Tell something before the person goes on', 'Dialog · Message', 'Rare. One action that closes it.'], ['Longer edits or filters beside the page', 'Drawer · Right', 'The page stays in view, so people can compare.'], ['Choices on a phone', 'Drawer · Bottom', 'A sheet that slides up and can be swiped away.'], ['Report that something happened', 'Toast', 'Saved, sent, failed. Goes away on its own.'], ['Extra detail that doesn\'t block', 'Popover', 'On the Popups page.']];
+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 ds = await section(doc, 'Dialog', 'A centered modal over a scrim. The title is title-amplify; the description is body text in text/secondary. Actions sit at the bottom right, the main one last. Alert dialogs have no X, so the only ways out are the two buttons.');
+var s1 = stage(ds, 'On a page'); var sc1 = scene(s1, 'Dialog on a page', 1184, 520);
+var d1 = inst('Dialog', 'Content=Form'); sc1.appendChild(d1); d1.x = Math.round((1184 - d1.width) / 2); d1.y = Math.round((520 - d1.height) / 2);
+var s1b = stage(ds, 'Kinds'); s1b.counterAxisAlignItems = 'MIN';
+add(s1b, [await captioned(inst('Dialog', 'Content=Message'), 'Message'), await captioned(inst('Dialog', 'Content=Alert'), 'Alert')]);
+await usage(ds, ['A decision the person must make before going on.', 'A short form that belongs to one action, such as Rename.', 'Action labels that say what happens: Delete trip, not OK.'], ['Information people could read in the page.', 'Long forms. Use a page or a Right drawer.', 'Dialogs that open other dialogs.']);
+await notes(ds, [['Surface', 'surface/modal · border/default', 'A step above the page so it reads as in front.'], ['Shadow', 'elevation/xl (effect style)', 'The highest on the page short of 2xl.'], ['Radius', 'modal/radius', 'Rounder than cards.'], ['Width', 'modal/max-width', '500 wide; 90vw on small screens.'], ['Padding', 'modal/padding · modal/gap', 'Between title, description and content.'], ['Actions', 'modal/actions-spacing · modal/actions-gap', 'Extra room above the buttons so they read as the end.'], ['Close', 'icon-button/size · icon-button/inset', 'The standard quiet X in the corner.'], ['Scrim', 'modal/backdrop', 'Dims the page so the dialog is the only thing to look at.']]);
+
+var drs = await section(doc, 'Drawer', 'A panel that slides in from an edge and can be swiped away. It uses the dialog surface and heading, and drops the border and rounding on the edge it comes from. Bottom is for phones and has a grab bar; Right keeps the page in view.');
+var s2 = stage(drs, 'On a page'); s2.counterAxisAlignItems = 'MIN';
+var sc2 = scene(s2, 'Right drawer', 820, 640); var d2 = inst('Drawer', 'Side=Right'); sc2.appendChild(d2); d2.x = 820 - d2.width; d2.y = 0;
+var sc3 = scene(s2, 'Bottom drawer', 300, 640); var d3 = inst('Drawer', 'Side=Bottom'); sc3.appendChild(d3); d3.resize(300, d3.height); d3.x = 0; d3.y = 640 - d3.height;
+await usage(drs, ['Filters, settings and details that relate to the page behind.', 'Phone menus and choices, as a bottom sheet.'], ['A quick yes or no. That is a Dialog.', 'Navigation on wide screens, where a side nav fits.']);
+await notes(drs, [['Surface', 'modal surface · elevation/xl', 'The same as a dialog.'], ['Width', 'drawer/popup-size', 'Right and left drawers: 420, or 90vw.'], ['Height', 'drawer/popup-max-size', 'Bottom drawers: up to 85vh.'], ['Grab bar', 'drawer/handle-width · drawer/handle-height · border/strong', 'Shows the sheet can be swiped down.'], ['Edge', 'no border, no radius', 'On the side it slides from, so it looks attached.']]);
+
+var tos = await section(doc, 'Toast', 'A short notice in the corner that reports what just happened and goes away on its own. Neutral sits on the popup surface; the status types take their palette\'s soft fill, border and text, plus an icon so color is not the only signal. New toasts stack in front; the ones behind shrink and peek out above.');
+var s3 = stage(tos, 'Types'); s3.counterAxisAlignItems = 'MIN';
+for (var k of ['Neutral', 'Info', 'Success', 'Warning', 'Error']) add(s3, [await captioned(inst('Toast', 'Type=' + k), k)]);
+var s4 = stage(tos, 'Stack');
+var stack = figma.createFrame(); stack.name = 'Stack'; stack.fills = []; stack.resize(360, 200); stack.clipsContent = false; s4.appendChild(stack);
+var front = inst('Toast', 'Type=Success'); var fh = front.height, fw = front.width, frontTop = 200 - fh;
+for (var j = 2; j >= 1; j--) { var t = inst('Toast', 'Type=Neutral'); var sc = 1 - j * 0.1; stack.appendChild(t); t.resize(fw, fh); t.rescale(sc); t.x = Math.round((360 - fw * sc) / 2); t.y = frontTop - j * 12; }
+stack.appendChild(front); front.x = Math.round((360 - fw) / 2); front.y = frontTop;
+add(s4, [await T('Hover the stack to spread it out. Each toast behind is 10% smaller and peeks notice/peek above the one in front.', 'body-condense', 'Theme:text/tertiary', 360)]);
+await usage(tos, ['Confirming something saved, sent or copied.', 'A failure the person can retry, with an action in the toast.', 'Short titles: what happened, in a few words.'], ['Anything the person must read or act on. It disappears.', 'More than one or two lines of text.', 'Errors in a form. Show them on the field.']);
+await notes(tos, [['Surface', 'popup surface · elevation/lg', 'Neutral: surface/canvas and border/default.'], ['Status', 'scope/<status>/soft · border · on-soft', 'The palette\'s soft fill, edge and text.'], ['Width', 'toast/viewport-width-md', '300 wide; 250 on small screens.'], ['Padding', 'notice/padding · notice/gap', 'Between the icon and the text.'], ['Text', 'title-base · body-base', 'notice/text-gap between them.'], ['Place', 'toast/viewport-margin-md', 'From the bottom right corner.'], ['Stack', 'notice/peek', 'How far each toast behind shows above.']]);
+var over = [];
+doc.findAll(function (n) { return n.type === 'TEXT'; }).forEach(function (t) { var b = t.absoluteBoundingBox, p = doc.absoluteBoundingBox; if (b.x + b.width > p.x + p.width + 1) over.push(t.characters.slice(0, 30)); });
+return { id: doc.id, h: Math.round(doc.height) };

package/figma/library/pages/13-disclosure/01-disclosure.js

@@ -0,0 +1,205 @@
+// Disclosure and navigation: Tab, Tab list, Accordion item, Accordion, Nav trigger, Nav link, Navigation menu,
+// Toolbar, Toggle group. Rebuilds the page's Components column. Uses Button and Toggle.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+var V = C.V, COL = C.COL, TS = C.TS, v = C.v, paint = C.paint, fill = C.fill, stroke = C.stroke, bind = C.bind, radius = C.radius, pad = C.pad, AL = C.AL, add = C.add, T = C.T, mode = C.mode, page = C.page;
+var shadow = C.shadow, focusRing = C.focusRing, icon = C.icon, comp = C.comp, textProp = C.textProp, boolProp = C.boolProp, place = C.place, removeOld = C.removeOld, arrange = C.arrange;
+var here = function (n) { return figma.currentPage.findOne(function (x) { return x.type === 'COMPONENT_SET' && x.name === n; }); };
+var PAGE = 'Disclosure and navigation';
+var pp = await page(PAGE);
+figma.currentPage.children.filter(function (n) { return n.name === 'Components'; }).forEach(function (n) { n.remove(); });
+var ES = {}; (await figma.getLocalEffectStylesAsync()).forEach(function (s) { ES[s.name] = s; });
+var DOWN = 'M 4 6 L 8 10 L 12 6', UP = 'M 4 10 L 8 6 L 12 10';
+var BTN = await C.setOn('Buttons', 'Button'), TOG = await C.setOn('Buttons', 'Toggle');
+function frameSet(set) { 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; }
+function grid(set, cols, colW, rowH) {
+  set.layoutMode = 'NONE';
+  set.children.forEach(function (k, i) { var r = Math.floor(i / cols); k.x = 32 + (i % cols) * colW; k.y = 32 + r * rowH + Math.round((rowH - k.height) / 2); });
+  set.resize(64 + cols * colW - 24, 64 + Math.ceil(set.children.length / cols) * rowH); frameSet(set);
+}
+function row(set, gap) {
+  set.layoutMode = 'NONE'; var x = 32, h = 0;
+  set.children.forEach(function (k) { k.x = x; k.y = 48; x += k.width + gap; h = Math.max(h, k.height); });
+  set.resize(x - gap + 32, h + 96); frameSet(set);
+}
+function setP(i, props) { var p = {}; Object.keys(i.componentProperties).forEach(function (k) { var b = k.split('#')[0]; if (props[b] !== undefined) p[k] = props[b]; }); i.setProperties(p); return i; }
+function pick(set, name) { var c = set.children.find(function (x) { return x.name === name; }); if (!c) throw new Error(set.name + ' ' + name); return c.createInstance(); }
+function ring(n) { n.strokes = [paint('Theme:focus/ring')]; n.strokeWeight = 2; n.strokeAlign = 'INSIDE'; }
+function edge(n, side, colorKey, wKey) {
+  n.strokes = [paint(colorKey)]; n.strokeAlign = 'INSIDE';
+  ['Top', 'Right', 'Bottom', 'Left'].forEach(function (s) { n['stroke' + s + 'Weight'] = 0; });
+  n['stroke' + side + 'Weight'] = 1; bind(n, 'stroke' + side + 'Weight', wKey);
+}
+function fillW(n) { n.layoutSizingHorizontal = 'FILL'; return n; }
+function bar(name) {
+  var b = AL('HORIZONTAL', { name: name || 'Bar', counterAxisAlignItems: 'CENTER' });
+  fill(b, 'Theme:surface/tray'); stroke(b, 'Theme:border/default', 'Size:bar/border-width'); radius(b, 'Size:bar/radius');
+  bind(b, ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], 'Size:bar/padding'); bind(b, 'itemSpacing', 'Size:bar/gap'); return b;
+}
+function sep() {
+  var w = AL('HORIZONTAL', { name: 'Separator', counterAxisAlignItems: 'CENTER' }); bind(w, ['paddingLeft', 'paddingRight'], 'Size:bar/separator-spacing');
+  var r = figma.createRectangle(); r.name = 'Line'; r.resize(1, 24); fill(r, 'Theme:border/default'); bind(r, 'width', 'Size:bar/border-width'); bind(r, 'height', 'Size:bar/separator-length'); add(w, [r]); return w;
+}
+function tog(label, on, size) { var i = pick(TOG, 'Pressed=' + (on ? 'On' : 'Off') + ', Size=' + (size || 'sm') + ', State=Default'); setP(i, { Label: label, Icon: false }); return i; }
+
+// Tab
+var PADS = { sm: ['Scale:space/1-5', 'Scale:space/3'], md: ['Scale:space/2', 'Scale:space/4'], lg: ['Scale:space/3', 'Scale:space/6'] };
+var TST = ['Default', 'Hover', 'Selected', 'Focus', 'Disabled'], tabs = [];
+async function tab(orient, size, st) {
+  var c = comp('Orientation=' + orient + ', Size=' + size + ', State=' + st); c.counterAxisAlignItems = 'CENTER'; c.primaryAxisAlignItems = orient === 'Vertical' ? 'MIN' : 'CENTER';
+  pad(c, PADS[size][0], PADS[size][1]);
+  var sel = st === 'Selected', style = (sel ? 'selected-' : 'body-') + (size === 'sm' ? 'minimize' : 'base');
+  var fg = { Default: 'Theme:text/secondary', Hover: 'Theme:text/primary', Selected: 'Theme:text/accent', Focus: 'Theme:text/secondary', Disabled: 'Theme:text/disabled' }[st];
+  var t = await T('Itinerary', style, fg); t.name = 'Label'; add(c, [t]);
+  if (st === 'Hover') fill(c, 'Theme:fill/subtle');
+  if (sel) edge(c, orient === 'Vertical' ? 'Right' : 'Bottom', 'Theme:border/accent', 'Size:disclosure/indicator-width');
+  if (st === 'Focus') ring(c);
+  if (st === 'Disabled') { c.opacity = 0.5; bind(c, 'opacity', 'Size:disclosure/opacity-disabled'); }
+  return c;
+}
+for (var z of ['sm', 'md', 'lg']) for (var s of TST) tabs.push(await tab('Horizontal', z, s));
+for (var s of TST) tabs.push(await tab('Vertical', 'md', s));
+var tabSet = figma.combineAsVariants(tabs, figma.currentPage); tabSet.name = 'Tab'; grid(tabSet, 5, 150, 64);
+textProp(tabSet, 'Label', 'Itinerary', 'Label');
+tabSet.description = 'One tab. Selected takes the accent text, the selected text style and a disclosure/indicator-width line in border/accent on the edge facing the panel. Hover is the fill/subtle wash. Sizes change the text and padding; tabs have no rounding.';
+place(tabSet);
+var lists = [];
+for (var o of ['Horizontal', 'Vertical']) {
+  var c = comp('Orientation=' + o, o === 'Horizontal' ? 'HORIZONTAL' : 'VERTICAL'); c.clipsContent = false;
+  var L4 = [['Overview', 'Selected'], ['Itinerary', 'Default'], ['Bookings', 'Default'], ['Archive', 'Disabled']];
+  for (var j = 0; j < L4.length; j++) { var ti = pick(tabSet, 'Orientation=' + o + ', Size=md, State=' + L4[j][1]); setP(ti, { Label: L4[j][0] }); add(c, [ti]); if (o === 'Vertical') fillW(ti); }
+  if (o === 'Vertical') { c.counterAxisSizingMode = 'FIXED'; c.resize(180, c.height); }
+  var dv = figma.createRectangle(); dv.name = 'Divider'; fill(dv, 'Theme:border/default'); c.insertChild(0, dv); dv.layoutPositioning = 'ABSOLUTE';
+  if (o === 'Horizontal') { dv.resize(c.width, 1); bind(dv, 'height', 'Size:stroke/default'); dv.x = 0; dv.y = c.height - 1; dv.constraints = { horizontal: 'STRETCH', vertical: 'MAX' }; }
+  else { dv.resize(1, c.height); bind(dv, 'width', 'Size:stroke/default'); dv.x = c.width - 1; dv.y = 0; dv.constraints = { horizontal: 'MAX', vertical: 'STRETCH' }; }
+  lists.push(c);
+}
+var listSet = figma.combineAsVariants(lists, figma.currentPage); listSet.name = 'Tab list'; row(listSet, 80);
+listSet.description = 'A row (or column) of Tab instances over a border/default divider. The selected tab\'s line sits on the divider. Swap each tab\'s State; put the panel underneath with space/4 padding.';
+place(listSet);
+
+// Accordion item
+var acc = [];
+async function accItem(open, st) {
+  var c = comp('Panel=' + (open ? 'Open' : 'Closed') + ', State=' + st, 'VERTICAL'); c.counterAxisSizingMode = 'FIXED'; c.resize(480, 10); c.primaryAxisSizingMode = 'AUTO';
+  edge(c, 'Bottom', 'Theme:border/default', 'Size:stroke/default');
+  var tr = AL('HORIZONTAL', { name: 'Trigger', counterAxisAlignItems: 'CENTER', primaryAxisAlignItems: 'SPACE_BETWEEN' });
+  pad(tr, 'Scale:space/4', 'Scale:space/6'); bind(tr, 'itemSpacing', 'Scale:space/4');
+  if (st === 'Hover') fill(tr, 'Theme:fill/subtle');
+  if (st === 'Focus') { ring(tr); radius(tr, 'Size:radius/item'); }
+  var t = await T('What should I pack for the desert?', 'title-base', 'Theme:text/primary'); t.name = 'Title';
+  add(tr, [t, icon('Chevron', open ? UP : DOWN, 20, 'Theme:text/secondary')]); add(c, [tr]); fillW(tr); t.layoutSizingHorizontal = 'FILL'; t.textAutoResize = 'HEIGHT';
+  if (open) {
+    var pn = AL('VERTICAL', { name: 'Panel' }); bind(pn, 'paddingBottom', 'Scale:space/4'); bind(pn, ['paddingLeft', 'paddingRight'], 'Scale:space/6');
+    var a = await T('Water, then more water. Layers for cold nights, a hat, and sun protection. Most parks have no shade at the trailhead.', 'body-base', 'Theme:text/secondary'); a.name = 'Answer';
+    add(pn, [a]); add(c, [pn]); fillW(pn); fillW(a); a.textAutoResize = 'HEIGHT';
+  }
+  if (st === 'Disabled') { c.opacity = 0.5; bind(c, 'opacity', 'Size:disclosure/opacity-disabled'); }
+  return c;
+}
+for (var op of [false, true]) for (var s of ['Default', 'Hover', 'Focus', 'Disabled']) acc.push(await accItem(op, s));
+var accSet = figma.combineAsVariants(acc, figma.currentPage); accSet.name = 'Accordion item';
+// States across, Closed over Open; variants top-aligned in 520 by 143 cells.
+accSet.layoutMode = 'NONE'; accSet.children.forEach(function (k, i) { k.x = 32 + (i % 4) * 520; k.y = 32 + Math.floor(i / 4) * 143; });
+accSet.resize(64 + 4 * 520 - 24, 64 + 2 * 143); frameSet(accSet);
+textProp(accSet, 'Title', 'What should I pack for the desert?', 'Title'); textProp(accSet, 'Answer', 'Water, then more water. Layers for cold nights, a hat, and sun protection. Most parks have no shade at the trailhead.', 'Answer');
+accSet.description = 'One question and its answer. The trigger is title-base text with a chevron that flips when open; the answer is body-base in text/secondary. A border/default line separates items.';
+place(accSet);
+var QS = [['What should I pack for the desert?', true], ['Do I need a park pass?', false], ['Can I bring my dog?', false]];
+var accs = [];
+for (var vname of ['Default', 'Separated', 'Bordered']) {
+  var c = comp('Variant=' + vname, 'VERTICAL'); c.counterAxisSizingMode = 'FIXED'; c.resize(480, 10); c.primaryAxisSizingMode = 'AUTO';
+  if (vname === 'Separated') bind(c, 'itemSpacing', 'Scale:space/2');
+  if (vname === 'Bordered') { stroke(c, 'Theme:border/default', 'Size:stroke/default'); radius(c, 'Size:radius/surface'); c.clipsContent = true; }
+  for (var q = 0; q < QS.length; q++) {
+    var it = pick(accSet, 'Panel=' + (QS[q][1] ? 'Open' : 'Closed') + ', State=Default'); setP(it, { Title: QS[q][0] }); add(c, [it]); fillW(it); it.layoutSizingVertical = 'HUG';
+    if (vname === 'Separated') { it.strokeTopWeight = it.strokeLeftWeight = it.strokeRightWeight = it.strokeBottomWeight = 1; radius(it, 'Size:radius/chrome'); it.clipsContent = true; }
+    else if (q === QS.length - 1) it.strokeBottomWeight = 0;
+  }
+  accs.push(c);
+}
+var accGroup = figma.combineAsVariants(accs, figma.currentPage); accGroup.name = 'Accordion'; row(accGroup, 64);
+accGroup.description = 'Accordion item instances stacked. Default divides them with lines; Separated gives each its own border and radius/chrome corners with space/2 between; Bordered wraps the whole list in a radius/surface box.';
+place(accGroup);
+
+// Navigation menu
+var navs = [];
+async function trig(kind, st) {
+  var c = comp('Kind=' + kind + ', State=' + st); c.counterAxisAlignItems = 'CENTER';
+  c.counterAxisSizingMode = 'FIXED'; c.resize(100, 36); c.primaryAxisSizingMode = 'AUTO'; bind(c, 'height', 'Size:control/height-md');
+  bind(c, ['paddingLeft', 'paddingRight'], 'Size:control/padding-inline'); bind(c, 'itemSpacing', 'Size:gap/control'); radius(c, 'Size:radius/item');
+  var fg = st === 'Open' ? 'Theme:text/on-tint' : 'Theme:text/primary';
+  if (st === 'Hover') fill(c, 'Theme:fill/subtle'); if (st === 'Open') fill(c, 'Theme:interactive/tint-hover'); if (st === 'Focus') ring(c);
+  var t = await T('Destinations', 'trigger-base', fg); t.name = 'Label'; add(c, [t]);
+  if (kind === 'Menu') add(c, [icon('Chevron', st === 'Open' ? UP : DOWN, 16, fg)]);
+  return c;
+}
+for (var s of ['Default', 'Hover', 'Open', 'Focus']) navs.push(await trig('Menu', s));
+for (var s of ['Default', 'Hover', 'Focus']) navs.push(await trig('Link', s));
+var trigSet = figma.combineAsVariants(navs, figma.currentPage); trigSet.name = 'Nav trigger'; grid(trigSet, 4, 180, 64);
+textProp(trigSet, 'Label', 'Destinations', 'Label');
+trigSet.description = 'An item on the navigation bar. Menu opens a panel and shows a chevron; Link goes straight to a page. Control height and trigger-base text, so the bar lines up with buttons. Open is the menu tint.';
+place(trigSet);
+var links = [];
+for (var s of ['Default', 'Hover']) {
+  var c = comp('State=' + s, 'VERTICAL'); bind(c, ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], 'Scale:space/2'); bind(c, 'itemSpacing', 'Scale:space/1'); radius(c, 'Size:radius/item');
+  c.counterAxisSizingMode = 'FIXED'; c.resize(192, 10); c.primaryAxisSizingMode = 'AUTO'; bind(c, 'width', 'Size:navigation-menu/column-width');
+  if (s === 'Hover') fill(c, 'Theme:fill/subtle');
+  var t = await T('Mojave', 'trigger-base', 'Theme:text/primary'); t.name = 'Title';
+  var d = await T('Joshua trees, lava tubes and dunes.', 'body-condense', 'Theme:text/secondary'); d.name = 'Description';
+  add(c, [t, d]); fillW(t); fillW(d); d.textAutoResize = 'HEIGHT'; links.push(c);
+}
+var linkSet = figma.combineAsVariants(links, figma.currentPage); linkSet.name = 'Nav link'; row(linkSet, 48);
+textProp(linkSet, 'Title', 'Mojave', 'Title'); textProp(linkSet, 'Description', 'Joshua trees, lava tubes and dunes.', 'Description');
+linkSet.description = 'A link inside an open navigation panel: a title in trigger-base over a short description. Column width navigation-menu/column-width.';
+place(linkSet);
+function navBar(open) {
+  var b = bar('Bar');
+  var a = pick(trigSet, 'Kind=Link, State=Default'); setP(a, { Label: 'Overview' });
+  var m = pick(trigSet, 'Kind=Menu, State=' + (open ? 'Open' : 'Default')); setP(m, { Label: 'Destinations' });
+  var p = pick(trigSet, 'Kind=Menu, State=Default'); setP(p, { Label: 'Plan a trip' });
+  add(b, [a, m, p]); return b;
+}
+var navSets = [];
+var n1 = comp('Content=Closed', 'VERTICAL'); add(n1, [navBar(false)]); navSets.push(n1);
+var n2 = comp('Content=Open', 'VERTICAL'); bind(n2, 'itemSpacing', 'Scale:space/2-5'); add(n2, [navBar(true)]);
+var pop = AL('VERTICAL', { name: 'Popup' }); fill(pop, 'Theme:surface/canvas'); stroke(pop, 'Theme:border/default', 'Size:popup/border-width'); radius(pop, 'Size:popup/radius');
+await pop.setEffectStyleIdAsync(ES['elevation/lg'].id); bind(pop, ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], 'Size:popup/padding-panel'); bind(pop, 'itemSpacing', 'Scale:space/2');
+var hd = await T('DESERTS', 'eyebrow-condense', 'Theme:text/secondary'); hd.name = 'Heading';
+var grid2 = AL('HORIZONTAL', { name: 'Links', layoutWrap: 'WRAP' }); bind(grid2, 'itemSpacing', 'Scale:space/2'); bind(grid2, 'counterAxisSpacing', 'Scale:space/2');
+var LK = [['Mojave', 'Joshua trees, lava tubes and dunes.'], ['Sonoran', 'Saguaros and summer monsoons.'], ['Great Basin', 'Sagebrush, bristlecones and cold nights.'], ['Chihuahuan', 'Big Bend and white sand.']];
+for (var q = 0; q < LK.length; q++) { var li = pick(linkSet, 'State=' + (q === 0 ? 'Hover' : 'Default')); setP(li, { Title: LK[q][0], Description: LK[q][1] }); add(grid2, [li]); }
+grid2.primaryAxisSizingMode = 'FIXED'; grid2.resize(392, grid2.height);
+add(pop, [hd, grid2]); pop.clipsContent = true;
+var popWrap = AL('HORIZONTAL', { name: 'Under Destinations', paddingLeft: 60 }); add(popWrap, [pop]); add(n2, [popWrap]); navSets.push(n2);
+var navSet = figma.combineAsVariants(navSets, figma.currentPage); navSet.name = 'Navigation menu'; row(navSet, 64);
+navSet.description = 'Site navigation on a bar surface (surface/tray, bar/padding, bar/radius). A Menu trigger opens a popup panel of Nav links, on the shared popup surface with popup/padding-panel.';
+place(navSet);
+
+// Toolbar and Toggle group
+var tbs = [];
+var t1 = comp('Content=Formatting'); t1.counterAxisAlignItems = 'CENTER';
+var tb1 = bar('Toolbar'); bind(tb1, 'itemSpacing', 'Size:bar/group-gap');
+var g1 = AL('HORIZONTAL', { name: 'Group', counterAxisAlignItems: 'CENTER' }); bind(g1, 'itemSpacing', 'Size:bar/gap'); add(g1, [tog('Bold', true), tog('Italic', false), tog('Underline', false)]);
+var g2 = AL('HORIZONTAL', { name: 'Group', counterAxisAlignItems: 'CENTER' }); bind(g2, 'itemSpacing', 'Size:bar/gap'); add(g2, [tog('Left', true), tog('Center', false)]);
+add(tb1, [g1, sep(), g2]); add(t1, [tb1]); tbs.push(t1);
+var t2 = comp('Content=Mixed'); t2.counterAxisAlignItems = 'CENTER';
+var tb2 = bar('Toolbar'); bind(tb2, 'itemSpacing', 'Size:bar/group-gap');
+var g3 = AL('HORIZONTAL', { name: 'Group', counterAxisAlignItems: 'CENTER' }); bind(g3, 'itemSpacing', 'Size:bar/gap'); add(g3, [tog('Bold', false), tog('Italic', false)]);
+var sh = pick(BTN, 'Emphasis=Quiet, Size=sm, State=Default, Content=Label'); setP(sh, { Label: 'Share' });
+var lk = AL('HORIZONTAL', { name: 'Link', counterAxisAlignItems: 'CENTER' }); bind(lk, ['paddingLeft', 'paddingRight'], 'Size:control/padding-inline-sm'); add(lk, [await T('Edited 2 min ago', 'body-base', 'Theme:text/secondary')]);
+add(tb2, [g3, sep(), sh, lk]); add(t2, [tb2]); tbs.push(t2);
+var tbSet = figma.combineAsVariants(tbs, figma.currentPage); tbSet.name = 'Toolbar'; row(tbSet, 64);
+tbSet.description = 'A bar of controls for the thing below it. Groups of Toggles and Buttons sit bar/group-gap apart with a separator between; inside a group they are bar/gap apart.';
+place(tbSet);
+var tgs = [];
+for (var kd of [['Single', [['Day', false], ['Week', true], ['Month', false]]], ['Multiple', [['Tents', true], ['RVs', true], ['Cabins', false]]]]) {
+  var c = comp('Kind=' + kd[0]); c.counterAxisAlignItems = 'CENTER';
+  var g = bar('Group'); kd[1].forEach(function (x) { var ti = tog(x[0], x[1], 'md'); radius(ti, 'Size:radius/item'); add(g, [ti]); });
+  add(c, [g]); tgs.push(c);
+}
+var tgSet = figma.combineAsVariants(tgs, figma.currentPage); tgSet.name = 'Toggle group'; row(tgSet, 64);
+tgSet.description = 'Toggles on a bar surface, with radius/item corners so they read as one set. Single allows one on at a time, like a segmented control; Multiple allows any.';
+place(tgSet);
+var col = figma.currentPage.children.filter(function (n) { return n.name === 'Components'; })[0];
+return { col: col.id, sets: figma.currentPage.findAllWithCriteria({ types: ['COMPONENT_SET'] }).map(function (s) { return s.name + ' ' + s.id; }) };

package/figma/library/pages/13-disclosure/02-collapsible.js

@@ -0,0 +1,39 @@
+// Disclosure and navigation: Collapsible. Run after 01-disclosure.js.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+var V = C.V, COL = C.COL, TS = C.TS, v = C.v, paint = C.paint, fill = C.fill, stroke = C.stroke, bind = C.bind, radius = C.radius, pad = C.pad, AL = C.AL, add = C.add, T = C.T, mode = C.mode, page = C.page;
+var shadow = C.shadow, focusRing = C.focusRing, icon = C.icon, comp = C.comp, textProp = C.textProp, boolProp = C.boolProp, place = C.place, removeOld = C.removeOld, arrange = C.arrange;
+var here = function (n) { return figma.currentPage.findOne(function (x) { return x.type === 'COMPONENT_SET' && x.name === n; }); };
+await page('Disclosure and navigation');
+figma.currentPage.findAll(function (x) { return (x.type === 'COMPONENT_SET' || (x.type === 'FRAME' && x.getSharedPluginData('loomiere', 'wrap') === '1')) && x.name === 'Collapsible'; }).forEach(function (x) { x.remove(); });
+var ES = {}; (await figma.getLocalEffectStylesAsync()).forEach(function (s) { ES[s.name] = s; });
+function frameSet(set) { 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; }
+function grid(set, cols, colW, rowH) {
+  set.layoutMode = 'NONE';
+  set.children.forEach(function (k, i) { var r = Math.floor(i / cols); k.x = 32 + (i % cols) * colW; k.y = 32 + r * rowH + Math.round((rowH - k.height) / 2); });
+  set.resize(64 + cols * colW - 24, 64 + Math.ceil(set.children.length / cols) * rowH); frameSet(set);
+}
+var RIGHT = 'M 6 4 L 10 8 L 6 12', DOWN = 'M 4 6 L 8 10 L 12 6';
+var cs = [];
+for (var panel of ['Closed', 'Open']) for (var st of ['Default', 'Hover', 'Focus', 'Disabled']) {
+  var c = comp('Panel=' + panel + ', State=' + st, 'VERTICAL'); bind(c, 'itemSpacing', 'Scale:space/1'); c.counterAxisSizingMode = 'FIXED'; c.resize(360, 10); c.primaryAxisSizingMode = 'AUTO'; c.clipsContent = false;
+  var tr = AL('HORIZONTAL', { name: 'Trigger', counterAxisAlignItems: 'CENTER' }); bind(tr, 'itemSpacing', 'Scale:space/2'); bind(tr, ['paddingTop', 'paddingBottom'], 'Scale:space/1'); bind(tr, ['paddingLeft', 'paddingRight'], 'Scale:space/2'); radius(tr, 'Size:item/radius');
+  if (st === 'Hover') fill(tr, 'Theme:fill/subtle');
+  if (st === 'Focus') await tr.setEffectStyleIdAsync(ES['focus/ring'].id);
+  var lab = await T('Trip details', 'subtitle-base', 'Theme:text/primary'); lab.name = 'Label';
+  add(tr, [icon('Chevron', panel === 'Open' ? DOWN : RIGHT, 16, 'Theme:text/secondary'), lab]);
+  add(c, [tr]); tr.layoutSizingHorizontal = 'FILL';
+  if (panel === 'Open') {
+    var pn = AL('VERTICAL', { name: 'Panel' }); fill(pn, 'Theme:surface/overlay'); radius(pn, 'Size:item/radius'); bind(pn, ['paddingTop', 'paddingBottom', 'paddingRight'], 'Scale:space/2'); pn.paddingLeft = 32;
+    var tx = await T('Three nights at Jumbo Rocks, site 42. Check in after noon; quiet hours start at ten.', 'body-base', 'Theme:text/secondary'); tx.name = 'Content';
+    add(c, [pn]); pn.layoutSizingHorizontal = 'FILL'; add(pn, [tx]); tx.layoutSizingHorizontal = 'FILL'; tx.textAutoResize = 'HEIGHT';
+  }
+  if (st === 'Disabled') bind(c, 'opacity', 'Size:disclosure/opacity-disabled');
+  cs.push(c);
+}
+var set = figma.combineAsVariants(cs, figma.currentPage); set.name = 'Collapsible'; grid(set, 4, 400, 140);
+textProp(set, 'Label', 'Trip details', 'Label');
+set.description = 'One panel that opens and closes under its trigger. The chevron points right when closed and down when open; the panel sits on the overlay surface, its text lined up with the trigger label.';
+var col = figma.currentPage.findOne(function (n) { return n.type === 'FRAME' && n.name === 'Components' && n.parent === figma.currentPage; });
+col.appendChild(set);
+return set.id + ' ' + Math.round(set.width) + 'x' + Math.round(set.height) + ' [' + set.children.map(function (k) { return Math.round(k.width) + 'x' + Math.round(k.height); }).join(' ') + ']';

package/figma/library/pages/13-disclosure/03-labels.js

@@ -0,0 +1,16 @@
+// Disclosure and navigation: a header and row and column labels for each set. Run after 01 and 02.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+await C.page('Disclosure and navigation');
+// Short header lines; sets not listed use their descriptions.
+return await C.labelSets({
+  Tab: "One tab. Selected takes accent text, the selected text style and an indicator line on the edge facing the panel. Hover is the fill/subtle wash.",
+  "Tab list": "Tab instances over a border/default divider; the selected line sits on it.",
+  "Accordion item": "A question and its answer. title-base trigger with a chevron that flips when open; body-base answer in text/secondary.",
+  Accordion: "Items stacked three ways: divided by lines, separated with their own borders, or wrapped in one box.",
+  "Nav trigger": "An item on the navigation bar. Menu opens a panel; Link goes straight to a page. Control height and trigger-base text.",
+  "Nav link": "A link in an open navigation panel: trigger-base title over a short description.",
+  "Navigation menu": "Site navigation on a bar surface; a Menu trigger opens a popup panel of Nav links.",
+  Toolbar: "Groups of controls for the content below, bar/group-gap apart with a separator between.",
+  "Toggle group": "Toggles on a bar surface with radius/item corners. Single works like a segmented control."
+});