@fieldia/designer 0.0.0-stage → 0.12.0

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

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

package/src/lib/styles-rules.mjs

@@ -0,0 +1,210 @@
+/**
+ * The rules' look: answer rules as sentences in boxes that open in place, as
+ * the approved mockup draws its answer rules — a light box, the settings'
+ * names in small bold words over their boxes. Logical properties throughout,
+ * so right to left mirrors on its own.
+ */
+export const DESIGNER_RULES_CSS = /* css */ `
+/* ---- answer rules: a sentence each, its settings in place ---- */
+.fd-answer-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
+.fd-answer-rules[hidden] { display: none; }
+.fd-answer-rule { border: 1px solid var(--fd-border); border-radius: 8px; background: var(--fd-surface); min-width: 0; }
+.fd-answer-rule-open { background: var(--fd-page); }
+.fd-answer-rule-head { display: flex; align-items: center; gap: 4px; padding-inline: 2px 4px; }
+.fd-answer-rule-say {
+  all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 auto; min-width: 0; padding: 7px 8px 7px 10px;
+  font-size: 13px; line-height: 1.4; color: var(--fd-text); overflow-wrap: anywhere; border-radius: 6px; display: flex; gap: 7px; align-items: baseline;
+}
+/* A small arrow before the sentence: across when shut, down when open. */
+.fd-answer-rule-say::before {
+  content: ""; flex: none; width: 5px; height: 5px; border-inline-end: 1.5px solid var(--fd-muted); border-block-end: 1.5px solid var(--fd-muted);
+  transform: translateY(-2px) rotate(-45deg); transition: transform 120ms ease;
+}
+.fd-answer-rule-say[aria-expanded="true"]::before { transform: translateY(-3px) rotate(45deg); }
+.fd-answer-rule-say:dir(rtl)::before { transform: translateY(-2px) rotate(45deg); }
+.fd-answer-rule-say:dir(rtl)[aria-expanded="true"]::before { transform: translateY(-3px) rotate(-45deg); }
+.fd-answer-rule-say:hover { color: var(--fd-accent); }
+.fd-answer-rule-say:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-answer-rule-remove { flex: none; }
+.fd-answer-rule-body { display: grid; gap: 10px; padding: 2px 12px 12px; min-width: 0; }
+.fd-answer-rule-body[hidden] { display: none; }
+.fd-answer-rule-field { display: grid; gap: 4px; min-width: 0; }
+.fd-answer-rule-field[hidden] { display: none; }
+.fd-answer-rule-word { font-size: 12px; font-weight: 600; color: var(--fd-text); }
+.fd-answer-rule-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
+.fd-answer-rule-pattern { display: grid; gap: 8px; }
+.fd-answer-rule-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
+.fd-answer-rule-body .fd-input { width: 100%; box-sizing: border-box; min-width: 0; }
+/* Stops sending or only warns: framed, as wide as the rule, the same in the panel and in a survey's card. */
+.fd-answer-rule-body .fd-seg { width: 100%; box-sizing: border-box; border: 1px solid var(--fd-border); grid-auto-columns: minmax(0, 1fr); }
+.fd-answer-rule-body .fd-seg > .fd-seg-button { min-width: 0; min-height: 28px; font-size: 13px; font-weight: 600; display: grid; place-items: center; padding: 4px 6px; }
+.fd-answer-rule-body .fd-when { width: 100%; }
+.fd-answer-rule-body .fd-when .fd-select { min-width: 0; flex: 1 1 120px; }
+.fd-answer-rule-body .fd-q-when { justify-self: start; padding-inline: 0; min-height: 26px; }
+.fd-answer-rule-problem { margin: 0; font-size: 12px; line-height: 1.45; color: var(--fd-error); }
+.fd-answer-rules-add { justify-self: start; padding-inline: 0; min-height: 26px; }
+.fd-answer-rules-status { margin: 0; font-size: 12.5px; color: var(--fd-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
+.fd-answer-rules-status .fd-button { padding: 0; min-height: 0; }
+.fd-answer-rules-box { justify-items: stretch; }
+
+/* ---- worked out from: a formula box, its fields suggested, its result ---- */
+.fd-formula { position: relative; min-width: 0; }
+.fd-formula-input { width: 100%; box-sizing: border-box; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
+.fd-formula-suggest {
+  position: absolute; z-index: 40; inset-inline: 0; inset-block-start: calc(100% + 4px); max-height: 220px; overflow: auto;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; box-shadow: 0 12px 28px rgba(15, 20, 25, 0.16); padding: 4px;
+}
+.fd-formula-suggest[hidden] { display: none; }
+.fd-formula-suggest-option { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; min-width: 0; }
+.fd-formula-suggest-option:hover { background: var(--fd-page); }
+.fd-formula-suggest-option[aria-selected="true"] { background: var(--fd-accent-soft); }
+.fd-formula-suggest-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fd-text); }
+.fd-formula-suggest-name { flex: none; font-size: 11.5px; color: var(--fd-muted); }
+.fd-formula-functions { display: flex; flex-wrap: wrap; gap: 4px; }
+.fd-formula-function {
+  all: unset; box-sizing: border-box; cursor: pointer; font: 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--fd-text);
+  padding: 5px 8px; border-radius: 999px; background: var(--fd-page);
+}
+.fd-formula-function::after { content: "()"; color: var(--fd-muted); }
+.fd-formula-function:hover { background: var(--fd-accent-soft); color: var(--fd-accent); }
+.fd-formula-function:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-formula-result { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fd-text); padding: 6px 9px; border-radius: 6px; background: var(--fd-success-soft, var(--fd-page)); overflow-wrap: anywhere; }
+.fd-formula-result[hidden], .fd-formula-problem[hidden], .fd-formula-reads[hidden] { display: none; }
+.fd-formula-result { display: grid; gap: 2px; }
+/* The formula in words, above its box: each field one name, as it reads. */
+.fd-formula-reads { margin: 0 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--fd-muted); overflow-wrap: anywhere; }
+.fd-formula-name { color: var(--fd-text); font-weight: 600; }
+.fd-formula-problem { margin: 0; display: grid; gap: 4px; font-size: 12px; line-height: 1.45; color: var(--fd-error); }
+.fd-formula-copy { font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--fd-text); white-space: pre-wrap; overflow-wrap: anywhere; }
+.fd-formula-copy[hidden] { display: none; }
+.fd-formula-copy mark { background: var(--fd-error-soft); color: var(--fd-error); border-block-end: 2px solid var(--fd-error); border-radius: 2px; padding: 0 1px; }
+.fd-worked-out { justify-items: stretch; }
+
+/* ---- the rules overview: every rule as a sentence, by what it does ---- */
+.fd-rules-view { display: grid; gap: 12px; min-width: 0; align-content: start; }
+.fd-rules-view[hidden] { display: none; }
+.fd-rules-bar {
+  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px;
+}
+.fd-rules-heading { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
+.fd-rules-title { margin: 0; font-size: 16px; font-weight: 650; }
+.fd-rules-note { margin: 0; font-size: 13px; color: var(--fd-muted); }
+.fd-rules-filter { position: relative; flex: 0 1 320px; min-width: 0; display: block; }
+.fd-rules-filter-icon { position: absolute; inset-inline-start: 10px; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; color: var(--fd-muted); pointer-events: none; }
+.fd-rules-filter-icon > .fd-dicon { width: 14px; height: 14px; }
+.fd-rules-view .fd-rules-filter-box { width: 100%; box-sizing: border-box; padding-inline-start: 32px; }
+/* The view's words are English: in a page right to left they keep their own order, where the page puts them. */
+.fd-rules-empty, .fd-rules-view .fd-rules-filter-box, .fd-rules-view .fd-rules-filter-box::placeholder { unicode-bidi: plaintext; }
+/* Their own order, and the page's side: the end of an English line is where a line right to left starts. */
+.fd-rules-view .fd-rules-filter-box:dir(rtl), .fd-rules-view .fd-rules-filter-box:dir(rtl)::placeholder { text-align: end; }
+.fd-rules-groups { display: grid; gap: 12px; min-width: 0; }
+.fd-rules-group { background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 12px 6px 6px; min-width: 0; display: grid; gap: 6px; }
+.fd-rules-group-title { margin: 0; padding-inline: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-muted); }
+.fd-rules-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
+.fd-rules-item {
+  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: minmax(90px, 200px) minmax(0, 1fr); gap: 4px 16px;
+  align-items: baseline; padding: 8px 10px; border-radius: 6px; font-size: 14px; line-height: 1.45; text-align: start;
+}
+.fd-rules-item:hover { background: var(--fd-page); }
+.fd-rules-item:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-rules-item[aria-disabled="true"] { cursor: default; color: var(--fd-muted); }
+.fd-rules-item-name { font-weight: 600; color: var(--fd-text); overflow-wrap: anywhere; text-align: start; }
+.fd-rules-item-say { color: var(--fd-text); overflow-wrap: anywhere; text-align: start; }
+.fd-rules-branches { margin: 0 10px 4px; }
+.fd-rules-empty { margin: 0; padding: 28px 16px; text-align: center; color: var(--fd-muted); font-size: 14px; background: var(--fd-surface); border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-radius); }
+.fd-rules-empty[hidden] { display: none; }
+/* A phone's width: a rule's part over its sentence; the views three to a row (Simple or Advanced two), the whole
+   width of the bar, so none is left alone on a line. */
+@container (max-width: 560px) {
+  .fd-rules-item { grid-template-columns: minmax(0, 1fr); }
+  .fd-designer-bar .fd-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; box-sizing: border-box; }
+  .fd-designer-bar .fd-mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .fd-designer-bar .fd-mode-button { justify-content: center; min-width: 0; }
+}
+
+/* ---- marks on the canvas: a part with a rule says so; pointed at, its sentence ---- */
+.fd-rule-marks { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.fd-canvas-field > .fd-rule-marks { position: absolute; inset-block-start: 0; inset-inline-end: 6px; z-index: 2; }
+/* A field too narrow for the marks' words beside its label keeps their icons: pointed at, each still says its sentence, and a screen reader hears it. */
+.fd-canvas-field:has(> .fd-rule-marks) { container-type: inline-size; }
+@container (max-width: 320px) {
+  .fd-canvas-field > .fd-rule-marks .fd-rule-mark-words { display: none; }
+}
+.fd-canvas-section > .fd-rule-marks { position: absolute; inset-block-start: 0; inset-inline-end: 8px; z-index: 2; }
+.fd-step-head-row > .fd-rule-marks { flex: none; }
+/* A small chip, in a button 24px tall: a target a finger can hit (WCAG 2.5.8), the chip drawn inside it by ::before. */
+.fd-rule-mark {
+  all: unset; box-sizing: border-box; cursor: pointer; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 3px; min-height: 24px;
+  font-size: 10.5px; font-weight: 600; line-height: 1.6; padding: 0 6px; border-radius: 4px; color: var(--fd-muted); --fd-mark-ground: var(--fd-page);
+}
+.fd-rule-mark::before { content: ""; position: absolute; inset-inline: 0; inset-block: calc(50% - 0.8em); z-index: -1; border-radius: 4px; background: var(--fd-mark-ground); }
+.fd-rule-mark[data-mark="sometimes"] { color: var(--fd-warning); --fd-mark-ground: var(--fd-warning-soft); }
+.fd-rule-mark[data-mark="worked-out"] { color: var(--fd-accent); --fd-mark-ground: var(--fd-accent-soft); }
+.fd-rule-mark > .fd-dicon { width: 11px; height: 11px; flex: none; }
+.fd-rule-mark-fx { font: italic 700 10.5px/1 Georgia, "Times New Roman", serif; }
+.fd-rule-mark:hover { filter: brightness(0.96); }
+.fd-rule-mark:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-rule-tip {
+  display: none; position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 50; width: max-content; max-width: 260px;
+  white-space: pre-line; text-align: start; padding: 6px 9px; border-radius: 6px; background: var(--fd-text); color: var(--fd-surface);
+  font-size: 12px; font-weight: 500; line-height: 1.45; box-shadow: 0 8px 20px rgba(15, 20, 25, 0.2); pointer-events: none;
+}
+.fd-rule-mark:hover > .fd-rule-tip, .fd-rule-mark:focus-visible > .fd-rule-tip { display: block; }
+.fd-q-title .fd-rule-tip, .fd-step-head-row .fd-rule-tip { inset-inline-end: auto; inset-inline-start: 0; }
+/* The marks stand in for the canvas's own "only sometimes" and the card's "Shown only for some answers". */
+.fd-canvas-field.fd-hidden-sometimes:has(> .fd-rule-marks)::after { content: none; }
+.fd-q-title:has(.fd-rule-mark[data-mark="sometimes"]) > .fd-q-when-note { display: none; }
+
+/* ---- a survey question's rules, in its open card ---- */
+.fd-q-rules { margin-block-start: 10px; display: grid; gap: 6px; }
+.fd-q-rules[hidden] { display: none; }
+.fd-q-rules .fd-prop-name { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }
+.fd-q-rules-part { display: grid; gap: 6px; }
+.fd-q-rules-part[hidden] { display: none; }
+
+/* ---- try a value: the field by its own widget, and what the form says of it ---- */
+.fd-answer-sample { display: grid; gap: 8px; margin-block-start: 6px; padding: 10px 12px 12px; border-radius: 8px; background: var(--fd-page); min-width: 0; }
+.fd-answer-sample[hidden] { display: none; }
+.fd-answer-sample-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-width: 0; }
+.fd-answer-sample .fd-answer-sample-title { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }
+.fd-answer-sample-language { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fd-muted); min-width: 0; white-space: nowrap; }
+.fd-answer-sample-language[hidden] { display: none; }
+.fd-answer-sample-language .fd-select { min-height: 28px; min-width: 0; max-width: 170px; font-size: 12.5px; }
+.fd-answer-sample-boxes { display: grid; gap: 8px; min-width: 0; }
+.fd-answer-sample-boxes:empty { display: none; }
+.fd-answer-sample-field { min-width: 0; }
+.fd-answer-sample-field > .fd-label { font-size: 12px; font-weight: 600; }
+.fd-answer-sample-field .fd-input { width: 100%; box-sizing: border-box; min-width: 0; min-height: 32px; background: var(--fd-surface); }
+.fd-answer-sample-reads { margin: 2px 0 0; font-size: 12px; color: var(--fd-muted); }
+.fd-answer-sample-reads[hidden], .fd-answer-sample-elsewhere[hidden] { display: none; }
+.fd-answer-sample-elsewhere { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.45; color: var(--fd-muted); }
+.fd-answer-sample-elsewhere p { margin: 0; }
+.fd-answer-sample-try { justify-self: start; padding-inline: 0; min-height: 26px; }
+.fd-answer-sample-results { display: grid; gap: 4px; min-width: 0; }
+/* The mark beside the message; whether it still sends under the message, the same place every time. */
+.fd-answer-sample-result {
+  margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1px 6px;
+  font-size: 12.5px; line-height: 1.45; padding: 6px 9px; border-radius: 6px; overflow-wrap: anywhere;
+}
+.fd-answer-sample-result[data-level="idle"] { display: block; color: var(--fd-muted); padding: 0; }
+.fd-answer-sample-result[data-level="pass"] { color: var(--fd-success); background: var(--fd-success-soft); }
+.fd-answer-sample-result[data-level="error"] { color: var(--fd-error); background: var(--fd-error-soft); }
+.fd-answer-sample-result[data-level="warning"] { color: var(--fd-warning); background: var(--fd-warning-soft); }
+.fd-answer-sample-mark { font-weight: 700; min-width: 0.8em; text-align: center; }
+.fd-answer-sample-message { min-width: 0; }
+.fd-answer-sample-tag { grid-column: 2; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; opacity: 0.85; }
+/* ---- a table's own rules, a field's tone, a table's buttons: rows in light boxes, as answer rules ---- */
+.fd-table-setting { display: grid; gap: 8px; min-width: 0; }
+.fd-table-tone-list, .fd-table-button-place { display: grid; gap: 6px; min-width: 0; }
+.fd-table-tones, .fd-table-buttons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
+.fd-table-tones[hidden] { display: none; }
+.fd-table-tone-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 6px; border: 1px solid var(--fd-border); border-radius: 8px; background: var(--fd-surface); min-width: 0; }
+.fd-table-tone-when { grid-column: 1 / -1; grid-row: 2; display: grid; gap: 4px; min-width: 0; }
+.fd-table-button { display: grid; gap: 6px; padding: 8px; padding-inline-end: 32px; position: relative; border: 1px solid var(--fd-border); border-radius: 8px; background: var(--fd-surface); min-width: 0; }
+.fd-table-button > .fd-icon-button { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; }
+.fd-table-column-rules { display: grid; gap: 8px; padding: 8px; border-radius: 8px; background: var(--fd-page); min-width: 0; }
+.fd-table-setting .fd-table-add-tone, .fd-table-button-place > .fd-button-link { justify-self: start; padding-inline: 0; min-height: 26px; }
+.fd-table-setting .fd-inline-number { max-width: 8em; }
+`;
+//# sourceMappingURL=styles-rules.mjs.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * The steps' look: a list of sentences in light boxes that open in place, as
+ * the answer rules are, with a grip to move each; the steps run once a page
+ * is saved indented under the step that opened it, by a line on one side, so
+ * no box stands in a box; the form's moments one under another; and the mark
+ * a part that does something wears on the canvas. Logical properties
+ * throughout, so right to left mirrors on its own.
+ */
+export declare const DESIGNER_STEPS_CSS = "\n/* ---- the list ---- */\n.fd-do { display: grid; gap: 6px; min-width: 0; }\n.fd-do-holder { display: grid; gap: 6px; min-width: 0; }\n.fd-do-holder[hidden], .fd-do-list[hidden] { display: none; }\n.fd-do-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }\n.fd-do-head { gap: 0; padding-inline: 0 4px; }\n.fd-do-grip { flex: none; display: grid; place-items: center; width: 18px; align-self: stretch; color: var(--fd-muted); cursor: grab; touch-action: none; }\n.fd-do-grip > .fd-dicon { width: 14px; height: 14px; }\n.fd-do-grip[hidden] { display: none; }\n.fd-do-grip:hover { color: var(--fd-text); }\n.fd-do-grip:not([hidden]) + .fd-do-say { padding-inline-start: 4px; }\n.fd-do-lifted { box-shadow: 0 8px 20px rgba(15, 20, 25, 0.16); position: relative; z-index: 2; }\n.fd-do-lifted .fd-do-grip { cursor: grabbing; }\n/* A step's sentence focused: the step's own box is ringed, not a ring drawn inside it. */\n.fd-do-say:focus-visible { outline: none; }\n.fd-do-step:has(> .fd-do-head > .fd-do-say:focus-visible) { border-color: var(--fd-focus); box-shadow: 0 0 0 1px var(--fd-focus); }\n.fd-do-begun > .fd-do-head .fd-do-say { color: var(--fd-muted); font-style: italic; }\n.fd-do-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12px; padding: 0 3px; border-radius: 3px; background: var(--fd-page); }\n.fd-do-add { justify-self: start; padding-inline: 0; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }\n.fd-do-add > .fd-dicon { width: 14px; height: 14px; }\n.fd-do-add[hidden] { display: none; }\n.fd-do-body .fd-do-settings { display: grid; gap: 10px; min-width: 0; }\n.fd-do-body .fd-formula-reads { margin: 0; font-size: 12px; color: var(--fd-muted); }\n.fd-do-when-start { justify-self: start; padding-inline: 0; min-height: 26px; }\n.fd-do-when[hidden], .fd-do-when-start[hidden] { display: none; }\n.fd-do-fields { display: grid; gap: 4px; padding-block-start: 4px; }\n.fd-do-fields[hidden] { display: none; }\n/* \"Add a step\": its groups closer together, so the whole list fits in view. */\n.fd-menu.fd-do-menu { max-height: calc(100vh - 16px); }\n.fd-do-menu .fd-menu-item { padding-block: 5px; }\n.fd-do-menu .fd-menu-heading { padding-block-start: 8px; }\n.fd-do-menu .fd-menu-heading:first-child { padding-block-start: 4px; }\n.fd-do-words { min-width: 0; }\n/* ---- the steps once a page is saved: under the step that opened it, a line on one side ---- */\n.fd-do-then { margin: 0 12px 10px; margin-inline-start: 22px; padding-inline-start: 10px; border-inline-start: 2px solid var(--fd-border); }\n.fd-do-then[hidden] { display: none; }\n.fd-do-then .fd-do-step { border-color: transparent; background: var(--fd-page); }\n.fd-do-then .fd-do-step.fd-answer-rule-open { background: var(--fd-surface); }\n.fd-answer-rule-open > .fd-do-then .fd-do-step:not(.fd-answer-rule-open) { background: var(--fd-surface); }\n/* ---- a small map of names to values ---- */\n.fd-do-map { display: grid; gap: 6px; min-width: 0; }\n.fd-do-map-rows { display: grid; gap: 6px; min-width: 0; }\n.fd-do-map-rows:empty { display: none; }\n.fd-do-map-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; align-items: start; min-width: 0; }\n.fd-do-map-row > .fd-formula-problem { grid-column: 1 / -1; margin: 0; }\n.fd-do-map-add { justify-self: start; padding-inline: 0; min-height: 26px; }\n/* ---- where they are set ---- */\n.fd-do-setting { justify-items: stretch; }\n.fd-properties .fd-prop.fd-do-moments { display: grid; gap: 18px; }\n.fd-do-moments > .fd-prop-name { margin-block-end: -6px; }\n.fd-do-moment { display: grid; gap: 6px; min-width: 0; }\n.fd-do-moment[hidden] { display: none; }\n.fd-do-moment-name, .fd-do-show-name { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }\n.fd-do-moment > .fd-properties-hint { margin: 0; }\n.fd-do-shows { display: grid; gap: 12px; }\n.fd-do-shows:empty { display: none; }\n.fd-do-show { display: grid; gap: 6px; }\n.fd-do-show-name { font-weight: 500; color: var(--fd-muted); }\n.fd-do-show-pick { justify-self: start; max-width: 100%; }\n.fd-do-show-pick[hidden] { display: none; }\n.fd-do-keeps[hidden], .fd-do-status[hidden] { display: none; }\n/* ---- the Rules view: a step a line ---- */\n.fd-rules-steps .fd-rules-item-say { white-space: pre-line; }\n/* ---- on the canvas: a button that does something wears a small bolt after its words ---- */\n.fd-canvas-block.fd-button[data-steps]::after, .fd-canvas-part.fd-button[data-steps]::after, .fd-canvas-part.fd-stat[data-steps] .fd-stat-label::after {\n  content: \"\"; display: inline-block; width: 0.8em; height: 0.8em; margin-inline-start: 6px; vertical-align: -0.05em; background: currentColor; opacity: 0.75;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n.fd-rule-mark[data-mark=\"steps\"] { color: var(--fd-accent); --fd-mark-ground: var(--fd-accent-soft); }\n";

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

@@ -0,0 +1,9 @@
+/**
+ * The steps' look: a list of sentences in light boxes that open in place, as
+ * the answer rules are, with a grip to move each; the steps run once a page
+ * is saved indented under the step that opened it, by a line on one side, so
+ * no box stands in a box; the form's moments one under another; and the mark
+ * a part that does something wears on the canvas. Logical properties
+ * throughout, so right to left mirrors on its own.
+ */
+export declare const DESIGNER_STEPS_CSS = "\n/* ---- the list ---- */\n.fd-do { display: grid; gap: 6px; min-width: 0; }\n.fd-do-holder { display: grid; gap: 6px; min-width: 0; }\n.fd-do-holder[hidden], .fd-do-list[hidden] { display: none; }\n.fd-do-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }\n.fd-do-head { gap: 0; padding-inline: 0 4px; }\n.fd-do-grip { flex: none; display: grid; place-items: center; width: 18px; align-self: stretch; color: var(--fd-muted); cursor: grab; touch-action: none; }\n.fd-do-grip > .fd-dicon { width: 14px; height: 14px; }\n.fd-do-grip[hidden] { display: none; }\n.fd-do-grip:hover { color: var(--fd-text); }\n.fd-do-grip:not([hidden]) + .fd-do-say { padding-inline-start: 4px; }\n.fd-do-lifted { box-shadow: 0 8px 20px rgba(15, 20, 25, 0.16); position: relative; z-index: 2; }\n.fd-do-lifted .fd-do-grip { cursor: grabbing; }\n/* A step's sentence focused: the step's own box is ringed, not a ring drawn inside it. */\n.fd-do-say:focus-visible { outline: none; }\n.fd-do-step:has(> .fd-do-head > .fd-do-say:focus-visible) { border-color: var(--fd-focus); box-shadow: 0 0 0 1px var(--fd-focus); }\n.fd-do-begun > .fd-do-head .fd-do-say { color: var(--fd-muted); font-style: italic; }\n.fd-do-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12px; padding: 0 3px; border-radius: 3px; background: var(--fd-page); }\n.fd-do-add { justify-self: start; padding-inline: 0; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }\n.fd-do-add > .fd-dicon { width: 14px; height: 14px; }\n.fd-do-add[hidden] { display: none; }\n.fd-do-body .fd-do-settings { display: grid; gap: 10px; min-width: 0; }\n.fd-do-body .fd-formula-reads { margin: 0; font-size: 12px; color: var(--fd-muted); }\n.fd-do-when-start { justify-self: start; padding-inline: 0; min-height: 26px; }\n.fd-do-when[hidden], .fd-do-when-start[hidden] { display: none; }\n.fd-do-fields { display: grid; gap: 4px; padding-block-start: 4px; }\n.fd-do-fields[hidden] { display: none; }\n/* \"Add a step\": its groups closer together, so the whole list fits in view. */\n.fd-menu.fd-do-menu { max-height: calc(100vh - 16px); }\n.fd-do-menu .fd-menu-item { padding-block: 5px; }\n.fd-do-menu .fd-menu-heading { padding-block-start: 8px; }\n.fd-do-menu .fd-menu-heading:first-child { padding-block-start: 4px; }\n.fd-do-words { min-width: 0; }\n/* ---- the steps once a page is saved: under the step that opened it, a line on one side ---- */\n.fd-do-then { margin: 0 12px 10px; margin-inline-start: 22px; padding-inline-start: 10px; border-inline-start: 2px solid var(--fd-border); }\n.fd-do-then[hidden] { display: none; }\n.fd-do-then .fd-do-step { border-color: transparent; background: var(--fd-page); }\n.fd-do-then .fd-do-step.fd-answer-rule-open { background: var(--fd-surface); }\n.fd-answer-rule-open > .fd-do-then .fd-do-step:not(.fd-answer-rule-open) { background: var(--fd-surface); }\n/* ---- a small map of names to values ---- */\n.fd-do-map { display: grid; gap: 6px; min-width: 0; }\n.fd-do-map-rows { display: grid; gap: 6px; min-width: 0; }\n.fd-do-map-rows:empty { display: none; }\n.fd-do-map-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; align-items: start; min-width: 0; }\n.fd-do-map-row > .fd-formula-problem { grid-column: 1 / -1; margin: 0; }\n.fd-do-map-add { justify-self: start; padding-inline: 0; min-height: 26px; }\n/* ---- where they are set ---- */\n.fd-do-setting { justify-items: stretch; }\n.fd-properties .fd-prop.fd-do-moments { display: grid; gap: 18px; }\n.fd-do-moments > .fd-prop-name { margin-block-end: -6px; }\n.fd-do-moment { display: grid; gap: 6px; min-width: 0; }\n.fd-do-moment[hidden] { display: none; }\n.fd-do-moment-name, .fd-do-show-name { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }\n.fd-do-moment > .fd-properties-hint { margin: 0; }\n.fd-do-shows { display: grid; gap: 12px; }\n.fd-do-shows:empty { display: none; }\n.fd-do-show { display: grid; gap: 6px; }\n.fd-do-show-name { font-weight: 500; color: var(--fd-muted); }\n.fd-do-show-pick { justify-self: start; max-width: 100%; }\n.fd-do-show-pick[hidden] { display: none; }\n.fd-do-keeps[hidden], .fd-do-status[hidden] { display: none; }\n/* ---- the Rules view: a step a line ---- */\n.fd-rules-steps .fd-rules-item-say { white-space: pre-line; }\n/* ---- on the canvas: a button that does something wears a small bolt after its words ---- */\n.fd-canvas-block.fd-button[data-steps]::after, .fd-canvas-part.fd-button[data-steps]::after, .fd-canvas-part.fd-stat[data-steps] .fd-stat-label::after {\n  content: \"\"; display: inline-block; width: 0.8em; height: 0.8em; margin-inline-start: 6px; vertical-align: -0.05em; background: currentColor; opacity: 0.75;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n.fd-rule-mark[data-mark=\"steps\"] { color: var(--fd-accent); --fd-mark-ground: var(--fd-accent-soft); }\n";

package/src/lib/styles-steps.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DESIGNER_STEPS_CSS = void 0;
+/**
+ * The steps' look: a list of sentences in light boxes that open in place, as
+ * the answer rules are, with a grip to move each; the steps run once a page
+ * is saved indented under the step that opened it, by a line on one side, so
+ * no box stands in a box; the form's moments one under another; and the mark
+ * a part that does something wears on the canvas. Logical properties
+ * throughout, so right to left mirrors on its own.
+ */
+exports.DESIGNER_STEPS_CSS = `
+/* ---- the list ---- */
+.fd-do { display: grid; gap: 6px; min-width: 0; }
+.fd-do-holder { display: grid; gap: 6px; min-width: 0; }
+.fd-do-holder[hidden], .fd-do-list[hidden] { display: none; }
+.fd-do-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
+.fd-do-head { gap: 0; padding-inline: 0 4px; }
+.fd-do-grip { flex: none; display: grid; place-items: center; width: 18px; align-self: stretch; color: var(--fd-muted); cursor: grab; touch-action: none; }
+.fd-do-grip > .fd-dicon { width: 14px; height: 14px; }
+.fd-do-grip[hidden] { display: none; }
+.fd-do-grip:hover { color: var(--fd-text); }
+.fd-do-grip:not([hidden]) + .fd-do-say { padding-inline-start: 4px; }
+.fd-do-lifted { box-shadow: 0 8px 20px rgba(15, 20, 25, 0.16); position: relative; z-index: 2; }
+.fd-do-lifted .fd-do-grip { cursor: grabbing; }
+/* A step's sentence focused: the step's own box is ringed, not a ring drawn inside it. */
+.fd-do-say:focus-visible { outline: none; }
+.fd-do-step:has(> .fd-do-head > .fd-do-say:focus-visible) { border-color: var(--fd-focus); box-shadow: 0 0 0 1px var(--fd-focus); }
+.fd-do-begun > .fd-do-head .fd-do-say { color: var(--fd-muted); font-style: italic; }
+.fd-do-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; padding: 0 3px; border-radius: 3px; background: var(--fd-page); }
+.fd-do-add { justify-self: start; padding-inline: 0; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }
+.fd-do-add > .fd-dicon { width: 14px; height: 14px; }
+.fd-do-add[hidden] { display: none; }
+.fd-do-body .fd-do-settings { display: grid; gap: 10px; min-width: 0; }
+.fd-do-body .fd-formula-reads { margin: 0; font-size: 12px; color: var(--fd-muted); }
+.fd-do-when-start { justify-self: start; padding-inline: 0; min-height: 26px; }
+.fd-do-when[hidden], .fd-do-when-start[hidden] { display: none; }
+.fd-do-fields { display: grid; gap: 4px; padding-block-start: 4px; }
+.fd-do-fields[hidden] { display: none; }
+/* "Add a step": its groups closer together, so the whole list fits in view. */
+.fd-menu.fd-do-menu { max-height: calc(100vh - 16px); }
+.fd-do-menu .fd-menu-item { padding-block: 5px; }
+.fd-do-menu .fd-menu-heading { padding-block-start: 8px; }
+.fd-do-menu .fd-menu-heading:first-child { padding-block-start: 4px; }
+.fd-do-words { min-width: 0; }
+/* ---- the steps once a page is saved: under the step that opened it, a line on one side ---- */
+.fd-do-then { margin: 0 12px 10px; margin-inline-start: 22px; padding-inline-start: 10px; border-inline-start: 2px solid var(--fd-border); }
+.fd-do-then[hidden] { display: none; }
+.fd-do-then .fd-do-step { border-color: transparent; background: var(--fd-page); }
+.fd-do-then .fd-do-step.fd-answer-rule-open { background: var(--fd-surface); }
+.fd-answer-rule-open > .fd-do-then .fd-do-step:not(.fd-answer-rule-open) { background: var(--fd-surface); }
+/* ---- a small map of names to values ---- */
+.fd-do-map { display: grid; gap: 6px; min-width: 0; }
+.fd-do-map-rows { display: grid; gap: 6px; min-width: 0; }
+.fd-do-map-rows:empty { display: none; }
+.fd-do-map-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; align-items: start; min-width: 0; }
+.fd-do-map-row > .fd-formula-problem { grid-column: 1 / -1; margin: 0; }
+.fd-do-map-add { justify-self: start; padding-inline: 0; min-height: 26px; }
+/* ---- where they are set ---- */
+.fd-do-setting { justify-items: stretch; }
+.fd-properties .fd-prop.fd-do-moments { display: grid; gap: 18px; }
+.fd-do-moments > .fd-prop-name { margin-block-end: -6px; }
+.fd-do-moment { display: grid; gap: 6px; min-width: 0; }
+.fd-do-moment[hidden] { display: none; }
+.fd-do-moment-name, .fd-do-show-name { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }
+.fd-do-moment > .fd-properties-hint { margin: 0; }
+.fd-do-shows { display: grid; gap: 12px; }
+.fd-do-shows:empty { display: none; }
+.fd-do-show { display: grid; gap: 6px; }
+.fd-do-show-name { font-weight: 500; color: var(--fd-muted); }
+.fd-do-show-pick { justify-self: start; max-width: 100%; }
+.fd-do-show-pick[hidden] { display: none; }
+.fd-do-keeps[hidden], .fd-do-status[hidden] { display: none; }
+/* ---- the Rules view: a step a line ---- */
+.fd-rules-steps .fd-rules-item-say { white-space: pre-line; }
+/* ---- on the canvas: a button that does something wears a small bolt after its words ---- */
+.fd-canvas-block.fd-button[data-steps]::after, .fd-canvas-part.fd-button[data-steps]::after, .fd-canvas-part.fd-stat[data-steps] .fd-stat-label::after {
+  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-inline-start: 6px; vertical-align: -0.05em; background: currentColor; opacity: 0.75;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.fd-rule-mark[data-mark="steps"] { color: var(--fd-accent); --fd-mark-ground: var(--fd-accent-soft); }
+`;
+//# sourceMappingURL=styles-steps.js.map

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

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

package/src/lib/styles-steps.mjs

@@ -0,0 +1,81 @@
+/**
+ * The steps' look: a list of sentences in light boxes that open in place, as
+ * the answer rules are, with a grip to move each; the steps run once a page
+ * is saved indented under the step that opened it, by a line on one side, so
+ * no box stands in a box; the form's moments one under another; and the mark
+ * a part that does something wears on the canvas. Logical properties
+ * throughout, so right to left mirrors on its own.
+ */
+export const DESIGNER_STEPS_CSS = /* css */ `
+/* ---- the list ---- */
+.fd-do { display: grid; gap: 6px; min-width: 0; }
+.fd-do-holder { display: grid; gap: 6px; min-width: 0; }
+.fd-do-holder[hidden], .fd-do-list[hidden] { display: none; }
+.fd-do-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
+.fd-do-head { gap: 0; padding-inline: 0 4px; }
+.fd-do-grip { flex: none; display: grid; place-items: center; width: 18px; align-self: stretch; color: var(--fd-muted); cursor: grab; touch-action: none; }
+.fd-do-grip > .fd-dicon { width: 14px; height: 14px; }
+.fd-do-grip[hidden] { display: none; }
+.fd-do-grip:hover { color: var(--fd-text); }
+.fd-do-grip:not([hidden]) + .fd-do-say { padding-inline-start: 4px; }
+.fd-do-lifted { box-shadow: 0 8px 20px rgba(15, 20, 25, 0.16); position: relative; z-index: 2; }
+.fd-do-lifted .fd-do-grip { cursor: grabbing; }
+/* A step's sentence focused: the step's own box is ringed, not a ring drawn inside it. */
+.fd-do-say:focus-visible { outline: none; }
+.fd-do-step:has(> .fd-do-head > .fd-do-say:focus-visible) { border-color: var(--fd-focus); box-shadow: 0 0 0 1px var(--fd-focus); }
+.fd-do-begun > .fd-do-head .fd-do-say { color: var(--fd-muted); font-style: italic; }
+.fd-do-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; padding: 0 3px; border-radius: 3px; background: var(--fd-page); }
+.fd-do-add { justify-self: start; padding-inline: 0; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }
+.fd-do-add > .fd-dicon { width: 14px; height: 14px; }
+.fd-do-add[hidden] { display: none; }
+.fd-do-body .fd-do-settings { display: grid; gap: 10px; min-width: 0; }
+.fd-do-body .fd-formula-reads { margin: 0; font-size: 12px; color: var(--fd-muted); }
+.fd-do-when-start { justify-self: start; padding-inline: 0; min-height: 26px; }
+.fd-do-when[hidden], .fd-do-when-start[hidden] { display: none; }
+.fd-do-fields { display: grid; gap: 4px; padding-block-start: 4px; }
+.fd-do-fields[hidden] { display: none; }
+/* "Add a step": its groups closer together, so the whole list fits in view. */
+.fd-menu.fd-do-menu { max-height: calc(100vh - 16px); }
+.fd-do-menu .fd-menu-item { padding-block: 5px; }
+.fd-do-menu .fd-menu-heading { padding-block-start: 8px; }
+.fd-do-menu .fd-menu-heading:first-child { padding-block-start: 4px; }
+.fd-do-words { min-width: 0; }
+/* ---- the steps once a page is saved: under the step that opened it, a line on one side ---- */
+.fd-do-then { margin: 0 12px 10px; margin-inline-start: 22px; padding-inline-start: 10px; border-inline-start: 2px solid var(--fd-border); }
+.fd-do-then[hidden] { display: none; }
+.fd-do-then .fd-do-step { border-color: transparent; background: var(--fd-page); }
+.fd-do-then .fd-do-step.fd-answer-rule-open { background: var(--fd-surface); }
+.fd-answer-rule-open > .fd-do-then .fd-do-step:not(.fd-answer-rule-open) { background: var(--fd-surface); }
+/* ---- a small map of names to values ---- */
+.fd-do-map { display: grid; gap: 6px; min-width: 0; }
+.fd-do-map-rows { display: grid; gap: 6px; min-width: 0; }
+.fd-do-map-rows:empty { display: none; }
+.fd-do-map-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; align-items: start; min-width: 0; }
+.fd-do-map-row > .fd-formula-problem { grid-column: 1 / -1; margin: 0; }
+.fd-do-map-add { justify-self: start; padding-inline: 0; min-height: 26px; }
+/* ---- where they are set ---- */
+.fd-do-setting { justify-items: stretch; }
+.fd-properties .fd-prop.fd-do-moments { display: grid; gap: 18px; }
+.fd-do-moments > .fd-prop-name { margin-block-end: -6px; }
+.fd-do-moment { display: grid; gap: 6px; min-width: 0; }
+.fd-do-moment[hidden] { display: none; }
+.fd-do-moment-name, .fd-do-show-name { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }
+.fd-do-moment > .fd-properties-hint { margin: 0; }
+.fd-do-shows { display: grid; gap: 12px; }
+.fd-do-shows:empty { display: none; }
+.fd-do-show { display: grid; gap: 6px; }
+.fd-do-show-name { font-weight: 500; color: var(--fd-muted); }
+.fd-do-show-pick { justify-self: start; max-width: 100%; }
+.fd-do-show-pick[hidden] { display: none; }
+.fd-do-keeps[hidden], .fd-do-status[hidden] { display: none; }
+/* ---- the Rules view: a step a line ---- */
+.fd-rules-steps .fd-rules-item-say { white-space: pre-line; }
+/* ---- on the canvas: a button that does something wears a small bolt after its words ---- */
+.fd-canvas-block.fd-button[data-steps]::after, .fd-canvas-part.fd-button[data-steps]::after, .fd-canvas-part.fd-stat[data-steps] .fd-stat-label::after {
+  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-inline-start: 6px; vertical-align: -0.05em; background: currentColor; opacity: 0.75;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.fd-rule-mark[data-mark="steps"] { color: var(--fd-accent); --fd-mark-ground: var(--fd-accent-soft); }
+`;
+//# sourceMappingURL=styles-steps.mjs.map

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * The Translations view: the bar over it, asking before a language goes, the
+ * CSV panel, and the grid — a box of its own that scrolls both ways, its
+ * heads and its first column held in place, each cell typed in where it
+ * stands. Appended to the designer's stylesheet.
+ */
+export declare const DESIGNER_TRANSLATIONS_CSS = "\n/* ---- Translations: the page's words in other languages ---------------------- */\n.fd-words { display: grid; gap: 12px; min-width: 0; }\n.fd-words-bar {\n  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px;\n}\n.fd-words-heading { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }\n.fd-words-title { margin: 0; font-size: 16px; font-weight: 650; }\n.fd-words-note { margin: 0; font-size: 13px; color: var(--fd-muted); }\n/* The page's own language, picked in the words that name it. */\n.fd-words-own-language {\n  font: inherit; color: var(--fd-text); background: transparent; cursor: pointer; field-sizing: content;\n  border: 0; border-block-end: 1px dashed var(--fd-border-strong); border-radius: 0; padding: 0 2px; margin: 0;\n}\n.fd-words-own-language:hover { border-block-end-color: var(--fd-accent); }\n.fd-words-own-language:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-words-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }\n.fd-words-add { display: flex; gap: 6px; align-items: center; flex: 0 1 300px; min-width: 0; margin: 0; }\n.fd-words-add .fd-input { flex: 1 1 150px; min-width: 0; }\n.fd-words-actions { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-words-confirm, .fd-words-paste {\n  display: grid; gap: 10px; justify-items: start;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 12px 14px;\n}\n.fd-words-confirm { border-inline-start: 3px solid var(--fd-error); }\n.fd-words-ask { margin: 0; font-weight: 600; }\n.fd-words-buttons { display: flex; flex-wrap: wrap; gap: 8px; }\n.fd-words-csv-label { font-size: 13.5px; }\n.fd-words-paste .fd-words-csv { width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical; font-size: 13px; line-height: 1.5; }\n.fd-words-problem { margin: 0; color: var(--fd-error); font-size: 13px; }\n.fd-words-status { margin: 0; font-size: 13px; color: var(--fd-muted); }\n.fd-words-status:empty { display: none; }\n\n/* The grid: its own box, scrolling both ways, never the page. Lines of words a whole number of pixels high, so the held column's rows meet the rest exactly and no line between rows is painted over. */\n.fd-words-scroll {\n  container: fd-words / inline-size; overflow: auto; max-height: max(320px, calc(100vh - 260px)); overscroll-behavior: contain;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);\n}\n.fd-words-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }\n.fd-words-table th, .fd-words-table td { padding: 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--fd-border); }\n.fd-words-table tr > * + * { border-inline-start: 1px solid var(--fd-border); }\n.fd-words-table tbody tr:last-child > * { border-block-end: 0; }\n.fd-words-table thead th { position: sticky; top: 0; z-index: 2; min-width: 200px; padding: 8px 10px; background: var(--fd-page); font-size: 13px; font-weight: 600; }\n/* The page's own words stay in sight as the languages scroll by. */\n.fd-words-table tbody th, .fd-words-table thead th:first-child { position: sticky; inset-inline-start: 0; box-shadow: 1px 0 0 var(--fd-border); }\n.fd-words-table thead th:first-child { z-index: 3; width: 34%; }\n.fd-words-table tbody th { z-index: 1; min-width: 180px; max-width: 320px; padding: 8px 10px; background: var(--fd-surface); font-weight: 400; line-height: 20px; overflow-wrap: anywhere; }\n.fd-words-head { display: flex; align-items: center; gap: 6px; min-height: 24px; }\n.fd-words-lang { font-weight: 650; }\n.fd-words-native { color: var(--fd-muted); font-weight: 400; font-size: 12.5px; }\n.fd-words-remove { margin-inline-start: auto; width: 24px; height: 24px; font-size: 15px; }\n.fd-words-progress, .fd-words-own { display: flex; align-items: center; gap: 8px; margin-block-start: 4px; font-size: 12px; font-weight: 400; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n.fd-words-meter { flex: 0 1 96px; height: 4px; border-radius: 2px; background: var(--fd-border); overflow: hidden; }\n.fd-words-meter > span { display: block; height: 100%; border-radius: 2px; background: var(--fd-accent); transition: width 0.2s ease; }\n/* A cell: the words typed where they stand, right to left in a language written so. */\n.fd-words-cell {\n  display: block; box-sizing: border-box; width: 100%; min-width: 200px; min-height: 38px; margin: 0; padding: 8px 10px;\n  border: 0; border-radius: 0; resize: none; field-sizing: content; overflow: hidden;\n  background: transparent; color: inherit; font: inherit; line-height: 20px; text-align: start;\n}\n/* The whole cell answers, however tall its row: tinted while empty, lit under the pointer, underlined while typed in. */\n.fd-words-grid td:has(> .fd-words-cell[data-empty]) { background: color-mix(in srgb, var(--fd-page) 55%, transparent); }\n.fd-words-grid td:hover { background: var(--fd-accent-soft); }\n.fd-words-grid td:focus-within { background: var(--fd-surface); box-shadow: inset 0 -2px 0 var(--fd-focus); }\n.fd-words-cell:focus { outline: none; }\n.fd-words-none { margin: 0; padding: 16px; color: var(--fd-muted); font-size: 13.5px; }\n\n/* Words no longer on the page. */\n.fd-words-stale { display: grid; gap: 8px; }\n.fd-words-stale-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }\n.fd-words-stale-title { margin: 0; font-size: 14px; font-weight: 650; }\n.fd-words-stale-note { margin: 0; flex: 1 1 220px; font-size: 13px; color: var(--fd-muted); }\n.fd-words-stale-grid .fd-words-gone { padding: 8px 10px; color: var(--fd-muted); line-height: 20px; }\n.fd-words-stale-grid .fd-words-gone-remove { width: 1%; min-width: 0; padding: 4px; text-align: center; vertical-align: middle; }\n@container (max-width: 620px) {\n  .fd-words-table tbody th, .fd-words-table thead th:first-child { min-width: 120px; max-width: 150px; }\n  .fd-words-table thead th, .fd-words-cell { min-width: 170px; }\n}\n/* On a phone, each language is the whole width beside the English held at the start, and a swipe moves one whole language. */\n@container (max-width: 480px) {\n  .fd-words-scroll { scroll-snap-type: x mandatory; scroll-padding-inline-start: 120px; }\n}\n@container fd-words (max-width: 480px) {\n  .fd-words-table tbody th, .fd-words-table thead th:first-child { width: 120px; min-width: 120px; max-width: 120px; }\n  .fd-words-grid thead th + th { min-width: max(170px, calc(100cqw - 121px)); scroll-snap-align: start; }\n  .fd-words-grid .fd-words-cell { min-width: max(170px, calc(100cqw - 121px)); }\n}\n\n/* Try it in a language: the page's languages, beside English and \u0627\u0644\u0639\u0631\u0628\u064A\u0629. */\n.fd-try-language { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fd-muted); }\n.fd-try-language .fd-input { width: auto; min-height: 30px; padding-block: 2px; font-size: 13px; color: var(--fd-text); }\n@media (prefers-reduced-motion: reduce) { .fd-words-meter > span { transition: none; } }\n";

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

@@ -0,0 +1,7 @@
+/**
+ * The Translations view: the bar over it, asking before a language goes, the
+ * CSV panel, and the grid — a box of its own that scrolls both ways, its
+ * heads and its first column held in place, each cell typed in where it
+ * stands. Appended to the designer's stylesheet.
+ */
+export declare const DESIGNER_TRANSLATIONS_CSS = "\n/* ---- Translations: the page's words in other languages ---------------------- */\n.fd-words { display: grid; gap: 12px; min-width: 0; }\n.fd-words-bar {\n  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px;\n}\n.fd-words-heading { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }\n.fd-words-title { margin: 0; font-size: 16px; font-weight: 650; }\n.fd-words-note { margin: 0; font-size: 13px; color: var(--fd-muted); }\n/* The page's own language, picked in the words that name it. */\n.fd-words-own-language {\n  font: inherit; color: var(--fd-text); background: transparent; cursor: pointer; field-sizing: content;\n  border: 0; border-block-end: 1px dashed var(--fd-border-strong); border-radius: 0; padding: 0 2px; margin: 0;\n}\n.fd-words-own-language:hover { border-block-end-color: var(--fd-accent); }\n.fd-words-own-language:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-words-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }\n.fd-words-add { display: flex; gap: 6px; align-items: center; flex: 0 1 300px; min-width: 0; margin: 0; }\n.fd-words-add .fd-input { flex: 1 1 150px; min-width: 0; }\n.fd-words-actions { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-words-confirm, .fd-words-paste {\n  display: grid; gap: 10px; justify-items: start;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 12px 14px;\n}\n.fd-words-confirm { border-inline-start: 3px solid var(--fd-error); }\n.fd-words-ask { margin: 0; font-weight: 600; }\n.fd-words-buttons { display: flex; flex-wrap: wrap; gap: 8px; }\n.fd-words-csv-label { font-size: 13.5px; }\n.fd-words-paste .fd-words-csv { width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical; font-size: 13px; line-height: 1.5; }\n.fd-words-problem { margin: 0; color: var(--fd-error); font-size: 13px; }\n.fd-words-status { margin: 0; font-size: 13px; color: var(--fd-muted); }\n.fd-words-status:empty { display: none; }\n\n/* The grid: its own box, scrolling both ways, never the page. Lines of words a whole number of pixels high, so the held column's rows meet the rest exactly and no line between rows is painted over. */\n.fd-words-scroll {\n  container: fd-words / inline-size; overflow: auto; max-height: max(320px, calc(100vh - 260px)); overscroll-behavior: contain;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);\n}\n.fd-words-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }\n.fd-words-table th, .fd-words-table td { padding: 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--fd-border); }\n.fd-words-table tr > * + * { border-inline-start: 1px solid var(--fd-border); }\n.fd-words-table tbody tr:last-child > * { border-block-end: 0; }\n.fd-words-table thead th { position: sticky; top: 0; z-index: 2; min-width: 200px; padding: 8px 10px; background: var(--fd-page); font-size: 13px; font-weight: 600; }\n/* The page's own words stay in sight as the languages scroll by. */\n.fd-words-table tbody th, .fd-words-table thead th:first-child { position: sticky; inset-inline-start: 0; box-shadow: 1px 0 0 var(--fd-border); }\n.fd-words-table thead th:first-child { z-index: 3; width: 34%; }\n.fd-words-table tbody th { z-index: 1; min-width: 180px; max-width: 320px; padding: 8px 10px; background: var(--fd-surface); font-weight: 400; line-height: 20px; overflow-wrap: anywhere; }\n.fd-words-head { display: flex; align-items: center; gap: 6px; min-height: 24px; }\n.fd-words-lang { font-weight: 650; }\n.fd-words-native { color: var(--fd-muted); font-weight: 400; font-size: 12.5px; }\n.fd-words-remove { margin-inline-start: auto; width: 24px; height: 24px; font-size: 15px; }\n.fd-words-progress, .fd-words-own { display: flex; align-items: center; gap: 8px; margin-block-start: 4px; font-size: 12px; font-weight: 400; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n.fd-words-meter { flex: 0 1 96px; height: 4px; border-radius: 2px; background: var(--fd-border); overflow: hidden; }\n.fd-words-meter > span { display: block; height: 100%; border-radius: 2px; background: var(--fd-accent); transition: width 0.2s ease; }\n/* A cell: the words typed where they stand, right to left in a language written so. */\n.fd-words-cell {\n  display: block; box-sizing: border-box; width: 100%; min-width: 200px; min-height: 38px; margin: 0; padding: 8px 10px;\n  border: 0; border-radius: 0; resize: none; field-sizing: content; overflow: hidden;\n  background: transparent; color: inherit; font: inherit; line-height: 20px; text-align: start;\n}\n/* The whole cell answers, however tall its row: tinted while empty, lit under the pointer, underlined while typed in. */\n.fd-words-grid td:has(> .fd-words-cell[data-empty]) { background: color-mix(in srgb, var(--fd-page) 55%, transparent); }\n.fd-words-grid td:hover { background: var(--fd-accent-soft); }\n.fd-words-grid td:focus-within { background: var(--fd-surface); box-shadow: inset 0 -2px 0 var(--fd-focus); }\n.fd-words-cell:focus { outline: none; }\n.fd-words-none { margin: 0; padding: 16px; color: var(--fd-muted); font-size: 13.5px; }\n\n/* Words no longer on the page. */\n.fd-words-stale { display: grid; gap: 8px; }\n.fd-words-stale-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }\n.fd-words-stale-title { margin: 0; font-size: 14px; font-weight: 650; }\n.fd-words-stale-note { margin: 0; flex: 1 1 220px; font-size: 13px; color: var(--fd-muted); }\n.fd-words-stale-grid .fd-words-gone { padding: 8px 10px; color: var(--fd-muted); line-height: 20px; }\n.fd-words-stale-grid .fd-words-gone-remove { width: 1%; min-width: 0; padding: 4px; text-align: center; vertical-align: middle; }\n@container (max-width: 620px) {\n  .fd-words-table tbody th, .fd-words-table thead th:first-child { min-width: 120px; max-width: 150px; }\n  .fd-words-table thead th, .fd-words-cell { min-width: 170px; }\n}\n/* On a phone, each language is the whole width beside the English held at the start, and a swipe moves one whole language. */\n@container (max-width: 480px) {\n  .fd-words-scroll { scroll-snap-type: x mandatory; scroll-padding-inline-start: 120px; }\n}\n@container fd-words (max-width: 480px) {\n  .fd-words-table tbody th, .fd-words-table thead th:first-child { width: 120px; min-width: 120px; max-width: 120px; }\n  .fd-words-grid thead th + th { min-width: max(170px, calc(100cqw - 121px)); scroll-snap-align: start; }\n  .fd-words-grid .fd-words-cell { min-width: max(170px, calc(100cqw - 121px)); }\n}\n\n/* Try it in a language: the page's languages, beside English and \u0627\u0644\u0639\u0631\u0628\u064A\u0629. */\n.fd-try-language { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fd-muted); }\n.fd-try-language .fd-input { width: auto; min-height: 30px; padding-block: 2px; font-size: 13px; color: var(--fd-text); }\n@media (prefers-reduced-motion: reduce) { .fd-words-meter > span { transition: none; } }\n";

package/src/lib/styles-translations.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DESIGNER_TRANSLATIONS_CSS = void 0;
+/**
+ * The Translations view: the bar over it, asking before a language goes, the
+ * CSV panel, and the grid — a box of its own that scrolls both ways, its
+ * heads and its first column held in place, each cell typed in where it
+ * stands. Appended to the designer's stylesheet.
+ */
+exports.DESIGNER_TRANSLATIONS_CSS = `
+/* ---- Translations: the page's words in other languages ---------------------- */
+.fd-words { display: grid; gap: 12px; min-width: 0; }
+.fd-words-bar {
+  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px;
+}
+.fd-words-heading { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
+.fd-words-title { margin: 0; font-size: 16px; font-weight: 650; }
+.fd-words-note { margin: 0; font-size: 13px; color: var(--fd-muted); }
+/* The page's own language, picked in the words that name it. */
+.fd-words-own-language {
+  font: inherit; color: var(--fd-text); background: transparent; cursor: pointer; field-sizing: content;
+  border: 0; border-block-end: 1px dashed var(--fd-border-strong); border-radius: 0; padding: 0 2px; margin: 0;
+}
+.fd-words-own-language:hover { border-block-end-color: var(--fd-accent); }
+.fd-words-own-language:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-words-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
+.fd-words-add { display: flex; gap: 6px; align-items: center; flex: 0 1 300px; min-width: 0; margin: 0; }
+.fd-words-add .fd-input { flex: 1 1 150px; min-width: 0; }
+.fd-words-actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.fd-words-confirm, .fd-words-paste {
+  display: grid; gap: 10px; justify-items: start;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 12px 14px;
+}
+.fd-words-confirm { border-inline-start: 3px solid var(--fd-error); }
+.fd-words-ask { margin: 0; font-weight: 600; }
+.fd-words-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
+.fd-words-csv-label { font-size: 13.5px; }
+.fd-words-paste .fd-words-csv { width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical; font-size: 13px; line-height: 1.5; }
+.fd-words-problem { margin: 0; color: var(--fd-error); font-size: 13px; }
+.fd-words-status { margin: 0; font-size: 13px; color: var(--fd-muted); }
+.fd-words-status:empty { display: none; }
+
+/* The grid: its own box, scrolling both ways, never the page. Lines of words a whole number of pixels high, so the held column's rows meet the rest exactly and no line between rows is painted over. */
+.fd-words-scroll {
+  container: fd-words / inline-size; overflow: auto; max-height: max(320px, calc(100vh - 260px)); overscroll-behavior: contain;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);
+}
+.fd-words-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
+.fd-words-table th, .fd-words-table td { padding: 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--fd-border); }
+.fd-words-table tr > * + * { border-inline-start: 1px solid var(--fd-border); }
+.fd-words-table tbody tr:last-child > * { border-block-end: 0; }
+.fd-words-table thead th { position: sticky; top: 0; z-index: 2; min-width: 200px; padding: 8px 10px; background: var(--fd-page); font-size: 13px; font-weight: 600; }
+/* The page's own words stay in sight as the languages scroll by. */
+.fd-words-table tbody th, .fd-words-table thead th:first-child { position: sticky; inset-inline-start: 0; box-shadow: 1px 0 0 var(--fd-border); }
+.fd-words-table thead th:first-child { z-index: 3; width: 34%; }
+.fd-words-table tbody th { z-index: 1; min-width: 180px; max-width: 320px; padding: 8px 10px; background: var(--fd-surface); font-weight: 400; line-height: 20px; overflow-wrap: anywhere; }
+.fd-words-head { display: flex; align-items: center; gap: 6px; min-height: 24px; }
+.fd-words-lang { font-weight: 650; }
+.fd-words-native { color: var(--fd-muted); font-weight: 400; font-size: 12.5px; }
+.fd-words-remove { margin-inline-start: auto; width: 24px; height: 24px; font-size: 15px; }
+.fd-words-progress, .fd-words-own { display: flex; align-items: center; gap: 8px; margin-block-start: 4px; font-size: 12px; font-weight: 400; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
+.fd-words-meter { flex: 0 1 96px; height: 4px; border-radius: 2px; background: var(--fd-border); overflow: hidden; }
+.fd-words-meter > span { display: block; height: 100%; border-radius: 2px; background: var(--fd-accent); transition: width 0.2s ease; }
+/* A cell: the words typed where they stand, right to left in a language written so. */
+.fd-words-cell {
+  display: block; box-sizing: border-box; width: 100%; min-width: 200px; min-height: 38px; margin: 0; padding: 8px 10px;
+  border: 0; border-radius: 0; resize: none; field-sizing: content; overflow: hidden;
+  background: transparent; color: inherit; font: inherit; line-height: 20px; text-align: start;
+}
+/* The whole cell answers, however tall its row: tinted while empty, lit under the pointer, underlined while typed in. */
+.fd-words-grid td:has(> .fd-words-cell[data-empty]) { background: color-mix(in srgb, var(--fd-page) 55%, transparent); }
+.fd-words-grid td:hover { background: var(--fd-accent-soft); }
+.fd-words-grid td:focus-within { background: var(--fd-surface); box-shadow: inset 0 -2px 0 var(--fd-focus); }
+.fd-words-cell:focus { outline: none; }
+.fd-words-none { margin: 0; padding: 16px; color: var(--fd-muted); font-size: 13.5px; }
+
+/* Words no longer on the page. */
+.fd-words-stale { display: grid; gap: 8px; }
+.fd-words-stale-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
+.fd-words-stale-title { margin: 0; font-size: 14px; font-weight: 650; }
+.fd-words-stale-note { margin: 0; flex: 1 1 220px; font-size: 13px; color: var(--fd-muted); }
+.fd-words-stale-grid .fd-words-gone { padding: 8px 10px; color: var(--fd-muted); line-height: 20px; }
+.fd-words-stale-grid .fd-words-gone-remove { width: 1%; min-width: 0; padding: 4px; text-align: center; vertical-align: middle; }
+@container (max-width: 620px) {
+  .fd-words-table tbody th, .fd-words-table thead th:first-child { min-width: 120px; max-width: 150px; }
+  .fd-words-table thead th, .fd-words-cell { min-width: 170px; }
+}
+/* On a phone, each language is the whole width beside the English held at the start, and a swipe moves one whole language. */
+@container (max-width: 480px) {
+  .fd-words-scroll { scroll-snap-type: x mandatory; scroll-padding-inline-start: 120px; }
+}
+@container fd-words (max-width: 480px) {
+  .fd-words-table tbody th, .fd-words-table thead th:first-child { width: 120px; min-width: 120px; max-width: 120px; }
+  .fd-words-grid thead th + th { min-width: max(170px, calc(100cqw - 121px)); scroll-snap-align: start; }
+  .fd-words-grid .fd-words-cell { min-width: max(170px, calc(100cqw - 121px)); }
+}
+
+/* Try it in a language: the page's languages, beside English and العربية. */
+.fd-try-language { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fd-muted); }
+.fd-try-language .fd-input { width: auto; min-height: 30px; padding-block: 2px; font-size: 13px; color: var(--fd-text); }
+@media (prefers-reduced-motion: reduce) { .fd-words-meter > span { transition: none; } }
+`;
+//# sourceMappingURL=styles-translations.js.map

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

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