@fieldia/widgets 0.10.0 → 0.12.0

package/src/lib/styles.mjs

@@ -1,6 +1,9 @@
 import { KINDS_CSS } from './styles-kinds.mjs';
 import { CHOICES_CSS } from './styles-choices.mjs';
 import { INPUTS_CSS } from './styles-inputs.mjs';
+import { PARTS_CSS } from './styles-parts.mjs';
+import { SHEET_CSS } from './styles-sheet.mjs';
+import { BUSINESS_CSS } from './styles-business.mjs';
 /**
  * Fieldia's stylesheet: two skins and the layout chrome, all scoped to the
  * form's own root (`.fd-form[data-fd-skin=…]`), so two forms on one page can
@@ -15,6 +18,13 @@ import { INPUTS_CSS } from './styles-inputs.mjs';
  * form mirrors without a second stylesheet.
  */
 import { LAYOUT_CSS } from './layout-styles.mjs';
+/**
+ * The widths of a form at which its groups take their medium and their narrow
+ * columns: up to 760px and up to 520px of the form's own width, as the
+ * stylesheet's @container rules say (a spec holds the two together). What
+ * shows a form at a width — the designer's canvas — asks these.
+ */
+export const FORM_WIDTHS = { medium: 760, narrow: 520 };
 /** The skins and the parts' chrome. One literal, so the script bundle can minify it as CSS. */
 const SKINS_CSS = /* css */ `
 /* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. One inside a form
@@ -111,6 +121,9 @@ const SKINS_CSS = /* css */ `
   align-items: start;
 }
 .fd-grid > * { grid-column: span min(var(--fd-span, 1), var(--fd-cols)); }
+/* Twelfths keep the page's gap while it takes under half their width, so they line up with the columns
+   round them; in a narrow column it shrinks with them instead of pushing past its edge. */
+.fd-grid[data-twelfths] { column-gap: min(var(--fd-gap-x), 100% / 24); }
 .fd-field { display: grid; gap: 4px; min-width: 0; }
 .fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }
 /* The ✓ of a field filled in right, by its label. */
@@ -119,6 +132,12 @@ const SKINS_CSS = /* css */ `
 .fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::after { content: ""; }
 .fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::before { content: "* "; color: var(--fd-error); }
 .fd-help { color: var(--fd-muted); font-size: 12.5px; }
+/* A field's help behind a (?) by its label: a bubble on hover, focus or a tap. */
+.fd-help-tip-wrap { position: relative; display: inline-flex; vertical-align: 0.05em; margin-inline-start: 6px; }
+.fd-help-tip { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--fd-border); border-radius: 50%; color: var(--fd-muted); font-size: 11px; font-weight: 600; line-height: 1; cursor: help; }
+.fd-help-tip:hover, .fd-help-tip[aria-expanded="true"] { color: var(--fd-accent); border-color: var(--fd-accent); }
+.fd-help-tip:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-help-bubble { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: -8px; z-index: 30; width: max-content; max-width: min(280px, 70vw); padding: 6px 9px; border-radius: 6px; background: var(--fd-text); color: var(--fd-surface); font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: normal; box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
 /*
  * A page's words run the way they are written — a sentence left in English on
  * an Arabic page keeps its full stop at its end — and line up with the form.
@@ -146,6 +165,18 @@ const SKINS_CSS = /* css */ `
 .fd-form[data-fd-skin="underline"] .fd-field[data-type="one2many"] { grid-template-columns: minmax(0, 1fr); }
 .fd-form[data-fd-skin="underline"] .fd-field[data-type="one2many"] > * { grid-column: 1 !important; }
 .fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > :not(.fd-label) { grid-column: 2; }
+/* A row of twelfths led by a field with its label beside — the skin's (data-row="skin") or the page's
+   ("beside") — Flectra's o_row: that label sits with the labels round it, the parts share the values' room. */
+.fd-form[data-fd-skin="underline"] .fd-section[data-row="skin"] { --fd-row-label: var(--fd-label-width, 11em); --fd-row-gap: 12px; --fd-row-place: absolute; --fd-row-drop: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2)); }
+.fd-form .fd-section[data-row="beside"] { --fd-row-label: var(--fd-label-width, 140px); --fd-row-gap: 14px; --fd-row-place: absolute; --fd-row-drop: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2)); }
+.fd-form .fd-section[data-row] { padding-inline-start: calc(var(--fd-row-label, 0px) + var(--fd-row-gap, 0px)); }
+.fd-form .fd-section[data-row] > .fd-grid > .fd-field:first-child { grid-template-columns: minmax(0, 1fr); position: relative; }
+.fd-form .fd-section[data-row] > .fd-grid > .fd-field:first-child > :not(.fd-label) { grid-column: 1; }
+.fd-form .fd-section[data-row] > .fd-grid > .fd-field:first-child > .fd-label {
+  /* Out of the field's own box, back over the row's room for it — where the row has one. */
+  position: var(--fd-row-place, static); inset-inline-start: calc(-1 * (var(--fd-row-label, 0px) + var(--fd-row-gap, 0px))); inset-block-start: 0;
+  width: var(--fd-row-label, auto); padding-block-start: var(--fd-row-drop, 0px);
+}
 /* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */
 @container (max-width: 760px) {
   .fd-form[data-fd-skin="underline"] .fd-grid { --fd-cols: 1; }
@@ -157,6 +188,9 @@ const SKINS_CSS = /* css */ `
 }
 @container (max-width: 520px) {
   .fd-grid { --fd-cols: 1; }
+  /* Labels go above here: a row's first one too, the parts stacked under it. */
+  .fd-form .fd-section.fd-section[data-row] { --fd-row-label: auto; --fd-row-gap: 0px; --fd-row-place: static; --fd-row-drop: 0px; }
+  .fd-form .fd-section[data-row] { padding-inline-start: 0; }
   .fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) { grid-template-columns: minmax(0, 1fr); }
   .fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > * { grid-column: 1 !important; }
   /* The narrow count, or one column when only the medium one was given. */
@@ -191,6 +225,9 @@ const SKINS_CSS = /* css */ `
 /* A whole form locked reads as a record: plain values in either skin, no boxes, and no prompts to type. */
 .fd-form[data-readonly] .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); }
 .fd-form[data-readonly] .fd-input::placeholder { color: transparent; }
+/* Nothing to read in a read-only box draws nothing, in either skin: no prompt to type, and no date's dd.mm.yyyy or its calendar. */
+.fd-input[readonly]::placeholder, .fd-form .fd-input.fd-blank[readonly] { color: transparent; }
+.fd-blank[readonly]::-webkit-calendar-picker-indicator { display: none; }
 .fd-form[data-readonly] select.fd-input:disabled { appearance: none; background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); opacity: 1; }
 .fd-input[aria-invalid="true"] { border-color: var(--fd-error); }
 .fd-form[data-fd-skin="outlined"] .fd-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }
@@ -301,10 +338,66 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }
 .fd-lines-table .fd-lines-grip { width: 1px; min-width: 0; padding-inline: 6px 2px; }
 .fd-line-grip { display: block; margin-block-start: 7px; cursor: grab; }
-.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
+.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; min-width: 24px; min-height: 24px; }
 .fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }
+/* A table's own rules: a line's or a cell's tone and bold (Flectra's decoration-*), and buttons on a line. */
+.fd-lines-table [data-tone="info"] { --fd-line-tone: var(--fd-info); --fd-tone: var(--fd-info); --fd-tone-soft: var(--fd-info-soft); }
+.fd-lines-table [data-tone="success"] { --fd-line-tone: var(--fd-success); --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }
+.fd-lines-table [data-tone="warning"] { --fd-line-tone: var(--fd-warning); --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }
+.fd-lines-table [data-tone="danger"] { --fd-line-tone: var(--fd-error); --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }
+.fd-lines-table [data-tone="muted"] { --fd-line-tone: var(--fd-muted); --fd-tone: var(--fd-muted); --fd-tone-soft: color-mix(in srgb, var(--fd-muted) 14%, transparent); }
+.fd-lines-table [data-tone] :is(input, select, textarea, .fd-input, .fd-display) { color: var(--fd-line-tone); -webkit-text-fill-color: var(--fd-line-tone); }
+.fd-lines-table :is(.fd-line-bold, .fd-cell-bold) :is(input, select, textarea, .fd-input, .fd-display) { font-weight: 600; }
+.fd-lines-table td.fd-lines-tools { white-space: nowrap; }
+/* With buttons on some lines, every line's × keeps to the end, so they line up. */
+.fd-lines-table:has(.fd-line-button) td.fd-lines-tools { text-align: end; padding-inline-end: 4px; }
+.fd-line-button { padding: 2px 6px; font-size: 12.5px; vertical-align: middle; }
+.fd-line-button-icon { padding: 4px; color: var(--fd-muted); }
+.fd-line-button-icon:hover { color: var(--fd-accent); }
+.fd-line-button svg { width: 15px; height: 15px; display: block; }
 .fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }
 .fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }
+.fd-lines-control { display: inline-flex; align-items: center; gap: 6px; }
+.fd-lines-control svg, .fd-lines-chosen-button svg { width: 15px; height: 15px; }
+/* Lines chosen for the table's buttons: a tick before each line's grip, and a bar of buttons over the table. */
+.fd-line-lead { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 6px; }
+.fd-line-lead .fd-line-grip { margin-block-start: 0; }
+.fd-lines-table th.fd-lines-grip:has(.fd-line-pick-all) { padding-block: 4px; }
+.fd-lines-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; border-radius: var(--fd-radius); background: var(--fd-accent-soft); }
+.fd-lines-chosen[hidden] { display: none; }
+.fd-lines-chosen-count { font-weight: 600; font-size: 13px; margin-inline-end: 6px; }
+.fd-lines-chosen-button { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; }
+/* A line opened in a dialog: its own record's page, or its every field. */
+.fd-lines-table .fd-line-open { border: none; background: none; cursor: pointer; color: var(--fd-accent); font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
+.fd-lines-table .fd-line-open:hover { background: var(--fd-accent-soft); }
+.fd-links-table td { vertical-align: middle; }
+.fd-links-table .fd-value-text { padding-block: 4px; }
+/* Columns as wide as they hold (fit: content), the widest taking what is left. */
+.fd-lines[data-fit="content"] .fd-lines-table { width: auto; max-width: 100%; }
+.fd-lines[data-fit="content"] .fd-lines-table td { min-width: 0; }
+/* Lines as cards (cards: narrow on a phone, or always): each a box, every cell its column's label above its value. */
+.fd-lines[data-cards] { container: fd-lines / inline-size; }
+@container fd-lines (max-width: 520px) {
+  .fd-lines[data-cards="narrow"] .fd-lines-table, .fd-lines[data-cards="narrow"] .fd-lines-table :is(tbody, tfoot) { display: block; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table thead { display: none; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; position: relative; padding: 10px 12px; margin-block-end: 8px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td { display: block; border: none; padding: 0; min-width: 0; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td[data-label]:not([colspan]:not([colspan="1"]))::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--fd-muted); }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td.fd-lines-grip { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; padding: 0; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td.fd-lines-grip .fd-line-grip { display: none; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table tr:has(.fd-line-pick) { padding-inline-start: 36px; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td.fd-lines-tools { width: auto; text-align: end; }
+  .fd-lines[data-cards="narrow"] .fd-lines-totals td:empty { display: none; }
+}
+.fd-lines[data-cards="always"] .fd-lines-table, .fd-lines[data-cards="always"] .fd-lines-table :is(tbody, tfoot) { display: block; }
+.fd-lines[data-cards="always"] .fd-lines-table thead { display: none; }
+.fd-lines[data-cards="always"] .fd-lines-table tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 12px; position: relative; padding: 10px 12px; margin-block-end: 8px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-lines[data-cards="always"] .fd-lines-table td { display: block; border: none; padding: 0; min-width: 0; }
+.fd-lines[data-cards="always"] .fd-lines-table td[data-label]:not([colspan]:not([colspan="1"]))::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--fd-muted); }
+.fd-lines[data-cards="always"] .fd-lines-table td.fd-lines-grip, .fd-lines[data-cards="always"] .fd-lines-table td.fd-lines-tools { grid-column: 1 / -1; width: auto; }
+.fd-lines[data-cards="always"] .fd-lines-table td.fd-lines-tools { text-align: end; }
+.fd-line-copy { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
+.fd-line-copy:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }
 /* A section heads the lines below it; a note reads as a remark between them. */
 .fd-line-section td { background: var(--fd-page); }
 .fd-line-section .fd-input { font-weight: 600; }
@@ -346,25 +439,46 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-file-confirm:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
 .fd-file-note:empty { display: none; }
 .fd-file-note { color: var(--fd-warning); }
+/* Over the files: how many, and the switch between a list and pictures, at the end. */
+.fd-file-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; justify-self: stretch; }
+.fd-file-views { display: flex; gap: 2px; margin-inline-start: auto; padding: 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-page); }
+.fd-file-views button {
+  display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; font: inherit; font-size: 13px; color: var(--fd-muted); cursor: pointer;
+  border: none; border-radius: calc(var(--fd-control-radius) - 2px); background: none;
+}
+.fd-file-views [aria-pressed="true"] { color: var(--fd-text); background: var(--fd-surface); box-shadow: 0 0 0 1px var(--fd-border); }
 /* Thumbnails: tiles in a row that wraps, the picker the last of them. */
 .fd-files-thumbs { display: flex; flex-wrap: wrap; align-items: flex-start; }
-.fd-files-thumbs > * { flex-basis: 100%; order: 2; }
-.fd-files-thumbs > .fd-files { display: contents; }
-.fd-files-thumbs .fd-file-item, .fd-image-pick { flex: none; width: 96px; height: 96px; order: 0; }
-.fd-files-thumbs > .fd-file-count { order: -1; }
+.fd-files-thumbs > * { flex-basis: 100%; }
+:is(.fd-files-thumbs, .fd-files-cards) > .fd-files { display: contents; }
+.fd-files-thumbs .fd-file-item, .fd-image-pick { flex: none; width: 96px; height: 96px; }
 .fd-files-thumbs .fd-file-open { height: 100%; padding: 6px; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; font-size: 12px; }
-.fd-files-thumbs .fd-file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
+:is(.fd-files-thumbs, .fd-files-cards) .fd-file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
 .fd-files-thumbs .fd-file-name { flex: none; max-width: 100%; }
 .fd-files-thumbs .fd-file-size, .fd-files-thumbs .fd-file-thumb ~ * { display: none; }
-.fd-files-thumbs .fd-file-remove {
+:is(.fd-files-thumbs, .fd-files-cards) .fd-file-remove {
   position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 26px; height: 26px; font-size: 17px;
   background: rgba(15, 20, 25, 0.62); color: #fff; opacity: 0;
 }
 .fd-file-item:is(:hover, :focus-within) .fd-file-remove { opacity: 1; }
+/* A screen with no pointer to hover with shows each tile's remove. */
+@media (hover: none) { .fd-file-item .fd-file-remove { opacity: 1; } }
 .fd-image-pick {
-  order: 1; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center; font-size: 12px;
+  display: grid; place-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center; font-size: 12px;
   border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius); background: var(--fd-page);
 }
+/* Cards: a picture over each file's name, in two lines at most, and its size; as many to a row as fit. */
+.fd-files-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
+.fd-files-cards > * { grid-column: 1 / -1; }
+.fd-files-cards > .fd-image-pick { grid-column: auto; justify-self: stretch; width: auto; height: auto; min-height: 96px; }
+.fd-files-cards .fd-file-item { justify-self: stretch; align-items: stretch; }
+.fd-files-cards .fd-file-open { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 0 8px; overflow: hidden; }
+/* The picture fills its box; with none, the kind's page, large, on the box's ground. */
+.fd-file-picture { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin-block-end: 6px; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }
+.fd-file-picture .fd-file-icon { width: 44px; height: 56px; padding-block-end: 8px; font-size: 12px; }
+.fd-files-cards :is(.fd-file-name, .fd-file-size) { padding-inline: 8px; }
+.fd-files-cards .fd-file-name { flex: none; flex-wrap: wrap; font-size: 13px; line-height: 1.35; }
+.fd-files-cards .fd-file-name > span { max-width: 100%; }
 .fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; font-size: 13px; }
 /* A file open to look at: its name and tools over it, the image whole, a PDF or text filling the box. */
 .fd-file-viewer { max-width: 1000px; height: min(88vh, 100%); background: var(--fd-surface); }
@@ -400,6 +514,7 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-richtext-tool svg circle { fill: currentColor; stroke: none; }
 .fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }
 .fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }
+.fd-richtext.fd-blank[contenteditable="true"]::before { content: attr(data-placeholder); position: absolute; color: var(--fd-muted); opacity: 0.8; pointer-events: none; }
 .fd-richtext[contenteditable="false"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }
 .fd-richtext p { margin: 0 0 6px; }
 .fd-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }
@@ -429,12 +544,38 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-form[data-fd-skin="outlined"] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style="card"][data-on-page]) {
   background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: var(--fd-group-pad, 20px 24px);
 }
-.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }
+/* A saved form placed in another: a quiet line while its page comes, and words in a dashed box when it cannot be shown. */
+.fd-form-part-note { margin: 0; color: var(--fd-muted); font-size: 13px; }
+.fd-form-part-problem { padding: 10px 12px; border: 1px dashed var(--fd-border); border-radius: var(--fd-radius); }
+.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; scrollbar-width: none; }
+.fd-tablist::-webkit-scrollbar { display: none; }
+/* Too long for its room: the tabs fade out at an edge with more past it, under a button that scrolls them along. */
+.fd-tabbar { position: relative; min-width: 0; --fd-fade: to right; }
+[dir="rtl"] .fd-tabbar { --fd-fade: to left; }
+/* Nothing shows under a button (28px); the tabs fade in over the next 36. */
+.fd-tabbar[data-more="start"] > .fd-tablist { mask-image: linear-gradient(var(--fd-fade), transparent 28px, #000 64px); }
+.fd-tabbar[data-more="end"] > .fd-tablist { mask-image: linear-gradient(var(--fd-fade), #000 calc(100% - 64px), transparent calc(100% - 28px)); }
+.fd-tabbar[data-more="start end"] > .fd-tablist { mask-image: linear-gradient(var(--fd-fade), transparent 28px, #000 64px, #000 calc(100% - 64px), transparent calc(100% - 28px)); }
+.fd-tabs-scroll {
+  position: absolute; inset-block: 0 1px; z-index: 1; width: 28px; padding: 0; border: none; background: none; cursor: pointer;
+  color: var(--fd-muted); display: grid; place-items: center;
+}
+.fd-tabs-scroll[hidden] { display: none; }
+.fd-tabs-scroll:hover { color: var(--fd-accent); }
+.fd-tabs-scroll::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 2px 2px; }
+.fd-tabs-before { inset-inline-start: 0; }
+.fd-tabs-after { inset-inline-end: 0; }
+.fd-tabs-before::before { transform: translateX(2px) rotate(45deg); }
+.fd-tabs-after::before { transform: translateX(-2px) rotate(-135deg); }
+[dir="rtl"] .fd-tabs-before::before { transform: translateX(-2px) rotate(-135deg); }
+[dir="rtl"] .fd-tabs-after::before { transform: translateX(2px) rotate(45deg); }
 .fd-tab {
   font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);
   border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;
 }
 .fd-tab[aria-selected="true"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }
+/* A tab with a problem in it, seen or not: a dot in the error colour after its words. */
+.fd-tab[data-problem]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 6px; border-radius: 50%; background: var(--fd-error); vertical-align: 0.15em; }
 .fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }
 
 /* ---- buttons ---------------------------------------------------------- */
@@ -482,6 +623,11 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
 /* The side panel goes under the sheet before the sheet is left too narrow for a label beside its value. */
 @container (max-width: 1000px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }
+/* A part hidden at some widths of the form (hideOn): narrow up to 520px, medium up to 760px, wide above — the form's own width, as its columns. */
+.fd-form { container-name: fd-form; }
+@container fd-form (max-width: 520px) { .fd-form [data-hide-on~="narrow"] { display: none !important; } }
+@container fd-form (min-width: 521px) and (max-width: 760px) { .fd-form [data-hide-on~="medium"] { display: none !important; } }
+@container fd-form (min-width: 761px) { .fd-form [data-hide-on~="wide"] { display: none !important; } }
 .fd-card {
   position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);
   border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;
@@ -491,14 +637,15 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
 .fd-ribbon {
   position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;
-  text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);
+  text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: #5f6670;
   text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;
 }
 [dir="rtl"] .fd-ribbon { transform: rotate(-45deg); }
-.fd-ribbon.fd-tone-danger { background: var(--fd-error); }
-.fd-ribbon.fd-tone-success { background: var(--fd-success); }
-.fd-ribbon.fd-tone-warning { background: #d97706; }
-.fd-ribbon.fd-tone-info { background: var(--fd-info); }
+/* White words on a ribbon in either scheme: fixed, deep colours, each at least 5:1 against white. */
+.fd-ribbon.fd-tone-danger { background: #c63c3d; }
+.fd-ribbon.fd-tone-success { background: #2e7d32; }
+.fd-ribbon.fd-tone-warning { background: #a14f00; }
+.fd-ribbon.fd-tone-info { background: #1365d9; }
 .fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }
 .fd-alert-message { flex: 1 1 auto; min-width: 0; }
 .fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }
@@ -565,6 +712,23 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-progress { display: grid; gap: 8px; }
 .fd-progress-text { color: var(--fd-muted); font-size: 13px; }
 .fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }
+/* A field's own value in a tone while a condition holds, and in bold (Flectra's decoration-* on a field). */
+.fd-field[data-tone="info"] { --fd-tone: var(--fd-info); --fd-tone-soft: var(--fd-info-soft); }
+.fd-field[data-tone="success"] { --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }
+.fd-field[data-tone="warning"] { --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }
+.fd-field[data-tone="danger"] { --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }
+.fd-field[data-tone="muted"] { --fd-tone: var(--fd-muted); --fd-tone-soft: color-mix(in srgb, var(--fd-muted) 14%, transparent); }
+.fd-field[data-tone] :is(input, select, textarea, .fd-value-text, .fd-pending) { color: var(--fd-tone); -webkit-text-fill-color: var(--fd-tone); }
+.fd-field.fd-value-bold :is(input, select, textarea, .fd-value-text, .fd-pending, .fd-value-badge) { font-weight: 700; }
+/* A value as a pill (widget badge): grey, or its tone's colour on its soft shade. */
+.fd-value-badge { justify-self: start; align-self: center; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--fd-tone, var(--fd-muted)); background: var(--fd-tone-soft, color-mix(in srgb, var(--fd-tone, var(--fd-muted)) 14%, transparent)); }
+.fd-value-badge[hidden] { display: none; }
+/* A value given its own tone by options.tones, over the part's. */
+.fd-value-badge[data-tone="info"] { --fd-tone: var(--fd-info); --fd-tone-soft: var(--fd-info-soft); }
+.fd-value-badge[data-tone="success"] { --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }
+.fd-value-badge[data-tone="warning"] { --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }
+.fd-value-badge[data-tone="danger"] { --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }
+.fd-value-badge[data-tone="muted"] { --fd-tone: var(--fd-muted); --fd-tone-soft: color-mix(in srgb, var(--fd-muted) 14%, transparent); }
 .fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
 .fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }
 .fd-calendar-button {
@@ -696,8 +860,34 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-dialog {
   background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;
   padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);
+  /* An edge of its own: in the dark scheme a shadow is lost on the dimmed page, so the box would barely stand out. */
+  border: 1px solid var(--fd-edge, transparent);
 }
 .fd-dialog p { margin: 0; }
+/* Words a step says: toasts at the foot of the screen, one over another, each in its tone; over the page and over a dialog or panel, whose own words they are too. */
+.fd-says {
+  position: fixed; inset-inline: 16px; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 1100;
+  display: grid; justify-items: center; gap: 8px; pointer-events: none;
+}
+.fd-say {
+  pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 420px;
+  padding-block: 8px; padding-inline: 14px 6px; border: 1px solid var(--fd-border); border-inline-start: 4px solid var(--fd-tone);
+  border-radius: max(var(--fd-control-radius), 6px); background: var(--fd-surface); color: var(--fd-text);
+  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.25); font-size: 13.5px;
+}
+.fd-say > span { flex: 1 1 auto; min-width: 0; }
+/* A button whose steps are running: busy, a turning ring beside its words, not pressed again. */
+.fd-button[aria-busy="true"], .fd-stat[aria-busy="true"] { cursor: progress; }
+.fd-button[aria-busy="true"]::after {
+  content: ""; width: 0.85em; height: 0.85em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
+  animation: fd-spin 0.8s linear infinite;
+}
+@keyframes fd-spin { to { rotate: 1turn; } }
+/* A page opened in a form's place: Back over it, the way the page reads. */
+.fd-back { margin: 8px 12px; }
+.fd-back::before { content: "←"; }
+.fd-back:dir(rtl)::before { content: "→"; }
+.fd-form[data-scheme] > .fd-back { margin: 12px 20px 0; }
 /* A page in a dialog: a head with its title and ×, a body that scrolls, a foot with Discard and Save & Close. */
 .fd-form-dialog {
   display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;
@@ -708,8 +898,10 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-form-dialog.fd-size-small { max-width: 440px; }
 .fd-form-dialog.fd-size-medium { max-width: 760px; }
 .fd-form-dialog.fd-size-large { max-width: 1080px; }
-.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }
-.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }
+/* A dialog of the full size, and a panel (below): the whole height, square, nothing round it. */
+.fd-form-dialog-backdrop:has(> .fd-size-full), .fd-form-panel-backdrop { padding: 0; }
+.fd-form-dialog:is(.fd-size-full, .fd-form-panel) { max-height: none; height: 100%; border-radius: 0; }
+.fd-size-full { max-width: none; }
 .fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }
 .fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }
 .fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }
@@ -730,10 +922,33 @@ button.fd-chip-label:hover { text-decoration: underline; }
 /* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */
 .fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }
 .fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }
-@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }
+/* A page in a side panel: at the inline-end edge unless it names another, the page behind dimmed, sliding in from its edge; on a phone, the whole screen. */
+.fd-form-panel-backdrop { justify-items: end; }
+.fd-form-panel { max-width: 560px; position: relative; }
+/* Its question before changes are dropped sits over the panel, not over the page. */
+.fd-form-panel > .fd-dialog-backdrop { position: absolute; }
+.fd-width-narrow { max-width: 420px; }
+.fd-width-wide { max-width: 720px; }
+/* The other edges: the start of the line as the page reads; the left, right, top or bottom whatever it reads, the top and bottom the whole width.
+   Each says where its slide starts (--fd-from) and which edge it steps back from (--fd-back): the right unless told. */
+.fd-form-panel[data-side="start"] { justify-self: start; }
+.fd-form-panel[data-side="left"] { justify-self: left; }
+.fd-form-panel[data-side="right"] { justify-self: right; }
+.fd-form-panel[data-side="top"] { align-self: start; --fd-from: 0 -100%; --fd-back: 48px 0 0; }
+.fd-form-panel[data-side="bottom"] { align-self: end; --fd-from: 0 100%; --fd-back: 0 0 48px; }
+.fd-form-panel[data-side="end"]:dir(rtl), .fd-form-panel[data-side="start"]:dir(ltr), .fd-form-panel[data-side="left"] { --fd-from: -100% 0; --fd-back: 0 0 0 48px; }
+.fd-form-panel:is([data-side="top"], [data-side="bottom"]) { max-width: none; height: 60%; }
+.fd-form-panel.fd-height-short { height: 40%; }
+.fd-form-panel.fd-height-tall { height: 85%; }
+/* A panel opened from another: the older one steps back from its own edge, still in sight. */
+.fd-form-panel[data-behind] { margin: var(--fd-back, 0 48px 0 0); }
+@media (max-width: 600px) { .fd-form-dialog.fd-form-panel[data-side] { max-width: none; height: 100%; margin: 0; --fd-from: 0 100%; } .fd-form-dialog.fd-form-panel[data-side="top"] { --fd-from: 0 -100%; } }
+@media (prefers-reduced-motion: no-preference) { .fd-form-panel { animation: fd-slide 0.25s ease-out; transition: margin 0.2s; } }
+@keyframes fd-slide { from { translate: var(--fd-from, 100% 0); } }
+@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } .fd-button[aria-busy="true"]::after { animation: none; } }
 `;
 /** Fieldia's whole stylesheet: the skins, then the layout over them, the inputs' details, the question kinds and the choices' details. */
-export const FIELDIA_CSS = SKINS_CSS + LAYOUT_CSS + INPUTS_CSS + KINDS_CSS + CHOICES_CSS;
+export const FIELDIA_CSS = SKINS_CSS + LAYOUT_CSS + INPUTS_CSS + SHEET_CSS + BUSINESS_CSS + KINDS_CSS + CHOICES_CSS + PARTS_CSS;
 const STYLE_ID = 'fieldia-styles';
 /** Add Fieldia's stylesheet to a document, once. */
 export function installStyles(document) {

package/src/lib/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,+FAA+F;AAC/F,MAAM,SAAS,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2sB3B,CAAC;AAEF,0IAA0I;AAC1I,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;AAEzF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,MAAM,UAAU,aAAa,CAAC,QAAkB;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAW,CAAC;AAEjE,+FAA+F;AAC/F,MAAM,SAAS,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAw5B3B,CAAC;AAEF,0IAA0I;AAC1I,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAEhI,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,MAAM,UAAU,aAAa,CAAC,QAAkB;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}

package/src/lib/tax-totals.d.mts

@@ -0,0 +1,2 @@
+import type { WidgetFactory } from './widgets.mjs';
+export declare const taxTotalsWidget: WidgetFactory;

package/src/lib/tax-totals.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetFactory } from './widgets';
+export declare const taxTotalsWidget: WidgetFactory;

package/src/lib/tax-totals.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.taxTotalsWidget = void 0;
+const kind_parts_1 = require("./kind-parts");
+const numbers_1 = require("./numbers");
+const num = (value) => (typeof value === 'number' ? value : Number(value) || 0);
+/** Flectra's tax_totals, or the plainer value, as subtotals with their groups and the total. */
+function read(value, untaxedWords) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const v = value;
+    if (Array.isArray(v['subtotals']) || v['groups_by_subtotal']) {
+        const by = (v['groups_by_subtotal'] ?? {});
+        const listed = v['subtotals'] ?? [{ name: untaxedWords, amount: num(v['amount_untaxed']) }];
+        const order = v['subtotals_order'] ?? listed.map((s) => s.name);
+        return {
+            subtotals: order.map((name) => ({
+                name,
+                amount: num(listed.find((s) => s.name === name)?.amount ?? v['amount_untaxed']),
+                groups: (by[name] ?? []).map((g, i) => ({ name: String(g['tax_group_name'] ?? ''), amount: num(g['tax_group_amount']), at: [name, i] })),
+            })),
+            total: num(v['amount_total']),
+        };
+    }
+    const groups = (Array.isArray(v['groups']) ? v['groups'] : []).map((g, i) => ({ name: String(g['name'] ?? ''), amount: num(g['amount']), at: i }));
+    return { subtotals: [{ name: untaxedWords, amount: num(v['untaxed']), groups }], total: num(v['total']) };
+}
+const taxTotalsWidget = ({ form, name, node, id, document, labels, locale = 'en' }) => {
+    const make = (0, kind_parts_1.maker)(document);
+    const words = (0, kind_parts_1.wordsFor)(labels, locale);
+    const options = node.options ?? {};
+    const currencyField = typeof options['currencyField'] === 'string' ? options['currencyField'] : null;
+    const fixed = typeof options['currency'] === 'string' ? options['currency'] : null;
+    const body = make('tbody');
+    const element = make('table', { id, class: 'fd-tax-totals' }, body);
+    let drawn = '';
+    /** The value with one group's amount typed in, and the total following. */
+    function typed(group, amount) {
+        const value = JSON.parse(JSON.stringify(form.getState().values[name]));
+        const was = group.amount;
+        if (Array.isArray(group.at)) {
+            const [subtotal, i] = group.at;
+            (value['groups_by_subtotal'][subtotal][i])['tax_group_amount'] = amount;
+            value['amount_total'] = Math.round((num(value['amount_total']) + amount - was) * 100) / 100;
+        }
+        else {
+            value['groups'][group.at]['amount'] = amount;
+            value['total'] = Math.round((num(value['total']) + amount - was) * 100) / 100;
+        }
+        form.setValue(name, value);
+    }
+    return {
+        element,
+        focus: () => element.querySelector('input')?.focus(),
+        update(state) {
+            const totals = read(state.value, words.untaxed);
+            const holder = currencyField ? state.values[currencyField] : null;
+            const code = fixed ?? (holder && typeof holder === 'object' && 'label' in holder ? holder.label : typeof holder === 'string' ? holder : '');
+            const money = (n) => (/^[A-Z]{3}$/.test(code) ? (0, numbers_1.formatMoney)(n, code, 2, locale) : (0, numbers_1.formatNumber)(n, 2, locale));
+            const editable = options['editable'] === true && !state.readonly;
+            const key = JSON.stringify([totals, code, editable]);
+            // Drawn again only when what it shows changes, so a box being typed in stays.
+            if (key === drawn || element.contains(document.activeElement))
+                return;
+            drawn = key;
+            const row = (label, amount, className) => make('tr', { class: className }, make('th', { scope: 'row' }, label), make('td', {}, amount));
+            const rows = [];
+            for (const subtotal of totals?.subtotals ?? []) {
+                rows.push(row(subtotal.name, money(subtotal.amount), 'fd-tax-subtotal'));
+                for (const group of subtotal.groups) {
+                    if (!editable) {
+                        rows.push(row(group.name, money(group.amount), 'fd-tax-group'));
+                        continue;
+                    }
+                    const box = make('input', { type: 'text', class: 'fd-input fd-number-input', inputmode: 'decimal', autocomplete: 'off', 'aria-label': group.name });
+                    box.value = (0, numbers_1.formatNumber)(group.amount, 2, locale);
+                    box.addEventListener('change', () => {
+                        const text = (0, numbers_1.normalizeNumber)(box.value.trim(), locale);
+                        if (/^-?(\d+\.?\d*|\.\d+)$/.test(text))
+                            typed(group, Number(text));
+                    });
+                    rows.push(row(group.name, box, 'fd-tax-group'));
+                }
+            }
+            if (totals)
+                rows.push(row(words.total, money(totals.total), 'fd-tax-total'));
+            body.replaceChildren(...rows);
+        },
+    };
+};
+exports.taxTotalsWidget = taxTotalsWidget;
+//# sourceMappingURL=tax-totals.js.map

package/src/lib/tax-totals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tax-totals.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/tax-totals.ts"],"names":[],"mappings":";;;AACA,6CAA+C;AAC/C,uCAAuE;AAyBvE,MAAM,GAAG,GAAG,CAAC,KAAc,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;AAEzF,gGAAgG;AAChG,SAAS,IAAI,CAAC,KAAwB,EAAE,YAAoB;IAC1D,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAC7E,MAAM,CAAC,GAAG,KAAgC,CAAC;IAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,oBAAoB,CAAC,EAAE,CAAC;QAC7D,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAA8C,CAAC;QACxF,MAAM,MAAM,GAAI,CAAC,CAAC,WAAW,CAAoD,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC;QAChJ,MAAM,KAAK,GAAI,CAAC,CAAC,iBAAiB,CAA0B,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC1F,OAAO;YACL,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;gBAC9B,IAAI;gBACJ,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,gBAAgB,CAAC,CAAC;gBAC/E,MAAM,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAAqB,EAAE,CAAC,CAAC;aAC7J,CAAC,CAAC;YACH,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;SAC9B,CAAC;IACJ,CAAC;IACD,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC,QAAQ,CAA+B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAClL,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;AAC5G,CAAC;AAEM,MAAM,eAAe,GAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1G,MAAM,IAAI,GAAG,IAAA,kBAAK,EAAC,QAAQ,CAAC,CAAC;IAC7B,MAAM,KAAK,GAAG,IAAA,qBAAQ,EAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;IACnC,MAAM,aAAa,GAAG,OAAO,OAAO,CAAC,eAAe,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAE,OAAO,CAAC,eAAe,CAAY,CAAC,CAAC,CAAC,IAAI,CAAC;IACjH,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,UAAU,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAE,OAAO,CAAC,UAAU,CAAY,CAAC,CAAC,CAAC,IAAI,CAAC;IAC/F,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,CAAC;IACpE,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,2EAA2E;IAC3E,SAAS,KAAK,CAAC,KAAY,EAAE,MAAc;QACzC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAA4B,CAAC;QAClG,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;QACzB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;YAC5B,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC;YAC/B,CAAE,KAAK,CAAC,oBAAoB,CAA+C,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC;YACvH,KAAK,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;QAC9F,CAAC;aAAM,CAAC;YACL,KAAK,CAAC,QAAQ,CAA+B,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;YAC5E,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;QAChF,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAkB,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL,OAAO;QACP,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAmB,OAAO,CAAC,EAAE,KAAK,EAAE;QACtE,MAAM,CAAC,KAAK;YACV,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YAChD,MAAM,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAClE,MAAM,IAAI,GAAG,KAAK,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAO,IAAI,MAAM,CAAC,CAAC,CAAE,MAAwB,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAC/J,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAA,qBAAW,EAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAA,sBAAY,EAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;YACtH,MAAM,QAAQ,GAAG,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YACjE,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;YACrD,8EAA8E;YAC9E,IAAI,GAAG,KAAK,KAAK,IAAI,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;gBAAE,OAAO;YACtE,KAAK,GAAG,GAAG,CAAC;YACZ,MAAM,GAAG,GAAG,CAAC,KAAa,EAAE,MAA4B,EAAE,SAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;YAC9K,MAAM,IAAI,GAAkB,EAAE,CAAC;YAC/B,KAAK,MAAM,QAAQ,IAAI,MAAM,EAAE,SAAS,IAAI,EAAE,EAAE,CAAC;gBAC/C,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC;gBACzE,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;oBACpC,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACd,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;wBAChE,SAAS;oBACX,CAAC;oBACD,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,0BAA0B,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;oBACpJ,GAAG,CAAC,KAAK,GAAG,IAAA,sBAAY,EAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;oBAClD,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;wBAClC,MAAM,IAAI,GAAG,IAAA,yBAAe,EAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,CAAC;wBACvD,IAAI,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC;4BAAE,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;oBACrE,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;gBAClD,CAAC;YACH,CAAC;YACD,IAAI,MAAM;gBAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;YAC7E,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,CAAC;QAChC,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AA5DW,QAAA,eAAe,mBA4D1B"}

package/src/lib/tax-totals.mjs

@@ -0,0 +1,88 @@
+import { maker, wordsFor } from './kind-parts.mjs';
+import { formatMoney, formatNumber, normalizeNumber } from './numbers.mjs';
+const num = (value) => (typeof value === 'number' ? value : Number(value) || 0);
+/** Flectra's tax_totals, or the plainer value, as subtotals with their groups and the total. */
+function read(value, untaxedWords) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const v = value;
+    if (Array.isArray(v['subtotals']) || v['groups_by_subtotal']) {
+        const by = (v['groups_by_subtotal'] ?? {});
+        const listed = v['subtotals'] ?? [{ name: untaxedWords, amount: num(v['amount_untaxed']) }];
+        const order = v['subtotals_order'] ?? listed.map((s) => s.name);
+        return {
+            subtotals: order.map((name) => ({
+                name,
+                amount: num(listed.find((s) => s.name === name)?.amount ?? v['amount_untaxed']),
+                groups: (by[name] ?? []).map((g, i) => ({ name: String(g['tax_group_name'] ?? ''), amount: num(g['tax_group_amount']), at: [name, i] })),
+            })),
+            total: num(v['amount_total']),
+        };
+    }
+    const groups = (Array.isArray(v['groups']) ? v['groups'] : []).map((g, i) => ({ name: String(g['name'] ?? ''), amount: num(g['amount']), at: i }));
+    return { subtotals: [{ name: untaxedWords, amount: num(v['untaxed']), groups }], total: num(v['total']) };
+}
+export const taxTotalsWidget = ({ form, name, node, id, document, labels, locale = 'en' }) => {
+    const make = maker(document);
+    const words = wordsFor(labels, locale);
+    const options = node.options ?? {};
+    const currencyField = typeof options['currencyField'] === 'string' ? options['currencyField'] : null;
+    const fixed = typeof options['currency'] === 'string' ? options['currency'] : null;
+    const body = make('tbody');
+    const element = make('table', { id, class: 'fd-tax-totals' }, body);
+    let drawn = '';
+    /** The value with one group's amount typed in, and the total following. */
+    function typed(group, amount) {
+        const value = JSON.parse(JSON.stringify(form.getState().values[name]));
+        const was = group.amount;
+        if (Array.isArray(group.at)) {
+            const [subtotal, i] = group.at;
+            (value['groups_by_subtotal'][subtotal][i])['tax_group_amount'] = amount;
+            value['amount_total'] = Math.round((num(value['amount_total']) + amount - was) * 100) / 100;
+        }
+        else {
+            value['groups'][group.at]['amount'] = amount;
+            value['total'] = Math.round((num(value['total']) + amount - was) * 100) / 100;
+        }
+        form.setValue(name, value);
+    }
+    return {
+        element,
+        focus: () => element.querySelector('input')?.focus(),
+        update(state) {
+            const totals = read(state.value, words.untaxed);
+            const holder = currencyField ? state.values[currencyField] : null;
+            const code = fixed ?? (holder && typeof holder === 'object' && 'label' in holder ? holder.label : typeof holder === 'string' ? holder : '');
+            const money = (n) => (/^[A-Z]{3}$/.test(code) ? formatMoney(n, code, 2, locale) : formatNumber(n, 2, locale));
+            const editable = options['editable'] === true && !state.readonly;
+            const key = JSON.stringify([totals, code, editable]);
+            // Drawn again only when what it shows changes, so a box being typed in stays.
+            if (key === drawn || element.contains(document.activeElement))
+                return;
+            drawn = key;
+            const row = (label, amount, className) => make('tr', { class: className }, make('th', { scope: 'row' }, label), make('td', {}, amount));
+            const rows = [];
+            for (const subtotal of totals?.subtotals ?? []) {
+                rows.push(row(subtotal.name, money(subtotal.amount), 'fd-tax-subtotal'));
+                for (const group of subtotal.groups) {
+                    if (!editable) {
+                        rows.push(row(group.name, money(group.amount), 'fd-tax-group'));
+                        continue;
+                    }
+                    const box = make('input', { type: 'text', class: 'fd-input fd-number-input', inputmode: 'decimal', autocomplete: 'off', 'aria-label': group.name });
+                    box.value = formatNumber(group.amount, 2, locale);
+                    box.addEventListener('change', () => {
+                        const text = normalizeNumber(box.value.trim(), locale);
+                        if (/^-?(\d+\.?\d*|\.\d+)$/.test(text))
+                            typed(group, Number(text));
+                    });
+                    rows.push(row(group.name, box, 'fd-tax-group'));
+                }
+            }
+            if (totals)
+                rows.push(row(words.total, money(totals.total), 'fd-tax-total'));
+            body.replaceChildren(...rows);
+        },
+    };
+};
+//# sourceMappingURL=tax-totals.mjs.map