@fieldia/widgets 0.9.1 → 0.10.0

package/src/lib/labels.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"labels.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/labels.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"labels.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/labels.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+/**
+ * The layout on top of the skins: arrangements on their grid's columns, how
+ * each group is drawn, where labels sit, and the page's own look — accent,
+ * font, room, corners, light or dark. The viewer hands these over as
+ * attributes and tokens on the form (see `place.ts` and `look.ts` in
+ * @fieldia/viewer); this stylesheet comes after the skins, so it wins where it
+ * speaks and leaves everything else as the skin draws it.
+ *
+ * Logical properties throughout, so right to left mirrors on its own.
+ */
+export declare const LAYOUT_CSS = "\n/* ---- arrangements: parts side by side or one under another, nothing drawn round them ---- */\n/* On its grid's columns: the grid's own tracks and gaps, so its parts line up with everything above and below. */\n.fd-grid > .fd-section[data-place=\"tracks\"] {\n  /* The columns it covers: its span, never more than its grid has at this width. */\n  --fd-tracks: min(var(--fd-span, 1), var(--fd-cols));\n  grid-template-columns: subgrid;\n  column-gap: var(--fd-gap-x);\n}\n.fd-form .fd-section[data-place=\"tracks\"] > .fd-grid { --fd-cols: var(--fd-tracks); grid-column: 1 / -1; grid-template-columns: subgrid; }\n.fd-section[data-place] > .fd-section-description { grid-column: 1 / -1; }\n/* Parts sharing one cell, side by side; one under the other where the cell is too narrow for that. */\n.fd-grid > .fd-section[data-place=\"shared\"] { container-type: inline-size; }\n.fd-form .fd-section[data-place=\"shared\"] > .fd-grid { --fd-cols: var(--fd-columns, 1); }\n@container (max-width: 330px) {\n  .fd-form .fd-section[data-place=\"shared\"] > .fd-grid { --fd-cols: 1; }\n}\n\n/* ---- how a group is drawn: a card, plain, a line under its title, or a frame round it ---- */\n/* A group of its own paints the ground it stands on, so nothing of the grid round it shows through. */\n.fd-form { --fd-ground: transparent; }\n.fd-card, .fd-form[data-fd-skin=\"outlined\"] .fd-section[data-style=\"card\"][data-on-page] { --fd-ground: var(--fd-surface); }\nfieldset.fd-section[data-style] { background-color: var(--fd-ground); }\n.fd-form .fd-section[data-style=\"line\"] > .fd-section-title { border-block-end: 1px solid var(--fd-border); padding-block-end: 8px; }\n.fd-form .fd-section[data-style=\"plain\"] > .fd-section-title { border-block-end: 0; padding-block-end: 0; }\n.fd-form .fd-section[data-style=\"framed\"] {\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 6px 18px 18px;\n}\n/* The title sits on the frame, as a fieldset's legend does: the frame breaks round it. */\n.fd-form .fd-section[data-style=\"framed\"] > .fd-section-title {\n  float: none; width: auto; max-width: 100%; padding: 0 6px; margin-inline-start: -6px; border: 0;\n}\n\n/* ---- where labels sit: as the page, a group or the field itself says (data-labels), in either skin ---- */\n.fd-form .fd-field[data-labels] { grid-template-columns: minmax(0, 1fr); }\n.fd-form .fd-field[data-labels] > * { grid-column: 1 / -1; }\n/* Beside: the label in a column of its own while the field has room for both. In a cell narrower\n   than that the label goes back above its box, so the box is never crushed. */\n.fd-form .fd-field[data-labels=\"beside\"] {\n  container-type: inline-size;\n  grid-template-columns: minmax(0, var(--fd-label-width, 140px)) minmax(0, 1fr);\n  column-gap: 14px;\n}\n@container (min-width: 300px) {\n  .fd-form .fd-field[data-labels=\"beside\"] > .fd-label {\n    grid-column: 1; align-self: start; padding-block-start: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));\n  }\n  .fd-form .fd-field[data-labels=\"beside\"] > :not(.fd-label) { grid-column: 2; }\n}\n/* Hidden: out of sight, still the box's name for a screen reader; the empty box shows it instead. */\n.fd-form .fd-field[data-labels=\"hidden\"] > .fd-label {\n  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;\n}\n/* After: a tick box, then its words on the same line, as a sentence; its help and messages under the words. They\n   drop to sit level with the boxes beside them in a row, by margins: the field's own padding is left to whoever\n   draws round it (a designer's canvas rings a part there). */\n.fd-form .fd-field[data-labels=\"after\"] {\n  grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: start;\n  --fd-tick-drop: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));\n}\n/* The box, or what holds it (a designer's canvas wraps each answer box). */\n.fd-form .fd-field[data-labels=\"after\"] > :is(.fd-tick, :has(> .fd-tick)) { grid-column: 1; grid-row: 1; display: flex; margin-block-start: calc(var(--fd-tick-drop) + (1.45em - 17px) / 2); }\n.fd-form .fd-field[data-labels=\"after\"] .fd-tick { width: 17px; height: 17px; }\n.fd-form .fd-field[data-labels=\"after\"] > :not(.fd-tick, :has(> .fd-tick)) { grid-column: 2; }\n.fd-form .fd-field[data-labels=\"after\"] > .fd-label { grid-row: 1; margin-block-start: var(--fd-tick-drop); font-weight: inherit; line-height: 1.45; cursor: pointer; }\n/* A field or a cell that measures itself is drawn over its neighbours while it is worked in: its lists and calendars open over them. */\n.fd-form .fd-field[data-labels=\"beside\"]:focus-within, .fd-grid > .fd-section[data-place=\"shared\"]:focus-within { z-index: 3; }\n\n/* ---- widths for tabs, words and buttons: they span columns like fields; a button stays as wide as its words ---- */\n:is(.fd-grid, .fd-sections) > .fd-button { justify-self: start; }\n/* A note: words set apart in a soft panel, a shade off whatever it stands on \u2014 a card, the page, or the dark. */\n.fd-form .fd-text-note { background: color-mix(in srgb, var(--fd-text) 6%, transparent); color: var(--fd-text); border-radius: var(--fd-control-radius, 6px); padding: 10px 12px; }\n\n/* ---- the page's look: worn by the form, and by a dialog it opens (its box and the page in it) ---- */\n:is(.fd-form, .fd-form-dialog)[data-font=\"serif\"] { --fd-font: \"Source Serif 4\", Georgia, serif; }\n:is(.fd-form, .fd-form-dialog)[data-font=\"rounded\"] { --fd-font: Nunito, \"Varela Round\", system-ui; }\n/* Room between and inside parts: gaps, the height of a box, a group's padding, the space between groups. */\n:is(.fd-form, .fd-form-dialog)[data-density=\"compact\"] { --fd-gap-y: 10px; --fd-gap-x: 16px; --fd-control-height: 30px; --fd-gap-block: 16px; --fd-group-pad: 14px 16px; }\n:is(.fd-form, .fd-form-dialog)[data-density=\"comfortable\"] { --fd-gap-y: 16px; --fd-gap-x: 20px; --fd-control-height: 36px; --fd-gap-block: 22px; --fd-group-pad: 18px 22px; }\n:is(.fd-form, .fd-form-dialog)[data-density=\"roomy\"] { --fd-gap-y: 22px; --fd-gap-x: 28px; --fd-control-height: 42px; --fd-gap-block: 30px; --fd-group-pad: 24px 30px; }\n:is(.fd-form, .fd-form-dialog)[data-corners=\"square\"] { --fd-radius: 0px; --fd-control-radius: 0px; }\n:is(.fd-form, .fd-form-dialog)[data-corners=\"soft\"] { --fd-radius: 10px; --fd-control-radius: 6px; }\n:is(.fd-form, .fd-form-dialog)[data-corners=\"round\"] { --fd-radius: 16px; --fd-control-radius: 12px; }\n\n/* Light or dark: a page that names its scheme paints its own ground, so it reads the same on any page round it. */\n.fd-form[data-scheme] { color-scheme: light; background: var(--fd-page); color: var(--fd-text); border-radius: var(--fd-radius); --fd-ground: var(--fd-page); }\n.fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 20px; }\n/* A page in a dialog paints no ground of its own and adds no room: the dialog is its ground. */\n.fd-form-dialog-body > .fd-form[data-scheme] { background: none; border-radius: 0; }\n.fd-form-dialog-body > .fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 0; }\n:is(.fd-form, .fd-form-dialog)[data-scheme=\"dark\"] {\n  color-scheme: dark;\n  --fd-text: #e8eaed;\n  --fd-muted: #a3a9b2;\n  --fd-page: #16191e;\n  --fd-surface: #1f2329;\n  --fd-border: #3a4048;\n  --fd-border-strong: #59616c;\n  --fd-accent: #5aa2ff;\n  --fd-accent-text: #0b1220;\n  --fd-accent-soft: rgba(90, 162, 255, 0.16);\n  --fd-focus: #5aa2ff;\n  --fd-error: #ff8a7a;\n  --fd-error-soft: rgba(255, 138, 122, 0.13);\n  --fd-success: #6fd08e;\n  --fd-success-soft: rgba(111, 208, 142, 0.14);\n  --fd-warning: #f2b55c;\n  --fd-warning-soft: rgba(242, 181, 92, 0.13);\n  --fd-info: #7db7ff;\n  --fd-info-soft: rgba(90, 162, 255, 0.14);\n}\n/* Auto follows the reader's system: the same dark tokens, when it is dark. */\n@media (prefers-color-scheme: dark) {\n  :is(.fd-form, .fd-form-dialog)[data-scheme=\"auto\"] {\n    color-scheme: dark;\n    --fd-text: #e8eaed;\n    --fd-muted: #a3a9b2;\n    --fd-page: #16191e;\n    --fd-surface: #1f2329;\n    --fd-border: #3a4048;\n    --fd-border-strong: #59616c;\n    --fd-accent: #5aa2ff;\n    --fd-accent-text: #0b1220;\n    --fd-accent-soft: rgba(90, 162, 255, 0.16);\n    --fd-focus: #5aa2ff;\n    --fd-error: #ff8a7a;\n    --fd-error-soft: rgba(255, 138, 122, 0.13);\n    --fd-success: #6fd08e;\n    --fd-success-soft: rgba(111, 208, 142, 0.14);\n    --fd-warning: #f2b55c;\n    --fd-warning-soft: rgba(242, 181, 92, 0.13);\n    --fd-info: #7db7ff;\n    --fd-info-soft: rgba(90, 162, 255, 0.14);\n  }\n}\n\n/* The page's accent, and the softer and hover shades mixed from it on whatever surface the scheme has. */\n:is(.fd-form, .fd-form-dialog)[data-accent] {\n  --fd-accent: var(--fd-look-accent);\n  --fd-accent-text: var(--fd-look-accent-text);\n  --fd-focus: var(--fd-look-accent);\n  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));\n  --fd-accent-hover: color-mix(in srgb, var(--fd-accent) 84%, var(--fd-text));\n}\n/* On a dark page, the accent the viewer lightened, when it had to be, so it still reads there. */\n:is(.fd-form, .fd-form-dialog)[data-scheme=\"dark\"][data-accent] {\n  --fd-accent: var(--fd-look-accent-dark);\n  --fd-accent-text: var(--fd-look-accent-dark-text);\n  --fd-focus: var(--fd-look-accent-dark);\n}\n@media (prefers-color-scheme: dark) {\n  :is(.fd-form, .fd-form-dialog)[data-scheme=\"auto\"][data-accent] {\n    --fd-accent: var(--fd-look-accent-dark);\n    --fd-accent-text: var(--fd-look-accent-dark-text);\n    --fd-focus: var(--fd-look-accent-dark);\n  }\n}\n:is(.fd-form, .fd-form-dialog)[data-fd-skin=\"outlined\"][data-accent] { --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent); }\n:is(.fd-form, .fd-form-dialog)[data-accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }\n/* A band of the accent under the page's title. */\n.fd-form[data-accent] .fd-page-head { border-block-end: 3px solid var(--fd-accent); padding-block-end: 14px; }\n";

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

@@ -0,0 +1,11 @@
+/**
+ * The layout on top of the skins: arrangements on their grid's columns, how
+ * each group is drawn, where labels sit, and the page's own look — accent,
+ * font, room, corners, light or dark. The viewer hands these over as
+ * attributes and tokens on the form (see `place.ts` and `look.ts` in
+ * @fieldia/viewer); this stylesheet comes after the skins, so it wins where it
+ * speaks and leaves everything else as the skin draws it.
+ *
+ * Logical properties throughout, so right to left mirrors on its own.
+ */
+export declare const LAYOUT_CSS = "\n/* ---- arrangements: parts side by side or one under another, nothing drawn round them ---- */\n/* On its grid's columns: the grid's own tracks and gaps, so its parts line up with everything above and below. */\n.fd-grid > .fd-section[data-place=\"tracks\"] {\n  /* The columns it covers: its span, never more than its grid has at this width. */\n  --fd-tracks: min(var(--fd-span, 1), var(--fd-cols));\n  grid-template-columns: subgrid;\n  column-gap: var(--fd-gap-x);\n}\n.fd-form .fd-section[data-place=\"tracks\"] > .fd-grid { --fd-cols: var(--fd-tracks); grid-column: 1 / -1; grid-template-columns: subgrid; }\n.fd-section[data-place] > .fd-section-description { grid-column: 1 / -1; }\n/* Parts sharing one cell, side by side; one under the other where the cell is too narrow for that. */\n.fd-grid > .fd-section[data-place=\"shared\"] { container-type: inline-size; }\n.fd-form .fd-section[data-place=\"shared\"] > .fd-grid { --fd-cols: var(--fd-columns, 1); }\n@container (max-width: 330px) {\n  .fd-form .fd-section[data-place=\"shared\"] > .fd-grid { --fd-cols: 1; }\n}\n\n/* ---- how a group is drawn: a card, plain, a line under its title, or a frame round it ---- */\n/* A group of its own paints the ground it stands on, so nothing of the grid round it shows through. */\n.fd-form { --fd-ground: transparent; }\n.fd-card, .fd-form[data-fd-skin=\"outlined\"] .fd-section[data-style=\"card\"][data-on-page] { --fd-ground: var(--fd-surface); }\nfieldset.fd-section[data-style] { background-color: var(--fd-ground); }\n.fd-form .fd-section[data-style=\"line\"] > .fd-section-title { border-block-end: 1px solid var(--fd-border); padding-block-end: 8px; }\n.fd-form .fd-section[data-style=\"plain\"] > .fd-section-title { border-block-end: 0; padding-block-end: 0; }\n.fd-form .fd-section[data-style=\"framed\"] {\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 6px 18px 18px;\n}\n/* The title sits on the frame, as a fieldset's legend does: the frame breaks round it. */\n.fd-form .fd-section[data-style=\"framed\"] > .fd-section-title {\n  float: none; width: auto; max-width: 100%; padding: 0 6px; margin-inline-start: -6px; border: 0;\n}\n\n/* ---- where labels sit: as the page, a group or the field itself says (data-labels), in either skin ---- */\n.fd-form .fd-field[data-labels] { grid-template-columns: minmax(0, 1fr); }\n.fd-form .fd-field[data-labels] > * { grid-column: 1 / -1; }\n/* Beside: the label in a column of its own while the field has room for both. In a cell narrower\n   than that the label goes back above its box, so the box is never crushed. */\n.fd-form .fd-field[data-labels=\"beside\"] {\n  container-type: inline-size;\n  grid-template-columns: minmax(0, var(--fd-label-width, 140px)) minmax(0, 1fr);\n  column-gap: 14px;\n}\n@container (min-width: 300px) {\n  .fd-form .fd-field[data-labels=\"beside\"] > .fd-label {\n    grid-column: 1; align-self: start; padding-block-start: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));\n  }\n  .fd-form .fd-field[data-labels=\"beside\"] > :not(.fd-label) { grid-column: 2; }\n}\n/* Hidden: out of sight, still the box's name for a screen reader; the empty box shows it instead. */\n.fd-form .fd-field[data-labels=\"hidden\"] > .fd-label {\n  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;\n}\n/* After: a tick box, then its words on the same line, as a sentence; its help and messages under the words. They\n   drop to sit level with the boxes beside them in a row, by margins: the field's own padding is left to whoever\n   draws round it (a designer's canvas rings a part there). */\n.fd-form .fd-field[data-labels=\"after\"] {\n  grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: start;\n  --fd-tick-drop: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));\n}\n/* The box, or what holds it (a designer's canvas wraps each answer box). */\n.fd-form .fd-field[data-labels=\"after\"] > :is(.fd-tick, :has(> .fd-tick)) { grid-column: 1; grid-row: 1; display: flex; margin-block-start: calc(var(--fd-tick-drop) + (1.45em - 17px) / 2); }\n.fd-form .fd-field[data-labels=\"after\"] .fd-tick { width: 17px; height: 17px; }\n.fd-form .fd-field[data-labels=\"after\"] > :not(.fd-tick, :has(> .fd-tick)) { grid-column: 2; }\n.fd-form .fd-field[data-labels=\"after\"] > .fd-label { grid-row: 1; margin-block-start: var(--fd-tick-drop); font-weight: inherit; line-height: 1.45; cursor: pointer; }\n/* A field or a cell that measures itself is drawn over its neighbours while it is worked in: its lists and calendars open over them. */\n.fd-form .fd-field[data-labels=\"beside\"]:focus-within, .fd-grid > .fd-section[data-place=\"shared\"]:focus-within { z-index: 3; }\n\n/* ---- widths for tabs, words and buttons: they span columns like fields; a button stays as wide as its words ---- */\n:is(.fd-grid, .fd-sections) > .fd-button { justify-self: start; }\n/* A note: words set apart in a soft panel, a shade off whatever it stands on \u2014 a card, the page, or the dark. */\n.fd-form .fd-text-note { background: color-mix(in srgb, var(--fd-text) 6%, transparent); color: var(--fd-text); border-radius: var(--fd-control-radius, 6px); padding: 10px 12px; }\n\n/* ---- the page's look: worn by the form, and by a dialog it opens (its box and the page in it) ---- */\n:is(.fd-form, .fd-form-dialog)[data-font=\"serif\"] { --fd-font: \"Source Serif 4\", Georgia, serif; }\n:is(.fd-form, .fd-form-dialog)[data-font=\"rounded\"] { --fd-font: Nunito, \"Varela Round\", system-ui; }\n/* Room between and inside parts: gaps, the height of a box, a group's padding, the space between groups. */\n:is(.fd-form, .fd-form-dialog)[data-density=\"compact\"] { --fd-gap-y: 10px; --fd-gap-x: 16px; --fd-control-height: 30px; --fd-gap-block: 16px; --fd-group-pad: 14px 16px; }\n:is(.fd-form, .fd-form-dialog)[data-density=\"comfortable\"] { --fd-gap-y: 16px; --fd-gap-x: 20px; --fd-control-height: 36px; --fd-gap-block: 22px; --fd-group-pad: 18px 22px; }\n:is(.fd-form, .fd-form-dialog)[data-density=\"roomy\"] { --fd-gap-y: 22px; --fd-gap-x: 28px; --fd-control-height: 42px; --fd-gap-block: 30px; --fd-group-pad: 24px 30px; }\n:is(.fd-form, .fd-form-dialog)[data-corners=\"square\"] { --fd-radius: 0px; --fd-control-radius: 0px; }\n:is(.fd-form, .fd-form-dialog)[data-corners=\"soft\"] { --fd-radius: 10px; --fd-control-radius: 6px; }\n:is(.fd-form, .fd-form-dialog)[data-corners=\"round\"] { --fd-radius: 16px; --fd-control-radius: 12px; }\n\n/* Light or dark: a page that names its scheme paints its own ground, so it reads the same on any page round it. */\n.fd-form[data-scheme] { color-scheme: light; background: var(--fd-page); color: var(--fd-text); border-radius: var(--fd-radius); --fd-ground: var(--fd-page); }\n.fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 20px; }\n/* A page in a dialog paints no ground of its own and adds no room: the dialog is its ground. */\n.fd-form-dialog-body > .fd-form[data-scheme] { background: none; border-radius: 0; }\n.fd-form-dialog-body > .fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 0; }\n:is(.fd-form, .fd-form-dialog)[data-scheme=\"dark\"] {\n  color-scheme: dark;\n  --fd-text: #e8eaed;\n  --fd-muted: #a3a9b2;\n  --fd-page: #16191e;\n  --fd-surface: #1f2329;\n  --fd-border: #3a4048;\n  --fd-border-strong: #59616c;\n  --fd-accent: #5aa2ff;\n  --fd-accent-text: #0b1220;\n  --fd-accent-soft: rgba(90, 162, 255, 0.16);\n  --fd-focus: #5aa2ff;\n  --fd-error: #ff8a7a;\n  --fd-error-soft: rgba(255, 138, 122, 0.13);\n  --fd-success: #6fd08e;\n  --fd-success-soft: rgba(111, 208, 142, 0.14);\n  --fd-warning: #f2b55c;\n  --fd-warning-soft: rgba(242, 181, 92, 0.13);\n  --fd-info: #7db7ff;\n  --fd-info-soft: rgba(90, 162, 255, 0.14);\n}\n/* Auto follows the reader's system: the same dark tokens, when it is dark. */\n@media (prefers-color-scheme: dark) {\n  :is(.fd-form, .fd-form-dialog)[data-scheme=\"auto\"] {\n    color-scheme: dark;\n    --fd-text: #e8eaed;\n    --fd-muted: #a3a9b2;\n    --fd-page: #16191e;\n    --fd-surface: #1f2329;\n    --fd-border: #3a4048;\n    --fd-border-strong: #59616c;\n    --fd-accent: #5aa2ff;\n    --fd-accent-text: #0b1220;\n    --fd-accent-soft: rgba(90, 162, 255, 0.16);\n    --fd-focus: #5aa2ff;\n    --fd-error: #ff8a7a;\n    --fd-error-soft: rgba(255, 138, 122, 0.13);\n    --fd-success: #6fd08e;\n    --fd-success-soft: rgba(111, 208, 142, 0.14);\n    --fd-warning: #f2b55c;\n    --fd-warning-soft: rgba(242, 181, 92, 0.13);\n    --fd-info: #7db7ff;\n    --fd-info-soft: rgba(90, 162, 255, 0.14);\n  }\n}\n\n/* The page's accent, and the softer and hover shades mixed from it on whatever surface the scheme has. */\n:is(.fd-form, .fd-form-dialog)[data-accent] {\n  --fd-accent: var(--fd-look-accent);\n  --fd-accent-text: var(--fd-look-accent-text);\n  --fd-focus: var(--fd-look-accent);\n  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));\n  --fd-accent-hover: color-mix(in srgb, var(--fd-accent) 84%, var(--fd-text));\n}\n/* On a dark page, the accent the viewer lightened, when it had to be, so it still reads there. */\n:is(.fd-form, .fd-form-dialog)[data-scheme=\"dark\"][data-accent] {\n  --fd-accent: var(--fd-look-accent-dark);\n  --fd-accent-text: var(--fd-look-accent-dark-text);\n  --fd-focus: var(--fd-look-accent-dark);\n}\n@media (prefers-color-scheme: dark) {\n  :is(.fd-form, .fd-form-dialog)[data-scheme=\"auto\"][data-accent] {\n    --fd-accent: var(--fd-look-accent-dark);\n    --fd-accent-text: var(--fd-look-accent-dark-text);\n    --fd-focus: var(--fd-look-accent-dark);\n  }\n}\n:is(.fd-form, .fd-form-dialog)[data-fd-skin=\"outlined\"][data-accent] { --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent); }\n:is(.fd-form, .fd-form-dialog)[data-accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }\n/* A band of the accent under the page's title. */\n.fd-form[data-accent] .fd-page-head { border-block-end: 3px solid var(--fd-accent); padding-block-end: 14px; }\n";

package/src/lib/layout-styles.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LAYOUT_CSS = void 0;
+/**
+ * The layout on top of the skins: arrangements on their grid's columns, how
+ * each group is drawn, where labels sit, and the page's own look — accent,
+ * font, room, corners, light or dark. The viewer hands these over as
+ * attributes and tokens on the form (see `place.ts` and `look.ts` in
+ * @fieldia/viewer); this stylesheet comes after the skins, so it wins where it
+ * speaks and leaves everything else as the skin draws it.
+ *
+ * Logical properties throughout, so right to left mirrors on its own.
+ */
+exports.LAYOUT_CSS = `
+/* ---- arrangements: parts side by side or one under another, nothing drawn round them ---- */
+/* On its grid's columns: the grid's own tracks and gaps, so its parts line up with everything above and below. */
+.fd-grid > .fd-section[data-place="tracks"] {
+  /* The columns it covers: its span, never more than its grid has at this width. */
+  --fd-tracks: min(var(--fd-span, 1), var(--fd-cols));
+  grid-template-columns: subgrid;
+  column-gap: var(--fd-gap-x);
+}
+.fd-form .fd-section[data-place="tracks"] > .fd-grid { --fd-cols: var(--fd-tracks); grid-column: 1 / -1; grid-template-columns: subgrid; }
+.fd-section[data-place] > .fd-section-description { grid-column: 1 / -1; }
+/* Parts sharing one cell, side by side; one under the other where the cell is too narrow for that. */
+.fd-grid > .fd-section[data-place="shared"] { container-type: inline-size; }
+.fd-form .fd-section[data-place="shared"] > .fd-grid { --fd-cols: var(--fd-columns, 1); }
+@container (max-width: 330px) {
+  .fd-form .fd-section[data-place="shared"] > .fd-grid { --fd-cols: 1; }
+}
+
+/* ---- how a group is drawn: a card, plain, a line under its title, or a frame round it ---- */
+/* A group of its own paints the ground it stands on, so nothing of the grid round it shows through. */
+.fd-form { --fd-ground: transparent; }
+.fd-card, .fd-form[data-fd-skin="outlined"] .fd-section[data-style="card"][data-on-page] { --fd-ground: var(--fd-surface); }
+fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
+.fd-form .fd-section[data-style="line"] > .fd-section-title { border-block-end: 1px solid var(--fd-border); padding-block-end: 8px; }
+.fd-form .fd-section[data-style="plain"] > .fd-section-title { border-block-end: 0; padding-block-end: 0; }
+.fd-form .fd-section[data-style="framed"] {
+  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 6px 18px 18px;
+}
+/* The title sits on the frame, as a fieldset's legend does: the frame breaks round it. */
+.fd-form .fd-section[data-style="framed"] > .fd-section-title {
+  float: none; width: auto; max-width: 100%; padding: 0 6px; margin-inline-start: -6px; border: 0;
+}
+
+/* ---- where labels sit: as the page, a group or the field itself says (data-labels), in either skin ---- */
+.fd-form .fd-field[data-labels] { grid-template-columns: minmax(0, 1fr); }
+.fd-form .fd-field[data-labels] > * { grid-column: 1 / -1; }
+/* Beside: the label in a column of its own while the field has room for both. In a cell narrower
+   than that the label goes back above its box, so the box is never crushed. */
+.fd-form .fd-field[data-labels="beside"] {
+  container-type: inline-size;
+  grid-template-columns: minmax(0, var(--fd-label-width, 140px)) minmax(0, 1fr);
+  column-gap: 14px;
+}
+@container (min-width: 300px) {
+  .fd-form .fd-field[data-labels="beside"] > .fd-label {
+    grid-column: 1; align-self: start; padding-block-start: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));
+  }
+  .fd-form .fd-field[data-labels="beside"] > :not(.fd-label) { grid-column: 2; }
+}
+/* Hidden: out of sight, still the box's name for a screen reader; the empty box shows it instead. */
+.fd-form .fd-field[data-labels="hidden"] > .fd-label {
+  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+/* After: a tick box, then its words on the same line, as a sentence; its help and messages under the words. They
+   drop to sit level with the boxes beside them in a row, by margins: the field's own padding is left to whoever
+   draws round it (a designer's canvas rings a part there). */
+.fd-form .fd-field[data-labels="after"] {
+  grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: start;
+  --fd-tick-drop: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));
+}
+/* The box, or what holds it (a designer's canvas wraps each answer box). */
+.fd-form .fd-field[data-labels="after"] > :is(.fd-tick, :has(> .fd-tick)) { grid-column: 1; grid-row: 1; display: flex; margin-block-start: calc(var(--fd-tick-drop) + (1.45em - 17px) / 2); }
+.fd-form .fd-field[data-labels="after"] .fd-tick { width: 17px; height: 17px; }
+.fd-form .fd-field[data-labels="after"] > :not(.fd-tick, :has(> .fd-tick)) { grid-column: 2; }
+.fd-form .fd-field[data-labels="after"] > .fd-label { grid-row: 1; margin-block-start: var(--fd-tick-drop); font-weight: inherit; line-height: 1.45; cursor: pointer; }
+/* A field or a cell that measures itself is drawn over its neighbours while it is worked in: its lists and calendars open over them. */
+.fd-form .fd-field[data-labels="beside"]:focus-within, .fd-grid > .fd-section[data-place="shared"]:focus-within { z-index: 3; }
+
+/* ---- widths for tabs, words and buttons: they span columns like fields; a button stays as wide as its words ---- */
+:is(.fd-grid, .fd-sections) > .fd-button { justify-self: start; }
+/* A note: words set apart in a soft panel, a shade off whatever it stands on — a card, the page, or the dark. */
+.fd-form .fd-text-note { background: color-mix(in srgb, var(--fd-text) 6%, transparent); color: var(--fd-text); border-radius: var(--fd-control-radius, 6px); padding: 10px 12px; }
+
+/* ---- the page's look: worn by the form, and by a dialog it opens (its box and the page in it) ---- */
+:is(.fd-form, .fd-form-dialog)[data-font="serif"] { --fd-font: "Source Serif 4", Georgia, serif; }
+:is(.fd-form, .fd-form-dialog)[data-font="rounded"] { --fd-font: Nunito, "Varela Round", system-ui; }
+/* Room between and inside parts: gaps, the height of a box, a group's padding, the space between groups. */
+:is(.fd-form, .fd-form-dialog)[data-density="compact"] { --fd-gap-y: 10px; --fd-gap-x: 16px; --fd-control-height: 30px; --fd-gap-block: 16px; --fd-group-pad: 14px 16px; }
+:is(.fd-form, .fd-form-dialog)[data-density="comfortable"] { --fd-gap-y: 16px; --fd-gap-x: 20px; --fd-control-height: 36px; --fd-gap-block: 22px; --fd-group-pad: 18px 22px; }
+:is(.fd-form, .fd-form-dialog)[data-density="roomy"] { --fd-gap-y: 22px; --fd-gap-x: 28px; --fd-control-height: 42px; --fd-gap-block: 30px; --fd-group-pad: 24px 30px; }
+:is(.fd-form, .fd-form-dialog)[data-corners="square"] { --fd-radius: 0px; --fd-control-radius: 0px; }
+:is(.fd-form, .fd-form-dialog)[data-corners="soft"] { --fd-radius: 10px; --fd-control-radius: 6px; }
+:is(.fd-form, .fd-form-dialog)[data-corners="round"] { --fd-radius: 16px; --fd-control-radius: 12px; }
+
+/* Light or dark: a page that names its scheme paints its own ground, so it reads the same on any page round it. */
+.fd-form[data-scheme] { color-scheme: light; background: var(--fd-page); color: var(--fd-text); border-radius: var(--fd-radius); --fd-ground: var(--fd-page); }
+.fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 20px; }
+/* A page in a dialog paints no ground of its own and adds no room: the dialog is its ground. */
+.fd-form-dialog-body > .fd-form[data-scheme] { background: none; border-radius: 0; }
+.fd-form-dialog-body > .fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 0; }
+:is(.fd-form, .fd-form-dialog)[data-scheme="dark"] {
+  color-scheme: dark;
+  --fd-text: #e8eaed;
+  --fd-muted: #a3a9b2;
+  --fd-page: #16191e;
+  --fd-surface: #1f2329;
+  --fd-border: #3a4048;
+  --fd-border-strong: #59616c;
+  --fd-accent: #5aa2ff;
+  --fd-accent-text: #0b1220;
+  --fd-accent-soft: rgba(90, 162, 255, 0.16);
+  --fd-focus: #5aa2ff;
+  --fd-error: #ff8a7a;
+  --fd-error-soft: rgba(255, 138, 122, 0.13);
+  --fd-success: #6fd08e;
+  --fd-success-soft: rgba(111, 208, 142, 0.14);
+  --fd-warning: #f2b55c;
+  --fd-warning-soft: rgba(242, 181, 92, 0.13);
+  --fd-info: #7db7ff;
+  --fd-info-soft: rgba(90, 162, 255, 0.14);
+}
+/* Auto follows the reader's system: the same dark tokens, when it is dark. */
+@media (prefers-color-scheme: dark) {
+  :is(.fd-form, .fd-form-dialog)[data-scheme="auto"] {
+    color-scheme: dark;
+    --fd-text: #e8eaed;
+    --fd-muted: #a3a9b2;
+    --fd-page: #16191e;
+    --fd-surface: #1f2329;
+    --fd-border: #3a4048;
+    --fd-border-strong: #59616c;
+    --fd-accent: #5aa2ff;
+    --fd-accent-text: #0b1220;
+    --fd-accent-soft: rgba(90, 162, 255, 0.16);
+    --fd-focus: #5aa2ff;
+    --fd-error: #ff8a7a;
+    --fd-error-soft: rgba(255, 138, 122, 0.13);
+    --fd-success: #6fd08e;
+    --fd-success-soft: rgba(111, 208, 142, 0.14);
+    --fd-warning: #f2b55c;
+    --fd-warning-soft: rgba(242, 181, 92, 0.13);
+    --fd-info: #7db7ff;
+    --fd-info-soft: rgba(90, 162, 255, 0.14);
+  }
+}
+
+/* The page's accent, and the softer and hover shades mixed from it on whatever surface the scheme has. */
+:is(.fd-form, .fd-form-dialog)[data-accent] {
+  --fd-accent: var(--fd-look-accent);
+  --fd-accent-text: var(--fd-look-accent-text);
+  --fd-focus: var(--fd-look-accent);
+  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));
+  --fd-accent-hover: color-mix(in srgb, var(--fd-accent) 84%, var(--fd-text));
+}
+/* On a dark page, the accent the viewer lightened, when it had to be, so it still reads there. */
+:is(.fd-form, .fd-form-dialog)[data-scheme="dark"][data-accent] {
+  --fd-accent: var(--fd-look-accent-dark);
+  --fd-accent-text: var(--fd-look-accent-dark-text);
+  --fd-focus: var(--fd-look-accent-dark);
+}
+@media (prefers-color-scheme: dark) {
+  :is(.fd-form, .fd-form-dialog)[data-scheme="auto"][data-accent] {
+    --fd-accent: var(--fd-look-accent-dark);
+    --fd-accent-text: var(--fd-look-accent-dark-text);
+    --fd-focus: var(--fd-look-accent-dark);
+  }
+}
+:is(.fd-form, .fd-form-dialog)[data-fd-skin="outlined"][data-accent] { --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent); }
+:is(.fd-form, .fd-form-dialog)[data-accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }
+/* A band of the accent under the page's title. */
+.fd-form[data-accent] .fd-page-head { border-block-end: 3px solid var(--fd-accent); padding-block-end: 14px; }
+`;
+//# sourceMappingURL=layout-styles.js.map

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

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

package/src/lib/layout-styles.mjs

@@ -0,0 +1,173 @@
+/**
+ * The layout on top of the skins: arrangements on their grid's columns, how
+ * each group is drawn, where labels sit, and the page's own look — accent,
+ * font, room, corners, light or dark. The viewer hands these over as
+ * attributes and tokens on the form (see `place.ts` and `look.ts` in
+ * @fieldia/viewer); this stylesheet comes after the skins, so it wins where it
+ * speaks and leaves everything else as the skin draws it.
+ *
+ * Logical properties throughout, so right to left mirrors on its own.
+ */
+export const LAYOUT_CSS = /* css */ `
+/* ---- arrangements: parts side by side or one under another, nothing drawn round them ---- */
+/* On its grid's columns: the grid's own tracks and gaps, so its parts line up with everything above and below. */
+.fd-grid > .fd-section[data-place="tracks"] {
+  /* The columns it covers: its span, never more than its grid has at this width. */
+  --fd-tracks: min(var(--fd-span, 1), var(--fd-cols));
+  grid-template-columns: subgrid;
+  column-gap: var(--fd-gap-x);
+}
+.fd-form .fd-section[data-place="tracks"] > .fd-grid { --fd-cols: var(--fd-tracks); grid-column: 1 / -1; grid-template-columns: subgrid; }
+.fd-section[data-place] > .fd-section-description { grid-column: 1 / -1; }
+/* Parts sharing one cell, side by side; one under the other where the cell is too narrow for that. */
+.fd-grid > .fd-section[data-place="shared"] { container-type: inline-size; }
+.fd-form .fd-section[data-place="shared"] > .fd-grid { --fd-cols: var(--fd-columns, 1); }
+@container (max-width: 330px) {
+  .fd-form .fd-section[data-place="shared"] > .fd-grid { --fd-cols: 1; }
+}
+
+/* ---- how a group is drawn: a card, plain, a line under its title, or a frame round it ---- */
+/* A group of its own paints the ground it stands on, so nothing of the grid round it shows through. */
+.fd-form { --fd-ground: transparent; }
+.fd-card, .fd-form[data-fd-skin="outlined"] .fd-section[data-style="card"][data-on-page] { --fd-ground: var(--fd-surface); }
+fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
+.fd-form .fd-section[data-style="line"] > .fd-section-title { border-block-end: 1px solid var(--fd-border); padding-block-end: 8px; }
+.fd-form .fd-section[data-style="plain"] > .fd-section-title { border-block-end: 0; padding-block-end: 0; }
+.fd-form .fd-section[data-style="framed"] {
+  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 6px 18px 18px;
+}
+/* The title sits on the frame, as a fieldset's legend does: the frame breaks round it. */
+.fd-form .fd-section[data-style="framed"] > .fd-section-title {
+  float: none; width: auto; max-width: 100%; padding: 0 6px; margin-inline-start: -6px; border: 0;
+}
+
+/* ---- where labels sit: as the page, a group or the field itself says (data-labels), in either skin ---- */
+.fd-form .fd-field[data-labels] { grid-template-columns: minmax(0, 1fr); }
+.fd-form .fd-field[data-labels] > * { grid-column: 1 / -1; }
+/* Beside: the label in a column of its own while the field has room for both. In a cell narrower
+   than that the label goes back above its box, so the box is never crushed. */
+.fd-form .fd-field[data-labels="beside"] {
+  container-type: inline-size;
+  grid-template-columns: minmax(0, var(--fd-label-width, 140px)) minmax(0, 1fr);
+  column-gap: 14px;
+}
+@container (min-width: 300px) {
+  .fd-form .fd-field[data-labels="beside"] > .fd-label {
+    grid-column: 1; align-self: start; padding-block-start: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));
+  }
+  .fd-form .fd-field[data-labels="beside"] > :not(.fd-label) { grid-column: 2; }
+}
+/* Hidden: out of sight, still the box's name for a screen reader; the empty box shows it instead. */
+.fd-form .fd-field[data-labels="hidden"] > .fd-label {
+  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+/* After: a tick box, then its words on the same line, as a sentence; its help and messages under the words. They
+   drop to sit level with the boxes beside them in a row, by margins: the field's own padding is left to whoever
+   draws round it (a designer's canvas rings a part there). */
+.fd-form .fd-field[data-labels="after"] {
+  grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: start;
+  --fd-tick-drop: max(0px, calc((var(--fd-control-height, 30px) - 1.45em) / 2));
+}
+/* The box, or what holds it (a designer's canvas wraps each answer box). */
+.fd-form .fd-field[data-labels="after"] > :is(.fd-tick, :has(> .fd-tick)) { grid-column: 1; grid-row: 1; display: flex; margin-block-start: calc(var(--fd-tick-drop) + (1.45em - 17px) / 2); }
+.fd-form .fd-field[data-labels="after"] .fd-tick { width: 17px; height: 17px; }
+.fd-form .fd-field[data-labels="after"] > :not(.fd-tick, :has(> .fd-tick)) { grid-column: 2; }
+.fd-form .fd-field[data-labels="after"] > .fd-label { grid-row: 1; margin-block-start: var(--fd-tick-drop); font-weight: inherit; line-height: 1.45; cursor: pointer; }
+/* A field or a cell that measures itself is drawn over its neighbours while it is worked in: its lists and calendars open over them. */
+.fd-form .fd-field[data-labels="beside"]:focus-within, .fd-grid > .fd-section[data-place="shared"]:focus-within { z-index: 3; }
+
+/* ---- widths for tabs, words and buttons: they span columns like fields; a button stays as wide as its words ---- */
+:is(.fd-grid, .fd-sections) > .fd-button { justify-self: start; }
+/* A note: words set apart in a soft panel, a shade off whatever it stands on — a card, the page, or the dark. */
+.fd-form .fd-text-note { background: color-mix(in srgb, var(--fd-text) 6%, transparent); color: var(--fd-text); border-radius: var(--fd-control-radius, 6px); padding: 10px 12px; }
+
+/* ---- the page's look: worn by the form, and by a dialog it opens (its box and the page in it) ---- */
+:is(.fd-form, .fd-form-dialog)[data-font="serif"] { --fd-font: "Source Serif 4", Georgia, serif; }
+:is(.fd-form, .fd-form-dialog)[data-font="rounded"] { --fd-font: Nunito, "Varela Round", system-ui; }
+/* Room between and inside parts: gaps, the height of a box, a group's padding, the space between groups. */
+:is(.fd-form, .fd-form-dialog)[data-density="compact"] { --fd-gap-y: 10px; --fd-gap-x: 16px; --fd-control-height: 30px; --fd-gap-block: 16px; --fd-group-pad: 14px 16px; }
+:is(.fd-form, .fd-form-dialog)[data-density="comfortable"] { --fd-gap-y: 16px; --fd-gap-x: 20px; --fd-control-height: 36px; --fd-gap-block: 22px; --fd-group-pad: 18px 22px; }
+:is(.fd-form, .fd-form-dialog)[data-density="roomy"] { --fd-gap-y: 22px; --fd-gap-x: 28px; --fd-control-height: 42px; --fd-gap-block: 30px; --fd-group-pad: 24px 30px; }
+:is(.fd-form, .fd-form-dialog)[data-corners="square"] { --fd-radius: 0px; --fd-control-radius: 0px; }
+:is(.fd-form, .fd-form-dialog)[data-corners="soft"] { --fd-radius: 10px; --fd-control-radius: 6px; }
+:is(.fd-form, .fd-form-dialog)[data-corners="round"] { --fd-radius: 16px; --fd-control-radius: 12px; }
+
+/* Light or dark: a page that names its scheme paints its own ground, so it reads the same on any page round it. */
+.fd-form[data-scheme] { color-scheme: light; background: var(--fd-page); color: var(--fd-text); border-radius: var(--fd-radius); --fd-ground: var(--fd-page); }
+.fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 20px; }
+/* A page in a dialog paints no ground of its own and adds no room: the dialog is its ground. */
+.fd-form-dialog-body > .fd-form[data-scheme] { background: none; border-radius: 0; }
+.fd-form-dialog-body > .fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 0; }
+:is(.fd-form, .fd-form-dialog)[data-scheme="dark"] {
+  color-scheme: dark;
+  --fd-text: #e8eaed;
+  --fd-muted: #a3a9b2;
+  --fd-page: #16191e;
+  --fd-surface: #1f2329;
+  --fd-border: #3a4048;
+  --fd-border-strong: #59616c;
+  --fd-accent: #5aa2ff;
+  --fd-accent-text: #0b1220;
+  --fd-accent-soft: rgba(90, 162, 255, 0.16);
+  --fd-focus: #5aa2ff;
+  --fd-error: #ff8a7a;
+  --fd-error-soft: rgba(255, 138, 122, 0.13);
+  --fd-success: #6fd08e;
+  --fd-success-soft: rgba(111, 208, 142, 0.14);
+  --fd-warning: #f2b55c;
+  --fd-warning-soft: rgba(242, 181, 92, 0.13);
+  --fd-info: #7db7ff;
+  --fd-info-soft: rgba(90, 162, 255, 0.14);
+}
+/* Auto follows the reader's system: the same dark tokens, when it is dark. */
+@media (prefers-color-scheme: dark) {
+  :is(.fd-form, .fd-form-dialog)[data-scheme="auto"] {
+    color-scheme: dark;
+    --fd-text: #e8eaed;
+    --fd-muted: #a3a9b2;
+    --fd-page: #16191e;
+    --fd-surface: #1f2329;
+    --fd-border: #3a4048;
+    --fd-border-strong: #59616c;
+    --fd-accent: #5aa2ff;
+    --fd-accent-text: #0b1220;
+    --fd-accent-soft: rgba(90, 162, 255, 0.16);
+    --fd-focus: #5aa2ff;
+    --fd-error: #ff8a7a;
+    --fd-error-soft: rgba(255, 138, 122, 0.13);
+    --fd-success: #6fd08e;
+    --fd-success-soft: rgba(111, 208, 142, 0.14);
+    --fd-warning: #f2b55c;
+    --fd-warning-soft: rgba(242, 181, 92, 0.13);
+    --fd-info: #7db7ff;
+    --fd-info-soft: rgba(90, 162, 255, 0.14);
+  }
+}
+
+/* The page's accent, and the softer and hover shades mixed from it on whatever surface the scheme has. */
+:is(.fd-form, .fd-form-dialog)[data-accent] {
+  --fd-accent: var(--fd-look-accent);
+  --fd-accent-text: var(--fd-look-accent-text);
+  --fd-focus: var(--fd-look-accent);
+  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));
+  --fd-accent-hover: color-mix(in srgb, var(--fd-accent) 84%, var(--fd-text));
+}
+/* On a dark page, the accent the viewer lightened, when it had to be, so it still reads there. */
+:is(.fd-form, .fd-form-dialog)[data-scheme="dark"][data-accent] {
+  --fd-accent: var(--fd-look-accent-dark);
+  --fd-accent-text: var(--fd-look-accent-dark-text);
+  --fd-focus: var(--fd-look-accent-dark);
+}
+@media (prefers-color-scheme: dark) {
+  :is(.fd-form, .fd-form-dialog)[data-scheme="auto"][data-accent] {
+    --fd-accent: var(--fd-look-accent-dark);
+    --fd-accent-text: var(--fd-look-accent-dark-text);
+    --fd-focus: var(--fd-look-accent-dark);
+  }
+}
+:is(.fd-form, .fd-form-dialog)[data-fd-skin="outlined"][data-accent] { --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent); }
+:is(.fd-form, .fd-form-dialog)[data-accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }
+/* A band of the accent under the page's title. */
+.fd-form[data-accent] .fd-page-head { border-block-end: 3px solid var(--fd-accent); padding-block-end: 14px; }
+`;
+//# sourceMappingURL=layout-styles.mjs.map

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

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

package/src/lib/limits.d.mts

@@ -0,0 +1,20 @@
+import { type Field, type FieldNode } from '@fieldia/core';
+import type { Widget, WidgetContext } from './widgets.mjs';
+/**
+ * What a text box shows of its limits: a count of the characters typed
+ * against its field's most, under it — "12 / 100", in the warning colour from
+ * nine tenths on, and how many are left said to a screen reader once typing
+ * pauses — for a page's own field, not a table's cell; and a paragraph's rows,
+ * growing as people type unless the page says not to (`autoGrow: false`);
+ * a date's, a date and time's or a time's earliest and latest on its input.
+ */
+export declare function counted(widget: Widget, { form, name, field, document, labels, locale }: WidgetContext, box: HTMLInputElement | HTMLTextAreaElement): Widget;
+/** A paragraph's rows (`options.rows`), and a way to grow it to what it holds — nothing when it keeps its height. */
+export declare function grower(area: HTMLTextAreaElement, node: FieldNode): () => void;
+/**
+ * A date's or a date and time's earliest and latest day (the field's `min`
+ * and `max`, counted from today where they say so), or a time's (the node's
+ * `min` and `max`, "09:00"), on its input for the browser's picker to keep;
+ * and the node's `step` in minutes.
+ */
+export declare function bounds(input: HTMLInputElement, field: Field, node: FieldNode): void;

package/src/lib/limits.d.ts

@@ -0,0 +1,20 @@
+import { type Field, type FieldNode } from '@fieldia/core';
+import type { Widget, WidgetContext } from './widgets';
+/**
+ * What a text box shows of its limits: a count of the characters typed
+ * against its field's most, under it — "12 / 100", in the warning colour from
+ * nine tenths on, and how many are left said to a screen reader once typing
+ * pauses — for a page's own field, not a table's cell; and a paragraph's rows,
+ * growing as people type unless the page says not to (`autoGrow: false`);
+ * a date's, a date and time's or a time's earliest and latest on its input.
+ */
+export declare function counted(widget: Widget, { form, name, field, document, labels, locale }: WidgetContext, box: HTMLInputElement | HTMLTextAreaElement): Widget;
+/** A paragraph's rows (`options.rows`), and a way to grow it to what it holds — nothing when it keeps its height. */
+export declare function grower(area: HTMLTextAreaElement, node: FieldNode): () => void;
+/**
+ * A date's or a date and time's earliest and latest day (the field's `min`
+ * and `max`, counted from today where they say so), or a time's (the node's
+ * `min` and `max`, "09:00"), on its input for the browser's picker to keep;
+ * and the node's `step` in minutes.
+ */
+export declare function bounds(input: HTMLInputElement, field: Field, node: FieldNode): void;

package/src/lib/limits.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.counted = counted;
+exports.grower = grower;
+exports.bounds = bounds;
+const core_1 = require("@fieldia/core");
+const kind_parts_1 = require("./kind-parts");
+/**
+ * What a text box shows of its limits: a count of the characters typed
+ * against its field's most, under it — "12 / 100", in the warning colour from
+ * nine tenths on, and how many are left said to a screen reader once typing
+ * pauses — for a page's own field, not a table's cell; and a paragraph's rows,
+ * growing as people type unless the page says not to (`autoGrow: false`);
+ * a date's, a date and time's or a time's earliest and latest on its input.
+ */
+function counted(widget, { form, name, field, document, labels, locale }, box) {
+    const size = field.type === 'char' || field.type === 'text' ? field.size : undefined;
+    if (!size || form.page.fields[name] !== field)
+        return widget;
+    const make = (0, kind_parts_1.maker)(document);
+    const shown = make('div', { class: 'fd-count', 'aria-hidden': 'true' });
+    const said = make('div', { class: 'fd-sr-only', 'aria-live': 'polite' });
+    let pause;
+    return {
+        ...widget,
+        element: make('div', { class: 'fd-counted' }, widget.element, shown, said),
+        update(state) {
+            widget.update(state);
+            const n = box.value.length;
+            (0, kind_parts_1.setText)(shown, `${n} / ${size}`);
+            shown.classList.toggle('fd-count-near', n >= size * 0.9);
+            (0, kind_parts_1.setHidden)(shown, state.readonly);
+            if (document.activeElement !== box)
+                return;
+            clearTimeout(pause);
+            pause = setTimeout(() => (0, kind_parts_1.setText)(said, (0, kind_parts_1.fillIn)((0, kind_parts_1.wordsFor)(labels, locale).charactersLeft, { n: size - n })), 700);
+        },
+    };
+}
+/** A paragraph's rows (`options.rows`), and a way to grow it to what it holds — nothing when it keeps its height. */
+function grower(area, node) {
+    const rows = node.options?.['rows'];
+    if (typeof rows === 'number')
+        area.rows = rows;
+    if (node.options?.['autoGrow'] === false)
+        return () => undefined;
+    return () => {
+        area.style.height = '';
+        // Its height takes its borders too: what scrolls, and the borders round it.
+        if (area.scrollHeight)
+            area.style.height = `${area.scrollHeight + area.offsetHeight - area.clientHeight}px`;
+    };
+}
+/**
+ * A date's or a date and time's earliest and latest day (the field's `min`
+ * and `max`, counted from today where they say so), or a time's (the node's
+ * `min` and `max`, "09:00"), on its input for the browser's picker to keep;
+ * and the node's `step` in minutes.
+ */
+function bounds(input, field, node) {
+    const options = node.options ?? {};
+    const time = field.type === 'char';
+    const limits = time ? [options['min'], options['max']] : 'min' in field ? [field.min, field.max] : [];
+    limits.forEach((limit, i) => {
+        if (typeof limit === 'string')
+            input[i ? 'max' : 'min'] = time ? limit : (0, core_1.dayOf)(limit) + (field.type === 'datetime' ? (i ? 'T23:59' : 'T00:00') : '');
+    });
+    if (typeof options['step'] === 'number')
+        input.step = String(options['step'] * 60);
+}
+//# sourceMappingURL=limits.js.map

package/src/lib/limits.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"limits.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/limits.ts"],"names":[],"mappings":"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"}