@fieldia/widgets 0.11.0 → 0.12.0

package/src/lib/styles-sheet.mjs

@@ -0,0 +1,120 @@
+/**
+ * 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 const SHEET_CSS = /* 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.mjs.map

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

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

package/src/lib/styles.js

@@ -6,6 +6,8 @@ const styles_kinds_1 = require("./styles-kinds");
 const styles_choices_1 = require("./styles-choices");
 const styles_inputs_1 = require("./styles-inputs");
 const styles_parts_1 = require("./styles-parts");
+const styles_sheet_1 = require("./styles-sheet");
+const styles_business_1 = require("./styles-business");
 /**
  * Fieldia's stylesheet: two skins and the layout chrome, all scoped to the
  * form's own root (`.fd-form[data-fd-skin=…]`), so two forms on one page can
@@ -123,6 +125,9 @@ const SKINS_CSS = /* css */ `
   align-items: start;
 }
 .fd-grid > * { grid-column: span min(var(--fd-span, 1), var(--fd-cols)); }
+/* Twelfths keep the page's gap while it takes under half their width, so they line up with the columns
+   round them; in a narrow column it shrinks with them instead of pushing past its edge. */
+.fd-grid[data-twelfths] { column-gap: min(var(--fd-gap-x), 100% / 24); }
 .fd-field { display: grid; gap: 4px; min-width: 0; }
 .fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }
 /* The ✓ of a field filled in right, by its label. */
@@ -131,6 +136,12 @@ const SKINS_CSS = /* css */ `
 .fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::after { content: ""; }
 .fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::before { content: "* "; color: var(--fd-error); }
 .fd-help { color: var(--fd-muted); font-size: 12.5px; }
+/* A field's help behind a (?) by its label: a bubble on hover, focus or a tap. */
+.fd-help-tip-wrap { position: relative; display: inline-flex; vertical-align: 0.05em; margin-inline-start: 6px; }
+.fd-help-tip { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--fd-border); border-radius: 50%; color: var(--fd-muted); font-size: 11px; font-weight: 600; line-height: 1; cursor: help; }
+.fd-help-tip:hover, .fd-help-tip[aria-expanded="true"] { color: var(--fd-accent); border-color: var(--fd-accent); }
+.fd-help-tip:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-help-bubble { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: -8px; z-index: 30; width: max-content; max-width: min(280px, 70vw); padding: 6px 9px; border-radius: 6px; background: var(--fd-text); color: var(--fd-surface); font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: normal; box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
 /*
  * A page's words run the way they are written — a sentence left in English on
  * an Arabic page keeps its full stop at its end — and line up with the form.
@@ -158,6 +169,18 @@ const SKINS_CSS = /* css */ `
 .fd-form[data-fd-skin="underline"] .fd-field[data-type="one2many"] { grid-template-columns: minmax(0, 1fr); }
 .fd-form[data-fd-skin="underline"] .fd-field[data-type="one2many"] > * { grid-column: 1 !important; }
 .fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > :not(.fd-label) { grid-column: 2; }
+/* A row of twelfths led by a field with its label beside — the skin's (data-row="skin") or the page's
+   ("beside") — Flectra's o_row: that label sits with the labels round it, the parts share the values' room. */
+.fd-form[data-fd-skin="underline"] .fd-section[data-row="skin"] { --fd-row-label: var(--fd-label-width, 11em); --fd-row-gap: 12px; --fd-row-place: absolute; --fd-row-drop: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2)); }
+.fd-form .fd-section[data-row="beside"] { --fd-row-label: var(--fd-label-width, 140px); --fd-row-gap: 14px; --fd-row-place: absolute; --fd-row-drop: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2)); }
+.fd-form .fd-section[data-row] { padding-inline-start: calc(var(--fd-row-label, 0px) + var(--fd-row-gap, 0px)); }
+.fd-form .fd-section[data-row] > .fd-grid > .fd-field:first-child { grid-template-columns: minmax(0, 1fr); position: relative; }
+.fd-form .fd-section[data-row] > .fd-grid > .fd-field:first-child > :not(.fd-label) { grid-column: 1; }
+.fd-form .fd-section[data-row] > .fd-grid > .fd-field:first-child > .fd-label {
+  /* Out of the field's own box, back over the row's room for it — where the row has one. */
+  position: var(--fd-row-place, static); inset-inline-start: calc(-1 * (var(--fd-row-label, 0px) + var(--fd-row-gap, 0px))); inset-block-start: 0;
+  width: var(--fd-row-label, auto); padding-block-start: var(--fd-row-drop, 0px);
+}
 /* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */
 @container (max-width: 760px) {
   .fd-form[data-fd-skin="underline"] .fd-grid { --fd-cols: 1; }
@@ -169,6 +192,9 @@ const SKINS_CSS = /* css */ `
 }
 @container (max-width: 520px) {
   .fd-grid { --fd-cols: 1; }
+  /* Labels go above here: a row's first one too, the parts stacked under it. */
+  .fd-form .fd-section.fd-section[data-row] { --fd-row-label: auto; --fd-row-gap: 0px; --fd-row-place: static; --fd-row-drop: 0px; }
+  .fd-form .fd-section[data-row] { padding-inline-start: 0; }
   .fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) { grid-template-columns: minmax(0, 1fr); }
   .fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > * { grid-column: 1 !important; }
   /* The narrow count, or one column when only the medium one was given. */
@@ -203,6 +229,9 @@ const SKINS_CSS = /* css */ `
 /* A whole form locked reads as a record: plain values in either skin, no boxes, and no prompts to type. */
 .fd-form[data-readonly] .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); }
 .fd-form[data-readonly] .fd-input::placeholder { color: transparent; }
+/* Nothing to read in a read-only box draws nothing, in either skin: no prompt to type, and no date's dd.mm.yyyy or its calendar. */
+.fd-input[readonly]::placeholder, .fd-form .fd-input.fd-blank[readonly] { color: transparent; }
+.fd-blank[readonly]::-webkit-calendar-picker-indicator { display: none; }
 .fd-form[data-readonly] select.fd-input:disabled { appearance: none; background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); opacity: 1; }
 .fd-input[aria-invalid="true"] { border-color: var(--fd-error); }
 .fd-form[data-fd-skin="outlined"] .fd-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }
@@ -313,10 +342,66 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }
 .fd-lines-table .fd-lines-grip { width: 1px; min-width: 0; padding-inline: 6px 2px; }
 .fd-line-grip { display: block; margin-block-start: 7px; cursor: grab; }
-.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
+.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; min-width: 24px; min-height: 24px; }
 .fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }
+/* A table's own rules: a line's or a cell's tone and bold (Flectra's decoration-*), and buttons on a line. */
+.fd-lines-table [data-tone="info"] { --fd-line-tone: var(--fd-info); --fd-tone: var(--fd-info); --fd-tone-soft: var(--fd-info-soft); }
+.fd-lines-table [data-tone="success"] { --fd-line-tone: var(--fd-success); --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }
+.fd-lines-table [data-tone="warning"] { --fd-line-tone: var(--fd-warning); --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }
+.fd-lines-table [data-tone="danger"] { --fd-line-tone: var(--fd-error); --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }
+.fd-lines-table [data-tone="muted"] { --fd-line-tone: var(--fd-muted); --fd-tone: var(--fd-muted); --fd-tone-soft: color-mix(in srgb, var(--fd-muted) 14%, transparent); }
+.fd-lines-table [data-tone] :is(input, select, textarea, .fd-input, .fd-display) { color: var(--fd-line-tone); -webkit-text-fill-color: var(--fd-line-tone); }
+.fd-lines-table :is(.fd-line-bold, .fd-cell-bold) :is(input, select, textarea, .fd-input, .fd-display) { font-weight: 600; }
+.fd-lines-table td.fd-lines-tools { white-space: nowrap; }
+/* With buttons on some lines, every line's × keeps to the end, so they line up. */
+.fd-lines-table:has(.fd-line-button) td.fd-lines-tools { text-align: end; padding-inline-end: 4px; }
+.fd-line-button { padding: 2px 6px; font-size: 12.5px; vertical-align: middle; }
+.fd-line-button-icon { padding: 4px; color: var(--fd-muted); }
+.fd-line-button-icon:hover { color: var(--fd-accent); }
+.fd-line-button svg { width: 15px; height: 15px; display: block; }
 .fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }
 .fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }
+.fd-lines-control { display: inline-flex; align-items: center; gap: 6px; }
+.fd-lines-control svg, .fd-lines-chosen-button svg { width: 15px; height: 15px; }
+/* Lines chosen for the table's buttons: a tick before each line's grip, and a bar of buttons over the table. */
+.fd-line-lead { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 6px; }
+.fd-line-lead .fd-line-grip { margin-block-start: 0; }
+.fd-lines-table th.fd-lines-grip:has(.fd-line-pick-all) { padding-block: 4px; }
+.fd-lines-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; border-radius: var(--fd-radius); background: var(--fd-accent-soft); }
+.fd-lines-chosen[hidden] { display: none; }
+.fd-lines-chosen-count { font-weight: 600; font-size: 13px; margin-inline-end: 6px; }
+.fd-lines-chosen-button { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; }
+/* A line opened in a dialog: its own record's page, or its every field. */
+.fd-lines-table .fd-line-open { border: none; background: none; cursor: pointer; color: var(--fd-accent); font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
+.fd-lines-table .fd-line-open:hover { background: var(--fd-accent-soft); }
+.fd-links-table td { vertical-align: middle; }
+.fd-links-table .fd-value-text { padding-block: 4px; }
+/* Columns as wide as they hold (fit: content), the widest taking what is left. */
+.fd-lines[data-fit="content"] .fd-lines-table { width: auto; max-width: 100%; }
+.fd-lines[data-fit="content"] .fd-lines-table td { min-width: 0; }
+/* Lines as cards (cards: narrow on a phone, or always): each a box, every cell its column's label above its value. */
+.fd-lines[data-cards] { container: fd-lines / inline-size; }
+@container fd-lines (max-width: 520px) {
+  .fd-lines[data-cards="narrow"] .fd-lines-table, .fd-lines[data-cards="narrow"] .fd-lines-table :is(tbody, tfoot) { display: block; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table thead { display: none; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; position: relative; padding: 10px 12px; margin-block-end: 8px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td { display: block; border: none; padding: 0; min-width: 0; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td[data-label]:not([colspan]:not([colspan="1"]))::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--fd-muted); }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td.fd-lines-grip { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; padding: 0; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td.fd-lines-grip .fd-line-grip { display: none; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table tr:has(.fd-line-pick) { padding-inline-start: 36px; }
+  .fd-lines[data-cards="narrow"] .fd-lines-table td.fd-lines-tools { width: auto; text-align: end; }
+  .fd-lines[data-cards="narrow"] .fd-lines-totals td:empty { display: none; }
+}
+.fd-lines[data-cards="always"] .fd-lines-table, .fd-lines[data-cards="always"] .fd-lines-table :is(tbody, tfoot) { display: block; }
+.fd-lines[data-cards="always"] .fd-lines-table thead { display: none; }
+.fd-lines[data-cards="always"] .fd-lines-table tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 12px; position: relative; padding: 10px 12px; margin-block-end: 8px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-lines[data-cards="always"] .fd-lines-table td { display: block; border: none; padding: 0; min-width: 0; }
+.fd-lines[data-cards="always"] .fd-lines-table td[data-label]:not([colspan]:not([colspan="1"]))::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--fd-muted); }
+.fd-lines[data-cards="always"] .fd-lines-table td.fd-lines-grip, .fd-lines[data-cards="always"] .fd-lines-table td.fd-lines-tools { grid-column: 1 / -1; width: auto; }
+.fd-lines[data-cards="always"] .fd-lines-table td.fd-lines-tools { text-align: end; }
+.fd-line-copy { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
+.fd-line-copy:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }
 /* A section heads the lines below it; a note reads as a remark between them. */
 .fd-line-section td { background: var(--fd-page); }
 .fd-line-section .fd-input { font-weight: 600; }
@@ -433,6 +518,7 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-richtext-tool svg circle { fill: currentColor; stroke: none; }
 .fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }
 .fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }
+.fd-richtext.fd-blank[contenteditable="true"]::before { content: attr(data-placeholder); position: absolute; color: var(--fd-muted); opacity: 0.8; pointer-events: none; }
 .fd-richtext[contenteditable="false"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }
 .fd-richtext p { margin: 0 0 6px; }
 .fd-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }
@@ -465,12 +551,35 @@ button.fd-chip-label:hover { text-decoration: underline; }
 /* A saved form placed in another: a quiet line while its page comes, and words in a dashed box when it cannot be shown. */
 .fd-form-part-note { margin: 0; color: var(--fd-muted); font-size: 13px; }
 .fd-form-part-problem { padding: 10px 12px; border: 1px dashed var(--fd-border); border-radius: var(--fd-radius); }
-.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }
+.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; scrollbar-width: none; }
+.fd-tablist::-webkit-scrollbar { display: none; }
+/* Too long for its room: the tabs fade out at an edge with more past it, under a button that scrolls them along. */
+.fd-tabbar { position: relative; min-width: 0; --fd-fade: to right; }
+[dir="rtl"] .fd-tabbar { --fd-fade: to left; }
+/* Nothing shows under a button (28px); the tabs fade in over the next 36. */
+.fd-tabbar[data-more="start"] > .fd-tablist { mask-image: linear-gradient(var(--fd-fade), transparent 28px, #000 64px); }
+.fd-tabbar[data-more="end"] > .fd-tablist { mask-image: linear-gradient(var(--fd-fade), #000 calc(100% - 64px), transparent calc(100% - 28px)); }
+.fd-tabbar[data-more="start end"] > .fd-tablist { mask-image: linear-gradient(var(--fd-fade), transparent 28px, #000 64px, #000 calc(100% - 64px), transparent calc(100% - 28px)); }
+.fd-tabs-scroll {
+  position: absolute; inset-block: 0 1px; z-index: 1; width: 28px; padding: 0; border: none; background: none; cursor: pointer;
+  color: var(--fd-muted); display: grid; place-items: center;
+}
+.fd-tabs-scroll[hidden] { display: none; }
+.fd-tabs-scroll:hover { color: var(--fd-accent); }
+.fd-tabs-scroll::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 2px 2px; }
+.fd-tabs-before { inset-inline-start: 0; }
+.fd-tabs-after { inset-inline-end: 0; }
+.fd-tabs-before::before { transform: translateX(2px) rotate(45deg); }
+.fd-tabs-after::before { transform: translateX(-2px) rotate(-135deg); }
+[dir="rtl"] .fd-tabs-before::before { transform: translateX(-2px) rotate(-135deg); }
+[dir="rtl"] .fd-tabs-after::before { transform: translateX(2px) rotate(45deg); }
 .fd-tab {
   font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);
   border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;
 }
 .fd-tab[aria-selected="true"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }
+/* A tab with a problem in it, seen or not: a dot in the error colour after its words. */
+.fd-tab[data-problem]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 6px; border-radius: 50%; background: var(--fd-error); vertical-align: 0.15em; }
 .fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }
 
 /* ---- buttons ---------------------------------------------------------- */
@@ -518,6 +627,11 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
 /* The side panel goes under the sheet before the sheet is left too narrow for a label beside its value. */
 @container (max-width: 1000px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }
+/* A part hidden at some widths of the form (hideOn): narrow up to 520px, medium up to 760px, wide above — the form's own width, as its columns. */
+.fd-form { container-name: fd-form; }
+@container fd-form (max-width: 520px) { .fd-form [data-hide-on~="narrow"] { display: none !important; } }
+@container fd-form (min-width: 521px) and (max-width: 760px) { .fd-form [data-hide-on~="medium"] { display: none !important; } }
+@container fd-form (min-width: 761px) { .fd-form [data-hide-on~="wide"] { display: none !important; } }
 .fd-card {
   position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);
   border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;
@@ -527,14 +641,15 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
 .fd-ribbon {
   position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;
-  text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);
+  text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: #5f6670;
   text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;
 }
 [dir="rtl"] .fd-ribbon { transform: rotate(-45deg); }
-.fd-ribbon.fd-tone-danger { background: var(--fd-error); }
-.fd-ribbon.fd-tone-success { background: var(--fd-success); }
-.fd-ribbon.fd-tone-warning { background: #d97706; }
-.fd-ribbon.fd-tone-info { background: var(--fd-info); }
+/* White words on a ribbon in either scheme: fixed, deep colours, each at least 5:1 against white. */
+.fd-ribbon.fd-tone-danger { background: #c63c3d; }
+.fd-ribbon.fd-tone-success { background: #2e7d32; }
+.fd-ribbon.fd-tone-warning { background: #a14f00; }
+.fd-ribbon.fd-tone-info { background: #1365d9; }
 .fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }
 .fd-alert-message { flex: 1 1 auto; min-width: 0; }
 .fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }
@@ -601,6 +716,23 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-progress { display: grid; gap: 8px; }
 .fd-progress-text { color: var(--fd-muted); font-size: 13px; }
 .fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }
+/* A field's own value in a tone while a condition holds, and in bold (Flectra's decoration-* on a field). */
+.fd-field[data-tone="info"] { --fd-tone: var(--fd-info); --fd-tone-soft: var(--fd-info-soft); }
+.fd-field[data-tone="success"] { --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }
+.fd-field[data-tone="warning"] { --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }
+.fd-field[data-tone="danger"] { --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }
+.fd-field[data-tone="muted"] { --fd-tone: var(--fd-muted); --fd-tone-soft: color-mix(in srgb, var(--fd-muted) 14%, transparent); }
+.fd-field[data-tone] :is(input, select, textarea, .fd-value-text, .fd-pending) { color: var(--fd-tone); -webkit-text-fill-color: var(--fd-tone); }
+.fd-field.fd-value-bold :is(input, select, textarea, .fd-value-text, .fd-pending, .fd-value-badge) { font-weight: 700; }
+/* A value as a pill (widget badge): grey, or its tone's colour on its soft shade. */
+.fd-value-badge { justify-self: start; align-self: center; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--fd-tone, var(--fd-muted)); background: var(--fd-tone-soft, color-mix(in srgb, var(--fd-tone, var(--fd-muted)) 14%, transparent)); }
+.fd-value-badge[hidden] { display: none; }
+/* A value given its own tone by options.tones, over the part's. */
+.fd-value-badge[data-tone="info"] { --fd-tone: var(--fd-info); --fd-tone-soft: var(--fd-info-soft); }
+.fd-value-badge[data-tone="success"] { --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }
+.fd-value-badge[data-tone="warning"] { --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }
+.fd-value-badge[data-tone="danger"] { --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }
+.fd-value-badge[data-tone="muted"] { --fd-tone: var(--fd-muted); --fd-tone-soft: color-mix(in srgb, var(--fd-muted) 14%, transparent); }
 .fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
 .fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }
 .fd-calendar-button {
@@ -736,9 +868,9 @@ button.fd-chip-label:hover { text-decoration: underline; }
   border: 1px solid var(--fd-edge, transparent);
 }
 .fd-dialog p { margin: 0; }
-/* Words a step says: toasts at the foot of the screen, one over another, each in its tone; over the page, under a dialog. */
+/* Words a step says: toasts at the foot of the screen, one over another, each in its tone; over the page and over a dialog or panel, whose own words they are too. */
 .fd-says {
-  position: fixed; inset-inline: 16px; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 990;
+  position: fixed; inset-inline: 16px; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 1100;
   display: grid; justify-items: center; gap: 8px; pointer-events: none;
 }
 .fd-say {
@@ -820,7 +952,7 @@ button.fd-chip-label:hover { text-decoration: underline; }
 @media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } .fd-button[aria-busy="true"]::after { animation: none; } }
 `;
 /** Fieldia's whole stylesheet: the skins, then the layout over them, the inputs' details, the question kinds and the choices' details. */
-exports.FIELDIA_CSS = SKINS_CSS + layout_styles_1.LAYOUT_CSS + styles_inputs_1.INPUTS_CSS + styles_kinds_1.KINDS_CSS + styles_choices_1.CHOICES_CSS + styles_parts_1.PARTS_CSS;
+exports.FIELDIA_CSS = SKINS_CSS + layout_styles_1.LAYOUT_CSS + styles_inputs_1.INPUTS_CSS + styles_sheet_1.SHEET_CSS + styles_business_1.BUSINESS_CSS + styles_kinds_1.KINDS_CSS + styles_choices_1.CHOICES_CSS + styles_parts_1.PARTS_CSS;
 const STYLE_ID = 'fieldia-styles';
 /** Add Fieldia's stylesheet to a document, once. */
 function installStyles(document) {

package/src/lib/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":";;;AA2zBA,sCAMC;AAj0BD,iDAA2C;AAC3C,qDAA+C;AAC/C,mDAA6C;AAC7C,iDAA2C;AAE3C;;;;;;;;;;;;GAYG;AACH,mDAA6C;AAE7C;;;;;GAKG;AACU,QAAA,WAAW,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAW,CAAC;AAEjE,+FAA+F;AAC/F,MAAM,SAAS,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsxB3B,CAAC;AAEF,0IAA0I;AAC7H,QAAA,WAAW,GAAG,SAAS,GAAG,0BAAU,GAAG,0BAAU,GAAG,wBAAS,GAAG,4BAAW,GAAG,wBAAS,CAAC;AAErG,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,SAAgB,aAAa,CAAC,QAAkB;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,mBAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":";;;AA+7BA,sCAMC;AAr8BD,iDAA2C;AAC3C,qDAA+C;AAC/C,mDAA6C;AAC7C,iDAA2C;AAC3C,iDAA2C;AAC3C,uDAAiD;AAEjD;;;;;;;;;;;;GAYG;AACH,mDAA6C;AAE7C;;;;;GAKG;AACU,QAAA,WAAW,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAW,CAAC;AAEjE,+FAA+F;AAC/F,MAAM,SAAS,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAw5B3B,CAAC;AAEF,0IAA0I;AAC7H,QAAA,WAAW,GAAG,SAAS,GAAG,0BAAU,GAAG,0BAAU,GAAG,wBAAS,GAAG,8BAAY,GAAG,wBAAS,GAAG,4BAAW,GAAG,wBAAS,CAAC;AAEhI,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,SAAgB,aAAa,CAAC,QAAkB;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,mBAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}