@fieldia/widgets 0.11.0 → 0.12.0

package/src/lib/styles-business.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUSINESS_CSS = void 0;
+/**
+ * The business widgets' part of the stylesheet: priority stars, a state's
+ * dot and its menu, a tag colour, a copy button, a range of dates, a running
+ * timer, a document shown inline, an analytic distribution, tax totals and a
+ * list of payments. Scoped, and written with logical properties, as the rest
+ * of it is; it comes after the inputs' part.
+ */
+exports.BUSINESS_CSS = `
+/* ---- business widgets ------------------------------------------------------- */
+/* Priority: grey stars, gold up to the one picked; hovered, they show what a click would pick. */
+.fd-priority { display: inline-flex; align-items: center; gap: 1px; }
+.fd-priority-star { border: none; background: none; padding: 0 1px; min-width: 0; font: inherit; font-size: 20px; line-height: 1; color: var(--fd-border-strong); cursor: pointer; }
+.fd-priority-star.fd-on { color: #e8a317; }
+.fd-priority:not(:has(:disabled)):hover .fd-priority-star { color: #e8a317; }
+.fd-priority:not(:has(:disabled)) .fd-priority-star:hover ~ .fd-priority-star { color: var(--fd-border-strong); }
+.fd-priority-star:disabled { cursor: default; }
+/* Fields on the title's line: a priority star before the name, a state's dot after it; the name keeps the room and its big words. */
+.fd-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
+/* On a phone the name takes a row of its own rather than be cut. */
+.fd-title-line > .fd-title-name { flex: 1 1 18em; min-width: 0; }
+.fd-title-line > .fd-title-name .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }
+/* A read-only name on the title's line reads as the title too, as it does alone. */
+.fd-title-line > .fd-title-name > .fd-read-text { font-size: 24px; font-weight: 600; line-height: 1.25; }
+.fd-form .fd-title-line > .fd-field { grid-template-columns: minmax(0, 1fr); }
+.fd-form .fd-title-line > .fd-field > * { grid-column: 1 !important; }
+.fd-form .fd-title-line > .fd-title-side { display: flex; align-items: center; flex: none; }
+.fd-title-line > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-title-line .fd-priority-star { font-size: 24px; }
+/* A state's dot: grey, red, green…, in the state's tone; its menu floats under it. */
+.fd-dot-box { position: relative; display: inline-flex; align-items: center; gap: 6px; }
+.fd-dot-button { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; }
+.fd-dot-button:hover:not(:disabled) { background: var(--fd-accent-soft); }
+.fd-dot-button:disabled { cursor: default; }
+.fd-dot { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--fd-dot, var(--fd-border-strong)); }
+.fd-dot-button[data-tone="muted"], .fd-dot-item[data-tone="muted"] { --fd-dot: var(--fd-border-strong); }
+.fd-dot-button[data-tone="danger"], .fd-dot-item[data-tone="danger"] { --fd-dot: var(--fd-error); }
+.fd-dot-button[data-tone="success"], .fd-dot-item[data-tone="success"] { --fd-dot: var(--fd-success); }
+.fd-dot-button[data-tone="warning"], .fd-dot-item[data-tone="warning"] { --fd-dot: #d97706; }
+.fd-dot-button[data-tone="info"], .fd-dot-item[data-tone="info"] { --fd-dot: var(--fd-info); }
+.fd-dot-label { font-size: 13px; color: var(--fd-muted); }
+.fd-dot-menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 30; min-width: 180px; padding: 4px; display: grid; background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
+.fd-dot-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; font-size: 14px; }
+.fd-dot-item:hover, .fd-dot-item:focus { background: var(--fd-accent-soft); outline: none; }
+.fd-dot-item[aria-checked="true"] { font-weight: 600; }
+/* A colour: a swatch of it, and a palette of Flectra's twelve under it; none is a crossed-out square. */
+.fd-colour-box { position: relative; display: inline-flex; align-items: center; gap: 8px; }
+.fd-colour-button, .fd-colour { width: 24px; height: 24px; padding: 0; border: 1px solid var(--fd-border-strong); border-radius: 4px; background: var(--fd-swatch, transparent); cursor: pointer; }
+.fd-colour-button:disabled { cursor: default; }
+.fd-colour-none, .fd-colour[data-colour="0"] { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--fd-error) calc(50% - 1px), var(--fd-error) calc(50% + 1px), transparent calc(50% + 1px)); }
+.fd-colour-palette { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 30; display: grid; grid-template-columns: repeat(6, 24px); gap: 6px; padding: 8px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
+.fd-colour[aria-checked="true"] { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-accent); }
+.fd-colour-input { width: 44px; height: 30px; padding: 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); }
+.fd-colour-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--fd-muted); }
+/* A value to copy: its box, the button after it. */
+.fd-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.fd-copy > .fd-input { flex: 1 1 auto; min-width: 0; }
+.fd-copy-long { align-items: flex-start; }
+.fd-copy-button { flex: none; }
+/* A range of dates: two boxes, from → to, in one row that wraps on a phone, its calendar under it marking the days between. */
+.fd-range { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+/* Too narrow for a date and the calendar's button beside it, the button goes under: a date is never cut. */
+.fd-range-box { flex: 1 1 8em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
+.fd-range-box > .fd-input { flex: 1 1 9em; min-width: 0; }
+.fd-range-box > .fd-input[type="datetime-local"] { flex-basis: 13em; }
+.fd-range-arrow { flex: none; display: inline-block; color: var(--fd-muted); }
+.fd-range-arrow:dir(rtl) { transform: scaleX(-1); }
+.fd-range-calendar .fd-calendar-grid td button.fd-in-range { background: var(--fd-accent-soft); border-radius: 0; }
+/* A timer: its time in even digits, a green dot beating while it runs. */
+.fd-timer { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-weight: 600; direction: ltr; unicode-bidi: isolate; }
+.fd-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fd-border-strong); }
+.fd-timer[data-running] .fd-timer-dot { background: var(--fd-success); animation: fd-timer-beat 1s ease-in-out infinite alternate; }
+.fd-timer[data-running] .fd-timer-time { color: var(--fd-success); }
+@keyframes fd-timer-beat { to { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .fd-timer[data-running] .fd-timer-dot { animation: none; } }
+/* A document shown inline: the browser's own viewer, as wide as the field. */
+.fd-embed { display: grid; gap: 8px; min-width: 0; }
+.fd-embed-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.fd-embed-bar > .fd-input { flex: 1 1 auto; min-width: 0; }
+.fd-embed-open { flex: none; }
+.fd-embed-frame { display: block; width: 100%; border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px); background: var(--fd-page); }
+.fd-embed-none { padding: 24px 12px; text-align: center; color: var(--fd-muted); border: 1px dashed var(--fd-border); border-radius: max(var(--fd-control-radius), 4px); }
+/* An analytic distribution: lines of an account and its share, their total under them. */
+.fd-distribution { display: grid; gap: 6px; min-width: 0; }
+.fd-distribution-table .fd-distribution-share { width: 8.5em; }
+.fd-distribution-table .fd-share { text-align: end; padding-inline-end: calc(var(--fd-pad-x) + 2ch); }
+.fd-distribution-total { font-weight: 600; text-align: end; padding-inline-end: calc(var(--fd-pad-x) + 2ch + 4px); font-variant-numeric: tabular-nums; }
+.fd-distribution-add { justify-self: start; }
+/* Tax totals: words at the start, amounts at the end in even digits, the total in bold over a rule. */
+.fd-tax-totals { justify-self: end; border-collapse: collapse; min-width: min(100%, 320px); font-variant-numeric: tabular-nums; }
+.fd-tax-totals th { text-align: start; font-weight: 400; color: var(--fd-muted); padding: 3px 16px 3px 0; padding-inline: 0 16px; }
+.fd-tax-totals td { text-align: end; padding: 3px 0; white-space: nowrap; }
+.fd-tax-totals .fd-tax-subtotal th { color: var(--fd-text); }
+.fd-tax-totals .fd-tax-total :is(th, td) { font-weight: 700; color: var(--fd-text); font-size: 15px; border-top: 1px solid var(--fd-border); padding-top: 6px; }
+.fd-tax-totals .fd-input { width: 9em; text-align: end; }
+/* Payments: each one's button, "Paid on …" and its amount; its details in a small box under it; the amount due in bold. */
+.fd-payments { display: grid; gap: 6px; justify-self: end; min-width: min(100%, 320px); font-variant-numeric: tabular-nums; }
+.fd-payments-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.fd-payment { position: relative; display: flex; align-items: center; gap: 8px; }
+.fd-payment-info { flex: none; width: 20px; height: 20px; padding: 0; border: 1px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface); color: var(--fd-muted); font: italic 600 12px/1 Georgia, serif; cursor: pointer; }
+.fd-payment-info:hover, .fd-payment-info[aria-expanded="true"] { color: var(--fd-accent); border-color: var(--fd-accent); }
+.fd-payment-date { flex: 1 1 auto; font-style: italic; color: var(--fd-muted); }
+.fd-payment-amount { white-space: nowrap; }
+.fd-payment-details { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 30; min-width: 240px; display: grid; gap: 6px; padding: 10px 12px; background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
+.fd-payment-details dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
+.fd-payment-details dt { color: var(--fd-muted); }
+.fd-payment-details dd { margin: 0; }
+.fd-payment-open { justify-self: start; }
+.fd-payment-due { display: flex; justify-content: space-between; gap: 16px; padding-top: 6px; border-top: 1px solid var(--fd-border); font-weight: 600; }
+/* Properties: in two columns when asked, one on a narrow form; adding one in place, its name and kind in a row. */
+.fd-properties-list { display: grid; gap: 8px; min-width: 0; }
+.fd-properties[data-columns="2"] > .fd-properties-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
+@container (max-width: 520px) { .fd-properties[data-columns="2"] > .fd-properties-list { grid-template-columns: minmax(0, 1fr); } }
+.fd-property-add { justify-self: start; }
+.fd-property-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.fd-property-new > .fd-input { flex: 1 1 10em; width: auto; }
+`;
+//# sourceMappingURL=styles-business.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles-business.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-business.ts"],"names":[],"mappings":";;;AAAA;;;;;;GAMG;AACU,QAAA,YAAY,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GrC,CAAC"}

package/src/lib/styles-business.mjs

@@ -0,0 +1,117 @@
+/**
+ * The business widgets' part of the stylesheet: priority stars, a state's
+ * dot and its menu, a tag colour, a copy button, a range of dates, a running
+ * timer, a document shown inline, an analytic distribution, tax totals and a
+ * list of payments. Scoped, and written with logical properties, as the rest
+ * of it is; it comes after the inputs' part.
+ */
+export const BUSINESS_CSS = /* css */ `
+/* ---- business widgets ------------------------------------------------------- */
+/* Priority: grey stars, gold up to the one picked; hovered, they show what a click would pick. */
+.fd-priority { display: inline-flex; align-items: center; gap: 1px; }
+.fd-priority-star { border: none; background: none; padding: 0 1px; min-width: 0; font: inherit; font-size: 20px; line-height: 1; color: var(--fd-border-strong); cursor: pointer; }
+.fd-priority-star.fd-on { color: #e8a317; }
+.fd-priority:not(:has(:disabled)):hover .fd-priority-star { color: #e8a317; }
+.fd-priority:not(:has(:disabled)) .fd-priority-star:hover ~ .fd-priority-star { color: var(--fd-border-strong); }
+.fd-priority-star:disabled { cursor: default; }
+/* Fields on the title's line: a priority star before the name, a state's dot after it; the name keeps the room and its big words. */
+.fd-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
+/* On a phone the name takes a row of its own rather than be cut. */
+.fd-title-line > .fd-title-name { flex: 1 1 18em; min-width: 0; }
+.fd-title-line > .fd-title-name .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }
+/* A read-only name on the title's line reads as the title too, as it does alone. */
+.fd-title-line > .fd-title-name > .fd-read-text { font-size: 24px; font-weight: 600; line-height: 1.25; }
+.fd-form .fd-title-line > .fd-field { grid-template-columns: minmax(0, 1fr); }
+.fd-form .fd-title-line > .fd-field > * { grid-column: 1 !important; }
+.fd-form .fd-title-line > .fd-title-side { display: flex; align-items: center; flex: none; }
+.fd-title-line > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-title-line .fd-priority-star { font-size: 24px; }
+/* A state's dot: grey, red, green…, in the state's tone; its menu floats under it. */
+.fd-dot-box { position: relative; display: inline-flex; align-items: center; gap: 6px; }
+.fd-dot-button { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; }
+.fd-dot-button:hover:not(:disabled) { background: var(--fd-accent-soft); }
+.fd-dot-button:disabled { cursor: default; }
+.fd-dot { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--fd-dot, var(--fd-border-strong)); }
+.fd-dot-button[data-tone="muted"], .fd-dot-item[data-tone="muted"] { --fd-dot: var(--fd-border-strong); }
+.fd-dot-button[data-tone="danger"], .fd-dot-item[data-tone="danger"] { --fd-dot: var(--fd-error); }
+.fd-dot-button[data-tone="success"], .fd-dot-item[data-tone="success"] { --fd-dot: var(--fd-success); }
+.fd-dot-button[data-tone="warning"], .fd-dot-item[data-tone="warning"] { --fd-dot: #d97706; }
+.fd-dot-button[data-tone="info"], .fd-dot-item[data-tone="info"] { --fd-dot: var(--fd-info); }
+.fd-dot-label { font-size: 13px; color: var(--fd-muted); }
+.fd-dot-menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 30; min-width: 180px; padding: 4px; display: grid; background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
+.fd-dot-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; font-size: 14px; }
+.fd-dot-item:hover, .fd-dot-item:focus { background: var(--fd-accent-soft); outline: none; }
+.fd-dot-item[aria-checked="true"] { font-weight: 600; }
+/* A colour: a swatch of it, and a palette of Flectra's twelve under it; none is a crossed-out square. */
+.fd-colour-box { position: relative; display: inline-flex; align-items: center; gap: 8px; }
+.fd-colour-button, .fd-colour { width: 24px; height: 24px; padding: 0; border: 1px solid var(--fd-border-strong); border-radius: 4px; background: var(--fd-swatch, transparent); cursor: pointer; }
+.fd-colour-button:disabled { cursor: default; }
+.fd-colour-none, .fd-colour[data-colour="0"] { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--fd-error) calc(50% - 1px), var(--fd-error) calc(50% + 1px), transparent calc(50% + 1px)); }
+.fd-colour-palette { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 30; display: grid; grid-template-columns: repeat(6, 24px); gap: 6px; padding: 8px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
+.fd-colour[aria-checked="true"] { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-accent); }
+.fd-colour-input { width: 44px; height: 30px; padding: 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); }
+.fd-colour-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--fd-muted); }
+/* A value to copy: its box, the button after it. */
+.fd-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.fd-copy > .fd-input { flex: 1 1 auto; min-width: 0; }
+.fd-copy-long { align-items: flex-start; }
+.fd-copy-button { flex: none; }
+/* A range of dates: two boxes, from → to, in one row that wraps on a phone, its calendar under it marking the days between. */
+.fd-range { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+/* Too narrow for a date and the calendar's button beside it, the button goes under: a date is never cut. */
+.fd-range-box { flex: 1 1 8em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
+.fd-range-box > .fd-input { flex: 1 1 9em; min-width: 0; }
+.fd-range-box > .fd-input[type="datetime-local"] { flex-basis: 13em; }
+.fd-range-arrow { flex: none; display: inline-block; color: var(--fd-muted); }
+.fd-range-arrow:dir(rtl) { transform: scaleX(-1); }
+.fd-range-calendar .fd-calendar-grid td button.fd-in-range { background: var(--fd-accent-soft); border-radius: 0; }
+/* A timer: its time in even digits, a green dot beating while it runs. */
+.fd-timer { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-weight: 600; direction: ltr; unicode-bidi: isolate; }
+.fd-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fd-border-strong); }
+.fd-timer[data-running] .fd-timer-dot { background: var(--fd-success); animation: fd-timer-beat 1s ease-in-out infinite alternate; }
+.fd-timer[data-running] .fd-timer-time { color: var(--fd-success); }
+@keyframes fd-timer-beat { to { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .fd-timer[data-running] .fd-timer-dot { animation: none; } }
+/* A document shown inline: the browser's own viewer, as wide as the field. */
+.fd-embed { display: grid; gap: 8px; min-width: 0; }
+.fd-embed-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.fd-embed-bar > .fd-input { flex: 1 1 auto; min-width: 0; }
+.fd-embed-open { flex: none; }
+.fd-embed-frame { display: block; width: 100%; border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px); background: var(--fd-page); }
+.fd-embed-none { padding: 24px 12px; text-align: center; color: var(--fd-muted); border: 1px dashed var(--fd-border); border-radius: max(var(--fd-control-radius), 4px); }
+/* An analytic distribution: lines of an account and its share, their total under them. */
+.fd-distribution { display: grid; gap: 6px; min-width: 0; }
+.fd-distribution-table .fd-distribution-share { width: 8.5em; }
+.fd-distribution-table .fd-share { text-align: end; padding-inline-end: calc(var(--fd-pad-x) + 2ch); }
+.fd-distribution-total { font-weight: 600; text-align: end; padding-inline-end: calc(var(--fd-pad-x) + 2ch + 4px); font-variant-numeric: tabular-nums; }
+.fd-distribution-add { justify-self: start; }
+/* Tax totals: words at the start, amounts at the end in even digits, the total in bold over a rule. */
+.fd-tax-totals { justify-self: end; border-collapse: collapse; min-width: min(100%, 320px); font-variant-numeric: tabular-nums; }
+.fd-tax-totals th { text-align: start; font-weight: 400; color: var(--fd-muted); padding: 3px 16px 3px 0; padding-inline: 0 16px; }
+.fd-tax-totals td { text-align: end; padding: 3px 0; white-space: nowrap; }
+.fd-tax-totals .fd-tax-subtotal th { color: var(--fd-text); }
+.fd-tax-totals .fd-tax-total :is(th, td) { font-weight: 700; color: var(--fd-text); font-size: 15px; border-top: 1px solid var(--fd-border); padding-top: 6px; }
+.fd-tax-totals .fd-input { width: 9em; text-align: end; }
+/* Payments: each one's button, "Paid on …" and its amount; its details in a small box under it; the amount due in bold. */
+.fd-payments { display: grid; gap: 6px; justify-self: end; min-width: min(100%, 320px); font-variant-numeric: tabular-nums; }
+.fd-payments-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.fd-payment { position: relative; display: flex; align-items: center; gap: 8px; }
+.fd-payment-info { flex: none; width: 20px; height: 20px; padding: 0; border: 1px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface); color: var(--fd-muted); font: italic 600 12px/1 Georgia, serif; cursor: pointer; }
+.fd-payment-info:hover, .fd-payment-info[aria-expanded="true"] { color: var(--fd-accent); border-color: var(--fd-accent); }
+.fd-payment-date { flex: 1 1 auto; font-style: italic; color: var(--fd-muted); }
+.fd-payment-amount { white-space: nowrap; }
+.fd-payment-details { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 30; min-width: 240px; display: grid; gap: 6px; padding: 10px 12px; background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
+.fd-payment-details dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
+.fd-payment-details dt { color: var(--fd-muted); }
+.fd-payment-details dd { margin: 0; }
+.fd-payment-open { justify-self: start; }
+.fd-payment-due { display: flex; justify-content: space-between; gap: 16px; padding-top: 6px; border-top: 1px solid var(--fd-border); font-weight: 600; }
+/* Properties: in two columns when asked, one on a narrow form; adding one in place, its name and kind in a row. */
+.fd-properties-list { display: grid; gap: 8px; min-width: 0; }
+.fd-properties[data-columns="2"] > .fd-properties-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
+@container (max-width: 520px) { .fd-properties[data-columns="2"] > .fd-properties-list { grid-template-columns: minmax(0, 1fr); } }
+.fd-property-add { justify-self: start; }
+.fd-property-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.fd-property-new > .fd-input { flex: 1 1 10em; width: auto; }
+`;
+//# sourceMappingURL=styles-business.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles-business.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles-business.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GrC,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; }\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: \" *\"; 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; }\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: \" *\"; 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

@@ -109,7 +109,7 @@ exports.KINDS_CSS = `
 .fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }
 .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; }
 .fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }
-.fd-repeat-tool { font-size: 15px; }
+.fd-repeat-tool { font-size: 15px; min-width: 24px; min-height: 24px; }
 .fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }
 .fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }
 .fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }

package/src/lib/styles-kinds.mjs

@@ -106,7 +106,7 @@ export const KINDS_CSS = /* css */ `
 .fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }
 .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; }
 .fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }
-.fd-repeat-tool { font-size: 15px; }
+.fd-repeat-tool { font-size: 15px; min-width: 24px; min-height: 24px; }
 .fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }
 .fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }
 .fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }

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

@@ -0,0 +1,6 @@
+/**
+ * How a record sheet reads, as Flectra draws one: read-only values as words.
+ * 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";

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

@@ -0,0 +1,6 @@
+/**
+ * How a record sheet reads, as Flectra draws one: read-only values as words.
+ * 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";

package/src/lib/styles-sheet.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHEET_CSS = void 0;
+/**
+ * How a record sheet reads, as Flectra draws one: read-only values as words.
+ * Appended to Fieldia's stylesheet, scoped and written with logical
+ * properties as the rest of it is.
+ */
+exports.SHEET_CSS = `
+/* ---- a sheet's reading ----------------------------------------------------- */
+/* 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. */
+.fd-read-text {
+  min-width: 0; min-height: var(--fd-control-height, 30px); padding-block: calc(var(--fd-pad-y) + 1px);
+  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: var(--fd-text);
+}
+.fd-field:is([data-type="integer"], [data-type="float"], [data-type="monetary"]) > .fd-read-text { font-variant-numeric: tabular-nums; }
+/* 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; }
+.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; }
+.fd-read-link:focus-visible, .fd-read-text a:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }
+/* A choice as a coloured pill, as wide as its words, on the line a box's words sit on. */
+.fd-field > .fd-value-badge { justify-self: start; align-self: start; width: fit-content; margin-block: calc((var(--fd-control-height, 30px) - 24px) / 2); }
+.fd-title > .fd-field > .fd-read-text { font-size: 24px; font-weight: 600; line-height: 1.25; }
+/* A ribbon with words to point at takes the pointer, though its frame lets clicks through. */
+.fd-ribbon[title] { pointer-events: auto; cursor: help; }
+/* A field's value inside an alert's or a text's words, set apart by its weight. */
+.fd-value { font-weight: 600; }
+/* An alert's own buttons, after its words: links in the alert's colour, wrapping under the words on a narrow screen. */
+.fd-alert:has(> .fd-alert-actions) { flex-wrap: wrap; align-items: baseline; }
+.fd-alert-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
+.fd-alert-actions .fd-button { min-height: 0; padding-block: 0; font-size: inherit; }
+.fd-alert-actions .fd-button-link { color: inherit; padding-inline: 0; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
+/* An alert among a page's parts, as Flectra's in a tab: across its row. */
+.fd-text-alert { grid-column: 1 / -1; margin: 0; }
+/* The first alert on a card clears the ribbon in its corner, when no stat buttons stand between them. */
+.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; }
+/* A stat button with two values, each after its words, one over the other: "In: 3", "Out: 5". */
+.fd-stat-pair { gap: 1px; }
+.fd-stat-row { display: inline-flex; align-items: baseline; gap: 5px; }
+.fd-stat-row > .fd-stat-label::after { content: ":"; }
+.fd-stat-pair .fd-stat-value { font-size: 13.5px; }
+/* On a phone, stat buttons two to a row, edged between them, clear of a ribbon in the corner. */
+@container (max-width: 520px) {
+  .fd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .fd-stat { min-width: 0; padding-inline: 12px; text-align: start; column-gap: 8px; }
+  .fd-stat:has(> .fd-icon) { column-gap: 8px; }
+  .fd-stat-value { font-size: 14px; }
+  .fd-stat:nth-child(odd of :not([hidden])) { border-inline-start: none; }
+  .fd-stat:nth-child(n + 3 of :not([hidden])) { border-block-start: 1px solid var(--fd-border); }
+  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 0; }
+  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(2 of :not([hidden])) { padding-inline-end: 64px; }
+  .fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stat:nth-child(4 of :not([hidden])) { padding-inline-end: 36px; }
+}
+/* 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. */
+.fd-step-time { margin-inline-start: 6px; font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
+.fd-statusbar li.fd-step-more > button { padding-inline: 16px 20px; letter-spacing: 1px; }
+.fd-statusbar li.fd-step-more > .fd-step-menu {
+  position: fixed; z-index: 30; display: grid; min-width: 160px; margin: 0; padding: 4px 0; clip-path: none; transform: none;
+  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);
+  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); white-space: nowrap;
+}
+.fd-statusbar li.fd-step-more > .fd-step-menu[hidden] { display: none; }
+.fd-statusbar .fd-step-menu > button {
+  font: inherit; font-size: 13px; text-align: start; border: none; background: none; color: inherit; padding: 6px 14px; cursor: pointer; transform: none;
+}
+.fd-statusbar .fd-step-menu > button:hover:not(:disabled), .fd-statusbar .fd-step-menu > button:focus-visible { background: var(--fd-accent-soft); outline: none; }
+.fd-statusbar .fd-step-menu > button:disabled { cursor: default; color: var(--fd-muted); }
+/* A button's key, shown on it while Alt is held, as Flectra shows its hotkeys. */
+.fd-hotkey { display: none; }
+[data-hotkeys] .fd-hotkey {
+  display: inline-block; margin-inline-start: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px;
+  font: 600 10.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.85; vertical-align: 1px;
+}
+/* A link's picture, or its initials, in a circle before its name; lines of the record — an address — under the link. */
+.fd-link-avatar {
+  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
+  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle;
+}
+.fd-link-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.fd-combo[data-avatar] > .fd-link-avatar { position: absolute; inset-inline-start: 4px; pointer-events: none; }
+.fd-combo[data-avatar] > .fd-link-avatar[hidden] ~ .fd-combo-input { padding-inline-start: var(--fd-pad-x); }
+.fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 32px; }
+.fd-form[data-fd-skin="underline"] .fd-combo[data-avatar] > .fd-link-avatar { inset-inline-start: 0; }
+.fd-form[data-fd-skin="underline"] .fd-combo[data-avatar] > .fd-link-avatar:not([hidden]) ~ .fd-combo-input { padding-inline-start: 28px; }
+.fd-read-text > .fd-link-avatar { margin-inline-end: 6px; }
+.fd-chip > .fd-link-avatar { width: 18px; height: 18px; font-size: 9px; margin-inline: -4px 2px; }
+.fd-link { display: grid; gap: 2px; min-width: 0; }
+.fd-link-details { font-size: 12.5px; line-height: 1.4; color: var(--fd-muted); text-align: left; }
+[dir="rtl"] .fd-link-details { text-align: right; }
+.fd-link-details > div { unicode-bidi: plaintext; }
+/* Tags in their record's colour, as Flectra numbers them, soft enough to read in either scheme. */
+.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)); }
+.fd-chip[data-color="1"] { --fd-tag: #f06050; } .fd-chip[data-color="2"] { --fd-tag: #f4a460; } .fd-chip[data-color="3"] { --fd-tag: #f7cd1f; }
+.fd-chip[data-color="4"] { --fd-tag: #6cc1ed; } .fd-chip[data-color="5"] { --fd-tag: #814968; } .fd-chip[data-color="6"] { --fd-tag: #eb7e7f; }
+.fd-chip[data-color="7"] { --fd-tag: #2c8397; } .fd-chip[data-color="8"] { --fd-tag: #475577; } .fd-chip[data-color="9"] { --fd-tag: #d6145f; }
+.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-oneline-row .fd-input { width: 12em; max-width: 100%; }
+/* 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 .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; }
+/* 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); }
+`;
+//# sourceMappingURL=styles-sheet.js.map

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

@@ -0,0 +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"}