@fieldia/widgets 0.12.0 → 0.13.0

package/src/lib/styles-inputs.js

@@ -17,6 +17,8 @@ exports.INPUTS_CSS = `
 .fd-count-near { color: var(--fd-warning); font-weight: 600; }
 /* A unit inside the number's box, at its start or end; the box keeps room for it. */
 .fd-number:not(.fd-currency-picked) { position: relative; display: block; }
+/* As tall as its box, not its row: a label on two lines would stretch it, and the unit would sit below the value. */
+.fd-field > .fd-number:not(.fd-currency-picked) { align-self: start; }
 .fd-number > .fd-unit { position: absolute; inset-block: 0; display: flex; align-items: center; pointer-events: none; color: var(--fd-muted); }
 .fd-number > .fd-unit:first-child { inset-inline-start: var(--fd-pad-x); }
 .fd-number > .fd-unit:last-child { inset-inline-end: var(--fd-pad-x); }

package/src/lib/styles-inputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles-inputs.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-inputs.ts"],"names":[],"mappings":";;;AAAA;;;;;;;GAOG;AACU,QAAA,UAAU,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnC,CAAC"}
+{"version":3,"file":"styles-inputs.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-inputs.ts"],"names":[],"mappings":";;;AAAA;;;;;;;GAOG;AACU,QAAA,UAAU,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BnC,CAAC"}

package/src/lib/styles-inputs.mjs

@@ -14,6 +14,8 @@ export const INPUTS_CSS = /* css */ `
 .fd-count-near { color: var(--fd-warning); font-weight: 600; }
 /* A unit inside the number's box, at its start or end; the box keeps room for it. */
 .fd-number:not(.fd-currency-picked) { position: relative; display: block; }
+/* As tall as its box, not its row: a label on two lines would stretch it, and the unit would sit below the value. */
+.fd-field > .fd-number:not(.fd-currency-picked) { align-self: start; }
 .fd-number > .fd-unit { position: absolute; inset-block: 0; display: flex; align-items: center; pointer-events: none; color: var(--fd-muted); }
 .fd-number > .fd-unit:first-child { inset-inline-start: var(--fd-pad-x); }
 .fd-number > .fd-unit:last-child { inset-inline-end: var(--fd-pad-x); }

package/src/lib/styles-inputs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles-inputs.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-inputs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnC,CAAC"}
+{"version":3,"file":"styles-inputs.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-inputs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BnC,CAAC"}

package/src/lib/styles-kinds.d.mts

@@ -4,4 +4,4 @@
  * group of cards. Appended to Fieldia's stylesheet, scoped and written with
  * logical properties as the rest of it is.
  */
-export declare const KINDS_CSS = "\n/* ---- question kinds -------------------------------------------------------- */\n/* A signature: a pad with a line to sign on, a box to type a name in instead, and Clear. */\n.fd-signature { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 480px; min-width: 0; }\n.fd-signature-box {\n  position: relative; width: 100%; aspect-ratio: 10 / 3; border: 1px dashed var(--fd-border-strong);\n  border-radius: var(--fd-control-radius); background: #fff; overflow: hidden;\n}\n.fd-signature-box:has(.fd-signature-pad:not([hidden]):not(.fd-signature-locked)):hover { border-color: var(--fd-accent); }\n.fd-signature-pad, .fd-signature-image { display: block; width: 100%; height: 100%; }\n.fd-signature-pad { touch-action: none; cursor: crosshair; }\n.fd-signature-pad.fd-signature-locked { cursor: default; }\n.fd-signature-image { object-fit: contain; }\n.fd-signature-hint {\n  position: absolute; inset-inline: 18px; inset-block-end: 16px; padding-block-start: 4px; pointer-events: none;\n  border-block-start: 1px solid var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px;\n}\n.fd-signature-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; }\n.fd-signature-typed { flex: 1 1 200px; min-width: 0; }\n.fd-signature-footer { margin-block-start: -4px; color: var(--fd-muted); font-size: 12.5px; }\n/* A slider: the value beside the track and its ends under it; dimmed until it is slid. */\n.fd-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; width: 100%; max-width: 440px; min-width: 0; }\n.fd-slider-track { display: contents; }\n.fd-slider-input { width: 100%; min-width: 0; height: 26px; margin: 0; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-slider-input:disabled { cursor: default; }\n.fd-slider-value { min-width: 2.5em; text-align: start; font-variant-numeric: tabular-nums; font-weight: 600; }\n.fd-slider-ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n/* Grey, not the accent: half filled in colour would read as an answer. */\n.fd-slider-empty .fd-slider-input { filter: grayscale(1); opacity: 0.55; }\n.fd-slider-empty .fd-slider-value { color: var(--fd-muted); font-weight: 400; }\n.fd-slider .fd-choice-clear { grid-column: 1 / -1; }\n/* Pictures to choose from: cards of a picture over its words, a ring or a box before the words, the card picked edged in the accent. */\n.fd-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; width: 100%; min-width: 0; }\n.fd-image-card {\n  position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; margin: 0; overflow: hidden; cursor: pointer;\n  font: inherit; color: var(--fd-text); text-align: start; background: var(--fd-surface);\n  border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-image-card:hover:not(:disabled) { border-color: var(--fd-accent); }\n.fd-image-card:disabled { cursor: default; }\n.fd-image-card:disabled:not([aria-checked=\"true\"]) { opacity: 0.6; }\n.fd-image-card[aria-checked=\"true\"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); }\n.fd-image-card-picture { display: block; aspect-ratio: 4 / 3; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }\n.fd-image-card-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.fd-image-card-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fd-border-strong); }\n.fd-image-card-blank svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n.fd-image-card-words { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; font-size: 13.5px; line-height: 1.35; }\n.fd-image-card-words::before {\n  content: \"\"; flex: none; width: 16px; height: 16px; margin-block-start: 1px; box-sizing: border-box;\n  border: 1.5px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface);\n}\n.fd-image-card[role=\"checkbox\"] .fd-image-card-words::before { border-radius: 4px; }\n.fd-image-card[aria-checked=\"true\"] .fd-image-card-words::before { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: inset 0 0 0 3px var(--fd-surface); }\n.fd-image-card[role=\"checkbox\"][aria-checked=\"true\"] .fd-image-card-words::before {\n  box-shadow: none;\n  background: var(--fd-accent) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / 13px no-repeat;\n}\n.fd-image-choices + .fd-choice-clear { justify-self: end; }\n/* A ranking: numbered lines dragged by their grip, or moved with their arrows; the line being dragged lifts. */\n.fd-ranking { width: 100%; max-width: 480px; min-width: 0; }\n.fd-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-rank-item {\n  display: flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 8px 5px; min-height: 40px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  cursor: grab; user-select: none; -webkit-user-select: none;\n}\n.fd-rank-item.fd-rank-lifted { position: relative; z-index: 1; cursor: grabbing; border-color: var(--fd-accent); box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }\n.fd-ranking-locked .fd-rank-item { cursor: default; }\n.fd-rank-grip { flex: none; width: 10px; height: 16px; touch-action: none; background: radial-gradient(circle, var(--fd-border-strong) 1.3px, transparent 1.7px) 0 0 / 5px 5.33px; }\n.fd-ranking-locked .fd-rank-grip { visibility: hidden; }\n.fd-rank-place {\n  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 4px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-rank-words { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.fd-rank-tools { flex: none; display: inline-flex; gap: 2px; }\n.fd-rank-move {\n  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--fd-muted);\n  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;\n}\n.fd-rank-move:hover:not(:disabled) { background: var(--fd-page); border-color: var(--fd-border); color: var(--fd-text); }\n.fd-rank-move:disabled { opacity: 0.3; cursor: default; }\n/* An address: its parts in two columns, the street across both, each named above its box; one column when narrow. */\n.fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }\n.fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }\n.fd-address-part.fd-required > .fd-address-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-address-label { font-size: 12.5px; color: var(--fd-muted); }\n@container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }\n/* A repeating group: each line a card of its fields under its numbered title, \u00D7 at its end; \"Add another\" under the cards. */\n.fd-repeat { display: grid; gap: 10px; justify-items: start; width: 100%; min-width: 0; }\n.fd-repeat-list { display: grid; gap: 10px; width: 100%; min-width: 0; }\n.fd-repeat-list:empty { display: none; }\n.fd-repeat-card {\n  display: grid; gap: 8px; min-width: 0; padding: 10px 14px 14px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px);\n}\n.fd-repeat-head { display: flex; align-items: center; gap: 2px; min-height: 28px; }\n.fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }\n.fd-repeat-remove, .fd-repeat-tool { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }\n.fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-repeat-tool { font-size: 15px; min-width: 24px; min-height: 24px; }\n.fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }\n.fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-repeat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-repeat-add { border-style: dashed; }\n";
+export declare const KINDS_CSS = "\n/* ---- question kinds -------------------------------------------------------- */\n/* A signature: a pad with a line to sign on, a box to type a name in instead, and Clear. */\n.fd-signature { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 480px; min-width: 0; }\n.fd-signature-box {\n  position: relative; width: 100%; aspect-ratio: 10 / 3; border: 1px dashed var(--fd-border-strong);\n  border-radius: var(--fd-control-radius); background: #fff; overflow: hidden;\n}\n.fd-signature-box:has(.fd-signature-pad:not([hidden]):not(.fd-signature-locked)):hover { border-color: var(--fd-accent); }\n.fd-signature-pad, .fd-signature-image { display: block; width: 100%; height: 100%; }\n.fd-signature-pad { touch-action: none; cursor: crosshair; }\n.fd-signature-pad.fd-signature-locked { cursor: default; }\n.fd-signature-image { object-fit: contain; }\n.fd-signature-hint {\n  position: absolute; inset-inline: 18px; inset-block-end: 16px; padding-block-start: 4px; pointer-events: none;\n  border-block-start: 1px solid var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px;\n}\n.fd-signature-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; }\n.fd-signature-typed { flex: 1 1 200px; min-width: 0; }\n.fd-signature-footer { margin-block-start: -4px; color: var(--fd-muted); font-size: 12.5px; }\n/* A slider: the value beside the track and its ends under it; dimmed until it is slid. */\n.fd-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; width: 100%; max-width: 440px; min-width: 0; }\n.fd-slider-track { display: contents; }\n.fd-slider-input { width: 100%; min-width: 0; height: 26px; margin: 0; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-slider-input:disabled { cursor: default; }\n.fd-slider-value { min-width: 2.5em; text-align: start; font-variant-numeric: tabular-nums; font-weight: 600; }\n.fd-slider-ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n/* Grey, not the accent: half filled in colour would read as an answer. */\n.fd-slider-empty .fd-slider-input { filter: grayscale(1); opacity: 0.55; }\n.fd-slider-empty .fd-slider-value { color: var(--fd-muted); font-weight: 400; }\n.fd-slider .fd-choice-clear { grid-column: 1 / -1; }\n/* Pictures to choose from: cards of a picture over its words, a ring or a box before the words, the card picked edged in the accent. */\n.fd-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; width: 100%; min-width: 0; }\n.fd-image-card {\n  position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; margin: 0; overflow: hidden; cursor: pointer;\n  font: inherit; color: var(--fd-text); text-align: start; background: var(--fd-surface);\n  border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-image-card:hover:not(:disabled) { border-color: var(--fd-accent); }\n.fd-image-card:disabled { cursor: default; }\n.fd-image-card:disabled:not([aria-checked=\"true\"]) { opacity: 0.6; }\n.fd-image-card[aria-checked=\"true\"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); }\n.fd-image-card-picture { display: block; aspect-ratio: 4 / 3; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }\n.fd-image-card-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.fd-image-card-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fd-border-strong); }\n.fd-image-card-blank svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n.fd-image-card-words { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; font-size: 13.5px; line-height: 1.35; }\n.fd-image-card-words::before {\n  content: \"\"; flex: none; width: 16px; height: 16px; margin-block-start: 1px; box-sizing: border-box;\n  border: 1.5px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface);\n}\n.fd-image-card[role=\"checkbox\"] .fd-image-card-words::before { border-radius: 4px; }\n.fd-image-card[aria-checked=\"true\"] .fd-image-card-words::before { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: inset 0 0 0 3px var(--fd-surface); }\n.fd-image-card[role=\"checkbox\"][aria-checked=\"true\"] .fd-image-card-words::before {\n  box-shadow: none;\n  background: var(--fd-accent) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / 13px no-repeat;\n}\n.fd-image-choices + .fd-choice-clear { justify-self: end; }\n/* A ranking: numbered lines dragged by their grip, or moved with their arrows; the line being dragged lifts. */\n.fd-ranking { width: 100%; max-width: 480px; min-width: 0; }\n.fd-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-rank-item {\n  display: flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 8px 5px; min-height: 40px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  cursor: grab; user-select: none; -webkit-user-select: none;\n}\n.fd-rank-item.fd-rank-lifted { position: relative; z-index: 1; cursor: grabbing; border-color: var(--fd-accent); box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }\n.fd-ranking-locked .fd-rank-item { cursor: default; }\n.fd-rank-grip { flex: none; width: 10px; height: 16px; touch-action: none; background: radial-gradient(circle, var(--fd-border-strong) 1.3px, transparent 1.7px) 0 0 / 5px 5.33px; }\n.fd-ranking-locked .fd-rank-grip { visibility: hidden; }\n.fd-rank-place {\n  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 4px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-rank-words { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.fd-rank-tools { flex: none; display: inline-flex; gap: 2px; }\n.fd-rank-move {\n  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--fd-muted);\n  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;\n}\n.fd-rank-move:hover:not(:disabled) { background: var(--fd-page); border-color: var(--fd-border); color: var(--fd-text); }\n.fd-rank-move:disabled { opacity: 0.3; cursor: default; }\n/* An address: its parts in two columns, the street across both, each named above its box; one column when narrow. */\n.fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }\n.fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }\n.fd-address-part.fd-required > .fd-address-label::after { content: \"*\"; margin-inline-start: 0.25em; color: var(--fd-error); }\n.fd-address-label { font-size: 12.5px; color: var(--fd-muted); }\n@container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }\n/* A repeating group: each line a card of its fields under its numbered title, \u00D7 at its end; \"Add another\" under the cards. */\n.fd-repeat { display: grid; gap: 10px; justify-items: start; width: 100%; min-width: 0; }\n.fd-repeat-list { display: grid; gap: 10px; width: 100%; min-width: 0; }\n.fd-repeat-list:empty { display: none; }\n.fd-repeat-card {\n  display: grid; gap: 8px; min-width: 0; padding: 10px 14px 14px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px);\n}\n.fd-repeat-head { display: flex; align-items: center; gap: 2px; min-height: 28px; }\n.fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }\n.fd-repeat-remove, .fd-repeat-tool { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }\n.fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-repeat-tool { font-size: 15px; min-width: 24px; min-height: 24px; }\n.fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }\n.fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-repeat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-repeat-add { border-style: dashed; }\n";

package/src/lib/styles-kinds.d.ts

@@ -4,4 +4,4 @@
  * group of cards. Appended to Fieldia's stylesheet, scoped and written with
  * logical properties as the rest of it is.
  */
-export declare const KINDS_CSS = "\n/* ---- question kinds -------------------------------------------------------- */\n/* A signature: a pad with a line to sign on, a box to type a name in instead, and Clear. */\n.fd-signature { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 480px; min-width: 0; }\n.fd-signature-box {\n  position: relative; width: 100%; aspect-ratio: 10 / 3; border: 1px dashed var(--fd-border-strong);\n  border-radius: var(--fd-control-radius); background: #fff; overflow: hidden;\n}\n.fd-signature-box:has(.fd-signature-pad:not([hidden]):not(.fd-signature-locked)):hover { border-color: var(--fd-accent); }\n.fd-signature-pad, .fd-signature-image { display: block; width: 100%; height: 100%; }\n.fd-signature-pad { touch-action: none; cursor: crosshair; }\n.fd-signature-pad.fd-signature-locked { cursor: default; }\n.fd-signature-image { object-fit: contain; }\n.fd-signature-hint {\n  position: absolute; inset-inline: 18px; inset-block-end: 16px; padding-block-start: 4px; pointer-events: none;\n  border-block-start: 1px solid var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px;\n}\n.fd-signature-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; }\n.fd-signature-typed { flex: 1 1 200px; min-width: 0; }\n.fd-signature-footer { margin-block-start: -4px; color: var(--fd-muted); font-size: 12.5px; }\n/* A slider: the value beside the track and its ends under it; dimmed until it is slid. */\n.fd-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; width: 100%; max-width: 440px; min-width: 0; }\n.fd-slider-track { display: contents; }\n.fd-slider-input { width: 100%; min-width: 0; height: 26px; margin: 0; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-slider-input:disabled { cursor: default; }\n.fd-slider-value { min-width: 2.5em; text-align: start; font-variant-numeric: tabular-nums; font-weight: 600; }\n.fd-slider-ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n/* Grey, not the accent: half filled in colour would read as an answer. */\n.fd-slider-empty .fd-slider-input { filter: grayscale(1); opacity: 0.55; }\n.fd-slider-empty .fd-slider-value { color: var(--fd-muted); font-weight: 400; }\n.fd-slider .fd-choice-clear { grid-column: 1 / -1; }\n/* Pictures to choose from: cards of a picture over its words, a ring or a box before the words, the card picked edged in the accent. */\n.fd-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; width: 100%; min-width: 0; }\n.fd-image-card {\n  position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; margin: 0; overflow: hidden; cursor: pointer;\n  font: inherit; color: var(--fd-text); text-align: start; background: var(--fd-surface);\n  border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-image-card:hover:not(:disabled) { border-color: var(--fd-accent); }\n.fd-image-card:disabled { cursor: default; }\n.fd-image-card:disabled:not([aria-checked=\"true\"]) { opacity: 0.6; }\n.fd-image-card[aria-checked=\"true\"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); }\n.fd-image-card-picture { display: block; aspect-ratio: 4 / 3; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }\n.fd-image-card-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.fd-image-card-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fd-border-strong); }\n.fd-image-card-blank svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n.fd-image-card-words { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; font-size: 13.5px; line-height: 1.35; }\n.fd-image-card-words::before {\n  content: \"\"; flex: none; width: 16px; height: 16px; margin-block-start: 1px; box-sizing: border-box;\n  border: 1.5px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface);\n}\n.fd-image-card[role=\"checkbox\"] .fd-image-card-words::before { border-radius: 4px; }\n.fd-image-card[aria-checked=\"true\"] .fd-image-card-words::before { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: inset 0 0 0 3px var(--fd-surface); }\n.fd-image-card[role=\"checkbox\"][aria-checked=\"true\"] .fd-image-card-words::before {\n  box-shadow: none;\n  background: var(--fd-accent) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / 13px no-repeat;\n}\n.fd-image-choices + .fd-choice-clear { justify-self: end; }\n/* A ranking: numbered lines dragged by their grip, or moved with their arrows; the line being dragged lifts. */\n.fd-ranking { width: 100%; max-width: 480px; min-width: 0; }\n.fd-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-rank-item {\n  display: flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 8px 5px; min-height: 40px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  cursor: grab; user-select: none; -webkit-user-select: none;\n}\n.fd-rank-item.fd-rank-lifted { position: relative; z-index: 1; cursor: grabbing; border-color: var(--fd-accent); box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }\n.fd-ranking-locked .fd-rank-item { cursor: default; }\n.fd-rank-grip { flex: none; width: 10px; height: 16px; touch-action: none; background: radial-gradient(circle, var(--fd-border-strong) 1.3px, transparent 1.7px) 0 0 / 5px 5.33px; }\n.fd-ranking-locked .fd-rank-grip { visibility: hidden; }\n.fd-rank-place {\n  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 4px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-rank-words { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.fd-rank-tools { flex: none; display: inline-flex; gap: 2px; }\n.fd-rank-move {\n  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--fd-muted);\n  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;\n}\n.fd-rank-move:hover:not(:disabled) { background: var(--fd-page); border-color: var(--fd-border); color: var(--fd-text); }\n.fd-rank-move:disabled { opacity: 0.3; cursor: default; }\n/* An address: its parts in two columns, the street across both, each named above its box; one column when narrow. */\n.fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }\n.fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }\n.fd-address-part.fd-required > .fd-address-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-address-label { font-size: 12.5px; color: var(--fd-muted); }\n@container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }\n/* A repeating group: each line a card of its fields under its numbered title, \u00D7 at its end; \"Add another\" under the cards. */\n.fd-repeat { display: grid; gap: 10px; justify-items: start; width: 100%; min-width: 0; }\n.fd-repeat-list { display: grid; gap: 10px; width: 100%; min-width: 0; }\n.fd-repeat-list:empty { display: none; }\n.fd-repeat-card {\n  display: grid; gap: 8px; min-width: 0; padding: 10px 14px 14px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px);\n}\n.fd-repeat-head { display: flex; align-items: center; gap: 2px; min-height: 28px; }\n.fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }\n.fd-repeat-remove, .fd-repeat-tool { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }\n.fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-repeat-tool { font-size: 15px; min-width: 24px; min-height: 24px; }\n.fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }\n.fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-repeat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-repeat-add { border-style: dashed; }\n";
+export declare const KINDS_CSS = "\n/* ---- question kinds -------------------------------------------------------- */\n/* A signature: a pad with a line to sign on, a box to type a name in instead, and Clear. */\n.fd-signature { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 480px; min-width: 0; }\n.fd-signature-box {\n  position: relative; width: 100%; aspect-ratio: 10 / 3; border: 1px dashed var(--fd-border-strong);\n  border-radius: var(--fd-control-radius); background: #fff; overflow: hidden;\n}\n.fd-signature-box:has(.fd-signature-pad:not([hidden]):not(.fd-signature-locked)):hover { border-color: var(--fd-accent); }\n.fd-signature-pad, .fd-signature-image { display: block; width: 100%; height: 100%; }\n.fd-signature-pad { touch-action: none; cursor: crosshair; }\n.fd-signature-pad.fd-signature-locked { cursor: default; }\n.fd-signature-image { object-fit: contain; }\n.fd-signature-hint {\n  position: absolute; inset-inline: 18px; inset-block-end: 16px; padding-block-start: 4px; pointer-events: none;\n  border-block-start: 1px solid var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px;\n}\n.fd-signature-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; }\n.fd-signature-typed { flex: 1 1 200px; min-width: 0; }\n.fd-signature-footer { margin-block-start: -4px; color: var(--fd-muted); font-size: 12.5px; }\n/* A slider: the value beside the track and its ends under it; dimmed until it is slid. */\n.fd-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; width: 100%; max-width: 440px; min-width: 0; }\n.fd-slider-track { display: contents; }\n.fd-slider-input { width: 100%; min-width: 0; height: 26px; margin: 0; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-slider-input:disabled { cursor: default; }\n.fd-slider-value { min-width: 2.5em; text-align: start; font-variant-numeric: tabular-nums; font-weight: 600; }\n.fd-slider-ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n/* Grey, not the accent: half filled in colour would read as an answer. */\n.fd-slider-empty .fd-slider-input { filter: grayscale(1); opacity: 0.55; }\n.fd-slider-empty .fd-slider-value { color: var(--fd-muted); font-weight: 400; }\n.fd-slider .fd-choice-clear { grid-column: 1 / -1; }\n/* Pictures to choose from: cards of a picture over its words, a ring or a box before the words, the card picked edged in the accent. */\n.fd-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; width: 100%; min-width: 0; }\n.fd-image-card {\n  position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; margin: 0; overflow: hidden; cursor: pointer;\n  font: inherit; color: var(--fd-text); text-align: start; background: var(--fd-surface);\n  border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-image-card:hover:not(:disabled) { border-color: var(--fd-accent); }\n.fd-image-card:disabled { cursor: default; }\n.fd-image-card:disabled:not([aria-checked=\"true\"]) { opacity: 0.6; }\n.fd-image-card[aria-checked=\"true\"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); }\n.fd-image-card-picture { display: block; aspect-ratio: 4 / 3; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }\n.fd-image-card-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.fd-image-card-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fd-border-strong); }\n.fd-image-card-blank svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n.fd-image-card-words { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; font-size: 13.5px; line-height: 1.35; }\n.fd-image-card-words::before {\n  content: \"\"; flex: none; width: 16px; height: 16px; margin-block-start: 1px; box-sizing: border-box;\n  border: 1.5px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface);\n}\n.fd-image-card[role=\"checkbox\"] .fd-image-card-words::before { border-radius: 4px; }\n.fd-image-card[aria-checked=\"true\"] .fd-image-card-words::before { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: inset 0 0 0 3px var(--fd-surface); }\n.fd-image-card[role=\"checkbox\"][aria-checked=\"true\"] .fd-image-card-words::before {\n  box-shadow: none;\n  background: var(--fd-accent) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / 13px no-repeat;\n}\n.fd-image-choices + .fd-choice-clear { justify-self: end; }\n/* A ranking: numbered lines dragged by their grip, or moved with their arrows; the line being dragged lifts. */\n.fd-ranking { width: 100%; max-width: 480px; min-width: 0; }\n.fd-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-rank-item {\n  display: flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 8px 5px; min-height: 40px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  cursor: grab; user-select: none; -webkit-user-select: none;\n}\n.fd-rank-item.fd-rank-lifted { position: relative; z-index: 1; cursor: grabbing; border-color: var(--fd-accent); box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }\n.fd-ranking-locked .fd-rank-item { cursor: default; }\n.fd-rank-grip { flex: none; width: 10px; height: 16px; touch-action: none; background: radial-gradient(circle, var(--fd-border-strong) 1.3px, transparent 1.7px) 0 0 / 5px 5.33px; }\n.fd-ranking-locked .fd-rank-grip { visibility: hidden; }\n.fd-rank-place {\n  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 4px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-rank-words { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.fd-rank-tools { flex: none; display: inline-flex; gap: 2px; }\n.fd-rank-move {\n  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--fd-muted);\n  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;\n}\n.fd-rank-move:hover:not(:disabled) { background: var(--fd-page); border-color: var(--fd-border); color: var(--fd-text); }\n.fd-rank-move:disabled { opacity: 0.3; cursor: default; }\n/* An address: its parts in two columns, the street across both, each named above its box; one column when narrow. */\n.fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }\n.fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }\n.fd-address-part.fd-required > .fd-address-label::after { content: \"*\"; margin-inline-start: 0.25em; color: var(--fd-error); }\n.fd-address-label { font-size: 12.5px; color: var(--fd-muted); }\n@container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }\n/* A repeating group: each line a card of its fields under its numbered title, \u00D7 at its end; \"Add another\" under the cards. */\n.fd-repeat { display: grid; gap: 10px; justify-items: start; width: 100%; min-width: 0; }\n.fd-repeat-list { display: grid; gap: 10px; width: 100%; min-width: 0; }\n.fd-repeat-list:empty { display: none; }\n.fd-repeat-card {\n  display: grid; gap: 8px; min-width: 0; padding: 10px 14px 14px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px);\n}\n.fd-repeat-head { display: flex; align-items: center; gap: 2px; min-height: 28px; }\n.fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }\n.fd-repeat-remove, .fd-repeat-tool { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }\n.fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-repeat-tool { font-size: 15px; min-width: 24px; min-height: 24px; }\n.fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }\n.fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-repeat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-repeat-add { border-style: dashed; }\n";

package/src/lib/styles-kinds.js

@@ -94,7 +94,7 @@ exports.KINDS_CSS = `
 .fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }
 .fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }
 .fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }
-.fd-address-part.fd-required > .fd-address-label::after { content: " *"; color: var(--fd-error); }
+.fd-address-part.fd-required > .fd-address-label::after { content: "*"; margin-inline-start: 0.25em; color: var(--fd-error); }
 .fd-address-label { font-size: 12.5px; color: var(--fd-muted); }
 @container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }
 /* A repeating group: each line a card of its fields under its numbered title, × at its end; "Add another" under the cards. */

package/src/lib/styles-kinds.mjs

@@ -91,7 +91,7 @@ export const KINDS_CSS = /* css */ `
 .fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }
 .fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }
 .fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }
-.fd-address-part.fd-required > .fd-address-label::after { content: " *"; color: var(--fd-error); }
+.fd-address-part.fd-required > .fd-address-label::after { content: "*"; margin-inline-start: 0.25em; color: var(--fd-error); }
 .fd-address-label { font-size: 12.5px; color: var(--fd-muted); }
 @container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }
 /* A repeating group: each line a card of its fields under its numbered title, × at its end; "Add another" under the cards. */

package/src/lib/styles-sheet.d.mts

@@ -3,4 +3,4 @@
  * Appended to Fieldia's stylesheet, scoped and written with logical
  * properties as the rest of it is.
  */
-export declare const SHEET_CSS = "\n/* ---- a sheet's reading ----------------------------------------------------- */\n/* A read-only value as its words: on the line a box's words would sit on, wrapped rather than cut at the box's edge. */\n.fd-read-text {\n  min-width: 0; min-height: var(--fd-control-height, 30px); padding-block: calc(var(--fd-pad-y) + 1px);\n  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: var(--fd-text);\n}\n.fd-field:is([data-type=\"integer\"], [data-type=\"float\"], [data-type=\"monetary\"]) > .fd-read-text { font-variant-numeric: tabular-nums; }\n/* A record's words read their own way \u2014 English on a page read right to left keeps its order \u2014 lined up with the page. */\n.fd-read-text { unicode-bidi: plaintext; text-align: left; }\n[dir=\"rtl\"] .fd-read-text { text-align: right; }\n.fd-read-text a, .fd-read-link { color: var(--fd-accent); text-decoration: none; }\n.fd-read-link { border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-align: start; }\n.fd-read-text a:hover, .fd-read-link:hover { text-decoration: underline; }\n.fd-read-link:focus-visible, .fd-read-text a:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n/* A choice as a coloured pill, as wide as its words, on the line a box's words sit on. */\n.fd-field > .fd-value-badge { justify-self: start; align-self: start; width: fit-content; margin-block: calc((var(--fd-control-height, 30px) - 24px) / 2); }\n.fd-title > .fd-field > .fd-read-text { font-size: 24px; font-weight: 600; line-height: 1.25; }\n/* A ribbon with words to point at takes the pointer, though its frame lets clicks through. */\n.fd-ribbon[title] { pointer-events: auto; cursor: help; }\n/* A field's value inside an alert's or a text's words, set apart by its weight. */\n.fd-value { font-weight: 600; }\n/* An alert's own buttons, after its words: links in the alert's colour, wrapping under the words on a narrow screen. */\n.fd-alert:has(> .fd-alert-actions) { flex-wrap: wrap; align-items: baseline; }\n.fd-alert-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }\n.fd-alert-actions .fd-button { min-height: 0; padding-block: 0; font-size: inherit; }\n.fd-alert-actions .fd-button-link { color: inherit; padding-inline: 0; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }\n/* An alert among a page's parts, as Flectra's in a tab: across its row. */\n.fd-text-alert { grid-column: 1 / -1; margin: 0; }\n/* The first alert on a card clears the ribbon in its corner, when no stat buttons stand between them. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) > :is(.fd-ribbon-frame + .fd-alert, .fd-ribbon-frame + .fd-stats[hidden] + .fd-alert) { margin-inline-end: 72px; }\n/* A stat button with two values, each after its words, one over the other: \"In: 3\", \"Out: 5\". */\n.fd-stat-pair { gap: 1px; }\n.fd-stat-row { display: inline-flex; align-items: baseline; gap: 5px; }\n.fd-stat-row > .fd-stat-label::after { content: \":\"; }\n.fd-stat-pair .fd-stat-value { font-size: 13.5px; }\n/* On a phone, stat buttons two to a row, edged between them, clear of a ribbon in the corner. */\n@container (max-width: 520px) {\n  .fd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .fd-stat { min-width: 0; padding-inline: 12px; text-align: start; column-gap: 8px; }\n  .fd-stat:has(> .fd-icon) { column-gap: 8px; }\n  .fd-stat-value { font-size: 14px; }\n  .fd-stat:nth-child(odd of :not([hidden])) { border-inline-start: none; }\n  .fd-stat:nth-child(n + 3 of :not([hidden])) { border-block-start: 1px solid var(--fd-border); }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 0; }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(2 of :not([hidden])) { padding-inline-end: 64px; }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(4 of :not([hidden])) { padding-inline-end: 36px; }\n}\n/* A statusbar's time spent in a step, after its words; its folded stages under More, in a menu fixed to the page so the bar's scrolling never cuts it. */\n.fd-step-time { margin-inline-start: 6px; font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; }\n.fd-statusbar li.fd-step-more > button { padding-inline: 16px 20px; letter-spacing: 1px; }\n.fd-statusbar li.fd-step-more > .fd-step-menu {\n  position: fixed; z-index: 30; display: grid; min-width: 160px; margin: 0; padding: 4px 0; clip-path: none; transform: none;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); white-space: nowrap;\n}\n.fd-statusbar li.fd-step-more > .fd-step-menu[hidden] { display: none; }\n.fd-statusbar .fd-step-menu > button {\n  font: inherit; font-size: 13px; text-align: start; border: none; background: none; color: inherit; padding: 6px 14px; cursor: pointer; transform: none;\n}\n.fd-statusbar .fd-step-menu > button:hover:not(:disabled), .fd-statusbar .fd-step-menu > button:focus-visible { background: var(--fd-accent-soft); outline: none; }\n.fd-statusbar .fd-step-menu > button:disabled { cursor: default; color: var(--fd-muted); }\n/* A button's key, shown on it while Alt is held, as Flectra shows its hotkeys. */\n.fd-hotkey { display: none; }\n[data-hotkeys] .fd-hotkey {\n  display: inline-block; margin-inline-start: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px;\n  font: 600 10.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.85; vertical-align: 1px;\n}\n/* A link's picture, or its initials, in a circle before its name; lines of the record \u2014 an address \u2014 under the link. */\n.fd-link-avatar {\n  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle;\n}\n.fd-link-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.fd-combo[data-avatar] > .fd-link-avatar { position: absolute; inset-inline-start: 4px; pointer-events: none; }\n.fd-combo[data-avatar] > .fd-link-avatar[hidden] ~ .fd-combo-input { padding-inline-start: var(--fd-pad-x); }\n.fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 32px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-combo[data-avatar] > .fd-link-avatar { inset-inline-start: 0; }\n.fd-form[data-fd-skin=\"underline\"] .fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 28px; }\n.fd-read-text > .fd-link-avatar { margin-inline-end: 6px; }\n.fd-chip > .fd-link-avatar { width: 18px; height: 18px; font-size: 9px; margin-inline: -4px 2px; }\n.fd-link { display: grid; gap: 2px; min-width: 0; }\n.fd-link-details { font-size: 12.5px; line-height: 1.4; color: var(--fd-muted); text-align: left; }\n[dir=\"rtl\"] .fd-link-details { text-align: right; }\n.fd-link-details > div { unicode-bidi: plaintext; }\n/* Tags in their record's colour, as Flectra numbers them, soft enough to read in either scheme. */\n.fd-chip[data-color] { background: color-mix(in srgb, var(--fd-tag) 18%, var(--fd-surface)); border-color: color-mix(in srgb, var(--fd-tag) 55%, var(--fd-surface)); }\n.fd-chip[data-color=\"1\"] { --fd-tag: #f06050; } .fd-chip[data-color=\"2\"] { --fd-tag: #f4a460; } .fd-chip[data-color=\"3\"] { --fd-tag: #f7cd1f; }\n.fd-chip[data-color=\"4\"] { --fd-tag: #6cc1ed; } .fd-chip[data-color=\"5\"] { --fd-tag: #814968; } .fd-chip[data-color=\"6\"] { --fd-tag: #eb7e7f; }\n.fd-chip[data-color=\"7\"] { --fd-tag: #2c8397; } .fd-chip[data-color=\"8\"] { --fd-tag: #475577; } .fd-chip[data-color=\"9\"] { --fd-tag: #d6145f; }\n.fd-chip[data-color=\"10\"] { --fd-tag: #30c381; } .fd-chip[data-color=\"11\"] { --fd-tag: #9365b8; }\n/* A line of parts, as Flectra's o_row: its title the line's label, its parts each as wide as they need, words and buttons among them. */\n.fd-oneline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; min-height: var(--fd-control-height, 30px); }\n.fd-form .fd-oneline-row > .fd-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; width: auto; min-width: 0; grid-template-columns: none; }\n.fd-form .fd-oneline-row > .fd-field > * { grid-column: auto !important; }\n.fd-oneline-row > .fd-field:not([data-labels=\"beside\"]):not([data-labels=\"above\"]) > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-oneline-row > .fd-field > :is(.fd-error, .fd-warning) { flex-basis: 100%; }\n.fd-oneline-row .fd-input { width: 12em; max-width: 100%; }\n/* On a narrow screen each part gives way to the row's width rather than run past it. */\n.fd-form .fd-oneline-row > .fd-field { max-width: 100%; }\n.fd-oneline-row > .fd-field > * { max-width: 100%; min-width: 0; }\n.fd-oneline-row > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"]) .fd-input { width: 15em; }\n.fd-oneline-row > .fd-field:is([data-type=\"integer\"], [data-type=\"float\"]) .fd-input { width: 7em; }\n.fd-oneline-row > .fd-field[data-type=\"monetary\"] .fd-input { width: 8.5em; }\n.fd-oneline-row > .fd-field:is([data-type=\"date\"], [data-type=\"datetime\"]) .fd-input { width: 9.5em; }\n.fd-form .fd-oneline-words { margin: 0; padding: 0; border: 0; background: none; color: var(--fd-text); }\n.fd-form .fd-oneline-words.fd-text-note { color: var(--fd-muted); font-size: 12.5px; }\n/* A line with no title of its own takes the whole row, its fields' labels beside them where they ask. */\n.fd-form .fd-oneline:not(:has(> .fd-label)) > .fd-oneline-row { grid-column: 1 / -1 !important; }\n.fd-oneline-row > .fd-button-link { padding-inline: 0; min-height: 0; }\n.fd-oneline-row > .fd-field > .fd-read-text { min-height: 0; padding-block: 0; }\n/* Words over a sheet's title, as Flectra's label over its h1. */\n.fd-title-label { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); }\n";
+export declare const SHEET_CSS = "\n/* ---- a sheet's reading ----------------------------------------------------- */\n/* A read-only value as its words: on the line a box's words would sit on, wrapped rather than cut at the box's edge. */\n.fd-read-text {\n  min-width: 0; min-height: var(--fd-control-height, 30px); padding-block: calc(var(--fd-pad-y) + 1px);\n  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: var(--fd-text);\n}\n.fd-field:is([data-type=\"integer\"], [data-type=\"float\"], [data-type=\"monetary\"]) > .fd-read-text { font-variant-numeric: tabular-nums; }\n/* A record's words read their own way \u2014 English on a page read right to left keeps its order \u2014 lined up with the page. */\n.fd-read-text { unicode-bidi: plaintext; text-align: left; }\n[dir=\"rtl\"] .fd-read-text { text-align: right; }\n/* Its words start where a box's words do, inside the box's padding (and an outlined box's border). */\n.fd-read-text { padding-inline: var(--fd-pad-x); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-read-text { padding-inline: calc(var(--fd-pad-x) + 1px); }\n/* A sheet's title stays flush with the labels under it, as it was drawn. */\n.fd-form :is(.fd-title, .fd-title-line) .fd-read-text { padding-inline: 0; }\n.fd-read-text a, .fd-read-link { color: var(--fd-accent); text-decoration: none; }\n.fd-read-link { border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-align: start; }\n.fd-read-text a:hover, .fd-read-link:hover { text-decoration: underline; }\n.fd-read-link:focus-visible, .fd-read-text a:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n/* A choice as a coloured pill, as wide as its words, on the line a box's words sit on. */\n.fd-field > .fd-value-badge { justify-self: start; align-self: start; width: fit-content; margin-block: calc((var(--fd-control-height, 30px) - 24px) / 2); }\n.fd-title > .fd-field > .fd-read-text { font-size: 24px; font-weight: 600; line-height: 1.25; }\n/* A ribbon with words to point at takes the pointer, though its frame lets clicks through. */\n.fd-ribbon[title] { pointer-events: auto; cursor: help; }\n/* A field's value inside an alert's or a text's words, set apart by its weight. */\n.fd-value { font-weight: 600; }\n/* An alert's own buttons, after its words: links in the alert's colour, wrapping under the words on a narrow screen. */\n.fd-alert:has(> .fd-alert-actions) { flex-wrap: wrap; align-items: baseline; }\n.fd-alert-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }\n.fd-alert-actions .fd-button { min-height: 0; padding-block: 0; font-size: inherit; }\n.fd-alert-actions .fd-button-link { color: inherit; padding-inline: 0; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }\n/* An alert among a page's parts, as Flectra's in a tab: across its row. */\n.fd-text-alert { grid-column: 1 / -1; margin: 0; }\n/* The first alert on a card clears the ribbon in its corner, when no stat buttons stand between them. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) > :is(.fd-ribbon-frame + .fd-alert, .fd-ribbon-frame + .fd-stats[hidden] + .fd-alert) { margin-inline-end: 72px; }\n/* A stat button with two values, each after its words, one over the other: \"In: 3\", \"Out: 5\". */\n.fd-stat-pair { gap: 1px; }\n.fd-stat-row { display: inline-flex; align-items: baseline; gap: 5px; }\n.fd-stat-row > .fd-stat-label::after { content: \":\"; }\n.fd-stat-pair .fd-stat-value { font-size: 13.5px; }\n/* On a phone, stat buttons two to a row, edged between them, clear of a ribbon in the corner. */\n@container (max-width: 520px) {\n  .fd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .fd-stat { min-width: 0; padding-inline: 12px; text-align: start; column-gap: 8px; }\n  .fd-stat:has(> .fd-icon) { column-gap: 8px; }\n  .fd-stat-value { font-size: 14px; }\n  .fd-stat:nth-child(odd of :not([hidden])) { border-inline-start: none; }\n  .fd-stat:nth-child(n + 3 of :not([hidden])) { border-block-start: 1px solid var(--fd-border); }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 0; }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(2 of :not([hidden])) { padding-inline-end: 64px; }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(4 of :not([hidden])) { padding-inline-end: 36px; }\n}\n/* A statusbar's time spent in a step, after its words; its folded stages under More, in a menu fixed to the page so the bar's scrolling never cuts it. */\n.fd-step-time { margin-inline-start: 6px; font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; }\n.fd-statusbar li.fd-step-more > button { padding-inline: 16px 20px; letter-spacing: 1px; }\n.fd-statusbar li.fd-step-more > .fd-step-menu {\n  position: fixed; z-index: 30; display: grid; min-width: 160px; margin: 0; padding: 4px 0; clip-path: none; transform: none;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); white-space: nowrap;\n}\n.fd-statusbar li.fd-step-more > .fd-step-menu[hidden] { display: none; }\n.fd-statusbar .fd-step-menu > button {\n  font: inherit; font-size: 13px; text-align: start; border: none; background: none; color: inherit; padding: 6px 14px; cursor: pointer; transform: none;\n}\n.fd-statusbar .fd-step-menu > button:hover:not(:disabled), .fd-statusbar .fd-step-menu > button:focus-visible { background: var(--fd-accent-soft); outline: none; }\n.fd-statusbar .fd-step-menu > button:disabled { cursor: default; color: var(--fd-muted); }\n/* A button's key, shown on it while Alt is held, as Flectra shows its hotkeys. */\n.fd-hotkey { display: none; }\n[data-hotkeys] .fd-hotkey {\n  display: inline-block; margin-inline-start: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px;\n  font: 600 10.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.85; vertical-align: 1px;\n}\n/* A link's picture, or its initials, in a circle before its name; lines of the record \u2014 an address \u2014 under the link. */\n.fd-link-avatar {\n  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle;\n}\n.fd-link-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.fd-combo[data-avatar] > .fd-link-avatar { position: absolute; inset-inline-start: 4px; pointer-events: none; }\n.fd-combo[data-avatar] > .fd-link-avatar[hidden] ~ .fd-combo-input { padding-inline-start: var(--fd-pad-x); }\n.fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 32px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-combo[data-avatar] > .fd-link-avatar { inset-inline-start: 0; }\n.fd-form[data-fd-skin=\"underline\"] .fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 28px; }\n.fd-read-text > .fd-link-avatar { margin-inline-end: 6px; }\n.fd-chip > .fd-link-avatar { width: 18px; height: 18px; font-size: 9px; margin-inline: -4px 2px; }\n.fd-link { display: grid; gap: 2px; min-width: 0; }\n.fd-link-details { font-size: 12.5px; line-height: 1.4; color: var(--fd-muted); text-align: left; }\n[dir=\"rtl\"] .fd-link-details { text-align: right; }\n.fd-link-details > div { unicode-bidi: plaintext; }\n/* Tags in their record's colour, as Flectra numbers them, soft enough to read in either scheme. */\n.fd-chip[data-color] { background: color-mix(in srgb, var(--fd-tag) 18%, var(--fd-surface)); border-color: color-mix(in srgb, var(--fd-tag) 55%, var(--fd-surface)); }\n.fd-chip[data-color=\"1\"] { --fd-tag: #f06050; } .fd-chip[data-color=\"2\"] { --fd-tag: #f4a460; } .fd-chip[data-color=\"3\"] { --fd-tag: #f7cd1f; }\n.fd-chip[data-color=\"4\"] { --fd-tag: #6cc1ed; } .fd-chip[data-color=\"5\"] { --fd-tag: #814968; } .fd-chip[data-color=\"6\"] { --fd-tag: #eb7e7f; }\n.fd-chip[data-color=\"7\"] { --fd-tag: #2c8397; } .fd-chip[data-color=\"8\"] { --fd-tag: #475577; } .fd-chip[data-color=\"9\"] { --fd-tag: #d6145f; }\n.fd-chip[data-color=\"10\"] { --fd-tag: #30c381; } .fd-chip[data-color=\"11\"] { --fd-tag: #9365b8; }\n/* A line of parts, as Flectra's o_row: its title the line's label, its parts each as wide as they need, words and buttons among them. */\n.fd-oneline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; min-height: var(--fd-control-height, 30px); }\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; width: auto; min-width: 0; grid-template-columns: none; }\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > * { grid-column: auto !important; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:not([data-labels=\"beside\"]):not([data-labels=\"above\"]) > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > :is(.fd-error, .fd-warning) { flex-basis: 100%; }\n.fd-oneline-row .fd-input { width: 12em; max-width: 100%; }\n/* Words and the value they go with wrap as one, never parted at a line's end; a run with nothing shown takes no room. */\n.fd-form .fd-oneline-pair { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; flex: 0 1 auto; max-width: 100%; min-width: 0; }\n.fd-form .fd-oneline-pair:not(:has(> :not([hidden]))) { display: none; }\n/* On a narrow screen each part gives way to the row's width rather than run past it. */\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field { max-width: 100%; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > * { max-width: 100%; min-width: 0; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"]) .fd-input { width: 15em; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"integer\"], [data-type=\"float\"]) .fd-input { width: 7em; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type=\"monetary\"] .fd-input { width: 8.5em; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"date\"], [data-type=\"datetime\"]) .fd-input { width: 9.5em; }\n/* A date and time needs room for \"dd.mm.yyyy, --:--\" and its calendar button, or its minutes are cut. */\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type=\"datetime\"] .fd-input { width: 14em; }\n/* A link or a date fills what its line leaves, as Flectra's o_row: as wide as the boxes above and below it,\n   a button or words beside it moving to a line of their own where they do not fit. */\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"], [data-type=\"date\"], [data-type=\"datetime\"]) { flex: 1 1 auto; }\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"], [data-type=\"date\"], [data-type=\"datetime\"]) > :not(.fd-label) { flex: 1 1 auto; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"], [data-type=\"date\"], [data-type=\"datetime\"]) .fd-input { width: 100%; min-width: min(100%, var(--fd-oneline-min, 9.5em)); }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type=\"datetime\"] { --fd-oneline-min: 14em; }\n.fd-form .fd-oneline-words { margin: 0; padding: 0; border: 0; background: none; color: var(--fd-text); }\n.fd-form .fd-oneline-words.fd-text-note { color: var(--fd-muted); font-size: 12.5px; }\n/* A line with no title of its own takes the whole row, its fields' labels beside them where they ask. */\n.fd-form .fd-oneline:not(:has(> .fd-label)) > .fd-oneline-row { grid-column: 1 / -1 !important; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-button-link { padding-inline: 0; min-height: 0; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > .fd-read-text { min-height: 0; padding-block: 0; }\n/* Words over a sheet's title, as Flectra's label over its h1. */\n.fd-title-label { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); }\n";

package/src/lib/styles-sheet.d.ts

@@ -3,4 +3,4 @@
  * Appended to Fieldia's stylesheet, scoped and written with logical
  * properties as the rest of it is.
  */
-export declare const SHEET_CSS = "\n/* ---- a sheet's reading ----------------------------------------------------- */\n/* A read-only value as its words: on the line a box's words would sit on, wrapped rather than cut at the box's edge. */\n.fd-read-text {\n  min-width: 0; min-height: var(--fd-control-height, 30px); padding-block: calc(var(--fd-pad-y) + 1px);\n  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: var(--fd-text);\n}\n.fd-field:is([data-type=\"integer\"], [data-type=\"float\"], [data-type=\"monetary\"]) > .fd-read-text { font-variant-numeric: tabular-nums; }\n/* A record's words read their own way \u2014 English on a page read right to left keeps its order \u2014 lined up with the page. */\n.fd-read-text { unicode-bidi: plaintext; text-align: left; }\n[dir=\"rtl\"] .fd-read-text { text-align: right; }\n.fd-read-text a, .fd-read-link { color: var(--fd-accent); text-decoration: none; }\n.fd-read-link { border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-align: start; }\n.fd-read-text a:hover, .fd-read-link:hover { text-decoration: underline; }\n.fd-read-link:focus-visible, .fd-read-text a:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n/* A choice as a coloured pill, as wide as its words, on the line a box's words sit on. */\n.fd-field > .fd-value-badge { justify-self: start; align-self: start; width: fit-content; margin-block: calc((var(--fd-control-height, 30px) - 24px) / 2); }\n.fd-title > .fd-field > .fd-read-text { font-size: 24px; font-weight: 600; line-height: 1.25; }\n/* A ribbon with words to point at takes the pointer, though its frame lets clicks through. */\n.fd-ribbon[title] { pointer-events: auto; cursor: help; }\n/* A field's value inside an alert's or a text's words, set apart by its weight. */\n.fd-value { font-weight: 600; }\n/* An alert's own buttons, after its words: links in the alert's colour, wrapping under the words on a narrow screen. */\n.fd-alert:has(> .fd-alert-actions) { flex-wrap: wrap; align-items: baseline; }\n.fd-alert-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }\n.fd-alert-actions .fd-button { min-height: 0; padding-block: 0; font-size: inherit; }\n.fd-alert-actions .fd-button-link { color: inherit; padding-inline: 0; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }\n/* An alert among a page's parts, as Flectra's in a tab: across its row. */\n.fd-text-alert { grid-column: 1 / -1; margin: 0; }\n/* The first alert on a card clears the ribbon in its corner, when no stat buttons stand between them. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) > :is(.fd-ribbon-frame + .fd-alert, .fd-ribbon-frame + .fd-stats[hidden] + .fd-alert) { margin-inline-end: 72px; }\n/* A stat button with two values, each after its words, one over the other: \"In: 3\", \"Out: 5\". */\n.fd-stat-pair { gap: 1px; }\n.fd-stat-row { display: inline-flex; align-items: baseline; gap: 5px; }\n.fd-stat-row > .fd-stat-label::after { content: \":\"; }\n.fd-stat-pair .fd-stat-value { font-size: 13.5px; }\n/* On a phone, stat buttons two to a row, edged between them, clear of a ribbon in the corner. */\n@container (max-width: 520px) {\n  .fd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .fd-stat { min-width: 0; padding-inline: 12px; text-align: start; column-gap: 8px; }\n  .fd-stat:has(> .fd-icon) { column-gap: 8px; }\n  .fd-stat-value { font-size: 14px; }\n  .fd-stat:nth-child(odd of :not([hidden])) { border-inline-start: none; }\n  .fd-stat:nth-child(n + 3 of :not([hidden])) { border-block-start: 1px solid var(--fd-border); }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 0; }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(2 of :not([hidden])) { padding-inline-end: 64px; }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(4 of :not([hidden])) { padding-inline-end: 36px; }\n}\n/* A statusbar's time spent in a step, after its words; its folded stages under More, in a menu fixed to the page so the bar's scrolling never cuts it. */\n.fd-step-time { margin-inline-start: 6px; font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; }\n.fd-statusbar li.fd-step-more > button { padding-inline: 16px 20px; letter-spacing: 1px; }\n.fd-statusbar li.fd-step-more > .fd-step-menu {\n  position: fixed; z-index: 30; display: grid; min-width: 160px; margin: 0; padding: 4px 0; clip-path: none; transform: none;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); white-space: nowrap;\n}\n.fd-statusbar li.fd-step-more > .fd-step-menu[hidden] { display: none; }\n.fd-statusbar .fd-step-menu > button {\n  font: inherit; font-size: 13px; text-align: start; border: none; background: none; color: inherit; padding: 6px 14px; cursor: pointer; transform: none;\n}\n.fd-statusbar .fd-step-menu > button:hover:not(:disabled), .fd-statusbar .fd-step-menu > button:focus-visible { background: var(--fd-accent-soft); outline: none; }\n.fd-statusbar .fd-step-menu > button:disabled { cursor: default; color: var(--fd-muted); }\n/* A button's key, shown on it while Alt is held, as Flectra shows its hotkeys. */\n.fd-hotkey { display: none; }\n[data-hotkeys] .fd-hotkey {\n  display: inline-block; margin-inline-start: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px;\n  font: 600 10.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.85; vertical-align: 1px;\n}\n/* A link's picture, or its initials, in a circle before its name; lines of the record \u2014 an address \u2014 under the link. */\n.fd-link-avatar {\n  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle;\n}\n.fd-link-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.fd-combo[data-avatar] > .fd-link-avatar { position: absolute; inset-inline-start: 4px; pointer-events: none; }\n.fd-combo[data-avatar] > .fd-link-avatar[hidden] ~ .fd-combo-input { padding-inline-start: var(--fd-pad-x); }\n.fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 32px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-combo[data-avatar] > .fd-link-avatar { inset-inline-start: 0; }\n.fd-form[data-fd-skin=\"underline\"] .fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 28px; }\n.fd-read-text > .fd-link-avatar { margin-inline-end: 6px; }\n.fd-chip > .fd-link-avatar { width: 18px; height: 18px; font-size: 9px; margin-inline: -4px 2px; }\n.fd-link { display: grid; gap: 2px; min-width: 0; }\n.fd-link-details { font-size: 12.5px; line-height: 1.4; color: var(--fd-muted); text-align: left; }\n[dir=\"rtl\"] .fd-link-details { text-align: right; }\n.fd-link-details > div { unicode-bidi: plaintext; }\n/* Tags in their record's colour, as Flectra numbers them, soft enough to read in either scheme. */\n.fd-chip[data-color] { background: color-mix(in srgb, var(--fd-tag) 18%, var(--fd-surface)); border-color: color-mix(in srgb, var(--fd-tag) 55%, var(--fd-surface)); }\n.fd-chip[data-color=\"1\"] { --fd-tag: #f06050; } .fd-chip[data-color=\"2\"] { --fd-tag: #f4a460; } .fd-chip[data-color=\"3\"] { --fd-tag: #f7cd1f; }\n.fd-chip[data-color=\"4\"] { --fd-tag: #6cc1ed; } .fd-chip[data-color=\"5\"] { --fd-tag: #814968; } .fd-chip[data-color=\"6\"] { --fd-tag: #eb7e7f; }\n.fd-chip[data-color=\"7\"] { --fd-tag: #2c8397; } .fd-chip[data-color=\"8\"] { --fd-tag: #475577; } .fd-chip[data-color=\"9\"] { --fd-tag: #d6145f; }\n.fd-chip[data-color=\"10\"] { --fd-tag: #30c381; } .fd-chip[data-color=\"11\"] { --fd-tag: #9365b8; }\n/* A line of parts, as Flectra's o_row: its title the line's label, its parts each as wide as they need, words and buttons among them. */\n.fd-oneline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; min-height: var(--fd-control-height, 30px); }\n.fd-form .fd-oneline-row > .fd-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; width: auto; min-width: 0; grid-template-columns: none; }\n.fd-form .fd-oneline-row > .fd-field > * { grid-column: auto !important; }\n.fd-oneline-row > .fd-field:not([data-labels=\"beside\"]):not([data-labels=\"above\"]) > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-oneline-row > .fd-field > :is(.fd-error, .fd-warning) { flex-basis: 100%; }\n.fd-oneline-row .fd-input { width: 12em; max-width: 100%; }\n/* On a narrow screen each part gives way to the row's width rather than run past it. */\n.fd-form .fd-oneline-row > .fd-field { max-width: 100%; }\n.fd-oneline-row > .fd-field > * { max-width: 100%; min-width: 0; }\n.fd-oneline-row > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"]) .fd-input { width: 15em; }\n.fd-oneline-row > .fd-field:is([data-type=\"integer\"], [data-type=\"float\"]) .fd-input { width: 7em; }\n.fd-oneline-row > .fd-field[data-type=\"monetary\"] .fd-input { width: 8.5em; }\n.fd-oneline-row > .fd-field:is([data-type=\"date\"], [data-type=\"datetime\"]) .fd-input { width: 9.5em; }\n.fd-form .fd-oneline-words { margin: 0; padding: 0; border: 0; background: none; color: var(--fd-text); }\n.fd-form .fd-oneline-words.fd-text-note { color: var(--fd-muted); font-size: 12.5px; }\n/* A line with no title of its own takes the whole row, its fields' labels beside them where they ask. */\n.fd-form .fd-oneline:not(:has(> .fd-label)) > .fd-oneline-row { grid-column: 1 / -1 !important; }\n.fd-oneline-row > .fd-button-link { padding-inline: 0; min-height: 0; }\n.fd-oneline-row > .fd-field > .fd-read-text { min-height: 0; padding-block: 0; }\n/* Words over a sheet's title, as Flectra's label over its h1. */\n.fd-title-label { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); }\n";
+export declare const SHEET_CSS = "\n/* ---- a sheet's reading ----------------------------------------------------- */\n/* A read-only value as its words: on the line a box's words would sit on, wrapped rather than cut at the box's edge. */\n.fd-read-text {\n  min-width: 0; min-height: var(--fd-control-height, 30px); padding-block: calc(var(--fd-pad-y) + 1px);\n  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: var(--fd-text);\n}\n.fd-field:is([data-type=\"integer\"], [data-type=\"float\"], [data-type=\"monetary\"]) > .fd-read-text { font-variant-numeric: tabular-nums; }\n/* A record's words read their own way \u2014 English on a page read right to left keeps its order \u2014 lined up with the page. */\n.fd-read-text { unicode-bidi: plaintext; text-align: left; }\n[dir=\"rtl\"] .fd-read-text { text-align: right; }\n/* Its words start where a box's words do, inside the box's padding (and an outlined box's border). */\n.fd-read-text { padding-inline: var(--fd-pad-x); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-read-text { padding-inline: calc(var(--fd-pad-x) + 1px); }\n/* A sheet's title stays flush with the labels under it, as it was drawn. */\n.fd-form :is(.fd-title, .fd-title-line) .fd-read-text { padding-inline: 0; }\n.fd-read-text a, .fd-read-link { color: var(--fd-accent); text-decoration: none; }\n.fd-read-link { border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-align: start; }\n.fd-read-text a:hover, .fd-read-link:hover { text-decoration: underline; }\n.fd-read-link:focus-visible, .fd-read-text a:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n/* A choice as a coloured pill, as wide as its words, on the line a box's words sit on. */\n.fd-field > .fd-value-badge { justify-self: start; align-self: start; width: fit-content; margin-block: calc((var(--fd-control-height, 30px) - 24px) / 2); }\n.fd-title > .fd-field > .fd-read-text { font-size: 24px; font-weight: 600; line-height: 1.25; }\n/* A ribbon with words to point at takes the pointer, though its frame lets clicks through. */\n.fd-ribbon[title] { pointer-events: auto; cursor: help; }\n/* A field's value inside an alert's or a text's words, set apart by its weight. */\n.fd-value { font-weight: 600; }\n/* An alert's own buttons, after its words: links in the alert's colour, wrapping under the words on a narrow screen. */\n.fd-alert:has(> .fd-alert-actions) { flex-wrap: wrap; align-items: baseline; }\n.fd-alert-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }\n.fd-alert-actions .fd-button { min-height: 0; padding-block: 0; font-size: inherit; }\n.fd-alert-actions .fd-button-link { color: inherit; padding-inline: 0; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }\n/* An alert among a page's parts, as Flectra's in a tab: across its row. */\n.fd-text-alert { grid-column: 1 / -1; margin: 0; }\n/* The first alert on a card clears the ribbon in its corner, when no stat buttons stand between them. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) > :is(.fd-ribbon-frame + .fd-alert, .fd-ribbon-frame + .fd-stats[hidden] + .fd-alert) { margin-inline-end: 72px; }\n/* A stat button with two values, each after its words, one over the other: \"In: 3\", \"Out: 5\". */\n.fd-stat-pair { gap: 1px; }\n.fd-stat-row { display: inline-flex; align-items: baseline; gap: 5px; }\n.fd-stat-row > .fd-stat-label::after { content: \":\"; }\n.fd-stat-pair .fd-stat-value { font-size: 13.5px; }\n/* On a phone, stat buttons two to a row, edged between them, clear of a ribbon in the corner. */\n@container (max-width: 520px) {\n  .fd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .fd-stat { min-width: 0; padding-inline: 12px; text-align: start; column-gap: 8px; }\n  .fd-stat:has(> .fd-icon) { column-gap: 8px; }\n  .fd-stat-value { font-size: 14px; }\n  .fd-stat:nth-child(odd of :not([hidden])) { border-inline-start: none; }\n  .fd-stat:nth-child(n + 3 of :not([hidden])) { border-block-start: 1px solid var(--fd-border); }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 0; }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(2 of :not([hidden])) { padding-inline-end: 64px; }\n  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(4 of :not([hidden])) { padding-inline-end: 36px; }\n}\n/* A statusbar's time spent in a step, after its words; its folded stages under More, in a menu fixed to the page so the bar's scrolling never cuts it. */\n.fd-step-time { margin-inline-start: 6px; font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; }\n.fd-statusbar li.fd-step-more > button { padding-inline: 16px 20px; letter-spacing: 1px; }\n.fd-statusbar li.fd-step-more > .fd-step-menu {\n  position: fixed; z-index: 30; display: grid; min-width: 160px; margin: 0; padding: 4px 0; clip-path: none; transform: none;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); white-space: nowrap;\n}\n.fd-statusbar li.fd-step-more > .fd-step-menu[hidden] { display: none; }\n.fd-statusbar .fd-step-menu > button {\n  font: inherit; font-size: 13px; text-align: start; border: none; background: none; color: inherit; padding: 6px 14px; cursor: pointer; transform: none;\n}\n.fd-statusbar .fd-step-menu > button:hover:not(:disabled), .fd-statusbar .fd-step-menu > button:focus-visible { background: var(--fd-accent-soft); outline: none; }\n.fd-statusbar .fd-step-menu > button:disabled { cursor: default; color: var(--fd-muted); }\n/* A button's key, shown on it while Alt is held, as Flectra shows its hotkeys. */\n.fd-hotkey { display: none; }\n[data-hotkeys] .fd-hotkey {\n  display: inline-block; margin-inline-start: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px;\n  font: 600 10.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.85; vertical-align: 1px;\n}\n/* A link's picture, or its initials, in a circle before its name; lines of the record \u2014 an address \u2014 under the link. */\n.fd-link-avatar {\n  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle;\n}\n.fd-link-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.fd-combo[data-avatar] > .fd-link-avatar { position: absolute; inset-inline-start: 4px; pointer-events: none; }\n.fd-combo[data-avatar] > .fd-link-avatar[hidden] ~ .fd-combo-input { padding-inline-start: var(--fd-pad-x); }\n.fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 32px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-combo[data-avatar] > .fd-link-avatar { inset-inline-start: 0; }\n.fd-form[data-fd-skin=\"underline\"] .fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 28px; }\n.fd-read-text > .fd-link-avatar { margin-inline-end: 6px; }\n.fd-chip > .fd-link-avatar { width: 18px; height: 18px; font-size: 9px; margin-inline: -4px 2px; }\n.fd-link { display: grid; gap: 2px; min-width: 0; }\n.fd-link-details { font-size: 12.5px; line-height: 1.4; color: var(--fd-muted); text-align: left; }\n[dir=\"rtl\"] .fd-link-details { text-align: right; }\n.fd-link-details > div { unicode-bidi: plaintext; }\n/* Tags in their record's colour, as Flectra numbers them, soft enough to read in either scheme. */\n.fd-chip[data-color] { background: color-mix(in srgb, var(--fd-tag) 18%, var(--fd-surface)); border-color: color-mix(in srgb, var(--fd-tag) 55%, var(--fd-surface)); }\n.fd-chip[data-color=\"1\"] { --fd-tag: #f06050; } .fd-chip[data-color=\"2\"] { --fd-tag: #f4a460; } .fd-chip[data-color=\"3\"] { --fd-tag: #f7cd1f; }\n.fd-chip[data-color=\"4\"] { --fd-tag: #6cc1ed; } .fd-chip[data-color=\"5\"] { --fd-tag: #814968; } .fd-chip[data-color=\"6\"] { --fd-tag: #eb7e7f; }\n.fd-chip[data-color=\"7\"] { --fd-tag: #2c8397; } .fd-chip[data-color=\"8\"] { --fd-tag: #475577; } .fd-chip[data-color=\"9\"] { --fd-tag: #d6145f; }\n.fd-chip[data-color=\"10\"] { --fd-tag: #30c381; } .fd-chip[data-color=\"11\"] { --fd-tag: #9365b8; }\n/* A line of parts, as Flectra's o_row: its title the line's label, its parts each as wide as they need, words and buttons among them. */\n.fd-oneline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; min-height: var(--fd-control-height, 30px); }\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; width: auto; min-width: 0; grid-template-columns: none; }\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > * { grid-column: auto !important; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:not([data-labels=\"beside\"]):not([data-labels=\"above\"]) > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > :is(.fd-error, .fd-warning) { flex-basis: 100%; }\n.fd-oneline-row .fd-input { width: 12em; max-width: 100%; }\n/* Words and the value they go with wrap as one, never parted at a line's end; a run with nothing shown takes no room. */\n.fd-form .fd-oneline-pair { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; flex: 0 1 auto; max-width: 100%; min-width: 0; }\n.fd-form .fd-oneline-pair:not(:has(> :not([hidden]))) { display: none; }\n/* On a narrow screen each part gives way to the row's width rather than run past it. */\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field { max-width: 100%; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > * { max-width: 100%; min-width: 0; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"]) .fd-input { width: 15em; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"integer\"], [data-type=\"float\"]) .fd-input { width: 7em; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type=\"monetary\"] .fd-input { width: 8.5em; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"date\"], [data-type=\"datetime\"]) .fd-input { width: 9.5em; }\n/* A date and time needs room for \"dd.mm.yyyy, --:--\" and its calendar button, or its minutes are cut. */\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type=\"datetime\"] .fd-input { width: 14em; }\n/* A link or a date fills what its line leaves, as Flectra's o_row: as wide as the boxes above and below it,\n   a button or words beside it moving to a line of their own where they do not fit. */\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"], [data-type=\"date\"], [data-type=\"datetime\"]) { flex: 1 1 auto; }\n.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"], [data-type=\"date\"], [data-type=\"datetime\"]) > :not(.fd-label) { flex: 1 1 auto; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type=\"many2one\"], [data-type=\"reference\"], [data-type=\"date\"], [data-type=\"datetime\"]) .fd-input { width: 100%; min-width: min(100%, var(--fd-oneline-min, 9.5em)); }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type=\"datetime\"] { --fd-oneline-min: 14em; }\n.fd-form .fd-oneline-words { margin: 0; padding: 0; border: 0; background: none; color: var(--fd-text); }\n.fd-form .fd-oneline-words.fd-text-note { color: var(--fd-muted); font-size: 12.5px; }\n/* A line with no title of its own takes the whole row, its fields' labels beside them where they ask. */\n.fd-form .fd-oneline:not(:has(> .fd-label)) > .fd-oneline-row { grid-column: 1 / -1 !important; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-button-link { padding-inline: 0; min-height: 0; }\n:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > .fd-read-text { min-height: 0; padding-block: 0; }\n/* Words over a sheet's title, as Flectra's label over its h1. */\n.fd-title-label { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); }\n";

package/src/lib/styles-sheet.js

@@ -17,6 +17,11 @@ exports.SHEET_CSS = `
 /* A record's words read their own way — English on a page read right to left keeps its order — lined up with the page. */
 .fd-read-text { unicode-bidi: plaintext; text-align: left; }
 [dir="rtl"] .fd-read-text { text-align: right; }
+/* Its words start where a box's words do, inside the box's padding (and an outlined box's border). */
+.fd-read-text { padding-inline: var(--fd-pad-x); }
+.fd-form[data-fd-skin="outlined"] .fd-read-text { padding-inline: calc(var(--fd-pad-x) + 1px); }
+/* A sheet's title stays flush with the labels under it, as it was drawn. */
+.fd-form :is(.fd-title, .fd-title-line) .fd-read-text { padding-inline: 0; }
 .fd-read-text a, .fd-read-link { color: var(--fd-accent); text-decoration: none; }
 .fd-read-link { border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-align: start; }
 .fd-read-text a:hover, .fd-read-link:hover { text-decoration: underline; }
@@ -99,24 +104,35 @@ exports.SHEET_CSS = `
 .fd-chip[data-color="10"] { --fd-tag: #30c381; } .fd-chip[data-color="11"] { --fd-tag: #9365b8; }
 /* A line of parts, as Flectra's o_row: its title the line's label, its parts each as wide as they need, words and buttons among them. */
 .fd-oneline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; min-height: var(--fd-control-height, 30px); }
-.fd-form .fd-oneline-row > .fd-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; width: auto; min-width: 0; grid-template-columns: none; }
-.fd-form .fd-oneline-row > .fd-field > * { grid-column: auto !important; }
-.fd-oneline-row > .fd-field:not([data-labels="beside"]):not([data-labels="above"]) > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-.fd-oneline-row > .fd-field > :is(.fd-error, .fd-warning) { flex-basis: 100%; }
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; width: auto; min-width: 0; grid-template-columns: none; }
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > * { grid-column: auto !important; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:not([data-labels="beside"]):not([data-labels="above"]) > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > :is(.fd-error, .fd-warning) { flex-basis: 100%; }
 .fd-oneline-row .fd-input { width: 12em; max-width: 100%; }
+/* Words and the value they go with wrap as one, never parted at a line's end; a run with nothing shown takes no room. */
+.fd-form .fd-oneline-pair { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; flex: 0 1 auto; max-width: 100%; min-width: 0; }
+.fd-form .fd-oneline-pair:not(:has(> :not([hidden]))) { display: none; }
 /* On a narrow screen each part gives way to the row's width rather than run past it. */
-.fd-form .fd-oneline-row > .fd-field { max-width: 100%; }
-.fd-oneline-row > .fd-field > * { max-width: 100%; min-width: 0; }
-.fd-oneline-row > .fd-field:is([data-type="many2one"], [data-type="reference"]) .fd-input { width: 15em; }
-.fd-oneline-row > .fd-field:is([data-type="integer"], [data-type="float"]) .fd-input { width: 7em; }
-.fd-oneline-row > .fd-field[data-type="monetary"] .fd-input { width: 8.5em; }
-.fd-oneline-row > .fd-field:is([data-type="date"], [data-type="datetime"]) .fd-input { width: 9.5em; }
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field { max-width: 100%; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > * { max-width: 100%; min-width: 0; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="many2one"], [data-type="reference"]) .fd-input { width: 15em; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="integer"], [data-type="float"]) .fd-input { width: 7em; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type="monetary"] .fd-input { width: 8.5em; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="date"], [data-type="datetime"]) .fd-input { width: 9.5em; }
+/* A date and time needs room for "dd.mm.yyyy, --:--" and its calendar button, or its minutes are cut. */
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type="datetime"] .fd-input { width: 14em; }
+/* A link or a date fills what its line leaves, as Flectra's o_row: as wide as the boxes above and below it,
+   a button or words beside it moving to a line of their own where they do not fit. */
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="many2one"], [data-type="reference"], [data-type="date"], [data-type="datetime"]) { flex: 1 1 auto; }
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="many2one"], [data-type="reference"], [data-type="date"], [data-type="datetime"]) > :not(.fd-label) { flex: 1 1 auto; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="many2one"], [data-type="reference"], [data-type="date"], [data-type="datetime"]) .fd-input { width: 100%; min-width: min(100%, var(--fd-oneline-min, 9.5em)); }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type="datetime"] { --fd-oneline-min: 14em; }
 .fd-form .fd-oneline-words { margin: 0; padding: 0; border: 0; background: none; color: var(--fd-text); }
 .fd-form .fd-oneline-words.fd-text-note { color: var(--fd-muted); font-size: 12.5px; }
 /* A line with no title of its own takes the whole row, its fields' labels beside them where they ask. */
 .fd-form .fd-oneline:not(:has(> .fd-label)) > .fd-oneline-row { grid-column: 1 / -1 !important; }
-.fd-oneline-row > .fd-button-link { padding-inline: 0; min-height: 0; }
-.fd-oneline-row > .fd-field > .fd-read-text { min-height: 0; padding-block: 0; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-button-link { padding-inline: 0; min-height: 0; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > .fd-read-text { min-height: 0; padding-block: 0; }
 /* Words over a sheet's title, as Flectra's label over its h1. */
 .fd-title-label { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); }
 `;

package/src/lib/styles-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles-sheet.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-sheet.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACU,QAAA,SAAS,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHlC,CAAC"}
+{"version":3,"file":"styles-sheet.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-sheet.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACU,QAAA,SAAS,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIlC,CAAC"}

package/src/lib/styles-sheet.mjs

@@ -14,6 +14,11 @@ export const SHEET_CSS = /* css */ `
 /* A record's words read their own way — English on a page read right to left keeps its order — lined up with the page. */
 .fd-read-text { unicode-bidi: plaintext; text-align: left; }
 [dir="rtl"] .fd-read-text { text-align: right; }
+/* Its words start where a box's words do, inside the box's padding (and an outlined box's border). */
+.fd-read-text { padding-inline: var(--fd-pad-x); }
+.fd-form[data-fd-skin="outlined"] .fd-read-text { padding-inline: calc(var(--fd-pad-x) + 1px); }
+/* A sheet's title stays flush with the labels under it, as it was drawn. */
+.fd-form :is(.fd-title, .fd-title-line) .fd-read-text { padding-inline: 0; }
 .fd-read-text a, .fd-read-link { color: var(--fd-accent); text-decoration: none; }
 .fd-read-link { border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-align: start; }
 .fd-read-text a:hover, .fd-read-link:hover { text-decoration: underline; }
@@ -96,24 +101,35 @@ export const SHEET_CSS = /* css */ `
 .fd-chip[data-color="10"] { --fd-tag: #30c381; } .fd-chip[data-color="11"] { --fd-tag: #9365b8; }
 /* A line of parts, as Flectra's o_row: its title the line's label, its parts each as wide as they need, words and buttons among them. */
 .fd-oneline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; min-height: var(--fd-control-height, 30px); }
-.fd-form .fd-oneline-row > .fd-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; width: auto; min-width: 0; grid-template-columns: none; }
-.fd-form .fd-oneline-row > .fd-field > * { grid-column: auto !important; }
-.fd-oneline-row > .fd-field:not([data-labels="beside"]):not([data-labels="above"]) > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-.fd-oneline-row > .fd-field > :is(.fd-error, .fd-warning) { flex-basis: 100%; }
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; width: auto; min-width: 0; grid-template-columns: none; }
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > * { grid-column: auto !important; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:not([data-labels="beside"]):not([data-labels="above"]) > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > :is(.fd-error, .fd-warning) { flex-basis: 100%; }
 .fd-oneline-row .fd-input { width: 12em; max-width: 100%; }
+/* Words and the value they go with wrap as one, never parted at a line's end; a run with nothing shown takes no room. */
+.fd-form .fd-oneline-pair { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; flex: 0 1 auto; max-width: 100%; min-width: 0; }
+.fd-form .fd-oneline-pair:not(:has(> :not([hidden]))) { display: none; }
 /* On a narrow screen each part gives way to the row's width rather than run past it. */
-.fd-form .fd-oneline-row > .fd-field { max-width: 100%; }
-.fd-oneline-row > .fd-field > * { max-width: 100%; min-width: 0; }
-.fd-oneline-row > .fd-field:is([data-type="many2one"], [data-type="reference"]) .fd-input { width: 15em; }
-.fd-oneline-row > .fd-field:is([data-type="integer"], [data-type="float"]) .fd-input { width: 7em; }
-.fd-oneline-row > .fd-field[data-type="monetary"] .fd-input { width: 8.5em; }
-.fd-oneline-row > .fd-field:is([data-type="date"], [data-type="datetime"]) .fd-input { width: 9.5em; }
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field { max-width: 100%; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > * { max-width: 100%; min-width: 0; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="many2one"], [data-type="reference"]) .fd-input { width: 15em; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="integer"], [data-type="float"]) .fd-input { width: 7em; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type="monetary"] .fd-input { width: 8.5em; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="date"], [data-type="datetime"]) .fd-input { width: 9.5em; }
+/* A date and time needs room for "dd.mm.yyyy, --:--" and its calendar button, or its minutes are cut. */
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type="datetime"] .fd-input { width: 14em; }
+/* A link or a date fills what its line leaves, as Flectra's o_row: as wide as the boxes above and below it,
+   a button or words beside it moving to a line of their own where they do not fit. */
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="many2one"], [data-type="reference"], [data-type="date"], [data-type="datetime"]) { flex: 1 1 auto; }
+.fd-form :is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="many2one"], [data-type="reference"], [data-type="date"], [data-type="datetime"]) > :not(.fd-label) { flex: 1 1 auto; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field:is([data-type="many2one"], [data-type="reference"], [data-type="date"], [data-type="datetime"]) .fd-input { width: 100%; min-width: min(100%, var(--fd-oneline-min, 9.5em)); }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field[data-type="datetime"] { --fd-oneline-min: 14em; }
 .fd-form .fd-oneline-words { margin: 0; padding: 0; border: 0; background: none; color: var(--fd-text); }
 .fd-form .fd-oneline-words.fd-text-note { color: var(--fd-muted); font-size: 12.5px; }
 /* A line with no title of its own takes the whole row, its fields' labels beside them where they ask. */
 .fd-form .fd-oneline:not(:has(> .fd-label)) > .fd-oneline-row { grid-column: 1 / -1 !important; }
-.fd-oneline-row > .fd-button-link { padding-inline: 0; min-height: 0; }
-.fd-oneline-row > .fd-field > .fd-read-text { min-height: 0; padding-block: 0; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-button-link { padding-inline: 0; min-height: 0; }
+:is(.fd-oneline-row, .fd-oneline-pair) > .fd-field > .fd-read-text { min-height: 0; padding-block: 0; }
 /* Words over a sheet's title, as Flectra's label over its h1. */
 .fd-title-label { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); }
 `;

package/src/lib/styles-sheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles-sheet.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-sheet.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHlC,CAAC"}
+{"version":3,"file":"styles-sheet.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-sheet.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIlC,CAAC"}