@fieldia/widgets 0.10.0 → 0.11.0

package/src/lib/styles.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FIELDIA_CSS = void 0;
+exports.FIELDIA_CSS = exports.FORM_WIDTHS = void 0;
 exports.installStyles = installStyles;
 const styles_kinds_1 = require("./styles-kinds");
 const styles_choices_1 = require("./styles-choices");
 const styles_inputs_1 = require("./styles-inputs");
+const styles_parts_1 = require("./styles-parts");
 /**
  * Fieldia's stylesheet: two skins and the layout chrome, all scoped to the
  * form's own root (`.fd-form[data-fd-skin=…]`), so two forms on one page can
@@ -19,6 +20,13 @@ const styles_inputs_1 = require("./styles-inputs");
  * form mirrors without a second stylesheet.
  */
 const layout_styles_1 = require("./layout-styles");
+/**
+ * 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.
+ */
+exports.FORM_WIDTHS = { medium: 760, narrow: 520 };
 /** The skins and the parts' chrome. One literal, so the script bundle can minify it as CSS. */
 const SKINS_CSS = /* css */ `
 /* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. One inside a form
@@ -350,25 +358,46 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-file-confirm:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
 .fd-file-note:empty { display: none; }
 .fd-file-note { color: var(--fd-warning); }
+/* Over the files: how many, and the switch between a list and pictures, at the end. */
+.fd-file-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; justify-self: stretch; }
+.fd-file-views { display: flex; gap: 2px; margin-inline-start: auto; padding: 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-page); }
+.fd-file-views button {
+  display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; font: inherit; font-size: 13px; color: var(--fd-muted); cursor: pointer;
+  border: none; border-radius: calc(var(--fd-control-radius) - 2px); background: none;
+}
+.fd-file-views [aria-pressed="true"] { color: var(--fd-text); background: var(--fd-surface); box-shadow: 0 0 0 1px var(--fd-border); }
 /* Thumbnails: tiles in a row that wraps, the picker the last of them. */
 .fd-files-thumbs { display: flex; flex-wrap: wrap; align-items: flex-start; }
-.fd-files-thumbs > * { flex-basis: 100%; order: 2; }
-.fd-files-thumbs > .fd-files { display: contents; }
-.fd-files-thumbs .fd-file-item, .fd-image-pick { flex: none; width: 96px; height: 96px; order: 0; }
-.fd-files-thumbs > .fd-file-count { order: -1; }
+.fd-files-thumbs > * { flex-basis: 100%; }
+:is(.fd-files-thumbs, .fd-files-cards) > .fd-files { display: contents; }
+.fd-files-thumbs .fd-file-item, .fd-image-pick { flex: none; width: 96px; height: 96px; }
 .fd-files-thumbs .fd-file-open { height: 100%; padding: 6px; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; font-size: 12px; }
-.fd-files-thumbs .fd-file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
+:is(.fd-files-thumbs, .fd-files-cards) .fd-file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
 .fd-files-thumbs .fd-file-name { flex: none; max-width: 100%; }
 .fd-files-thumbs .fd-file-size, .fd-files-thumbs .fd-file-thumb ~ * { display: none; }
-.fd-files-thumbs .fd-file-remove {
+:is(.fd-files-thumbs, .fd-files-cards) .fd-file-remove {
   position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 26px; height: 26px; font-size: 17px;
   background: rgba(15, 20, 25, 0.62); color: #fff; opacity: 0;
 }
 .fd-file-item:is(:hover, :focus-within) .fd-file-remove { opacity: 1; }
+/* A screen with no pointer to hover with shows each tile's remove. */
+@media (hover: none) { .fd-file-item .fd-file-remove { opacity: 1; } }
 .fd-image-pick {
-  order: 1; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center; font-size: 12px;
+  display: grid; place-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center; font-size: 12px;
   border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius); background: var(--fd-page);
 }
+/* Cards: a picture over each file's name, in two lines at most, and its size; as many to a row as fit. */
+.fd-files-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
+.fd-files-cards > * { grid-column: 1 / -1; }
+.fd-files-cards > .fd-image-pick { grid-column: auto; justify-self: stretch; width: auto; height: auto; min-height: 96px; }
+.fd-files-cards .fd-file-item { justify-self: stretch; align-items: stretch; }
+.fd-files-cards .fd-file-open { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 0 8px; overflow: hidden; }
+/* The picture fills its box; with none, the kind's page, large, on the box's ground. */
+.fd-file-picture { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin-block-end: 6px; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }
+.fd-file-picture .fd-file-icon { width: 44px; height: 56px; padding-block-end: 8px; font-size: 12px; }
+.fd-files-cards :is(.fd-file-name, .fd-file-size) { padding-inline: 8px; }
+.fd-files-cards .fd-file-name { flex: none; flex-wrap: wrap; font-size: 13px; line-height: 1.35; }
+.fd-files-cards .fd-file-name > span { max-width: 100%; }
 .fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; font-size: 13px; }
 /* A file open to look at: its name and tools over it, the image whole, a PDF or text filling the box. */
 .fd-file-viewer { max-width: 1000px; height: min(88vh, 100%); background: var(--fd-surface); }
@@ -433,6 +462,9 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-form[data-fd-skin="outlined"] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style="card"][data-on-page]) {
   background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: var(--fd-group-pad, 20px 24px);
 }
+/* A saved form placed in another: a quiet line while its page comes, and words in a dashed box when it cannot be shown. */
+.fd-form-part-note { margin: 0; color: var(--fd-muted); font-size: 13px; }
+.fd-form-part-problem { padding: 10px 12px; border: 1px dashed var(--fd-border); border-radius: var(--fd-radius); }
 .fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }
 .fd-tab {
   font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);
@@ -700,8 +732,34 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-dialog {
   background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;
   padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);
+  /* An edge of its own: in the dark scheme a shadow is lost on the dimmed page, so the box would barely stand out. */
+  border: 1px solid var(--fd-edge, transparent);
 }
 .fd-dialog p { margin: 0; }
+/* Words a step says: toasts at the foot of the screen, one over another, each in its tone; over the page, under a dialog. */
+.fd-says {
+  position: fixed; inset-inline: 16px; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 990;
+  display: grid; justify-items: center; gap: 8px; pointer-events: none;
+}
+.fd-say {
+  pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 420px;
+  padding-block: 8px; padding-inline: 14px 6px; border: 1px solid var(--fd-border); border-inline-start: 4px solid var(--fd-tone);
+  border-radius: max(var(--fd-control-radius), 6px); background: var(--fd-surface); color: var(--fd-text);
+  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.25); font-size: 13.5px;
+}
+.fd-say > span { flex: 1 1 auto; min-width: 0; }
+/* A button whose steps are running: busy, a turning ring beside its words, not pressed again. */
+.fd-button[aria-busy="true"], .fd-stat[aria-busy="true"] { cursor: progress; }
+.fd-button[aria-busy="true"]::after {
+  content: ""; width: 0.85em; height: 0.85em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
+  animation: fd-spin 0.8s linear infinite;
+}
+@keyframes fd-spin { to { rotate: 1turn; } }
+/* A page opened in a form's place: Back over it, the way the page reads. */
+.fd-back { margin: 8px 12px; }
+.fd-back::before { content: "←"; }
+.fd-back:dir(rtl)::before { content: "→"; }
+.fd-form[data-scheme] > .fd-back { margin: 12px 20px 0; }
 /* A page in a dialog: a head with its title and ×, a body that scrolls, a foot with Discard and Save & Close. */
 .fd-form-dialog {
   display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;
@@ -712,8 +770,10 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-form-dialog.fd-size-small { max-width: 440px; }
 .fd-form-dialog.fd-size-medium { max-width: 760px; }
 .fd-form-dialog.fd-size-large { max-width: 1080px; }
-.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }
-.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }
+/* A dialog of the full size, and a panel (below): the whole height, square, nothing round it. */
+.fd-form-dialog-backdrop:has(> .fd-size-full), .fd-form-panel-backdrop { padding: 0; }
+.fd-form-dialog:is(.fd-size-full, .fd-form-panel) { max-height: none; height: 100%; border-radius: 0; }
+.fd-size-full { max-width: none; }
 .fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }
 .fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }
 .fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }
@@ -734,10 +794,33 @@ button.fd-chip-label:hover { text-decoration: underline; }
 /* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */
 .fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }
 .fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }
-@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }
+/* A page in a side panel: at the inline-end edge unless it names another, the page behind dimmed, sliding in from its edge; on a phone, the whole screen. */
+.fd-form-panel-backdrop { justify-items: end; }
+.fd-form-panel { max-width: 560px; position: relative; }
+/* Its question before changes are dropped sits over the panel, not over the page. */
+.fd-form-panel > .fd-dialog-backdrop { position: absolute; }
+.fd-width-narrow { max-width: 420px; }
+.fd-width-wide { max-width: 720px; }
+/* The other edges: the start of the line as the page reads; the left, right, top or bottom whatever it reads, the top and bottom the whole width.
+   Each says where its slide starts (--fd-from) and which edge it steps back from (--fd-back): the right unless told. */
+.fd-form-panel[data-side="start"] { justify-self: start; }
+.fd-form-panel[data-side="left"] { justify-self: left; }
+.fd-form-panel[data-side="right"] { justify-self: right; }
+.fd-form-panel[data-side="top"] { align-self: start; --fd-from: 0 -100%; --fd-back: 48px 0 0; }
+.fd-form-panel[data-side="bottom"] { align-self: end; --fd-from: 0 100%; --fd-back: 0 0 48px; }
+.fd-form-panel[data-side="end"]:dir(rtl), .fd-form-panel[data-side="start"]:dir(ltr), .fd-form-panel[data-side="left"] { --fd-from: -100% 0; --fd-back: 0 0 0 48px; }
+.fd-form-panel:is([data-side="top"], [data-side="bottom"]) { max-width: none; height: 60%; }
+.fd-form-panel.fd-height-short { height: 40%; }
+.fd-form-panel.fd-height-tall { height: 85%; }
+/* A panel opened from another: the older one steps back from its own edge, still in sight. */
+.fd-form-panel[data-behind] { margin: var(--fd-back, 0 48px 0 0); }
+@media (max-width: 600px) { .fd-form-dialog.fd-form-panel[data-side] { max-width: none; height: 100%; margin: 0; --fd-from: 0 100%; } .fd-form-dialog.fd-form-panel[data-side="top"] { --fd-from: 0 -100%; } }
+@media (prefers-reduced-motion: no-preference) { .fd-form-panel { animation: fd-slide 0.25s ease-out; transition: margin 0.2s; } }
+@keyframes fd-slide { from { translate: var(--fd-from, 100% 0); } }
+@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } .fd-button[aria-busy="true"]::after { animation: none; } }
 `;
 /** Fieldia's whole stylesheet: the skins, then the layout over them, the inputs' details, the question kinds and the choices' details. */
-exports.FIELDIA_CSS = SKINS_CSS + layout_styles_1.LAYOUT_CSS + styles_inputs_1.INPUTS_CSS + styles_kinds_1.KINDS_CSS + styles_choices_1.CHOICES_CSS;
+exports.FIELDIA_CSS = SKINS_CSS + layout_styles_1.LAYOUT_CSS + styles_inputs_1.INPUTS_CSS + styles_kinds_1.KINDS_CSS + styles_choices_1.CHOICES_CSS + styles_parts_1.PARTS_CSS;
 const STYLE_ID = 'fieldia-styles';
 /** Add Fieldia's stylesheet to a document, once. */
 function installStyles(document) {

package/src/lib/styles.js.map

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

package/src/lib/styles.mjs

@@ -1,6 +1,7 @@
 import { KINDS_CSS } from './styles-kinds.mjs';
 import { CHOICES_CSS } from './styles-choices.mjs';
 import { INPUTS_CSS } from './styles-inputs.mjs';
+import { PARTS_CSS } from './styles-parts.mjs';
 /**
  * Fieldia's stylesheet: two skins and the layout chrome, all scoped to the
  * form's own root (`.fd-form[data-fd-skin=…]`), so two forms on one page can
@@ -15,6 +16,13 @@ import { INPUTS_CSS } from './styles-inputs.mjs';
  * form mirrors without a second stylesheet.
  */
 import { LAYOUT_CSS } from './layout-styles.mjs';
+/**
+ * The widths of a form at which its groups take their medium and their narrow
+ * columns: up to 760px and up to 520px of the form's own width, as the
+ * 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 const FORM_WIDTHS = { medium: 760, narrow: 520 };
 /** The skins and the parts' chrome. One literal, so the script bundle can minify it as CSS. */
 const SKINS_CSS = /* css */ `
 /* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. One inside a form
@@ -346,25 +354,46 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-file-confirm:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
 .fd-file-note:empty { display: none; }
 .fd-file-note { color: var(--fd-warning); }
+/* Over the files: how many, and the switch between a list and pictures, at the end. */
+.fd-file-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; justify-self: stretch; }
+.fd-file-views { display: flex; gap: 2px; margin-inline-start: auto; padding: 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-page); }
+.fd-file-views button {
+  display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; font: inherit; font-size: 13px; color: var(--fd-muted); cursor: pointer;
+  border: none; border-radius: calc(var(--fd-control-radius) - 2px); background: none;
+}
+.fd-file-views [aria-pressed="true"] { color: var(--fd-text); background: var(--fd-surface); box-shadow: 0 0 0 1px var(--fd-border); }
 /* Thumbnails: tiles in a row that wraps, the picker the last of them. */
 .fd-files-thumbs { display: flex; flex-wrap: wrap; align-items: flex-start; }
-.fd-files-thumbs > * { flex-basis: 100%; order: 2; }
-.fd-files-thumbs > .fd-files { display: contents; }
-.fd-files-thumbs .fd-file-item, .fd-image-pick { flex: none; width: 96px; height: 96px; order: 0; }
-.fd-files-thumbs > .fd-file-count { order: -1; }
+.fd-files-thumbs > * { flex-basis: 100%; }
+:is(.fd-files-thumbs, .fd-files-cards) > .fd-files { display: contents; }
+.fd-files-thumbs .fd-file-item, .fd-image-pick { flex: none; width: 96px; height: 96px; }
 .fd-files-thumbs .fd-file-open { height: 100%; padding: 6px; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; font-size: 12px; }
-.fd-files-thumbs .fd-file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
+:is(.fd-files-thumbs, .fd-files-cards) .fd-file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
 .fd-files-thumbs .fd-file-name { flex: none; max-width: 100%; }
 .fd-files-thumbs .fd-file-size, .fd-files-thumbs .fd-file-thumb ~ * { display: none; }
-.fd-files-thumbs .fd-file-remove {
+:is(.fd-files-thumbs, .fd-files-cards) .fd-file-remove {
   position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 26px; height: 26px; font-size: 17px;
   background: rgba(15, 20, 25, 0.62); color: #fff; opacity: 0;
 }
 .fd-file-item:is(:hover, :focus-within) .fd-file-remove { opacity: 1; }
+/* A screen with no pointer to hover with shows each tile's remove. */
+@media (hover: none) { .fd-file-item .fd-file-remove { opacity: 1; } }
 .fd-image-pick {
-  order: 1; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center; font-size: 12px;
+  display: grid; place-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center; font-size: 12px;
   border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius); background: var(--fd-page);
 }
+/* Cards: a picture over each file's name, in two lines at most, and its size; as many to a row as fit. */
+.fd-files-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
+.fd-files-cards > * { grid-column: 1 / -1; }
+.fd-files-cards > .fd-image-pick { grid-column: auto; justify-self: stretch; width: auto; height: auto; min-height: 96px; }
+.fd-files-cards .fd-file-item { justify-self: stretch; align-items: stretch; }
+.fd-files-cards .fd-file-open { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 0 8px; overflow: hidden; }
+/* The picture fills its box; with none, the kind's page, large, on the box's ground. */
+.fd-file-picture { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin-block-end: 6px; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }
+.fd-file-picture .fd-file-icon { width: 44px; height: 56px; padding-block-end: 8px; font-size: 12px; }
+.fd-files-cards :is(.fd-file-name, .fd-file-size) { padding-inline: 8px; }
+.fd-files-cards .fd-file-name { flex: none; flex-wrap: wrap; font-size: 13px; line-height: 1.35; }
+.fd-files-cards .fd-file-name > span { max-width: 100%; }
 .fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; font-size: 13px; }
 /* A file open to look at: its name and tools over it, the image whole, a PDF or text filling the box. */
 .fd-file-viewer { max-width: 1000px; height: min(88vh, 100%); background: var(--fd-surface); }
@@ -429,6 +458,9 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-form[data-fd-skin="outlined"] :is(.fd-sections > .fd-section:not([data-style]), .fd-section[data-style="card"][data-on-page]) {
   background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: var(--fd-group-pad, 20px 24px);
 }
+/* A saved form placed in another: a quiet line while its page comes, and words in a dashed box when it cannot be shown. */
+.fd-form-part-note { margin: 0; color: var(--fd-muted); font-size: 13px; }
+.fd-form-part-problem { padding: 10px 12px; border: 1px dashed var(--fd-border); border-radius: var(--fd-radius); }
 .fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }
 .fd-tab {
   font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);
@@ -696,8 +728,34 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-dialog {
   background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;
   padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);
+  /* An edge of its own: in the dark scheme a shadow is lost on the dimmed page, so the box would barely stand out. */
+  border: 1px solid var(--fd-edge, transparent);
 }
 .fd-dialog p { margin: 0; }
+/* Words a step says: toasts at the foot of the screen, one over another, each in its tone; over the page, under a dialog. */
+.fd-says {
+  position: fixed; inset-inline: 16px; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 990;
+  display: grid; justify-items: center; gap: 8px; pointer-events: none;
+}
+.fd-say {
+  pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 420px;
+  padding-block: 8px; padding-inline: 14px 6px; border: 1px solid var(--fd-border); border-inline-start: 4px solid var(--fd-tone);
+  border-radius: max(var(--fd-control-radius), 6px); background: var(--fd-surface); color: var(--fd-text);
+  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.25); font-size: 13.5px;
+}
+.fd-say > span { flex: 1 1 auto; min-width: 0; }
+/* A button whose steps are running: busy, a turning ring beside its words, not pressed again. */
+.fd-button[aria-busy="true"], .fd-stat[aria-busy="true"] { cursor: progress; }
+.fd-button[aria-busy="true"]::after {
+  content: ""; width: 0.85em; height: 0.85em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
+  animation: fd-spin 0.8s linear infinite;
+}
+@keyframes fd-spin { to { rotate: 1turn; } }
+/* A page opened in a form's place: Back over it, the way the page reads. */
+.fd-back { margin: 8px 12px; }
+.fd-back::before { content: "←"; }
+.fd-back:dir(rtl)::before { content: "→"; }
+.fd-form[data-scheme] > .fd-back { margin: 12px 20px 0; }
 /* A page in a dialog: a head with its title and ×, a body that scrolls, a foot with Discard and Save & Close. */
 .fd-form-dialog {
   display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;
@@ -708,8 +766,10 @@ button.fd-chip-label:hover { text-decoration: underline; }
 .fd-form-dialog.fd-size-small { max-width: 440px; }
 .fd-form-dialog.fd-size-medium { max-width: 760px; }
 .fd-form-dialog.fd-size-large { max-width: 1080px; }
-.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }
-.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }
+/* A dialog of the full size, and a panel (below): the whole height, square, nothing round it. */
+.fd-form-dialog-backdrop:has(> .fd-size-full), .fd-form-panel-backdrop { padding: 0; }
+.fd-form-dialog:is(.fd-size-full, .fd-form-panel) { max-height: none; height: 100%; border-radius: 0; }
+.fd-size-full { max-width: none; }
 .fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }
 .fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }
 .fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }
@@ -730,10 +790,33 @@ button.fd-chip-label:hover { text-decoration: underline; }
 /* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */
 .fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }
 .fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }
-@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }
+/* A page in a side panel: at the inline-end edge unless it names another, the page behind dimmed, sliding in from its edge; on a phone, the whole screen. */
+.fd-form-panel-backdrop { justify-items: end; }
+.fd-form-panel { max-width: 560px; position: relative; }
+/* Its question before changes are dropped sits over the panel, not over the page. */
+.fd-form-panel > .fd-dialog-backdrop { position: absolute; }
+.fd-width-narrow { max-width: 420px; }
+.fd-width-wide { max-width: 720px; }
+/* The other edges: the start of the line as the page reads; the left, right, top or bottom whatever it reads, the top and bottom the whole width.
+   Each says where its slide starts (--fd-from) and which edge it steps back from (--fd-back): the right unless told. */
+.fd-form-panel[data-side="start"] { justify-self: start; }
+.fd-form-panel[data-side="left"] { justify-self: left; }
+.fd-form-panel[data-side="right"] { justify-self: right; }
+.fd-form-panel[data-side="top"] { align-self: start; --fd-from: 0 -100%; --fd-back: 48px 0 0; }
+.fd-form-panel[data-side="bottom"] { align-self: end; --fd-from: 0 100%; --fd-back: 0 0 48px; }
+.fd-form-panel[data-side="end"]:dir(rtl), .fd-form-panel[data-side="start"]:dir(ltr), .fd-form-panel[data-side="left"] { --fd-from: -100% 0; --fd-back: 0 0 0 48px; }
+.fd-form-panel:is([data-side="top"], [data-side="bottom"]) { max-width: none; height: 60%; }
+.fd-form-panel.fd-height-short { height: 40%; }
+.fd-form-panel.fd-height-tall { height: 85%; }
+/* A panel opened from another: the older one steps back from its own edge, still in sight. */
+.fd-form-panel[data-behind] { margin: var(--fd-back, 0 48px 0 0); }
+@media (max-width: 600px) { .fd-form-dialog.fd-form-panel[data-side] { max-width: none; height: 100%; margin: 0; --fd-from: 0 100%; } .fd-form-dialog.fd-form-panel[data-side="top"] { --fd-from: 0 -100%; } }
+@media (prefers-reduced-motion: no-preference) { .fd-form-panel { animation: fd-slide 0.25s ease-out; transition: margin 0.2s; } }
+@keyframes fd-slide { from { translate: var(--fd-from, 100% 0); } }
+@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } .fd-button[aria-busy="true"]::after { animation: none; } }
 `;
 /** Fieldia's whole stylesheet: the skins, then the layout over them, the inputs' details, the question kinds and the choices' details. */
-export const FIELDIA_CSS = SKINS_CSS + LAYOUT_CSS + INPUTS_CSS + KINDS_CSS + CHOICES_CSS;
+export const FIELDIA_CSS = SKINS_CSS + LAYOUT_CSS + INPUTS_CSS + KINDS_CSS + CHOICES_CSS + PARTS_CSS;
 const STYLE_ID = 'fieldia-styles';
 /** Add Fieldia's stylesheet to a document, once. */
 export function installStyles(document) {

package/src/lib/styles.mjs.map

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