@fieldia/widgets 0.10.0 → 0.11.0

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

@@ -8,4 +8,4 @@
  *
  * 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";
+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  --fd-edge: #59616c;\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    --fd-edge: #59616c;\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

@@ -8,4 +8,4 @@
  *
  * 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";
+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  --fd-edge: #59616c;\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    --fd-edge: #59616c;\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

@@ -121,6 +121,7 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
   --fd-warning-soft: rgba(242, 181, 92, 0.13);
   --fd-info: #7db7ff;
   --fd-info-soft: rgba(90, 162, 255, 0.14);
+  --fd-edge: #59616c;
 }
 /* Auto follows the reader's system: the same dark tokens, when it is dark. */
 @media (prefers-color-scheme: dark) {
@@ -144,6 +145,7 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
     --fd-warning-soft: rgba(242, 181, 92, 0.13);
     --fd-info: #7db7ff;
     --fd-info-soft: rgba(90, 162, 255, 0.14);
+    --fd-edge: #59616c;
   }
 }
 

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

@@ -1 +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"}
+{"version":3,"file":"layout-styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/layout-styles.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;GASG;AACU,QAAA,UAAU,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKnC,CAAC"}

package/src/lib/layout-styles.mjs

@@ -118,6 +118,7 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
   --fd-warning-soft: rgba(242, 181, 92, 0.13);
   --fd-info: #7db7ff;
   --fd-info-soft: rgba(90, 162, 255, 0.14);
+  --fd-edge: #59616c;
 }
 /* Auto follows the reader's system: the same dark tokens, when it is dark. */
 @media (prefers-color-scheme: dark) {
@@ -141,6 +142,7 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
     --fd-warning-soft: rgba(242, 181, 92, 0.13);
     --fd-info: #7db7ff;
     --fd-info-soft: rgba(90, 162, 255, 0.14);
+    --fd-edge: #59616c;
   }
 }
 

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKnC,CAAC"}

package/src/lib/locales/ar.js

@@ -70,6 +70,10 @@ exports.ar = {
     close: 'إغلاق',
     fileAt: '{n} من {total}',
     noPreview: 'لا معاينة لهذا النوع من الملفات',
+    showFilesAs: 'عرض الملفات',
+    asList: 'قائمة',
+    asCards: 'بطاقات',
+    asThumbnails: 'صور مصغّرة',
     invalidJson: 'ليس JSON صالحًا',
     signaturePad: 'لوحة التوقيع: ارسم توقيعك',
     signHere: 'وقّع هنا',

package/src/lib/locales/ar.js.map

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

package/src/lib/locales/ar.mjs

@@ -67,6 +67,10 @@ export const ar = {
     close: 'إغلاق',
     fileAt: '{n} من {total}',
     noPreview: 'لا معاينة لهذا النوع من الملفات',
+    showFilesAs: 'عرض الملفات',
+    asList: 'قائمة',
+    asCards: 'بطاقات',
+    asThumbnails: 'صور مصغّرة',
     invalidJson: 'ليس JSON صالحًا',
     signaturePad: 'لوحة التوقيع: ارسم توقيعك',
     signHere: 'وقّع هنا',

package/src/lib/locales/ar.mjs.map

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

package/src/lib/locales/de.js

@@ -70,6 +70,10 @@ exports.de = {
     close: 'Schließen',
     fileAt: '{n} von {total}',
     noPreview: 'Keine Vorschau für diese Art von Datei',
+    showFilesAs: 'Dateiansicht',
+    asList: 'Liste',
+    asCards: 'Kacheln',
+    asThumbnails: 'Miniaturen',
     invalidJson: 'Kein gültiges JSON',
     signaturePad: 'Unterschriftenfeld: Unterschrift zeichnen',
     signHere: 'Hier unterschreiben',

package/src/lib/locales/de.js.map

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

package/src/lib/locales/de.mjs

@@ -67,6 +67,10 @@ export const de = {
     close: 'Schließen',
     fileAt: '{n} von {total}',
     noPreview: 'Keine Vorschau für diese Art von Datei',
+    showFilesAs: 'Dateiansicht',
+    asList: 'Liste',
+    asCards: 'Kacheln',
+    asThumbnails: 'Miniaturen',
     invalidJson: 'Kein gültiges JSON',
     signaturePad: 'Unterschriftenfeld: Unterschrift zeichnen',
     signHere: 'Hier unterschreiben',

package/src/lib/locales/de.mjs.map

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

package/src/lib/locales/fr.js

@@ -70,6 +70,10 @@ exports.fr = {
     close: 'Fermer',
     fileAt: '{n} sur {total}',
     noPreview: 'Pas d’aperçu pour ce type de fichier',
+    showFilesAs: 'Affichage des fichiers',
+    asList: 'Liste',
+    asCards: 'Cartes',
+    asThumbnails: 'Vignettes',
     invalidJson: 'JSON invalide',
     signaturePad: 'Zone de signature : dessinez votre signature',
     signHere: 'Signez ici',

package/src/lib/locales/fr.js.map

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

package/src/lib/locales/fr.mjs

@@ -67,6 +67,10 @@ export const fr = {
     close: 'Fermer',
     fileAt: '{n} sur {total}',
     noPreview: 'Pas d’aperçu pour ce type de fichier',
+    showFilesAs: 'Affichage des fichiers',
+    asList: 'Liste',
+    asCards: 'Cartes',
+    asThumbnails: 'Vignettes',
     invalidJson: 'JSON invalide',
     signaturePad: 'Zone de signature : dessinez votre signature',
     signHere: 'Signez ici',

package/src/lib/locales/fr.mjs.map

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

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

@@ -0,0 +1,16 @@
+/**
+ * A look for each kind of part, over the page's: what a page sets for its text
+ * boxes, choices, groups, buttons and tables. The viewer names what is set on
+ * the form (`data-inputs="bg radius"`, …) and hands each value over as a token
+ * of that kind (`--fd-inputs-bg`, …), worked out already for the page's scheme:
+ * a ground light enough, or dark enough, for the page's words to read on it,
+ * an accent moved until words in it and on it read (see `look.ts` in
+ * @fieldia/viewer). Each is worn by its own kind of part alone, in either skin.
+ *
+ * Where a part's own rules draw it from a token (its edge, its corners), the
+ * token is set on the part; where a skin draws it otherwise (the underline
+ * skin's boxes have no ground), the setting is drawn outright. Last in the
+ * stylesheet, so it wins where it speaks; colours and sizes only, so right to
+ * left needs nothing of its own.
+ */
+export declare const PARTS_CSS = "\n/* ---- each kind of part's own look ---------------------------------------------- */\n/* Boxes typed in or picked from: text, numbers, dates, dropdowns, and a date's calendar button. */\n.fd-form[data-inputs~=bg] :is(.fd-input:not([readonly]), .fd-calendar-button) { background: var(--fd-inputs-bg); }\n.fd-form[data-inputs~=border] :is(.fd-input, .fd-calendar-button) { --fd-border: var(--fd-inputs-border); --fd-border-strong: var(--fd-inputs-border); }\n.fd-form[data-inputs~=radius] :is(.fd-input, .fd-calendar-button) { --fd-control-radius: var(--fd-inputs-radius); }\n/* A record's title keeps its own big words. */\n.fd-form[data-inputs~=size] :where(.fd-input) { font-size: var(--fd-inputs-size); }\n/* The edge of the box being typed in and its glow (the underline skin draws its own line instead), the option and the day picked. */\n.fd-form[data-inputs~=accent] :is(.fd-input, .fd-combo, .fd-tags, .fd-date-pick) {\n  --fd-accent: var(--fd-inputs-accent); --fd-accent-text: var(--fd-inputs-accent-text); --fd-focus: var(--fd-accent);\n  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));\n  --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent);\n}\n\n/* Options picked: rings and ticks take the accent; a scale's points, Yes and No, pictures and a ranking's lines are boxes too. */\n.fd-form[data-choices~=accent] :is(.fd-choices, .fd-points, .fd-image-choices, .fd-ranking, .fd-checkbox, .fd-switch, .fd-matrix-table, .fd-slider) {\n  --fd-accent: var(--fd-choices-accent); --fd-accent-text: var(--fd-choices-accent-text); --fd-focus: var(--fd-accent);\n  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));\n}\n.fd-form[data-choices~=bg] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-surface: var(--fd-choices-bg); }\n.fd-form[data-choices~=border] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-border: var(--fd-choices-border); }\n.fd-form[data-choices~=radius] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-control-radius: var(--fd-choices-radius); }\n.fd-form[data-choices~=size] :is(.fd-choices, .fd-points, .fd-image-card-words, .fd-rank-list) { font-size: var(--fd-choices-size); }\n\n/* Groups drawn as a card or a frame: a section, a record's sheet, a repeating group's cards. In the\n   underline skin, which draws no card round a section, one given a ground or an edge becomes a card. */\n.fd-form[data-groups~=bg] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) {\n  background: var(--fd-groups-bg); --fd-ground: var(--fd-groups-bg);\n}\n.fd-form[data-groups~=border] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) { border: 1px solid var(--fd-groups-border); }\n.fd-form[data-groups~=radius] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) { border-radius: var(--fd-groups-radius); }\n.fd-form[data-fd-skin=underline]:is([data-groups~=bg], [data-groups~=border]) :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page]) {\n  padding: var(--fd-group-pad, 18px 22px); border-radius: var(--fd-groups-radius, var(--fd-radius));\n}\n\n/* Buttons: Send, Next, Save, Add another \u2014 in a form, and in a dialog it opens. */\n:is(.fd-form, .fd-form-dialog)[data-buttons~=accent] .fd-button {\n  --fd-accent: var(--fd-buttons-accent); --fd-accent-text: var(--fd-buttons-accent-text); --fd-focus: var(--fd-accent);\n  --fd-accent-hover: color-mix(in srgb, var(--fd-accent) 84%, var(--fd-text));\n}\n:is(.fd-form, .fd-form-dialog)[data-buttons~=accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }\n:is(.fd-form, .fd-form-dialog)[data-buttons~=radius] .fd-button { border-radius: var(--fd-buttons-radius); }\n:is(.fd-form, .fd-form-dialog)[data-buttons~=size] .fd-button { font-size: var(--fd-buttons-size); }\n\n/* Tables of lines and a matrix's grid: the ground of their heading row, their lines, their words. */\n.fd-form[data-tables~=bg] :is(.fd-lines-table, .fd-matrix-table) thead th { background: var(--fd-tables-bg); }\n.fd-form[data-tables~=border] :is(.fd-lines-table, .fd-matrix-table) :is(th, td) { border-color: var(--fd-tables-border); }\n.fd-form[data-tables~=size] :is(.fd-lines-table, .fd-matrix-table) :is(th, td) { font-size: var(--fd-tables-size); }\n";

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

@@ -0,0 +1,16 @@
+/**
+ * A look for each kind of part, over the page's: what a page sets for its text
+ * boxes, choices, groups, buttons and tables. The viewer names what is set on
+ * the form (`data-inputs="bg radius"`, …) and hands each value over as a token
+ * of that kind (`--fd-inputs-bg`, …), worked out already for the page's scheme:
+ * a ground light enough, or dark enough, for the page's words to read on it,
+ * an accent moved until words in it and on it read (see `look.ts` in
+ * @fieldia/viewer). Each is worn by its own kind of part alone, in either skin.
+ *
+ * Where a part's own rules draw it from a token (its edge, its corners), the
+ * token is set on the part; where a skin draws it otherwise (the underline
+ * skin's boxes have no ground), the setting is drawn outright. Last in the
+ * stylesheet, so it wins where it speaks; colours and sizes only, so right to
+ * left needs nothing of its own.
+ */
+export declare const PARTS_CSS = "\n/* ---- each kind of part's own look ---------------------------------------------- */\n/* Boxes typed in or picked from: text, numbers, dates, dropdowns, and a date's calendar button. */\n.fd-form[data-inputs~=bg] :is(.fd-input:not([readonly]), .fd-calendar-button) { background: var(--fd-inputs-bg); }\n.fd-form[data-inputs~=border] :is(.fd-input, .fd-calendar-button) { --fd-border: var(--fd-inputs-border); --fd-border-strong: var(--fd-inputs-border); }\n.fd-form[data-inputs~=radius] :is(.fd-input, .fd-calendar-button) { --fd-control-radius: var(--fd-inputs-radius); }\n/* A record's title keeps its own big words. */\n.fd-form[data-inputs~=size] :where(.fd-input) { font-size: var(--fd-inputs-size); }\n/* The edge of the box being typed in and its glow (the underline skin draws its own line instead), the option and the day picked. */\n.fd-form[data-inputs~=accent] :is(.fd-input, .fd-combo, .fd-tags, .fd-date-pick) {\n  --fd-accent: var(--fd-inputs-accent); --fd-accent-text: var(--fd-inputs-accent-text); --fd-focus: var(--fd-accent);\n  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));\n  --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent);\n}\n\n/* Options picked: rings and ticks take the accent; a scale's points, Yes and No, pictures and a ranking's lines are boxes too. */\n.fd-form[data-choices~=accent] :is(.fd-choices, .fd-points, .fd-image-choices, .fd-ranking, .fd-checkbox, .fd-switch, .fd-matrix-table, .fd-slider) {\n  --fd-accent: var(--fd-choices-accent); --fd-accent-text: var(--fd-choices-accent-text); --fd-focus: var(--fd-accent);\n  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));\n}\n.fd-form[data-choices~=bg] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-surface: var(--fd-choices-bg); }\n.fd-form[data-choices~=border] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-border: var(--fd-choices-border); }\n.fd-form[data-choices~=radius] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-control-radius: var(--fd-choices-radius); }\n.fd-form[data-choices~=size] :is(.fd-choices, .fd-points, .fd-image-card-words, .fd-rank-list) { font-size: var(--fd-choices-size); }\n\n/* Groups drawn as a card or a frame: a section, a record's sheet, a repeating group's cards. In the\n   underline skin, which draws no card round a section, one given a ground or an edge becomes a card. */\n.fd-form[data-groups~=bg] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) {\n  background: var(--fd-groups-bg); --fd-ground: var(--fd-groups-bg);\n}\n.fd-form[data-groups~=border] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) { border: 1px solid var(--fd-groups-border); }\n.fd-form[data-groups~=radius] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) { border-radius: var(--fd-groups-radius); }\n.fd-form[data-fd-skin=underline]:is([data-groups~=bg], [data-groups~=border]) :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page]) {\n  padding: var(--fd-group-pad, 18px 22px); border-radius: var(--fd-groups-radius, var(--fd-radius));\n}\n\n/* Buttons: Send, Next, Save, Add another \u2014 in a form, and in a dialog it opens. */\n:is(.fd-form, .fd-form-dialog)[data-buttons~=accent] .fd-button {\n  --fd-accent: var(--fd-buttons-accent); --fd-accent-text: var(--fd-buttons-accent-text); --fd-focus: var(--fd-accent);\n  --fd-accent-hover: color-mix(in srgb, var(--fd-accent) 84%, var(--fd-text));\n}\n:is(.fd-form, .fd-form-dialog)[data-buttons~=accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }\n:is(.fd-form, .fd-form-dialog)[data-buttons~=radius] .fd-button { border-radius: var(--fd-buttons-radius); }\n:is(.fd-form, .fd-form-dialog)[data-buttons~=size] .fd-button { font-size: var(--fd-buttons-size); }\n\n/* Tables of lines and a matrix's grid: the ground of their heading row, their lines, their words. */\n.fd-form[data-tables~=bg] :is(.fd-lines-table, .fd-matrix-table) thead th { background: var(--fd-tables-bg); }\n.fd-form[data-tables~=border] :is(.fd-lines-table, .fd-matrix-table) :is(th, td) { border-color: var(--fd-tables-border); }\n.fd-form[data-tables~=size] :is(.fd-lines-table, .fd-matrix-table) :is(th, td) { font-size: var(--fd-tables-size); }\n";

package/src/lib/styles-parts.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PARTS_CSS = void 0;
+/**
+ * A look for each kind of part, over the page's: what a page sets for its text
+ * boxes, choices, groups, buttons and tables. The viewer names what is set on
+ * the form (`data-inputs="bg radius"`, …) and hands each value over as a token
+ * of that kind (`--fd-inputs-bg`, …), worked out already for the page's scheme:
+ * a ground light enough, or dark enough, for the page's words to read on it,
+ * an accent moved until words in it and on it read (see `look.ts` in
+ * @fieldia/viewer). Each is worn by its own kind of part alone, in either skin.
+ *
+ * Where a part's own rules draw it from a token (its edge, its corners), the
+ * token is set on the part; where a skin draws it otherwise (the underline
+ * skin's boxes have no ground), the setting is drawn outright. Last in the
+ * stylesheet, so it wins where it speaks; colours and sizes only, so right to
+ * left needs nothing of its own.
+ */
+exports.PARTS_CSS = `
+/* ---- each kind of part's own look ---------------------------------------------- */
+/* Boxes typed in or picked from: text, numbers, dates, dropdowns, and a date's calendar button. */
+.fd-form[data-inputs~=bg] :is(.fd-input:not([readonly]), .fd-calendar-button) { background: var(--fd-inputs-bg); }
+.fd-form[data-inputs~=border] :is(.fd-input, .fd-calendar-button) { --fd-border: var(--fd-inputs-border); --fd-border-strong: var(--fd-inputs-border); }
+.fd-form[data-inputs~=radius] :is(.fd-input, .fd-calendar-button) { --fd-control-radius: var(--fd-inputs-radius); }
+/* A record's title keeps its own big words. */
+.fd-form[data-inputs~=size] :where(.fd-input) { font-size: var(--fd-inputs-size); }
+/* The edge of the box being typed in and its glow (the underline skin draws its own line instead), the option and the day picked. */
+.fd-form[data-inputs~=accent] :is(.fd-input, .fd-combo, .fd-tags, .fd-date-pick) {
+  --fd-accent: var(--fd-inputs-accent); --fd-accent-text: var(--fd-inputs-accent-text); --fd-focus: var(--fd-accent);
+  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));
+  --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent);
+}
+
+/* Options picked: rings and ticks take the accent; a scale's points, Yes and No, pictures and a ranking's lines are boxes too. */
+.fd-form[data-choices~=accent] :is(.fd-choices, .fd-points, .fd-image-choices, .fd-ranking, .fd-checkbox, .fd-switch, .fd-matrix-table, .fd-slider) {
+  --fd-accent: var(--fd-choices-accent); --fd-accent-text: var(--fd-choices-accent-text); --fd-focus: var(--fd-accent);
+  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));
+}
+.fd-form[data-choices~=bg] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-surface: var(--fd-choices-bg); }
+.fd-form[data-choices~=border] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-border: var(--fd-choices-border); }
+.fd-form[data-choices~=radius] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-control-radius: var(--fd-choices-radius); }
+.fd-form[data-choices~=size] :is(.fd-choices, .fd-points, .fd-image-card-words, .fd-rank-list) { font-size: var(--fd-choices-size); }
+
+/* Groups drawn as a card or a frame: a section, a record's sheet, a repeating group's cards. In the
+   underline skin, which draws no card round a section, one given a ground or an edge becomes a card. */
+.fd-form[data-groups~=bg] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) {
+  background: var(--fd-groups-bg); --fd-ground: var(--fd-groups-bg);
+}
+.fd-form[data-groups~=border] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) { border: 1px solid var(--fd-groups-border); }
+.fd-form[data-groups~=radius] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) { border-radius: var(--fd-groups-radius); }
+.fd-form[data-fd-skin=underline]:is([data-groups~=bg], [data-groups~=border]) :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page]) {
+  padding: var(--fd-group-pad, 18px 22px); border-radius: var(--fd-groups-radius, var(--fd-radius));
+}
+
+/* Buttons: Send, Next, Save, Add another — in a form, and in a dialog it opens. */
+:is(.fd-form, .fd-form-dialog)[data-buttons~=accent] .fd-button {
+  --fd-accent: var(--fd-buttons-accent); --fd-accent-text: var(--fd-buttons-accent-text); --fd-focus: var(--fd-accent);
+  --fd-accent-hover: color-mix(in srgb, var(--fd-accent) 84%, var(--fd-text));
+}
+:is(.fd-form, .fd-form-dialog)[data-buttons~=accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }
+:is(.fd-form, .fd-form-dialog)[data-buttons~=radius] .fd-button { border-radius: var(--fd-buttons-radius); }
+:is(.fd-form, .fd-form-dialog)[data-buttons~=size] .fd-button { font-size: var(--fd-buttons-size); }
+
+/* Tables of lines and a matrix's grid: the ground of their heading row, their lines, their words. */
+.fd-form[data-tables~=bg] :is(.fd-lines-table, .fd-matrix-table) thead th { background: var(--fd-tables-bg); }
+.fd-form[data-tables~=border] :is(.fd-lines-table, .fd-matrix-table) :is(th, td) { border-color: var(--fd-tables-border); }
+.fd-form[data-tables~=size] :is(.fd-lines-table, .fd-matrix-table) :is(th, td) { font-size: var(--fd-tables-size); }
+`;
+//# sourceMappingURL=styles-parts.js.map

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

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

package/src/lib/styles-parts.mjs

@@ -0,0 +1,66 @@
+/**
+ * A look for each kind of part, over the page's: what a page sets for its text
+ * boxes, choices, groups, buttons and tables. The viewer names what is set on
+ * the form (`data-inputs="bg radius"`, …) and hands each value over as a token
+ * of that kind (`--fd-inputs-bg`, …), worked out already for the page's scheme:
+ * a ground light enough, or dark enough, for the page's words to read on it,
+ * an accent moved until words in it and on it read (see `look.ts` in
+ * @fieldia/viewer). Each is worn by its own kind of part alone, in either skin.
+ *
+ * Where a part's own rules draw it from a token (its edge, its corners), the
+ * token is set on the part; where a skin draws it otherwise (the underline
+ * skin's boxes have no ground), the setting is drawn outright. Last in the
+ * stylesheet, so it wins where it speaks; colours and sizes only, so right to
+ * left needs nothing of its own.
+ */
+export const PARTS_CSS = /* css */ `
+/* ---- each kind of part's own look ---------------------------------------------- */
+/* Boxes typed in or picked from: text, numbers, dates, dropdowns, and a date's calendar button. */
+.fd-form[data-inputs~=bg] :is(.fd-input:not([readonly]), .fd-calendar-button) { background: var(--fd-inputs-bg); }
+.fd-form[data-inputs~=border] :is(.fd-input, .fd-calendar-button) { --fd-border: var(--fd-inputs-border); --fd-border-strong: var(--fd-inputs-border); }
+.fd-form[data-inputs~=radius] :is(.fd-input, .fd-calendar-button) { --fd-control-radius: var(--fd-inputs-radius); }
+/* A record's title keeps its own big words. */
+.fd-form[data-inputs~=size] :where(.fd-input) { font-size: var(--fd-inputs-size); }
+/* The edge of the box being typed in and its glow (the underline skin draws its own line instead), the option and the day picked. */
+.fd-form[data-inputs~=accent] :is(.fd-input, .fd-combo, .fd-tags, .fd-date-pick) {
+  --fd-accent: var(--fd-inputs-accent); --fd-accent-text: var(--fd-inputs-accent-text); --fd-focus: var(--fd-accent);
+  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));
+  --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent);
+}
+
+/* Options picked: rings and ticks take the accent; a scale's points, Yes and No, pictures and a ranking's lines are boxes too. */
+.fd-form[data-choices~=accent] :is(.fd-choices, .fd-points, .fd-image-choices, .fd-ranking, .fd-checkbox, .fd-switch, .fd-matrix-table, .fd-slider) {
+  --fd-accent: var(--fd-choices-accent); --fd-accent-text: var(--fd-choices-accent-text); --fd-focus: var(--fd-accent);
+  --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-surface));
+}
+.fd-form[data-choices~=bg] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-surface: var(--fd-choices-bg); }
+.fd-form[data-choices~=border] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-border: var(--fd-choices-border); }
+.fd-form[data-choices~=radius] :is(.fd-points button, .fd-image-card, .fd-rank-item) { --fd-control-radius: var(--fd-choices-radius); }
+.fd-form[data-choices~=size] :is(.fd-choices, .fd-points, .fd-image-card-words, .fd-rank-list) { font-size: var(--fd-choices-size); }
+
+/* Groups drawn as a card or a frame: a section, a record's sheet, a repeating group's cards. In the
+   underline skin, which draws no card round a section, one given a ground or an edge becomes a card. */
+.fd-form[data-groups~=bg] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) {
+  background: var(--fd-groups-bg); --fd-ground: var(--fd-groups-bg);
+}
+.fd-form[data-groups~=border] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) { border: 1px solid var(--fd-groups-border); }
+.fd-form[data-groups~=radius] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page], .fd-section[data-style=framed], .fd-card, .fd-repeat-card) { border-radius: var(--fd-groups-radius); }
+.fd-form[data-fd-skin=underline]:is([data-groups~=bg], [data-groups~=border]) :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style=card][data-on-page]) {
+  padding: var(--fd-group-pad, 18px 22px); border-radius: var(--fd-groups-radius, var(--fd-radius));
+}
+
+/* Buttons: Send, Next, Save, Add another — in a form, and in a dialog it opens. */
+:is(.fd-form, .fd-form-dialog)[data-buttons~=accent] .fd-button {
+  --fd-accent: var(--fd-buttons-accent); --fd-accent-text: var(--fd-buttons-accent-text); --fd-focus: var(--fd-accent);
+  --fd-accent-hover: color-mix(in srgb, var(--fd-accent) 84%, var(--fd-text));
+}
+:is(.fd-form, .fd-form-dialog)[data-buttons~=accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }
+:is(.fd-form, .fd-form-dialog)[data-buttons~=radius] .fd-button { border-radius: var(--fd-buttons-radius); }
+:is(.fd-form, .fd-form-dialog)[data-buttons~=size] .fd-button { font-size: var(--fd-buttons-size); }
+
+/* Tables of lines and a matrix's grid: the ground of their heading row, their lines, their words. */
+.fd-form[data-tables~=bg] :is(.fd-lines-table, .fd-matrix-table) thead th { background: var(--fd-tables-bg); }
+.fd-form[data-tables~=border] :is(.fd-lines-table, .fd-matrix-table) :is(th, td) { border-color: var(--fd-tables-border); }
+.fd-form[data-tables~=size] :is(.fd-lines-table, .fd-matrix-table) :is(th, td) { font-size: var(--fd-tables-size); }
+`;
+//# sourceMappingURL=styles-parts.mjs.map

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

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

package/src/lib/styles.d.mts

@@ -1,3 +1,13 @@
+/**
+ * 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
+ * stylesheet's @container rules say (a spec holds the two together). What
+ * shows a form at a width — the designer's canvas — asks these.
+ */
+export declare const FORM_WIDTHS: {
+    readonly medium: 760;
+    readonly narrow: 520;
+};
 /** Fieldia's whole stylesheet: the skins, then the layout over them, the inputs' details, the question kinds and the choices' details. */
 export declare const FIELDIA_CSS: string;
 /** Add Fieldia's stylesheet to a document, once. */

package/src/lib/styles.d.ts

@@ -1,3 +1,13 @@
+/**
+ * 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
+ * stylesheet's @container rules say (a spec holds the two together). What
+ * shows a form at a width — the designer's canvas — asks these.
+ */
+export declare const FORM_WIDTHS: {
+    readonly medium: 760;
+    readonly narrow: 520;
+};
 /** Fieldia's whole stylesheet: the skins, then the layout over them, the inputs' details, the question kinds and the choices' details. */
 export declare const FIELDIA_CSS: string;
 /** Add Fieldia's stylesheet to a document, once. */