@fieldia/widgets 0.9.2 → 0.11.0

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

@@ -0,0 +1,7 @@
+/**
+ * The choice kinds' details: options in columns or in a row, the words that
+ * say a limit is reached, pictures' sizes and fit, a ranking's top few, and a
+ * matrix whose rows become cards on a phone. A yes or no takes the points'
+ * look. Appended to Fieldia's stylesheet, with logical properties.
+ */
+export declare const CHOICES_CSS = "\n.fd-yes-no button { min-width: 76px; }\n.fd-choices-columns { display: grid; grid-template-columns: repeat(var(--fd-choice-columns), minmax(0, 1fr)); }\n.fd-choices-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }\n.fd-choice-limit { grid-column: 1 / -1; flex-basis: 100%; font-size: 12.5px; color: var(--fd-muted); }\n.fd-choice-limit:empty { display: none; }\n.fd-image-choices[data-size=\"small\"] { --fd-card: 96px; }\n.fd-image-choices[data-size=\"large\"] { --fd-card: 210px; }\n.fd-image-choices[data-size] { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fd-card, 130px)), 1fr)); }\n.fd-image-choices[data-fit=\"whole\"] img { object-fit: contain; }\n.fd-image-choices-bare .fd-image-card-words { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; padding: 0; font-size: 0; }\n/* A dropdown that searches: a chevron says it is one. */\n.fd-choice-search .fd-combo::after {\n  content: \"\"; position: absolute; inset-inline-end: 12px; width: 6px; height: 6px; margin-block-start: -4px; pointer-events: none;\n  border: solid var(--fd-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);\n}\n.fd-rank-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px 10px; }\n.fd-rank-pick {\n  min-height: 32px; padding: 4px 12px; font: inherit; color: inherit; cursor: pointer;\n  background: var(--fd-surface); border: 1px dashed var(--fd-border-strong); border-radius: 999px;\n}\n.fd-rank-pick:disabled { opacity: 0.5; cursor: default; }\n.fd-rank-list:empty { display: none; }\n.fd-rank-keep { margin-block-start: 8px; }\n.fd-matrix-pick { display: inline-flex; align-items: center; gap: 8px; }\n.fd-matrix-column { display: none; }\n@container (max-width: 520px) {\n  .fd-choices-columns { grid-template-columns: minmax(0, 1fr); }\n  .fd-image-choices.fd-image-choices { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }\n  .fd-matrix-table, .fd-matrix-table :is(tbody, tr, th, td) { display: block; }\n  .fd-matrix-table thead { display: none; }\n  .fd-matrix-table tr { padding: 10px 12px; margin-block-end: 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }\n  .fd-matrix-table :is(th, td) { padding: 2px 0; border: 0; text-align: start; }\n  .fd-matrix-pick { min-height: 32px; }\n  .fd-matrix-column { display: inline; }\n}\n";

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

@@ -0,0 +1,7 @@
+/**
+ * The choice kinds' details: options in columns or in a row, the words that
+ * say a limit is reached, pictures' sizes and fit, a ranking's top few, and a
+ * matrix whose rows become cards on a phone. A yes or no takes the points'
+ * look. Appended to Fieldia's stylesheet, with logical properties.
+ */
+export declare const CHOICES_CSS = "\n.fd-yes-no button { min-width: 76px; }\n.fd-choices-columns { display: grid; grid-template-columns: repeat(var(--fd-choice-columns), minmax(0, 1fr)); }\n.fd-choices-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }\n.fd-choice-limit { grid-column: 1 / -1; flex-basis: 100%; font-size: 12.5px; color: var(--fd-muted); }\n.fd-choice-limit:empty { display: none; }\n.fd-image-choices[data-size=\"small\"] { --fd-card: 96px; }\n.fd-image-choices[data-size=\"large\"] { --fd-card: 210px; }\n.fd-image-choices[data-size] { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fd-card, 130px)), 1fr)); }\n.fd-image-choices[data-fit=\"whole\"] img { object-fit: contain; }\n.fd-image-choices-bare .fd-image-card-words { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; padding: 0; font-size: 0; }\n/* A dropdown that searches: a chevron says it is one. */\n.fd-choice-search .fd-combo::after {\n  content: \"\"; position: absolute; inset-inline-end: 12px; width: 6px; height: 6px; margin-block-start: -4px; pointer-events: none;\n  border: solid var(--fd-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);\n}\n.fd-rank-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px 10px; }\n.fd-rank-pick {\n  min-height: 32px; padding: 4px 12px; font: inherit; color: inherit; cursor: pointer;\n  background: var(--fd-surface); border: 1px dashed var(--fd-border-strong); border-radius: 999px;\n}\n.fd-rank-pick:disabled { opacity: 0.5; cursor: default; }\n.fd-rank-list:empty { display: none; }\n.fd-rank-keep { margin-block-start: 8px; }\n.fd-matrix-pick { display: inline-flex; align-items: center; gap: 8px; }\n.fd-matrix-column { display: none; }\n@container (max-width: 520px) {\n  .fd-choices-columns { grid-template-columns: minmax(0, 1fr); }\n  .fd-image-choices.fd-image-choices { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }\n  .fd-matrix-table, .fd-matrix-table :is(tbody, tr, th, td) { display: block; }\n  .fd-matrix-table thead { display: none; }\n  .fd-matrix-table tr { padding: 10px 12px; margin-block-end: 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }\n  .fd-matrix-table :is(th, td) { padding: 2px 0; border: 0; text-align: start; }\n  .fd-matrix-pick { min-height: 32px; }\n  .fd-matrix-column { display: inline; }\n}\n";

package/src/lib/styles-choices.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHOICES_CSS = void 0;
+/**
+ * The choice kinds' details: options in columns or in a row, the words that
+ * say a limit is reached, pictures' sizes and fit, a ranking's top few, and a
+ * matrix whose rows become cards on a phone. A yes or no takes the points'
+ * look. Appended to Fieldia's stylesheet, with logical properties.
+ */
+exports.CHOICES_CSS = `
+.fd-yes-no button { min-width: 76px; }
+.fd-choices-columns { display: grid; grid-template-columns: repeat(var(--fd-choice-columns), minmax(0, 1fr)); }
+.fd-choices-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
+.fd-choice-limit { grid-column: 1 / -1; flex-basis: 100%; font-size: 12.5px; color: var(--fd-muted); }
+.fd-choice-limit:empty { display: none; }
+.fd-image-choices[data-size="small"] { --fd-card: 96px; }
+.fd-image-choices[data-size="large"] { --fd-card: 210px; }
+.fd-image-choices[data-size] { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fd-card, 130px)), 1fr)); }
+.fd-image-choices[data-fit="whole"] img { object-fit: contain; }
+.fd-image-choices-bare .fd-image-card-words { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; padding: 0; font-size: 0; }
+/* A dropdown that searches: a chevron says it is one. */
+.fd-choice-search .fd-combo::after {
+  content: ""; position: absolute; inset-inline-end: 12px; width: 6px; height: 6px; margin-block-start: -4px; pointer-events: none;
+  border: solid var(--fd-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
+}
+.fd-rank-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px 10px; }
+.fd-rank-pick {
+  min-height: 32px; padding: 4px 12px; font: inherit; color: inherit; cursor: pointer;
+  background: var(--fd-surface); border: 1px dashed var(--fd-border-strong); border-radius: 999px;
+}
+.fd-rank-pick:disabled { opacity: 0.5; cursor: default; }
+.fd-rank-list:empty { display: none; }
+.fd-rank-keep { margin-block-start: 8px; }
+.fd-matrix-pick { display: inline-flex; align-items: center; gap: 8px; }
+.fd-matrix-column { display: none; }
+@container (max-width: 520px) {
+  .fd-choices-columns { grid-template-columns: minmax(0, 1fr); }
+  .fd-image-choices.fd-image-choices { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
+  .fd-matrix-table, .fd-matrix-table :is(tbody, tr, th, td) { display: block; }
+  .fd-matrix-table thead { display: none; }
+  .fd-matrix-table tr { padding: 10px 12px; margin-block-end: 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }
+  .fd-matrix-table :is(th, td) { padding: 2px 0; border: 0; text-align: start; }
+  .fd-matrix-pick { min-height: 32px; }
+  .fd-matrix-column { display: inline; }
+}
+`;
+//# sourceMappingURL=styles-choices.js.map

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

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

package/src/lib/styles-choices.mjs

@@ -0,0 +1,44 @@
+/**
+ * The choice kinds' details: options in columns or in a row, the words that
+ * say a limit is reached, pictures' sizes and fit, a ranking's top few, and a
+ * matrix whose rows become cards on a phone. A yes or no takes the points'
+ * look. Appended to Fieldia's stylesheet, with logical properties.
+ */
+export const CHOICES_CSS = /* css */ `
+.fd-yes-no button { min-width: 76px; }
+.fd-choices-columns { display: grid; grid-template-columns: repeat(var(--fd-choice-columns), minmax(0, 1fr)); }
+.fd-choices-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
+.fd-choice-limit { grid-column: 1 / -1; flex-basis: 100%; font-size: 12.5px; color: var(--fd-muted); }
+.fd-choice-limit:empty { display: none; }
+.fd-image-choices[data-size="small"] { --fd-card: 96px; }
+.fd-image-choices[data-size="large"] { --fd-card: 210px; }
+.fd-image-choices[data-size] { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fd-card, 130px)), 1fr)); }
+.fd-image-choices[data-fit="whole"] img { object-fit: contain; }
+.fd-image-choices-bare .fd-image-card-words { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; padding: 0; font-size: 0; }
+/* A dropdown that searches: a chevron says it is one. */
+.fd-choice-search .fd-combo::after {
+  content: ""; position: absolute; inset-inline-end: 12px; width: 6px; height: 6px; margin-block-start: -4px; pointer-events: none;
+  border: solid var(--fd-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
+}
+.fd-rank-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px 10px; }
+.fd-rank-pick {
+  min-height: 32px; padding: 4px 12px; font: inherit; color: inherit; cursor: pointer;
+  background: var(--fd-surface); border: 1px dashed var(--fd-border-strong); border-radius: 999px;
+}
+.fd-rank-pick:disabled { opacity: 0.5; cursor: default; }
+.fd-rank-list:empty { display: none; }
+.fd-rank-keep { margin-block-start: 8px; }
+.fd-matrix-pick { display: inline-flex; align-items: center; gap: 8px; }
+.fd-matrix-column { display: none; }
+@container (max-width: 520px) {
+  .fd-choices-columns { grid-template-columns: minmax(0, 1fr); }
+  .fd-image-choices.fd-image-choices { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
+  .fd-matrix-table, .fd-matrix-table :is(tbody, tr, th, td) { display: block; }
+  .fd-matrix-table thead { display: none; }
+  .fd-matrix-table tr { padding: 10px 12px; margin-block-end: 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }
+  .fd-matrix-table :is(th, td) { padding: 2px 0; border: 0; text-align: start; }
+  .fd-matrix-pick { min-height: 32px; }
+  .fd-matrix-column { display: inline; }
+}
+`;
+//# sourceMappingURL=styles-choices.mjs.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * The text, number and date inputs' part of the stylesheet: a count of
+ * characters under a box, a number's unit and an amount's currency inside
+ * its box, a rating's hearts and thumbs, words at a slider's ends, an NPS
+ * scale's colours. Scoped
+ * and written with logical properties as the rest of it is; it comes before
+ * the question kinds' part.
+ */
+export declare const INPUTS_CSS = "\n/* ---- inputs' details ------------------------------------------------------- */\n.fd-counted { display: grid; gap: 2px; min-width: 0; }\n/* \"12 / 100\" reads so on a right-to-left page too. */\n.fd-count { justify-self: end; direction: ltr; unicode-bidi: isolate; font-size: 12px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n.fd-count-near { color: var(--fd-warning); font-weight: 600; }\n/* A unit inside the number's box, at its start or end; the box keeps room for it. */\n.fd-number:not(.fd-currency-picked) { position: relative; display: block; }\n.fd-number > .fd-unit { position: absolute; inset-block: 0; display: flex; align-items: center; pointer-events: none; color: var(--fd-muted); }\n.fd-number > .fd-unit:first-child { inset-inline-start: var(--fd-pad-x); }\n.fd-number > .fd-unit:last-child { inset-inline-end: var(--fd-pad-x); }\n/* A rating of hearts or thumbs up: grey until picked, then filled. */\n.fd-rating-heart button.fd-on { color: #e5484d; }\n.fd-rating-thumb button.fd-on { color: var(--fd-accent); }\n.fd-rating .fd-icon { display: block; width: 1em; height: 1em; }\n.fd-rating .fd-on .fd-icon { fill: currentColor; }\n/* Words under a slider's ends, each under its own end. */\n.fd-slider-word { display: block; max-width: 12em; }\n.fd-slider-last { text-align: end; }\n/* An NPS scale: 0\u20136, 7\u20138 and 9\u201310 tinted red, amber and green in either scheme, and set apart by a gap. */\n.fd-nps [data-tone=\"low\"] { --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }\n.fd-nps [data-tone=\"mid\"] { --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }\n.fd-nps [data-tone=\"high\"] { --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }\n.fd-nps button { background: var(--fd-tone-soft); border-color: var(--fd-tone); color: var(--fd-tone); font-weight: 600; }\n.fd-nps button.fd-on { background: var(--fd-tone); border-color: var(--fd-tone); color: var(--fd-surface); }\n.fd-nps [data-value=\"7\"], .fd-nps [data-value=\"9\"] { margin-inline-start: 8px; }\n/* A rating's or a scale's end words under its first and last points, not the field's edges. */\n.fd-choices-box > .fd-scale-box { justify-self: start; }\n";

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

@@ -0,0 +1,9 @@
+/**
+ * The text, number and date inputs' part of the stylesheet: a count of
+ * characters under a box, a number's unit and an amount's currency inside
+ * its box, a rating's hearts and thumbs, words at a slider's ends, an NPS
+ * scale's colours. Scoped
+ * and written with logical properties as the rest of it is; it comes before
+ * the question kinds' part.
+ */
+export declare const INPUTS_CSS = "\n/* ---- inputs' details ------------------------------------------------------- */\n.fd-counted { display: grid; gap: 2px; min-width: 0; }\n/* \"12 / 100\" reads so on a right-to-left page too. */\n.fd-count { justify-self: end; direction: ltr; unicode-bidi: isolate; font-size: 12px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n.fd-count-near { color: var(--fd-warning); font-weight: 600; }\n/* A unit inside the number's box, at its start or end; the box keeps room for it. */\n.fd-number:not(.fd-currency-picked) { position: relative; display: block; }\n.fd-number > .fd-unit { position: absolute; inset-block: 0; display: flex; align-items: center; pointer-events: none; color: var(--fd-muted); }\n.fd-number > .fd-unit:first-child { inset-inline-start: var(--fd-pad-x); }\n.fd-number > .fd-unit:last-child { inset-inline-end: var(--fd-pad-x); }\n/* A rating of hearts or thumbs up: grey until picked, then filled. */\n.fd-rating-heart button.fd-on { color: #e5484d; }\n.fd-rating-thumb button.fd-on { color: var(--fd-accent); }\n.fd-rating .fd-icon { display: block; width: 1em; height: 1em; }\n.fd-rating .fd-on .fd-icon { fill: currentColor; }\n/* Words under a slider's ends, each under its own end. */\n.fd-slider-word { display: block; max-width: 12em; }\n.fd-slider-last { text-align: end; }\n/* An NPS scale: 0\u20136, 7\u20138 and 9\u201310 tinted red, amber and green in either scheme, and set apart by a gap. */\n.fd-nps [data-tone=\"low\"] { --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }\n.fd-nps [data-tone=\"mid\"] { --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }\n.fd-nps [data-tone=\"high\"] { --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }\n.fd-nps button { background: var(--fd-tone-soft); border-color: var(--fd-tone); color: var(--fd-tone); font-weight: 600; }\n.fd-nps button.fd-on { background: var(--fd-tone); border-color: var(--fd-tone); color: var(--fd-surface); }\n.fd-nps [data-value=\"7\"], .fd-nps [data-value=\"9\"] { margin-inline-start: 8px; }\n/* A rating's or a scale's end words under its first and last points, not the field's edges. */\n.fd-choices-box > .fd-scale-box { justify-self: start; }\n";

package/src/lib/styles-inputs.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INPUTS_CSS = void 0;
+/**
+ * The text, number and date inputs' part of the stylesheet: a count of
+ * characters under a box, a number's unit and an amount's currency inside
+ * its box, a rating's hearts and thumbs, words at a slider's ends, an NPS
+ * scale's colours. Scoped
+ * and written with logical properties as the rest of it is; it comes before
+ * the question kinds' part.
+ */
+exports.INPUTS_CSS = `
+/* ---- inputs' details ------------------------------------------------------- */
+.fd-counted { display: grid; gap: 2px; min-width: 0; }
+/* "12 / 100" reads so on a right-to-left page too. */
+.fd-count { justify-self: end; direction: ltr; unicode-bidi: isolate; font-size: 12px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
+.fd-count-near { color: var(--fd-warning); font-weight: 600; }
+/* A unit inside the number's box, at its start or end; the box keeps room for it. */
+.fd-number:not(.fd-currency-picked) { position: relative; display: block; }
+.fd-number > .fd-unit { position: absolute; inset-block: 0; display: flex; align-items: center; pointer-events: none; color: var(--fd-muted); }
+.fd-number > .fd-unit:first-child { inset-inline-start: var(--fd-pad-x); }
+.fd-number > .fd-unit:last-child { inset-inline-end: var(--fd-pad-x); }
+/* A rating of hearts or thumbs up: grey until picked, then filled. */
+.fd-rating-heart button.fd-on { color: #e5484d; }
+.fd-rating-thumb button.fd-on { color: var(--fd-accent); }
+.fd-rating .fd-icon { display: block; width: 1em; height: 1em; }
+.fd-rating .fd-on .fd-icon { fill: currentColor; }
+/* Words under a slider's ends, each under its own end. */
+.fd-slider-word { display: block; max-width: 12em; }
+.fd-slider-last { text-align: end; }
+/* An NPS scale: 0–6, 7–8 and 9–10 tinted red, amber and green in either scheme, and set apart by a gap. */
+.fd-nps [data-tone="low"] { --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }
+.fd-nps [data-tone="mid"] { --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }
+.fd-nps [data-tone="high"] { --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }
+.fd-nps button { background: var(--fd-tone-soft); border-color: var(--fd-tone); color: var(--fd-tone); font-weight: 600; }
+.fd-nps button.fd-on { background: var(--fd-tone); border-color: var(--fd-tone); color: var(--fd-surface); }
+.fd-nps [data-value="7"], .fd-nps [data-value="9"] { margin-inline-start: 8px; }
+/* A rating's or a scale's end words under its first and last points, not the field's edges. */
+.fd-choices-box > .fd-scale-box { justify-self: start; }
+`;
+//# sourceMappingURL=styles-inputs.js.map

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

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

package/src/lib/styles-inputs.mjs

@@ -0,0 +1,38 @@
+/**
+ * The text, number and date inputs' part of the stylesheet: a count of
+ * characters under a box, a number's unit and an amount's currency inside
+ * its box, a rating's hearts and thumbs, words at a slider's ends, an NPS
+ * scale's colours. Scoped
+ * and written with logical properties as the rest of it is; it comes before
+ * the question kinds' part.
+ */
+export const INPUTS_CSS = /* css */ `
+/* ---- inputs' details ------------------------------------------------------- */
+.fd-counted { display: grid; gap: 2px; min-width: 0; }
+/* "12 / 100" reads so on a right-to-left page too. */
+.fd-count { justify-self: end; direction: ltr; unicode-bidi: isolate; font-size: 12px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
+.fd-count-near { color: var(--fd-warning); font-weight: 600; }
+/* A unit inside the number's box, at its start or end; the box keeps room for it. */
+.fd-number:not(.fd-currency-picked) { position: relative; display: block; }
+.fd-number > .fd-unit { position: absolute; inset-block: 0; display: flex; align-items: center; pointer-events: none; color: var(--fd-muted); }
+.fd-number > .fd-unit:first-child { inset-inline-start: var(--fd-pad-x); }
+.fd-number > .fd-unit:last-child { inset-inline-end: var(--fd-pad-x); }
+/* A rating of hearts or thumbs up: grey until picked, then filled. */
+.fd-rating-heart button.fd-on { color: #e5484d; }
+.fd-rating-thumb button.fd-on { color: var(--fd-accent); }
+.fd-rating .fd-icon { display: block; width: 1em; height: 1em; }
+.fd-rating .fd-on .fd-icon { fill: currentColor; }
+/* Words under a slider's ends, each under its own end. */
+.fd-slider-word { display: block; max-width: 12em; }
+.fd-slider-last { text-align: end; }
+/* An NPS scale: 0–6, 7–8 and 9–10 tinted red, amber and green in either scheme, and set apart by a gap. */
+.fd-nps [data-tone="low"] { --fd-tone: var(--fd-error); --fd-tone-soft: var(--fd-error-soft); }
+.fd-nps [data-tone="mid"] { --fd-tone: var(--fd-warning); --fd-tone-soft: var(--fd-warning-soft); }
+.fd-nps [data-tone="high"] { --fd-tone: var(--fd-success); --fd-tone-soft: var(--fd-success-soft); }
+.fd-nps button { background: var(--fd-tone-soft); border-color: var(--fd-tone); color: var(--fd-tone); font-weight: 600; }
+.fd-nps button.fd-on { background: var(--fd-tone); border-color: var(--fd-tone); color: var(--fd-surface); }
+.fd-nps [data-value="7"], .fd-nps [data-value="9"] { margin-inline-start: 8px; }
+/* A rating's or a scale's end words under its first and last points, not the field's edges. */
+.fd-choices-box > .fd-scale-box { justify-self: start; }
+`;
+//# sourceMappingURL=styles-inputs.mjs.map

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * The question kinds' part of the stylesheet: a signature pad, a slider, tags
+ * from a list, pictures to choose from, a ranking, an address and a repeating
+ * group of cards. Appended to Fieldia's stylesheet, scoped and written with
+ * logical properties as the rest of it is.
+ */
+export declare const KINDS_CSS = "\n/* ---- question kinds -------------------------------------------------------- */\n/* A signature: a pad with a line to sign on, a box to type a name in instead, and Clear. */\n.fd-signature { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 480px; min-width: 0; }\n.fd-signature-box {\n  position: relative; width: 100%; aspect-ratio: 10 / 3; border: 1px dashed var(--fd-border-strong);\n  border-radius: var(--fd-control-radius); background: #fff; overflow: hidden;\n}\n.fd-signature-box:has(.fd-signature-pad:not([hidden]):not(.fd-signature-locked)):hover { border-color: var(--fd-accent); }\n.fd-signature-pad, .fd-signature-image { display: block; width: 100%; height: 100%; }\n.fd-signature-pad { touch-action: none; cursor: crosshair; }\n.fd-signature-pad.fd-signature-locked { cursor: default; }\n.fd-signature-image { object-fit: contain; }\n.fd-signature-hint {\n  position: absolute; inset-inline: 18px; inset-block-end: 16px; padding-block-start: 4px; pointer-events: none;\n  border-block-start: 1px solid var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px;\n}\n.fd-signature-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; }\n.fd-signature-typed { flex: 1 1 200px; min-width: 0; }\n.fd-signature-footer { margin-block-start: -4px; color: var(--fd-muted); font-size: 12.5px; }\n/* A slider: the value beside the track and its ends under it; dimmed until it is slid. */\n.fd-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; width: 100%; max-width: 440px; min-width: 0; }\n.fd-slider-track { display: contents; }\n.fd-slider-input { width: 100%; min-width: 0; height: 26px; margin: 0; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-slider-input:disabled { cursor: default; }\n.fd-slider-value { min-width: 2.5em; text-align: start; font-variant-numeric: tabular-nums; font-weight: 600; }\n.fd-slider-ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n/* Grey, not the accent: half filled in colour would read as an answer. */\n.fd-slider-empty .fd-slider-input { filter: grayscale(1); opacity: 0.55; }\n.fd-slider-empty .fd-slider-value { color: var(--fd-muted); font-weight: 400; }\n.fd-slider .fd-choice-clear { grid-column: 1 / -1; }\n/* Pictures to choose from: cards of a picture over its words, a ring or a box before the words, the card picked edged in the accent. */\n.fd-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; width: 100%; min-width: 0; }\n.fd-image-card {\n  position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; margin: 0; overflow: hidden; cursor: pointer;\n  font: inherit; color: var(--fd-text); text-align: start; background: var(--fd-surface);\n  border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-image-card:hover:not(:disabled) { border-color: var(--fd-accent); }\n.fd-image-card:disabled { cursor: default; }\n.fd-image-card:disabled:not([aria-checked=\"true\"]) { opacity: 0.6; }\n.fd-image-card[aria-checked=\"true\"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); }\n.fd-image-card-picture { display: block; aspect-ratio: 4 / 3; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }\n.fd-image-card-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.fd-image-card-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fd-border-strong); }\n.fd-image-card-blank svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n.fd-image-card-words { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; font-size: 13.5px; line-height: 1.35; }\n.fd-image-card-words::before {\n  content: \"\"; flex: none; width: 16px; height: 16px; margin-block-start: 1px; box-sizing: border-box;\n  border: 1.5px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface);\n}\n.fd-image-card[role=\"checkbox\"] .fd-image-card-words::before { border-radius: 4px; }\n.fd-image-card[aria-checked=\"true\"] .fd-image-card-words::before { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: inset 0 0 0 3px var(--fd-surface); }\n.fd-image-card[role=\"checkbox\"][aria-checked=\"true\"] .fd-image-card-words::before {\n  box-shadow: none;\n  background: var(--fd-accent) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / 13px no-repeat;\n}\n.fd-image-choices + .fd-choice-clear { justify-self: end; }\n/* A ranking: numbered lines dragged by their grip, or moved with their arrows; the line being dragged lifts. */\n.fd-ranking { width: 100%; max-width: 480px; min-width: 0; }\n.fd-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-rank-item {\n  display: flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 8px 5px; min-height: 40px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  cursor: grab; user-select: none; -webkit-user-select: none;\n}\n.fd-rank-item.fd-rank-lifted { position: relative; z-index: 1; cursor: grabbing; border-color: var(--fd-accent); box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }\n.fd-ranking-locked .fd-rank-item { cursor: default; }\n.fd-rank-grip { flex: none; width: 10px; height: 16px; touch-action: none; background: radial-gradient(circle, var(--fd-border-strong) 1.3px, transparent 1.7px) 0 0 / 5px 5.33px; }\n.fd-ranking-locked .fd-rank-grip { visibility: hidden; }\n.fd-rank-place {\n  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 4px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-rank-words { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.fd-rank-tools { flex: none; display: inline-flex; gap: 2px; }\n.fd-rank-move {\n  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--fd-muted);\n  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;\n}\n.fd-rank-move:hover:not(:disabled) { background: var(--fd-page); border-color: var(--fd-border); color: var(--fd-text); }\n.fd-rank-move:disabled { opacity: 0.3; cursor: default; }\n/* An address: its parts in two columns, the street across both, each named above its box; one column when narrow. */\n.fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }\n.fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }\n.fd-address-part.fd-required > .fd-address-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-address-label { font-size: 12.5px; color: var(--fd-muted); }\n@container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }\n/* A repeating group: each line a card of its fields under its numbered title, \u00D7 at its end; \"Add another\" under the cards. */\n.fd-repeat { display: grid; gap: 10px; justify-items: start; width: 100%; min-width: 0; }\n.fd-repeat-list { display: grid; gap: 10px; width: 100%; min-width: 0; }\n.fd-repeat-list:empty { display: none; }\n.fd-repeat-card {\n  display: grid; gap: 8px; min-width: 0; padding: 10px 14px 14px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px);\n}\n.fd-repeat-head { display: flex; align-items: center; gap: 2px; min-height: 28px; }\n.fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }\n.fd-repeat-remove, .fd-repeat-tool { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }\n.fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-repeat-tool { font-size: 15px; }\n.fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }\n.fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-repeat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-repeat-add { border-style: dashed; }\n";

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

@@ -0,0 +1,7 @@
+/**
+ * The question kinds' part of the stylesheet: a signature pad, a slider, tags
+ * from a list, pictures to choose from, a ranking, an address and a repeating
+ * group of cards. Appended to Fieldia's stylesheet, scoped and written with
+ * logical properties as the rest of it is.
+ */
+export declare const KINDS_CSS = "\n/* ---- question kinds -------------------------------------------------------- */\n/* A signature: a pad with a line to sign on, a box to type a name in instead, and Clear. */\n.fd-signature { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 480px; min-width: 0; }\n.fd-signature-box {\n  position: relative; width: 100%; aspect-ratio: 10 / 3; border: 1px dashed var(--fd-border-strong);\n  border-radius: var(--fd-control-radius); background: #fff; overflow: hidden;\n}\n.fd-signature-box:has(.fd-signature-pad:not([hidden]):not(.fd-signature-locked)):hover { border-color: var(--fd-accent); }\n.fd-signature-pad, .fd-signature-image { display: block; width: 100%; height: 100%; }\n.fd-signature-pad { touch-action: none; cursor: crosshair; }\n.fd-signature-pad.fd-signature-locked { cursor: default; }\n.fd-signature-image { object-fit: contain; }\n.fd-signature-hint {\n  position: absolute; inset-inline: 18px; inset-block-end: 16px; padding-block-start: 4px; pointer-events: none;\n  border-block-start: 1px solid var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px;\n}\n.fd-signature-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; }\n.fd-signature-typed { flex: 1 1 200px; min-width: 0; }\n.fd-signature-footer { margin-block-start: -4px; color: var(--fd-muted); font-size: 12.5px; }\n/* A slider: the value beside the track and its ends under it; dimmed until it is slid. */\n.fd-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; width: 100%; max-width: 440px; min-width: 0; }\n.fd-slider-track { display: contents; }\n.fd-slider-input { width: 100%; min-width: 0; height: 26px; margin: 0; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-slider-input:disabled { cursor: default; }\n.fd-slider-value { min-width: 2.5em; text-align: start; font-variant-numeric: tabular-nums; font-weight: 600; }\n.fd-slider-ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n/* Grey, not the accent: half filled in colour would read as an answer. */\n.fd-slider-empty .fd-slider-input { filter: grayscale(1); opacity: 0.55; }\n.fd-slider-empty .fd-slider-value { color: var(--fd-muted); font-weight: 400; }\n.fd-slider .fd-choice-clear { grid-column: 1 / -1; }\n/* Pictures to choose from: cards of a picture over its words, a ring or a box before the words, the card picked edged in the accent. */\n.fd-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; width: 100%; min-width: 0; }\n.fd-image-card {\n  position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; margin: 0; overflow: hidden; cursor: pointer;\n  font: inherit; color: var(--fd-text); text-align: start; background: var(--fd-surface);\n  border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-image-card:hover:not(:disabled) { border-color: var(--fd-accent); }\n.fd-image-card:disabled { cursor: default; }\n.fd-image-card:disabled:not([aria-checked=\"true\"]) { opacity: 0.6; }\n.fd-image-card[aria-checked=\"true\"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); }\n.fd-image-card-picture { display: block; aspect-ratio: 4 / 3; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }\n.fd-image-card-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.fd-image-card-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fd-border-strong); }\n.fd-image-card-blank svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n.fd-image-card-words { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; font-size: 13.5px; line-height: 1.35; }\n.fd-image-card-words::before {\n  content: \"\"; flex: none; width: 16px; height: 16px; margin-block-start: 1px; box-sizing: border-box;\n  border: 1.5px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface);\n}\n.fd-image-card[role=\"checkbox\"] .fd-image-card-words::before { border-radius: 4px; }\n.fd-image-card[aria-checked=\"true\"] .fd-image-card-words::before { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: inset 0 0 0 3px var(--fd-surface); }\n.fd-image-card[role=\"checkbox\"][aria-checked=\"true\"] .fd-image-card-words::before {\n  box-shadow: none;\n  background: var(--fd-accent) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / 13px no-repeat;\n}\n.fd-image-choices + .fd-choice-clear { justify-self: end; }\n/* A ranking: numbered lines dragged by their grip, or moved with their arrows; the line being dragged lifts. */\n.fd-ranking { width: 100%; max-width: 480px; min-width: 0; }\n.fd-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-rank-item {\n  display: flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 8px 5px; min-height: 40px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  cursor: grab; user-select: none; -webkit-user-select: none;\n}\n.fd-rank-item.fd-rank-lifted { position: relative; z-index: 1; cursor: grabbing; border-color: var(--fd-accent); box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }\n.fd-ranking-locked .fd-rank-item { cursor: default; }\n.fd-rank-grip { flex: none; width: 10px; height: 16px; touch-action: none; background: radial-gradient(circle, var(--fd-border-strong) 1.3px, transparent 1.7px) 0 0 / 5px 5.33px; }\n.fd-ranking-locked .fd-rank-grip { visibility: hidden; }\n.fd-rank-place {\n  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 4px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-rank-words { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.fd-rank-tools { flex: none; display: inline-flex; gap: 2px; }\n.fd-rank-move {\n  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--fd-muted);\n  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;\n}\n.fd-rank-move:hover:not(:disabled) { background: var(--fd-page); border-color: var(--fd-border); color: var(--fd-text); }\n.fd-rank-move:disabled { opacity: 0.3; cursor: default; }\n/* An address: its parts in two columns, the street across both, each named above its box; one column when narrow. */\n.fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }\n.fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }\n.fd-address-part.fd-required > .fd-address-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-address-label { font-size: 12.5px; color: var(--fd-muted); }\n@container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }\n/* A repeating group: each line a card of its fields under its numbered title, \u00D7 at its end; \"Add another\" under the cards. */\n.fd-repeat { display: grid; gap: 10px; justify-items: start; width: 100%; min-width: 0; }\n.fd-repeat-list { display: grid; gap: 10px; width: 100%; min-width: 0; }\n.fd-repeat-list:empty { display: none; }\n.fd-repeat-card {\n  display: grid; gap: 8px; min-width: 0; padding: 10px 14px 14px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px);\n}\n.fd-repeat-head { display: flex; align-items: center; gap: 2px; min-height: 28px; }\n.fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }\n.fd-repeat-remove, .fd-repeat-tool { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }\n.fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-repeat-tool { font-size: 15px; }\n.fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }\n.fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }\n.fd-repeat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-repeat-add { border-style: dashed; }\n";

package/src/lib/styles-kinds.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KINDS_CSS = void 0;
+/**
+ * The question kinds' part of the stylesheet: a signature pad, a slider, tags
+ * from a list, pictures to choose from, a ranking, an address and a repeating
+ * group of cards. Appended to Fieldia's stylesheet, scoped and written with
+ * logical properties as the rest of it is.
+ */
+exports.KINDS_CSS = `
+/* ---- question kinds -------------------------------------------------------- */
+/* A signature: a pad with a line to sign on, a box to type a name in instead, and Clear. */
+.fd-signature { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 480px; min-width: 0; }
+.fd-signature-box {
+  position: relative; width: 100%; aspect-ratio: 10 / 3; border: 1px dashed var(--fd-border-strong);
+  border-radius: var(--fd-control-radius); background: #fff; overflow: hidden;
+}
+.fd-signature-box:has(.fd-signature-pad:not([hidden]):not(.fd-signature-locked)):hover { border-color: var(--fd-accent); }
+.fd-signature-pad, .fd-signature-image { display: block; width: 100%; height: 100%; }
+.fd-signature-pad { touch-action: none; cursor: crosshair; }
+.fd-signature-pad.fd-signature-locked { cursor: default; }
+.fd-signature-image { object-fit: contain; }
+.fd-signature-hint {
+  position: absolute; inset-inline: 18px; inset-block-end: 16px; padding-block-start: 4px; pointer-events: none;
+  border-block-start: 1px solid var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px;
+}
+.fd-signature-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; }
+.fd-signature-typed { flex: 1 1 200px; min-width: 0; }
+.fd-signature-footer { margin-block-start: -4px; color: var(--fd-muted); font-size: 12.5px; }
+/* A slider: the value beside the track and its ends under it; dimmed until it is slid. */
+.fd-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; width: 100%; max-width: 440px; min-width: 0; }
+.fd-slider-track { display: contents; }
+.fd-slider-input { width: 100%; min-width: 0; height: 26px; margin: 0; accent-color: var(--fd-accent); cursor: pointer; }
+.fd-slider-input:disabled { cursor: default; }
+.fd-slider-value { min-width: 2.5em; text-align: start; font-variant-numeric: tabular-nums; font-weight: 600; }
+.fd-slider-ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
+/* Grey, not the accent: half filled in colour would read as an answer. */
+.fd-slider-empty .fd-slider-input { filter: grayscale(1); opacity: 0.55; }
+.fd-slider-empty .fd-slider-value { color: var(--fd-muted); font-weight: 400; }
+.fd-slider .fd-choice-clear { grid-column: 1 / -1; }
+/* Pictures to choose from: cards of a picture over its words, a ring or a box before the words, the card picked edged in the accent. */
+.fd-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; width: 100%; min-width: 0; }
+.fd-image-card {
+  position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; margin: 0; overflow: hidden; cursor: pointer;
+  font: inherit; color: var(--fd-text); text-align: start; background: var(--fd-surface);
+  border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.fd-image-card:hover:not(:disabled) { border-color: var(--fd-accent); }
+.fd-image-card:disabled { cursor: default; }
+.fd-image-card:disabled:not([aria-checked="true"]) { opacity: 0.6; }
+.fd-image-card[aria-checked="true"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); }
+.fd-image-card-picture { display: block; aspect-ratio: 4 / 3; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }
+.fd-image-card-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.fd-image-card-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fd-border-strong); }
+.fd-image-card-blank svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.fd-image-card-words { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; font-size: 13.5px; line-height: 1.35; }
+.fd-image-card-words::before {
+  content: ""; flex: none; width: 16px; height: 16px; margin-block-start: 1px; box-sizing: border-box;
+  border: 1.5px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface);
+}
+.fd-image-card[role="checkbox"] .fd-image-card-words::before { border-radius: 4px; }
+.fd-image-card[aria-checked="true"] .fd-image-card-words::before { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: inset 0 0 0 3px var(--fd-surface); }
+.fd-image-card[role="checkbox"][aria-checked="true"] .fd-image-card-words::before {
+  box-shadow: none;
+  background: var(--fd-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
+}
+.fd-image-choices + .fd-choice-clear { justify-self: end; }
+/* A ranking: numbered lines dragged by their grip, or moved with their arrows; the line being dragged lifts. */
+.fd-ranking { width: 100%; max-width: 480px; min-width: 0; }
+.fd-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.fd-rank-item {
+  display: flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 8px 5px; min-height: 40px;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);
+  cursor: grab; user-select: none; -webkit-user-select: none;
+}
+.fd-rank-item.fd-rank-lifted { position: relative; z-index: 1; cursor: grabbing; border-color: var(--fd-accent); box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }
+.fd-ranking-locked .fd-rank-item { cursor: default; }
+.fd-rank-grip { flex: none; width: 10px; height: 16px; touch-action: none; background: radial-gradient(circle, var(--fd-border-strong) 1.3px, transparent 1.7px) 0 0 / 5px 5.33px; }
+.fd-ranking-locked .fd-rank-grip { visibility: hidden; }
+.fd-rank-place {
+  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 4px; border-radius: 999px;
+  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
+}
+.fd-rank-words { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.fd-rank-tools { flex: none; display: inline-flex; gap: 2px; }
+.fd-rank-move {
+  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--fd-muted);
+  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
+}
+.fd-rank-move:hover:not(:disabled) { background: var(--fd-page); border-color: var(--fd-border); color: var(--fd-text); }
+.fd-rank-move:disabled { opacity: 0.3; cursor: default; }
+/* An address: its parts in two columns, the street across both, each named above its box; one column when narrow. */
+.fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }
+.fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }
+.fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }
+.fd-address-part.fd-required > .fd-address-label::after { content: " *"; color: var(--fd-error); }
+.fd-address-label { font-size: 12.5px; color: var(--fd-muted); }
+@container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }
+/* A repeating group: each line a card of its fields under its numbered title, × at its end; "Add another" under the cards. */
+.fd-repeat { display: grid; gap: 10px; justify-items: start; width: 100%; min-width: 0; }
+.fd-repeat-list { display: grid; gap: 10px; width: 100%; min-width: 0; }
+.fd-repeat-list:empty { display: none; }
+.fd-repeat-card {
+  display: grid; gap: 8px; min-width: 0; padding: 10px 14px 14px;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px);
+}
+.fd-repeat-head { display: flex; align-items: center; gap: 2px; min-height: 28px; }
+.fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }
+.fd-repeat-remove, .fd-repeat-tool { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }
+.fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }
+.fd-repeat-tool { font-size: 15px; }
+.fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }
+.fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }
+.fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }
+.fd-repeat-label { font-size: 12.5px; color: var(--fd-muted); }
+.fd-repeat-add { border-style: dashed; }
+`;
+//# sourceMappingURL=styles-kinds.js.map

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

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

package/src/lib/styles-kinds.mjs

@@ -0,0 +1,116 @@
+/**
+ * The question kinds' part of the stylesheet: a signature pad, a slider, tags
+ * from a list, pictures to choose from, a ranking, an address and a repeating
+ * group of cards. Appended to Fieldia's stylesheet, scoped and written with
+ * logical properties as the rest of it is.
+ */
+export const KINDS_CSS = /* css */ `
+/* ---- question kinds -------------------------------------------------------- */
+/* A signature: a pad with a line to sign on, a box to type a name in instead, and Clear. */
+.fd-signature { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 480px; min-width: 0; }
+.fd-signature-box {
+  position: relative; width: 100%; aspect-ratio: 10 / 3; border: 1px dashed var(--fd-border-strong);
+  border-radius: var(--fd-control-radius); background: #fff; overflow: hidden;
+}
+.fd-signature-box:has(.fd-signature-pad:not([hidden]):not(.fd-signature-locked)):hover { border-color: var(--fd-accent); }
+.fd-signature-pad, .fd-signature-image { display: block; width: 100%; height: 100%; }
+.fd-signature-pad { touch-action: none; cursor: crosshair; }
+.fd-signature-pad.fd-signature-locked { cursor: default; }
+.fd-signature-image { object-fit: contain; }
+.fd-signature-hint {
+  position: absolute; inset-inline: 18px; inset-block-end: 16px; padding-block-start: 4px; pointer-events: none;
+  border-block-start: 1px solid var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px;
+}
+.fd-signature-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; }
+.fd-signature-typed { flex: 1 1 200px; min-width: 0; }
+.fd-signature-footer { margin-block-start: -4px; color: var(--fd-muted); font-size: 12.5px; }
+/* A slider: the value beside the track and its ends under it; dimmed until it is slid. */
+.fd-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; width: 100%; max-width: 440px; min-width: 0; }
+.fd-slider-track { display: contents; }
+.fd-slider-input { width: 100%; min-width: 0; height: 26px; margin: 0; accent-color: var(--fd-accent); cursor: pointer; }
+.fd-slider-input:disabled { cursor: default; }
+.fd-slider-value { min-width: 2.5em; text-align: start; font-variant-numeric: tabular-nums; font-weight: 600; }
+.fd-slider-ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
+/* Grey, not the accent: half filled in colour would read as an answer. */
+.fd-slider-empty .fd-slider-input { filter: grayscale(1); opacity: 0.55; }
+.fd-slider-empty .fd-slider-value { color: var(--fd-muted); font-weight: 400; }
+.fd-slider .fd-choice-clear { grid-column: 1 / -1; }
+/* Pictures to choose from: cards of a picture over its words, a ring or a box before the words, the card picked edged in the accent. */
+.fd-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; width: 100%; min-width: 0; }
+.fd-image-card {
+  position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; margin: 0; overflow: hidden; cursor: pointer;
+  font: inherit; color: var(--fd-text); text-align: start; background: var(--fd-surface);
+  border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.fd-image-card:hover:not(:disabled) { border-color: var(--fd-accent); }
+.fd-image-card:disabled { cursor: default; }
+.fd-image-card:disabled:not([aria-checked="true"]) { opacity: 0.6; }
+.fd-image-card[aria-checked="true"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); }
+.fd-image-card-picture { display: block; aspect-ratio: 4 / 3; background: var(--fd-page); border-block-end: 1px solid var(--fd-border); }
+.fd-image-card-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.fd-image-card-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fd-border-strong); }
+.fd-image-card-blank svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.fd-image-card-words { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; font-size: 13.5px; line-height: 1.35; }
+.fd-image-card-words::before {
+  content: ""; flex: none; width: 16px; height: 16px; margin-block-start: 1px; box-sizing: border-box;
+  border: 1.5px solid var(--fd-border-strong); border-radius: 50%; background: var(--fd-surface);
+}
+.fd-image-card[role="checkbox"] .fd-image-card-words::before { border-radius: 4px; }
+.fd-image-card[aria-checked="true"] .fd-image-card-words::before { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: inset 0 0 0 3px var(--fd-surface); }
+.fd-image-card[role="checkbox"][aria-checked="true"] .fd-image-card-words::before {
+  box-shadow: none;
+  background: var(--fd-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
+}
+.fd-image-choices + .fd-choice-clear { justify-self: end; }
+/* A ranking: numbered lines dragged by their grip, or moved with their arrows; the line being dragged lifts. */
+.fd-ranking { width: 100%; max-width: 480px; min-width: 0; }
+.fd-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.fd-rank-item {
+  display: flex; align-items: center; gap: 10px; padding-block: 5px; padding-inline: 8px 5px; min-height: 40px;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);
+  cursor: grab; user-select: none; -webkit-user-select: none;
+}
+.fd-rank-item.fd-rank-lifted { position: relative; z-index: 1; cursor: grabbing; border-color: var(--fd-accent); box-shadow: 0 6px 18px rgba(15, 20, 25, 0.16); }
+.fd-ranking-locked .fd-rank-item { cursor: default; }
+.fd-rank-grip { flex: none; width: 10px; height: 16px; touch-action: none; background: radial-gradient(circle, var(--fd-border-strong) 1.3px, transparent 1.7px) 0 0 / 5px 5.33px; }
+.fd-ranking-locked .fd-rank-grip { visibility: hidden; }
+.fd-rank-place {
+  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 4px; border-radius: 999px;
+  background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
+}
+.fd-rank-words { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.fd-rank-tools { flex: none; display: inline-flex; gap: 2px; }
+.fd-rank-move {
+  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--fd-muted);
+  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
+}
+.fd-rank-move:hover:not(:disabled) { background: var(--fd-page); border-color: var(--fd-border); color: var(--fd-text); }
+.fd-rank-move:disabled { opacity: 0.3; cursor: default; }
+/* An address: its parts in two columns, the street across both, each named above its box; one column when narrow. */
+.fd-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 560px; min-width: 0; }
+.fd-address-part { display: grid; gap: 3px; min-width: 0; align-content: start; }
+.fd-address-street, .fd-address-line2 { grid-column: 1 / -1; }
+.fd-address-part.fd-required > .fd-address-label::after { content: " *"; color: var(--fd-error); }
+.fd-address-label { font-size: 12.5px; color: var(--fd-muted); }
+@container (max-width: 420px) { .fd-address { grid-template-columns: minmax(0, 1fr); } }
+/* A repeating group: each line a card of its fields under its numbered title, × at its end; "Add another" under the cards. */
+.fd-repeat { display: grid; gap: 10px; justify-items: start; width: 100%; min-width: 0; }
+.fd-repeat-list { display: grid; gap: 10px; width: 100%; min-width: 0; }
+.fd-repeat-list:empty { display: none; }
+.fd-repeat-card {
+  display: grid; gap: 8px; min-width: 0; padding: 10px 14px 14px;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px);
+}
+.fd-repeat-head { display: flex; align-items: center; gap: 2px; min-height: 28px; }
+.fd-repeat-title { font-weight: 600; font-size: 13.5px; margin-inline-end: auto; }
+.fd-repeat-remove, .fd-repeat-tool { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }
+.fd-repeat-remove:hover { color: var(--fd-error); background: var(--fd-error-soft); }
+.fd-repeat-tool { font-size: 15px; }
+.fd-repeat-tool:hover { color: var(--fd-accent); background: var(--fd-accent-soft); }
+.fd-repeat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }
+.fd-repeat-field { display: grid; gap: 3px; min-width: 0; align-content: start; }
+.fd-repeat-label { font-size: 12.5px; color: var(--fd-muted); }
+.fd-repeat-add { border-style: dashed; }
+`;
+//# sourceMappingURL=styles-kinds.mjs.map

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

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

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";