@fieldia/widgets 0.12.0 → 0.13.0

package/src/lib/styles.js

@@ -22,6 +22,7 @@ const styles_business_1 = require("./styles-business");
  * form mirrors without a second stylesheet.
  */
 const layout_styles_1 = require("./layout-styles");
+const themes_1 = require("./themes");
 /**
  * The widths of a form at which its groups take their medium and their narrow
  * columns: up to 760px and up to 520px of the form's own width, as the
@@ -31,8 +32,11 @@ const layout_styles_1 = require("./layout-styles");
 exports.FORM_WIDTHS = { medium: 760, narrow: 520 };
 /** The skins and the parts' chrome. One literal, so the script bundle can minify it as CSS. */
 const SKINS_CSS = /* css */ `
-/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. One inside a form
+/* Fieldia's tokens (its colours, sizes and fonts) live in a cascade layer: a host's own rule, of any weight, sets
+   them over Fieldia's, whole. The skins, themes, page looks and schemes keep their order inside it.
+   .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. One inside a form
    with no skin of its own (the conversation beside a record) wears the form's skin and scheme instead. */
+@layer fieldia-tokens {
 .fd-form, .fd-theme:is([data-fd-skin], :not(.fd-form *)) {
   --fd-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
   --fd-text: #212529;
@@ -62,12 +66,6 @@ const SKINS_CSS = /* css */ `
   --fd-label-weight: 600;
   --fd-gap-x: 32px;
   --fd-gap-y: 14px;
-  container-type: inline-size;
-  font-family: var(--fd-font);
-  font-size: 14px;
-  line-height: 1.45;
-  color: var(--fd-text);
-  -webkit-text-size-adjust: 100%;
 }
 /* Ant Design's blue and red, a shade darker: words in them read at 4.5:1 (WCAG AA) on white, the page and their soft shades. */
 .fd-form[data-fd-skin="outlined"], .fd-theme[data-fd-skin="outlined"] {
@@ -91,6 +89,15 @@ const SKINS_CSS = /* css */ `
   --fd-gap-x: 24px;
   --fd-gap-y: 18px;
 }
+}
+.fd-form, .fd-theme:is([data-fd-skin], :not(.fd-form *)) {
+  container-type: inline-size;
+  font-family: var(--fd-font);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--fd-text);
+  -webkit-text-size-adjust: 100%;
+}
 .fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }
 .fd-form [hidden] { display: none !important; }
 
@@ -132,16 +139,24 @@ const SKINS_CSS = /* css */ `
 .fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }
 /* The ✓ of a field filled in right, by its label. */
 .fd-valid-mark { color: var(--fd-success); width: 1em; height: 1em; margin-inline-start: 6px; vertical-align: -0.15em; stroke-width: 2.4; }
-.fd-field.fd-required > .fd-label::after { content: " *"; color: var(--fd-error); }
-.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); }
+/* No space between the star and the label's last word, its gap a margin: a line never breaks before it. */
+.fd-field.fd-required > .fd-label::after { content: "*"; margin-inline-start: 0.25em; color: var(--fd-error); }
+.fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::after { content: none; }
+.fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::before { content: "*"; margin-inline-end: 0.25em; 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; }
+/* In a label it stands just after the last word, out of the line's flow: a browser may always break a line
+   before a box such as the (?), no-break space or not, and it would wrap onto a line of its own.
+   The label keeps room for it at its end, and a required star moves past it. */
+.fd-label > .fd-help-tip-wrap { position: absolute; margin-block-start: 0.15em; }
+.fd-label:has(> .fd-help-tip-wrap) { padding-inline-end: 22px; }
+.fd-field.fd-required > .fd-label:has(> .fd-help-tip-wrap)::after { padding-inline-start: 22px; }
+.fd-form:not([data-fd-skin="outlined"]) .fd-field.fd-required > .fd-label:has(> .fd-help-tip-wrap) { padding-inline-end: 0; }
 .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); }
+.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, calc(100vw - 16px)); 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.
@@ -162,9 +177,12 @@ const SKINS_CSS = /* css */ `
   /* One label width for every field, so a field spanning two columns lines up with its neighbours. */
   grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);
   column-gap: 12px;
-  align-items: baseline;
 }
-.fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > .fd-label { grid-column: 1; }
+/* The label at its value's top, its words level with a one-line box's, as labels set beside by a page sit: never
+   by the value's baseline, which a box of several lines (a code box, rich text, files) puts at its foot. */
+.fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > .fd-label {
+  grid-column: 1; align-self: start; padding-block-start: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));
+}
 /* A table of lines needs the full width: its label sits above it. */
 .fd-form[data-fd-skin="underline"] .fd-field[data-type="one2many"] { grid-template-columns: minmax(0, 1fr); }
 .fd-form[data-fd-skin="underline"] .fd-field[data-type="one2many"] > * { grid-column: 1 !important; }
@@ -216,6 +234,8 @@ const SKINS_CSS = /* css */ `
   border-radius: var(--fd-control-radius);
   padding: var(--fd-pad-y) var(--fd-pad-x);
   min-height: var(--fd-control-height, 30px);
+  /* A value longer than its box ends in "…", not cut mid-letter (the whole of it shows on hover). */
+  text-overflow: ellipsis;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }
@@ -225,7 +245,7 @@ const SKINS_CSS = /* css */ `
 .fd-form[data-fd-skin="underline"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }
 .fd-form[data-fd-skin="underline"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }
 .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }
-.fd-form[data-fd-skin="outlined"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }
+.fd-form[data-fd-skin="outlined"] .fd-input[readonly] { background: color-mix(in srgb, var(--fd-text) 5%, var(--fd-surface)); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }
 /* 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; }
@@ -301,6 +321,10 @@ const SKINS_CSS = /* css */ `
 .fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }
 /* A link that can be opened has its open button beside the clear button. */
 .fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 56px; }
+/* Read-only, its clear button is gone: its words take the room, and an open button moves to the end. */
+.fd-combo:not(.fd-choice-search .fd-combo):has(> .fd-combo-clear[hidden]) .fd-combo-input[readonly] { padding-inline-end: var(--fd-pad-x); }
+.fd-combo:not(.fd-choice-search .fd-combo):has(> .fd-combo-clear[hidden]):has(> .fd-combo-open:not([hidden])) .fd-combo-input[readonly] { padding-inline-end: 30px; }
+.fd-combo:has(> .fd-combo-input[readonly]) > .fd-combo-clear[hidden] ~ .fd-combo-open { inset-inline-end: 3px; }
 .fd-combo-open {
   position: absolute; inset-inline-end: 29px; border: none; background: none; cursor: pointer; color: var(--fd-accent);
   font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 4px; min-width: 24px; min-height: 24px; display: inline-grid; place-items: center;
@@ -341,7 +365,37 @@ button.fd-chip-label:hover { text-decoration: underline; }
 /* A yes/no cell sits level with the inputs beside it. */
 .fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }
 .fd-lines-table .fd-lines-grip { width: 1px; min-width: 0; padding-inline: 6px 2px; }
+/* A table wider than its box scrolls sideways under a line's grip and its delete button, which stay at its ends. */
+.fd-lines:not([data-cards="always"]) .fd-lines-table :is(th, td):is(.fd-lines-grip, .fd-lines-tools) { position: sticky; z-index: 1; background-color: var(--fd-surface); }
+.fd-lines:not([data-cards="always"]) .fd-lines-table :is(th, td).fd-lines-grip { inset-inline-start: 0; }
+.fd-lines:not([data-cards="always"]) .fd-lines-table :is(th, td).fd-lines-tools { inset-inline-end: 0; }
+/* A column of yes/no, numbers, money or dates as wide as its values, as Flectra's lists size them: words and links have the rest. */
+.fd-lines-table td[data-fit] { min-width: 0; }
+/* A head may take two lines rather than widen a column of short values: "Delivery Lead Time" over "45". */
+.fd-lines-table thead th:not(.fd-lines-grip, .fd-lines-tools) { white-space: normal; }
+.fd-lines-table thead th { vertical-align: bottom; }
+.fd-lines-table th[data-fit="boolean"] { width: 5em; min-width: 5em; }
+.fd-lines-table th[data-fit="integer"] { width: max(7em, var(--fd-fit-need, 0px)); min-width: max(7em, var(--fd-fit-need, 0px)); }
+.fd-lines-table th[data-fit="float"] { width: max(7.5em, var(--fd-fit-need, 0px)); min-width: max(7.5em, var(--fd-fit-need, 0px)); }
+.fd-lines-table th[data-fit="monetary"] { width: max(11.5em, var(--fd-fit-need, 0px)); min-width: max(11.5em, var(--fd-fit-need, 0px)); }
+.fd-lines-table th[data-fit="date"] { width: 9em; min-width: 9em; }
+.fd-lines-table th[data-fit="datetime"] { width: 12.5em; min-width: 12.5em; }
+/* Numbers and money read from the end, as Flectra's lists align them. */
+.fd-lines-table th:is([data-fit="integer"], [data-fit="float"], [data-fit="monetary"]) { text-align: end; }
+.fd-lines-table td:is([data-fit="integer"], [data-fit="float"], [data-fit="monetary"]) input { text-align: end; }
+/* A table reads as a table, as a grid does: a line shows its boxes and buttons where the pointer or the cursor is.
+   Only colours and visibility change, never a size: a line left for a click elsewhere must not move what is clicked.
+   A touch screen has no pointer to hover with: there the boxes always show. */
+@media (hover: hover) and (pointer: fine) {
+  .fd-lines:not([data-cards="always"]) .fd-lines-table tbody tr:not(:hover, :focus-within) .fd-input:not([aria-invalid="true"]) { border-color: transparent; background-color: transparent; box-shadow: none; }
+  .fd-lines:not([data-cards="always"]) .fd-lines-table tbody tr:not(:hover, :focus-within) :is(.fd-combo-open, .fd-combo-clear) { visibility: hidden; }
+}
 .fd-line-grip { display: block; margin-block-start: 7px; cursor: grab; }
+/* A line dragged by its grip follows the pointer, lifted over the others, which slide out of its way. */
+.fd-lines-dragging, .fd-lines-dragging * { cursor: grabbing; user-select: none; }
+.fd-lines-dragging > tr:not(.fd-line-lifted) { transition: transform 0.15s ease; }
+.fd-line-lifted { position: relative; z-index: 2; box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }
+.fd-line-lifted > td { background: var(--fd-surface); }
 .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. */
@@ -592,7 +646,8 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }
 .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }
 .fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }
-.fd-button-danger:hover { background: var(--fd-error); color: #fff; }
+/* The surface's colour on the error's: white on a light page's deep red, near-black on a dark page's coral. */
+.fd-button-danger:hover { background: var(--fd-error); color: var(--fd-surface); }
 .fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }
 .fd-form[data-fd-skin="underline"] .fd-button { border-radius: 3px; }
 .fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -624,9 +679,13 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-sheet-layout { align-items: start; }
 /* Save and Discard closing the sheet, when the page puts them at its foot. */
 .fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }
-.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); } }
+/* The side panel under the sheet, the sheet taking the whole width; beside it, as Flectra's chatter, on a form of
+   1534px or more — the page growing by the panel's width, so the sheet keeps its own ("none" plus a width is no
+   width: a full page stays full). A page that asks keeps it beside down to 600px (record-styles). */
+@container (min-width: 1534px) {
+  .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); max-width: calc(var(--fd-page-max, 1180px) + 376px); }
+}
+.fd-sheet-layout.fd-has-side[data-side-beside="always"] { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
 /* 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; } }
@@ -766,6 +825,9 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
 .fd-property > label { color: var(--fd-muted); font-size: 13px; }
 .fd-property[data-type="boolean"] > :last-child { justify-self: start; }
+/* Beside their values, as the sheet's labels are: the same label column, the same words, the same gap between halves — the properties read as fields of the sheet. */
+.fd-form[data-fd-skin="underline"] .fd-property { grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr); }
+.fd-form[data-fd-skin="underline"] .fd-property > label { color: var(--fd-text); font-size: inherit; font-weight: var(--fd-label-weight); }
 @container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
 .fd-progressbar {
   position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;
@@ -952,7 +1014,9 @@ 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_sheet_1.SHEET_CSS + styles_business_1.BUSINESS_CSS + styles_kinds_1.KINDS_CSS + styles_choices_1.CHOICES_CSS + styles_parts_1.PARTS_CSS;
+// Themes' tokens after the skins' and before the page's look; their own shapes after the parts they reshape, and
+// before the page's own looks for each kind of part, which win over a theme as the page's look does.
+exports.FIELDIA_CSS = SKINS_CSS + themes_1.THEME_TOKENS_CSS + layout_styles_1.LAYOUT_CSS + styles_inputs_1.INPUTS_CSS + styles_sheet_1.SHEET_CSS + styles_business_1.BUSINESS_CSS + themes_1.THEME_RULES_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":";;;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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":";;;AA+/BA,sCAMC;AArgCD,iDAA2C;AAC3C,qDAA+C;AAC/C,mDAA6C;AAC7C,iDAA2C;AAC3C,iDAA2C;AAC3C,uDAAiD;AAEjD;;;;;;;;;;;;GAYG;AACH,mDAA6C;AAC7C,qCAA6D;AAE7D;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAq9B3B,CAAC;AAEF,0IAA0I;AAC1I,iHAAiH;AACjH,qGAAqG;AACxF,QAAA,WAAW,GAAG,SAAS,GAAG,yBAAgB,GAAG,0BAAU,GAAG,0BAAU,GAAG,wBAAS,GAAG,8BAAY,GAAG,wBAAe,GAAG,wBAAS,GAAG,4BAAW,GAAG,wBAAS,CAAC;AAErK,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"}

package/src/lib/styles.mjs

@@ -18,6 +18,7 @@ import { BUSINESS_CSS } from './styles-business.mjs';
  * form mirrors without a second stylesheet.
  */
 import { LAYOUT_CSS } from './layout-styles.mjs';
+import { THEME_RULES_CSS, THEME_TOKENS_CSS } from './themes.mjs';
 /**
  * The widths of a form at which its groups take their medium and their narrow
  * columns: up to 760px and up to 520px of the form's own width, as the
@@ -27,8 +28,11 @@ import { LAYOUT_CSS } from './layout-styles.mjs';
 export const FORM_WIDTHS = { medium: 760, narrow: 520 };
 /** The skins and the parts' chrome. One literal, so the script bundle can minify it as CSS. */
 const SKINS_CSS = /* css */ `
-/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. One inside a form
+/* Fieldia's tokens (its colours, sizes and fonts) live in a cascade layer: a host's own rule, of any weight, sets
+   them over Fieldia's, whole. The skins, themes, page looks and schemes keep their order inside it.
+   .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. One inside a form
    with no skin of its own (the conversation beside a record) wears the form's skin and scheme instead. */
+@layer fieldia-tokens {
 .fd-form, .fd-theme:is([data-fd-skin], :not(.fd-form *)) {
   --fd-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
   --fd-text: #212529;
@@ -58,12 +62,6 @@ const SKINS_CSS = /* css */ `
   --fd-label-weight: 600;
   --fd-gap-x: 32px;
   --fd-gap-y: 14px;
-  container-type: inline-size;
-  font-family: var(--fd-font);
-  font-size: 14px;
-  line-height: 1.45;
-  color: var(--fd-text);
-  -webkit-text-size-adjust: 100%;
 }
 /* Ant Design's blue and red, a shade darker: words in them read at 4.5:1 (WCAG AA) on white, the page and their soft shades. */
 .fd-form[data-fd-skin="outlined"], .fd-theme[data-fd-skin="outlined"] {
@@ -87,6 +85,15 @@ const SKINS_CSS = /* css */ `
   --fd-gap-x: 24px;
   --fd-gap-y: 18px;
 }
+}
+.fd-form, .fd-theme:is([data-fd-skin], :not(.fd-form *)) {
+  container-type: inline-size;
+  font-family: var(--fd-font);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--fd-text);
+  -webkit-text-size-adjust: 100%;
+}
 .fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }
 .fd-form [hidden] { display: none !important; }
 
@@ -128,16 +135,24 @@ const SKINS_CSS = /* css */ `
 .fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }
 /* The ✓ of a field filled in right, by its label. */
 .fd-valid-mark { color: var(--fd-success); width: 1em; height: 1em; margin-inline-start: 6px; vertical-align: -0.15em; stroke-width: 2.4; }
-.fd-field.fd-required > .fd-label::after { content: " *"; color: var(--fd-error); }
-.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); }
+/* No space between the star and the label's last word, its gap a margin: a line never breaks before it. */
+.fd-field.fd-required > .fd-label::after { content: "*"; margin-inline-start: 0.25em; color: var(--fd-error); }
+.fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::after { content: none; }
+.fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::before { content: "*"; margin-inline-end: 0.25em; 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; }
+/* In a label it stands just after the last word, out of the line's flow: a browser may always break a line
+   before a box such as the (?), no-break space or not, and it would wrap onto a line of its own.
+   The label keeps room for it at its end, and a required star moves past it. */
+.fd-label > .fd-help-tip-wrap { position: absolute; margin-block-start: 0.15em; }
+.fd-label:has(> .fd-help-tip-wrap) { padding-inline-end: 22px; }
+.fd-field.fd-required > .fd-label:has(> .fd-help-tip-wrap)::after { padding-inline-start: 22px; }
+.fd-form:not([data-fd-skin="outlined"]) .fd-field.fd-required > .fd-label:has(> .fd-help-tip-wrap) { padding-inline-end: 0; }
 .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); }
+.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, calc(100vw - 16px)); 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,9 +173,12 @@ const SKINS_CSS = /* css */ `
   /* One label width for every field, so a field spanning two columns lines up with its neighbours. */
   grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);
   column-gap: 12px;
-  align-items: baseline;
 }
-.fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > .fd-label { grid-column: 1; }
+/* The label at its value's top, its words level with a one-line box's, as labels set beside by a page sit: never
+   by the value's baseline, which a box of several lines (a code box, rich text, files) puts at its foot. */
+.fd-form[data-fd-skin="underline"] .fd-field:where(:not([data-labels])) > .fd-label {
+  grid-column: 1; align-self: start; padding-block-start: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));
+}
 /* A table of lines needs the full width: its label sits above it. */
 .fd-form[data-fd-skin="underline"] .fd-field[data-type="one2many"] { grid-template-columns: minmax(0, 1fr); }
 .fd-form[data-fd-skin="underline"] .fd-field[data-type="one2many"] > * { grid-column: 1 !important; }
@@ -212,6 +230,8 @@ const SKINS_CSS = /* css */ `
   border-radius: var(--fd-control-radius);
   padding: var(--fd-pad-y) var(--fd-pad-x);
   min-height: var(--fd-control-height, 30px);
+  /* A value longer than its box ends in "…", not cut mid-letter (the whole of it shows on hover). */
+  text-overflow: ellipsis;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }
@@ -221,7 +241,7 @@ const SKINS_CSS = /* css */ `
 .fd-form[data-fd-skin="underline"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }
 .fd-form[data-fd-skin="underline"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }
 .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }
-.fd-form[data-fd-skin="outlined"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }
+.fd-form[data-fd-skin="outlined"] .fd-input[readonly] { background: color-mix(in srgb, var(--fd-text) 5%, var(--fd-surface)); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }
 /* 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; }
@@ -297,6 +317,10 @@ const SKINS_CSS = /* css */ `
 .fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }
 /* A link that can be opened has its open button beside the clear button. */
 .fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 56px; }
+/* Read-only, its clear button is gone: its words take the room, and an open button moves to the end. */
+.fd-combo:not(.fd-choice-search .fd-combo):has(> .fd-combo-clear[hidden]) .fd-combo-input[readonly] { padding-inline-end: var(--fd-pad-x); }
+.fd-combo:not(.fd-choice-search .fd-combo):has(> .fd-combo-clear[hidden]):has(> .fd-combo-open:not([hidden])) .fd-combo-input[readonly] { padding-inline-end: 30px; }
+.fd-combo:has(> .fd-combo-input[readonly]) > .fd-combo-clear[hidden] ~ .fd-combo-open { inset-inline-end: 3px; }
 .fd-combo-open {
   position: absolute; inset-inline-end: 29px; border: none; background: none; cursor: pointer; color: var(--fd-accent);
   font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 4px; min-width: 24px; min-height: 24px; display: inline-grid; place-items: center;
@@ -337,7 +361,37 @@ button.fd-chip-label:hover { text-decoration: underline; }
 /* A yes/no cell sits level with the inputs beside it. */
 .fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }
 .fd-lines-table .fd-lines-grip { width: 1px; min-width: 0; padding-inline: 6px 2px; }
+/* A table wider than its box scrolls sideways under a line's grip and its delete button, which stay at its ends. */
+.fd-lines:not([data-cards="always"]) .fd-lines-table :is(th, td):is(.fd-lines-grip, .fd-lines-tools) { position: sticky; z-index: 1; background-color: var(--fd-surface); }
+.fd-lines:not([data-cards="always"]) .fd-lines-table :is(th, td).fd-lines-grip { inset-inline-start: 0; }
+.fd-lines:not([data-cards="always"]) .fd-lines-table :is(th, td).fd-lines-tools { inset-inline-end: 0; }
+/* A column of yes/no, numbers, money or dates as wide as its values, as Flectra's lists size them: words and links have the rest. */
+.fd-lines-table td[data-fit] { min-width: 0; }
+/* A head may take two lines rather than widen a column of short values: "Delivery Lead Time" over "45". */
+.fd-lines-table thead th:not(.fd-lines-grip, .fd-lines-tools) { white-space: normal; }
+.fd-lines-table thead th { vertical-align: bottom; }
+.fd-lines-table th[data-fit="boolean"] { width: 5em; min-width: 5em; }
+.fd-lines-table th[data-fit="integer"] { width: max(7em, var(--fd-fit-need, 0px)); min-width: max(7em, var(--fd-fit-need, 0px)); }
+.fd-lines-table th[data-fit="float"] { width: max(7.5em, var(--fd-fit-need, 0px)); min-width: max(7.5em, var(--fd-fit-need, 0px)); }
+.fd-lines-table th[data-fit="monetary"] { width: max(11.5em, var(--fd-fit-need, 0px)); min-width: max(11.5em, var(--fd-fit-need, 0px)); }
+.fd-lines-table th[data-fit="date"] { width: 9em; min-width: 9em; }
+.fd-lines-table th[data-fit="datetime"] { width: 12.5em; min-width: 12.5em; }
+/* Numbers and money read from the end, as Flectra's lists align them. */
+.fd-lines-table th:is([data-fit="integer"], [data-fit="float"], [data-fit="monetary"]) { text-align: end; }
+.fd-lines-table td:is([data-fit="integer"], [data-fit="float"], [data-fit="monetary"]) input { text-align: end; }
+/* A table reads as a table, as a grid does: a line shows its boxes and buttons where the pointer or the cursor is.
+   Only colours and visibility change, never a size: a line left for a click elsewhere must not move what is clicked.
+   A touch screen has no pointer to hover with: there the boxes always show. */
+@media (hover: hover) and (pointer: fine) {
+  .fd-lines:not([data-cards="always"]) .fd-lines-table tbody tr:not(:hover, :focus-within) .fd-input:not([aria-invalid="true"]) { border-color: transparent; background-color: transparent; box-shadow: none; }
+  .fd-lines:not([data-cards="always"]) .fd-lines-table tbody tr:not(:hover, :focus-within) :is(.fd-combo-open, .fd-combo-clear) { visibility: hidden; }
+}
 .fd-line-grip { display: block; margin-block-start: 7px; cursor: grab; }
+/* A line dragged by its grip follows the pointer, lifted over the others, which slide out of its way. */
+.fd-lines-dragging, .fd-lines-dragging * { cursor: grabbing; user-select: none; }
+.fd-lines-dragging > tr:not(.fd-line-lifted) { transition: transform 0.15s ease; }
+.fd-line-lifted { position: relative; z-index: 2; box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }
+.fd-line-lifted > td { background: var(--fd-surface); }
 .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. */
@@ -588,7 +642,8 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }
 .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }
 .fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }
-.fd-button-danger:hover { background: var(--fd-error); color: #fff; }
+/* The surface's colour on the error's: white on a light page's deep red, near-black on a dark page's coral. */
+.fd-button-danger:hover { background: var(--fd-error); color: var(--fd-surface); }
 .fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }
 .fd-form[data-fd-skin="underline"] .fd-button { border-radius: 3px; }
 .fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -620,9 +675,13 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-sheet-layout { align-items: start; }
 /* Save and Discard closing the sheet, when the page puts them at its foot. */
 .fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }
-.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); } }
+/* The side panel under the sheet, the sheet taking the whole width; beside it, as Flectra's chatter, on a form of
+   1534px or more — the page growing by the panel's width, so the sheet keeps its own ("none" plus a width is no
+   width: a full page stays full). A page that asks keeps it beside down to 600px (record-styles). */
+@container (min-width: 1534px) {
+  .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); max-width: calc(var(--fd-page-max, 1180px) + 376px); }
+}
+.fd-sheet-layout.fd-has-side[data-side-beside="always"] { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
 /* 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; } }
@@ -762,6 +821,9 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
 .fd-property > label { color: var(--fd-muted); font-size: 13px; }
 .fd-property[data-type="boolean"] > :last-child { justify-self: start; }
+/* Beside their values, as the sheet's labels are: the same label column, the same words, the same gap between halves — the properties read as fields of the sheet. */
+.fd-form[data-fd-skin="underline"] .fd-property { grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr); }
+.fd-form[data-fd-skin="underline"] .fd-property > label { color: var(--fd-text); font-size: inherit; font-weight: var(--fd-label-weight); }
 @container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
 .fd-progressbar {
   position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;
@@ -948,7 +1010,9 @@ 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. */
-export const FIELDIA_CSS = SKINS_CSS + LAYOUT_CSS + INPUTS_CSS + SHEET_CSS + BUSINESS_CSS + KINDS_CSS + CHOICES_CSS + PARTS_CSS;
+// Themes' tokens after the skins' and before the page's look; their own shapes after the parts they reshape, and
+// before the page's own looks for each kind of part, which win over a theme as the page's look does.
+export const FIELDIA_CSS = SKINS_CSS + THEME_TOKENS_CSS + LAYOUT_CSS + INPUTS_CSS + SHEET_CSS + BUSINESS_CSS + THEME_RULES_CSS + KINDS_CSS + CHOICES_CSS + PARTS_CSS;
 const STYLE_ID = 'fieldia-styles';
 /** Add Fieldia's stylesheet to a document, once. */
 export function installStyles(document) {

package/src/lib/styles.mjs.map

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

package/src/lib/themes.d.mts

@@ -0,0 +1,29 @@
+import type { Theme } from '@fieldia/core';
+/**
+ * (Not a `styles-*.ts`: its rules are written with the selectors they share, so the script bundle's
+ * minifier, which takes a static stylesheet, leaves it as it is.)
+ *
+ * Themes in the style of design systems people know: the form's own tokens,
+ * light and dark, over the skin each is drawn on (Odoo's over `underline`,
+ * the rest over `outlined`), and a few rules of their own for what tokens
+ * cannot say — Material's filled boxes, Apple's pill buttons, Google Forms'
+ * question cards. They are looks in those systems' style, not their kits: a
+ * theme names its typeface and falls back to the system's when the app has
+ * not loaded it. Every colour pair a reader reads is checked against WCAG AA
+ * (themes.spec.ts), so a few are a shade darker than the original.
+ */
+/** The tokens a theme sets, by their names without `--fd-`. */
+export type ThemeTokens = Partial<Record<'font' | 'text' | 'muted' | 'page' | 'surface' | 'border' | 'border-strong' | 'accent' | 'accent-text' | 'accent-soft' | 'focus' | 'focus-ring' | 'error' | 'error-soft' | 'success' | 'warning' | 'info' | 'radius' | 'control-radius' | 'control-height' | 'pad-y' | 'pad-x' | 'input-border' | 'label-weight' | 'gap-x' | 'gap-y' | 'fill' | 'edge', string>>;
+export declare const THEME_TOKENS: Record<Theme, {
+    light: ThemeTokens;
+    dark: ThemeTokens;
+}>;
+/**
+ * The themes' tokens: after the skins' (they win over them), before the page's
+ * look (whose accent, room, corners and scheme win over them). A theme's dark
+ * tokens are more specific than the plain dark scheme's, so they win over it.
+ * All in Fieldia's tokens' layer, under any rule of a host's own.
+ */
+export declare const THEME_TOKENS_CSS: string;
+/** What tokens cannot say: each theme's own shapes. After every other rule, so they win at the same weight. */
+export declare const THEME_RULES_CSS: string;

package/src/lib/themes.d.ts

@@ -0,0 +1,29 @@
+import type { Theme } from '@fieldia/core';
+/**
+ * (Not a `styles-*.ts`: its rules are written with the selectors they share, so the script bundle's
+ * minifier, which takes a static stylesheet, leaves it as it is.)
+ *
+ * Themes in the style of design systems people know: the form's own tokens,
+ * light and dark, over the skin each is drawn on (Odoo's over `underline`,
+ * the rest over `outlined`), and a few rules of their own for what tokens
+ * cannot say — Material's filled boxes, Apple's pill buttons, Google Forms'
+ * question cards. They are looks in those systems' style, not their kits: a
+ * theme names its typeface and falls back to the system's when the app has
+ * not loaded it. Every colour pair a reader reads is checked against WCAG AA
+ * (themes.spec.ts), so a few are a shade darker than the original.
+ */
+/** The tokens a theme sets, by their names without `--fd-`. */
+export type ThemeTokens = Partial<Record<'font' | 'text' | 'muted' | 'page' | 'surface' | 'border' | 'border-strong' | 'accent' | 'accent-text' | 'accent-soft' | 'focus' | 'focus-ring' | 'error' | 'error-soft' | 'success' | 'warning' | 'info' | 'radius' | 'control-radius' | 'control-height' | 'pad-y' | 'pad-x' | 'input-border' | 'label-weight' | 'gap-x' | 'gap-y' | 'fill' | 'edge', string>>;
+export declare const THEME_TOKENS: Record<Theme, {
+    light: ThemeTokens;
+    dark: ThemeTokens;
+}>;
+/**
+ * The themes' tokens: after the skins' (they win over them), before the page's
+ * look (whose accent, room, corners and scheme win over them). A theme's dark
+ * tokens are more specific than the plain dark scheme's, so they win over it.
+ * All in Fieldia's tokens' layer, under any rule of a host's own.
+ */
+export declare const THEME_TOKENS_CSS: string;
+/** What tokens cannot say: each theme's own shapes. After every other rule, so they win at the same weight. */
+export declare const THEME_RULES_CSS: string;