@fieldia/widgets 0.9.2 → 0.10.0

package/src/lib/styles.mjs

@@ -1,3 +1,6 @@
+import { KINDS_CSS } from './styles-kinds.mjs';
+import { CHOICES_CSS } from './styles-choices.mjs';
+import { INPUTS_CSS } from './styles-inputs.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
@@ -11,12 +14,15 @@
  * Written with logical properties (inline/block, start/end), so a right-to-left
  * form mirrors without a second stylesheet.
  */
-export const FIELDIA_CSS = /* css */ `
-/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */
-.fd-form, .fd-theme {
+import { LAYOUT_CSS } from './layout-styles.mjs';
+/** 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
+   with no skin of its own (the conversation beside a record) wears the form's skin and scheme instead. */
+.fd-form, .fd-theme:is([data-fd-skin], :not(.fd-form *)) {
   --fd-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
   --fd-text: #212529;
-  --fd-muted: #6b7280;
+  --fd-muted: #636976;
   --fd-page: #f2f3f5;
   --fd-surface: #ffffff;
   --fd-border: #cfd4da;
@@ -49,17 +55,18 @@ export const FIELDIA_CSS = /* css */ `
   color: var(--fd-text);
   -webkit-text-size-adjust: 100%;
 }
+/* Ant Design's blue and red, a shade darker: words in them read at 4.5:1 (WCAG AA) on white, the page and their soft shades. */
 .fd-form[data-fd-skin="outlined"], .fd-theme[data-fd-skin="outlined"] {
   --fd-text: rgba(0, 0, 0, 0.88);
   --fd-muted: rgba(0, 0, 0, 0.55);
   --fd-page: #f5f5f5;
   --fd-border: #d9d9d9;
   --fd-border-strong: #bfbfbf;
-  --fd-accent: #1677ff;
+  --fd-accent: #1365d9;
   --fd-accent-soft: #e6f4ff;
-  --fd-focus: #1677ff;
+  --fd-focus: #1365d9;
   --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);
-  --fd-error: #ff4d4f;
+  --fd-error: #c63c3d;
   --fd-error-soft: #fff2f0;
   --fd-radius: 8px;
   --fd-control-radius: 6px;
@@ -92,13 +99,19 @@ export const FIELDIA_CSS = /* css */ `
 .fd-section-title .fd-icon { color: var(--fd-muted); }
 
 /* ---- fields ---------------------------------------------------------------- */
+/* A grid of parts. --fd-cols is how many columns it has at the width it has now: the
+   rules for narrower widths change only that, and each part spans its --fd-span of them, never more. */
 .fd-grid {
+  --fd-cols: var(--fd-columns, 1);
+  /* A group that spans columns does not hand its width down to the parts inside it. */
+  --fd-span: 1;
   display: grid;
-  grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));
+  grid-template-columns: repeat(var(--fd-cols), minmax(0, 1fr));
   gap: var(--fd-gap-y) var(--fd-gap-x);
   align-items: start;
 }
-.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }
+.fd-grid > * { grid-column: span min(var(--fd-span, 1), var(--fd-cols)); }
+.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. */
 .fd-valid-mark { color: var(--fd-success); width: 1em; height: 1em; margin-inline-start: 6px; vertical-align: -0.15em; stroke-width: 2.4; }
@@ -106,43 +119,51 @@ export const FIELDIA_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 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.
+ * Titles with an icon keep their words apart instead, in a <bdi>.
+ */
+.fd-page-title, .fd-page-description, .fd-section-description, .fd-label, .fd-help, .fd-text-heading, .fd-text-paragraph, .fd-text-note, .fd-choice > span {
+  unicode-bidi: plaintext; text-align: match-parent; text-align: -webkit-match-parent;
+}
 .fd-error { color: var(--fd-error); font-size: 12.5px; }
 .fd-warning {
   color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;
   padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;
 }
 
-/* underline: label beside the value, the way a Flectra sheet reads */
-.fd-form[data-fd-skin="underline"] .fd-field {
+/* underline: label beside the value, the way a Flectra sheet reads. A field whose page or group
+   says where its label goes (data-labels) is laid out by those rules instead, in either skin. */
+.fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) {
   /* One label width for every field, so a field spanning two columns lines up with its neighbours. */
   grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);
   column-gap: 12px;
   align-items: baseline;
 }
-.fd-form[data-fd-skin="underline"] .fd-field > .fd-label { grid-column: 1; }
+.fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > .fd-label { grid-column: 1; }
 /* A table of lines needs the full width: its label sits above it. */
 .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 > :not(.fd-label) { grid-column: 2; }
+.fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > :not(.fd-label) { grid-column: 2; }
 /* 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 { grid-template-columns: minmax(0, 1fr); }
-  .fd-form[data-fd-skin="underline"] .fd-field { grid-column: auto; }
+  .fd-form[data-fd-skin="underline"] .fd-grid { --fd-cols: 1; }
   /* A section that says how many columns it keeps here keeps them, in either skin. */
-  .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }
-  .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }
+  .fd-form .fd-grid[data-columns-medium] { --fd-cols: var(--fd-columns-medium); }
   /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */
-  .fd-form[data-fd-skin="underline"] .fd-grid[data-columns-medium]:not([data-columns-medium="1"]) .fd-field { grid-template-columns: minmax(0, 1fr); }
-  .fd-form[data-fd-skin="underline"] .fd-grid[data-columns-medium]:not([data-columns-medium="1"]) .fd-field > * { grid-column: 1 !important; }
+  .fd-form[data-fd-skin="underline"] .fd-grid[data-columns-medium]:not([data-columns-medium="1"]) .fd-field:where(:not([data-labels])) { grid-template-columns: minmax(0, 1fr); }
+  .fd-form[data-fd-skin="underline"] .fd-grid[data-columns-medium]:not([data-columns-medium="1"]) .fd-field:where(:not([data-labels])) > * { grid-column: 1 !important; }
 }
 @container (max-width: 520px) {
-  .fd-grid { grid-template-columns: minmax(0, 1fr); }
-  .fd-field { grid-column: auto; }
-  .fd-form[data-fd-skin="underline"] .fd-field { grid-template-columns: minmax(0, 1fr); }
-  .fd-form[data-fd-skin="underline"] .fd-field > * { grid-column: 1 !important; }
+  .fd-grid { --fd-cols: 1; }
+  .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. */
-  .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }
-  .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }
+  .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { --fd-cols: var(--fd-columns-narrow, 1); }
+  /* A file open on a phone: its name and Close on a row, the tools on the next. */
+  .fd-form .fd-file-viewer > :first-child { padding-inline-end: 16px; }
+  .fd-form .fd-file-viewer h2 { flex-basis: 100%; margin-inline-end: 36px; }
 }
 
 /* ---- inputs ---------------------------------------------------------------- */
@@ -156,7 +177,7 @@ export const FIELDIA_CSS = /* css */ `
   border-width: var(--fd-input-border);
   border-radius: var(--fd-control-radius);
   padding: var(--fd-pad-y) var(--fd-pad-x);
-  min-height: 30px;
+  min-height: var(--fd-control-height, 30px);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }
@@ -201,6 +222,21 @@ export const FIELDIA_CSS = /* css */ `
 [dir="rtl"] .fd-switch:checked::after { transform: translateX(-14px); }
 .fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }
 .fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
+/* "Other:", with a box for an answer of one's own, a choice like the others. */
+.fd-choice-other { cursor: default; flex: 1 1 260px; max-width: 420px; min-width: 0; }
+.fd-choice-other-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none; }
+.fd-choice-other .fd-other-input { flex: 1; min-width: 6em; width: auto; min-height: 30px; padding-block: 2px; }
+/* A scale's ends in words, under its first and last points. */
+.fd-scale-box { display: inline-grid; gap: 4px; max-width: 100%; }
+.fd-scale-ends { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--fd-muted); }
+/* "Clear selection", at the question's end, once a single choice that need not be answered has one; never in a table's cell. */
+.fd-choices-box { display: grid; gap: 6px; min-width: 0; }
+.fd-choice-clear {
+  justify-self: end; font: inherit; font-size: 13px; color: var(--fd-muted); background: none; border: 0;
+  padding: 2px 4px; border-radius: 4px; cursor: pointer;
+}
+.fd-choice-clear:hover { color: var(--fd-text); text-decoration: underline; text-underline-offset: 3px; }
+.fd-lines-table .fd-choice-clear, .fd-grid-editor .fd-choice-clear { display: none; }
 .fd-points { display: flex; flex-wrap: wrap; gap: 6px; }
 .fd-points button {
   font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);
@@ -215,17 +251,18 @@ export const FIELDIA_CSS = /* css */ `
 
 /* ---- pickers: many2one, many2many, reference ------------------------------ */
 .fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }
-.fd-combo-input { padding-inline-end: 28px; }
+.fd-combo-input { padding-inline-end: 30px; }
+/* Its buttons are 24px each way at least: a target a finger or a shaking hand can hit (WCAG 2.5.8). */
 .fd-combo-clear {
-  position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);
-  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;
+  position: absolute; inset-inline-end: 3px; border: none; background: none; cursor: pointer; color: var(--fd-muted);
+  font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; min-width: 24px; min-height: 24px; display: inline-grid; place-items: center;
 }
 .fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }
 /* A link that can be opened has its open button beside the clear button. */
-.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }
+.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 56px; }
 .fd-combo-open {
-  position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);
-  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;
+  position: absolute; inset-inline-end: 29px; border: none; background: none; cursor: pointer; color: var(--fd-accent);
+  font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 4px; min-width: 24px; min-height: 24px; display: inline-grid; place-items: center;
 }
 .fd-combo-open:hover { background: var(--fd-page); }
 .fd-listbox {
@@ -243,6 +280,8 @@ export const FIELDIA_CSS = /* css */ `
   display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;
   background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;
 }
+button.fd-chip-label { border: none; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
+button.fd-chip-label:hover { text-decoration: underline; }
 .fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }
 .fd-chip-remove:hover { color: var(--fd-error); }
 .fd-tags .fd-combo { flex: 1 1 140px; }
@@ -260,6 +299,8 @@ export const FIELDIA_CSS = /* css */ `
 .fd-lines-table .fd-input { min-height: 28px; }
 /* A yes/no cell sits level with the inputs beside it. */
 .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:hover { color: var(--fd-error); background: var(--fd-error-soft); }
 .fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }
@@ -272,19 +313,74 @@ export const FIELDIA_CSS = /* css */ `
 .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 
 /* ---- files, images, rich text, json ------------------------------------ */
-.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }
+.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); min-width: 0; }
 .fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }
-.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }
-.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
-.fd-file-name { font-variant-numeric: tabular-nums; }
+.fd-file-pick { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; cursor: pointer; }
+.fd-file input:focus-visible + .fd-file-pick { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-files-list .fd-file-pick { justify-self: stretch; padding: 10px 14px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius); background: var(--fd-page); }
+.fd-file-pick:hover, .fd-dragging .fd-file-pick { border-color: var(--fd-accent); }
+.fd-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-self: stretch; min-width: 0; }
+.fd-files:empty { display: none; }
+.fd-file-item { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; }
+.fd-file-open {
+  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 5px 8px; font: inherit; color: inherit; text-align: start; cursor: pointer;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);
+}
+.fd-file-open:hover { border-color: var(--fd-accent); }
+.fd-file-thumb, .fd-file-icon { flex: none; width: 36px; height: 36px; border-radius: 3px; object-fit: cover; }
+/* A page with its corner folded, its colour by kind, its extension on it. */
+.fd-file-icon {
+  display: grid; place-items: end center; padding-block-end: 4px; font-size: 9px; font-weight: 700; color: #fff;
+  background: var(--fd-kind, #5b6573); clip-path: polygon(0 0, 68% 0, 100% 28%, 100% 100%, 0 100%);
+}
+.fd-file-icon[data-kind="pdf"] { --fd-kind: #c62828; }
+.fd-file-icon[data-kind="doc"] { --fd-kind: #1f5fbf; }
+.fd-file-icon[data-kind="sheet"] { --fd-kind: #1d7a3e; }
+.fd-file-icon[data-kind="zip"] { --fd-kind: #8a5300; }
+.fd-file-name { flex: 1; display: flex; min-width: 0; white-space: pre; }
+.fd-file-name > span { overflow: hidden; text-overflow: ellipsis; }
+/* A size reads in its own direction, right to left too. */
+.fd-file-size { color: var(--fd-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
+.fd-file-remove { flex: none; width: 32px; height: 32px; border: none; border-radius: 999px; background: none; color: var(--fd-muted); font-size: 20px; line-height: 1; cursor: pointer; }
+.fd-file-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }
+.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); }
+/* 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 .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; }
+.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 {
+  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; }
 .fd-image-pick {
-  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);
-  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);
-}
-.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }
-.fd-image-pick:hover { border-color: var(--fd-accent); }
-.fd-avatar .fd-image-pick { width: 88px; height: 88px; }
-.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }
+  order: 1; 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);
+}
+.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); }
+/* Close in the corner, beside the name however the tools wrap. */
+.fd-file-viewer > :first-child { position: relative; flex-wrap: wrap; justify-content: start; gap: 6px 10px; padding-block: 8px; padding-inline-end: 52px; }
+.fd-file-viewer .fd-dialog-close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }
+.fd-file-viewer h2 { flex: 1 1 10em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-file-step { font-size: 18px; line-height: 1; min-width: 34px; }
+.fd-file-viewer a { text-decoration: none; }
+.fd-file-viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; background: var(--fd-page); }
+.fd-file-viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.fd-file-viewer-body :is(iframe, pre) { flex: 1; align-self: stretch; margin: 0; border: 0; background: var(--fd-surface); }
+.fd-file-viewer-body pre { padding: 14px 16px; overflow: auto; font: 13px/1.5 monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
+.fd-file-none { display: grid; justify-items: center; gap: 4px; padding: 24px; text-align: center; color: var(--fd-muted); }
+.fd-file-none strong { color: var(--fd-text); overflow-wrap: anywhere; }
+.fd-file-none .fd-file-icon { width: 64px; height: 64px; font-size: 14px; padding-block-end: 8px; }
 .fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }
 .fd-richtext-box { display: grid; gap: 0; min-width: 0; }
 .fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }
@@ -309,7 +405,7 @@ export const FIELDIA_CSS = /* css */ `
 .fd-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }
 
 /* ---- sections, tabs ---------------------------------------------------- */
-.fd-sections { display: grid; gap: 24px; }
+.fd-sections { display: grid; gap: var(--fd-gap-block, 24px); }
 .fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
 .fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }
 .fd-section-title + * { clear: both; }
@@ -329,8 +425,9 @@ export const FIELDIA_CSS = /* css */ `
 }
 .fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }
 [dir="rtl"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }
-.fd-form[data-fd-skin="outlined"] .fd-sections > .fd-section {
-  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;
+/* A card on the page's own ground is a box of its own: on the page, or in an arrangement, a line or tabs there (data-on-page). */
+.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; }
 .fd-tab {
@@ -343,7 +440,7 @@ export const FIELDIA_CSS = /* css */ `
 /* ---- buttons ---------------------------------------------------------- */
 .fd-button {
   font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;
-  min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);
+  min-height: var(--fd-control-height, 32px); padding: 4px 14px; border-radius: var(--fd-control-radius);
   border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);
 }
 .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
@@ -431,18 +528,10 @@ export const FIELDIA_CSS = /* css */ `
 .fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 .fd-form[data-fd-skin="underline"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }
 .fd-form[data-fd-skin="underline"] .fd-avatar > * { grid-column: 1 !important; }
-.fd-avatar .fd-image-pick {
-  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);
-  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);
-}
-.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }
-.fd-image-pick:hover { border-color: var(--fd-accent); }
-.fd-avatar .fd-image-pick { width: 88px; height: 88px; }
-.fd-image-preview { width: 88px; height: 88px; }
-.fd-avatar .fd-file-pick .fd-help { display: none; }
-.fd-avatar .fd-file-name { display: none; }
-.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }
-.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }
+.fd-avatar .fd-file { justify-items: center; gap: 4px 8px; padding: 0; justify-content: center; }
+.fd-avatar :is(.fd-file-item, .fd-image-pick) { width: 88px; height: 88px; }
+.fd-avatar :is(.fd-image-pick .fd-help, .fd-file-limits) { display: none; }
+.fd-avatar .fd-button-link { flex-basis: auto; font-size: 12.5px; }
 /* The title and subtitle themselves: big, their labels only for screen readers. */
 .fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }
 .fd-form[data-fd-skin="underline"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }
@@ -518,7 +607,9 @@ export const FIELDIA_CSS = /* css */ `
 .fd-progressbar[data-tone="warning"] .fd-progressbar-fill { background: #d97706; }
 .fd-progressbar[data-tone="danger"] .fd-progressbar-fill { background: var(--fd-error); }
 .fd-progressbar[data-tone="info"] .fd-progressbar-fill { background: var(--fd-info); }
-.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }
+/* The share in words, on a chip of the surface: it reads the same over the fill and the track, in either scheme. Centred by its left edge, so it is centred right to left too. */
+.fd-progressbar-text { position: absolute; inset-block: 2px; left: 50%; translate: -50% 0; display: grid; place-items: center; padding-inline: 7px; border-radius: 999px; background: var(--fd-surface); font-size: 12px; line-height: 1; font-weight: 600; color: var(--fd-text); }
+.fd-progressbar-text:empty { display: none; }
 .fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }
 .fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }
 .fd-progressbar-edit > .fd-input { flex: 0 0 96px; }
@@ -551,6 +642,25 @@ export const FIELDIA_CSS = /* css */ `
 
 /* ---- text, status, dialog ------------------------------------------------- */
 .fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }
+/* Blocks between fields: a line across the row; empty room or a picture that spans like a field. */
+/* A matrix: rows against columns; it scrolls sideways in its own box on a narrow screen. */
+.fd-matrix { overflow-x: auto; max-width: 100%; }
+.fd-matrix-table { border-collapse: collapse; min-width: 100%; }
+.fd-matrix-table th, .fd-matrix-table td { padding: 6px 10px; text-align: center; border-bottom: 1px solid var(--fd-border); }
+.fd-matrix-table thead th { font-weight: 500; font-size: 13px; color: var(--fd-muted); }
+.fd-matrix-table tbody th { text-align: start; font-weight: 500; }
+.fd-matrix-table input { accent-color: var(--fd-accent); width: 16px; height: 16px; margin: 0; }
+.fd-divider { grid-column: 1 / -1; width: 100%; border: 0; border-top: 1px solid var(--fd-border); margin: 4px 0; }
+.fd-block { min-width: 0; }
+.fd-spacer { min-height: 24px; }
+.fd-image { display: block; max-width: 100%; height: auto; border-radius: var(--fd-radius); }
+/* A picture's width, by name or in pixels, its place in its row, its link and its caption. */
+.fd-figure { display: grid; justify-items: start; gap: 6px; margin: 0; }
+.fd-figure[data-align="center"] { justify-items: center; }
+.fd-figure[data-align="end"] { justify-items: end; }
+.fd-figure > a, .fd-figure .fd-image { width: var(--fd-image-width, auto); max-width: 100%; }
+.fd-figure > a { display: block; border-radius: var(--fd-radius); }
+.fd-caption { font-size: 13px; color: var(--fd-muted); }
 .fd-text-paragraph { margin: 0; }
 .fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }
 .fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }
@@ -622,6 +732,8 @@ export const FIELDIA_CSS = /* css */ `
 .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; } }
 `;
+/** 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;
 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;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkmBpC,CAAC;AAEF,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;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"}

package/src/lib/units.d.mts

@@ -0,0 +1,10 @@
+import type { Locale } from '@fieldia/core';
+/**
+ * A currency as the page's language writes it beside an amount: its symbol —
+ * "$", "€", "E£" — and whether it comes after the number, as in "12,50 €".
+ * A name that is no currency code stays as it is, before the number.
+ */
+export declare function currencySymbol(code: string, locale: Locale): {
+    text: string;
+    after: boolean;
+};

package/src/lib/units.d.ts

@@ -0,0 +1,10 @@
+import type { Locale } from '@fieldia/core';
+/**
+ * A currency as the page's language writes it beside an amount: its symbol —
+ * "$", "€", "E£" — and whether it comes after the number, as in "12,50 €".
+ * A name that is no currency code stays as it is, before the number.
+ */
+export declare function currencySymbol(code: string, locale: Locale): {
+    text: string;
+    after: boolean;
+};

package/src/lib/units.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.currencySymbol = currencySymbol;
+/**
+ * A currency as the page's language writes it beside an amount: its symbol —
+ * "$", "€", "E£" — and whether it comes after the number, as in "12,50 €".
+ * A name that is no currency code stays as it is, before the number.
+ */
+function currencySymbol(code, locale) {
+    try {
+        const parts = new Intl.NumberFormat(locale, { style: 'currency', currency: code, currencyDisplay: 'narrowSymbol' }).formatToParts(1);
+        const at = parts.findIndex((part) => part.type === 'currency');
+        return { text: parts[at].value, after: at > parts.findIndex((part) => part.type === 'integer') };
+    }
+    catch {
+        return { text: code, after: false };
+    }
+}
+//# sourceMappingURL=units.js.map

package/src/lib/units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"units.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/units.ts"],"names":[],"mappings":";;AAOA,wCAQC;AAbD;;;;GAIG;AACH,SAAgB,cAAc,CAAC,IAAY,EAAE,MAAc;IACzD,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACrI,MAAM,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QAC/D,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,EAAE,CAAC;IACnG,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IACtC,CAAC;AACH,CAAC"}

package/src/lib/units.mjs

@@ -0,0 +1,16 @@
+/**
+ * A currency as the page's language writes it beside an amount: its symbol —
+ * "$", "€", "E£" — and whether it comes after the number, as in "12,50 €".
+ * A name that is no currency code stays as it is, before the number.
+ */
+export function currencySymbol(code, locale) {
+    try {
+        const parts = new Intl.NumberFormat(locale, { style: 'currency', currency: code, currencyDisplay: 'narrowSymbol' }).formatToParts(1);
+        const at = parts.findIndex((part) => part.type === 'currency');
+        return { text: parts[at].value, after: at > parts.findIndex((part) => part.type === 'integer') };
+    }
+    catch {
+        return { text: code, after: false };
+    }
+}
+//# sourceMappingURL=units.mjs.map

package/src/lib/units.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"units.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/units.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,MAAc;IACzD,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACrI,MAAM,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QAC/D,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,EAAE,CAAC;IACnG,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IACtC,CAAC;AACH,CAAC"}