flexdesk 0.18.1 → 0.18.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.18.2 (2026-11-07)
+
+A patch release with one addition.
+
+### Added
+
+- [A flat settings panel: `variant: 'sheet'` on `createSettingsPanel`](docs/components/flow-editors.md#a-flat-panel-variant-sheet-0182): no fill, the title and description in a margin at the left, the fields beside them, a rule between two sheets. For a settings page made of several panels.
+
+### Changed behaviour
+
+None. A panel created without `variant` is the card it was.
+
+### Fixed
+
+- A settings panel's checkbox (a `boolean` setting) sits at the start of its field, under the label's line; it was drawn in the middle of the field's width.
+
+### Removed or renamed exports
+
+None. New: the `variant` option. Classes: `.twm-flow-panel--sheet`, `.twm-flow-panel__sheet`, `.twm-flow-panel__margin`, `.twm-flow-panel__body`.
+
 ## 0.18.1 (2026-11-06)
 
 A patch release: what four applications asked for when they adopted 0.18.0. The

package/css/flexdesk.css

@@ -13642,6 +13642,55 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     color: var(--twm-flow-warning-text);
 }
 
+/* ── the settings panel as a sheet (variant: 'sheet', 0.18.2) ──────────
+ * Flat: no fill and no chip. The title and the description sit in a margin at
+ * the left, the fields beside them; two sheets in a row are split by a rule, so
+ * a page of them reads as one form in sections. Narrower than 560px, the margin
+ * goes above the fields. */
+.twm-flow-panel--sheet {
+    container-type: inline-size;
+    gap: 0;
+    padding: 14px 0;
+    background: transparent;
+}
+.twm-flow-panel--sheet + .twm-flow-panel--sheet {
+    border-top: 1px solid var(--border-subtle);
+}
+.twm-flow-panel__sheet {
+    display: grid;
+    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
+    gap: 10px 28px;
+    align-items: start;
+}
+.twm-flow-panel__margin {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    padding-top: 5px;
+}
+.twm-flow-panel__body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+}
+.twm-flow-panel--sheet .twm-flow-panel__icon { display: none; }
+.twm-flow-panel--sheet .twm-flow-panel__titles { flex-basis: auto; }
+.twm-flow-panel--sheet .twm-flow-panel__title,
+.twm-flow-panel--sheet .twm-flow-panel__title-input {
+    font-size: var(--font-size-md);
+}
+.twm-flow-panel--sheet .twm-flow-panel__description {
+    font-size: var(--font-size-xs);
+    color: var(--twm-flow-muted);
+}
+.twm-flow-panel--sheet .twm-flow-panel__fields { gap: 10px; }
+.twm-flow-panel--sheet .twm-flow-field__label { flex-basis: 110px; }
+@container (max-width: 560px) {
+    .twm-flow-panel__sheet { grid-template-columns: minmax(0, 1fr); }
+}
+
 /* ── a field: its label, its control, its finding, its help ─────────── */
 .twm-flow-field {
     display: flex;
@@ -13787,6 +13836,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     resize: vertical;
 }
 .twm-flow-checkbox {
+    align-self: flex-start;
     margin: 6px 0 0;
     accent-color: var(--twm-flow-focus);
 }

package/dist/flexdesk.css

@@ -13642,6 +13642,55 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     color: var(--twm-flow-warning-text);
 }
 
+/* ── the settings panel as a sheet (variant: 'sheet', 0.18.2) ──────────
+ * Flat: no fill and no chip. The title and the description sit in a margin at
+ * the left, the fields beside them; two sheets in a row are split by a rule, so
+ * a page of them reads as one form in sections. Narrower than 560px, the margin
+ * goes above the fields. */
+.twm-flow-panel--sheet {
+    container-type: inline-size;
+    gap: 0;
+    padding: 14px 0;
+    background: transparent;
+}
+.twm-flow-panel--sheet + .twm-flow-panel--sheet {
+    border-top: 1px solid var(--border-subtle);
+}
+.twm-flow-panel__sheet {
+    display: grid;
+    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
+    gap: 10px 28px;
+    align-items: start;
+}
+.twm-flow-panel__margin {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    padding-top: 5px;
+}
+.twm-flow-panel__body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+}
+.twm-flow-panel--sheet .twm-flow-panel__icon { display: none; }
+.twm-flow-panel--sheet .twm-flow-panel__titles { flex-basis: auto; }
+.twm-flow-panel--sheet .twm-flow-panel__title,
+.twm-flow-panel--sheet .twm-flow-panel__title-input {
+    font-size: var(--font-size-md);
+}
+.twm-flow-panel--sheet .twm-flow-panel__description {
+    font-size: var(--font-size-xs);
+    color: var(--twm-flow-muted);
+}
+.twm-flow-panel--sheet .twm-flow-panel__fields { gap: 10px; }
+.twm-flow-panel--sheet .twm-flow-field__label { flex-basis: 110px; }
+@container (max-width: 560px) {
+    .twm-flow-panel__sheet { grid-template-columns: minmax(0, 1fr); }
+}
+
 /* ── a field: its label, its control, its finding, its help ─────────── */
 .twm-flow-field {
     display: flex;
@@ -13787,6 +13836,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     resize: vertical;
 }
 .twm-flow-checkbox {
+    align-self: flex-start;
     margin: 6px 0 0;
     accent-color: var(--twm-flow-focus);
 }

package/dist/flow.js

@@ -2197,11 +2197,16 @@ function createSettingsPanel({
   values = null,
   valuesNote = null,
   columns = null,
-  host = null
+  host = null,
+  variant = "card"
 } = {}) {
   if (!widgets?.get) throw new Error("createSettingsPanel needs a widget registry (createWidgetRegistry()).");
+  if (variant !== "card" && variant !== "sheet") {
+    throw new Error(`createSettingsPanel's variant is 'card' or 'sheet', not ${JSON.stringify(variant)}.`);
+  }
+  const sheet = variant === "sheet";
   const S = createStrings(strings);
-  const root = el("section", "twm-flow-panel");
+  const root = el("section", sheet ? "twm-flow-panel twm-flow-panel--sheet" : "twm-flow-panel");
   root.setAttribute("role", "region");
   root.setAttribute("aria-label", say(S, "settings"));
   if (host) host.appendChild(root);
@@ -2316,15 +2321,22 @@ function createSettingsPanel({
     root.replaceChildren();
     if (!spec) return;
     if (isReadOnly() && readOnlyReason()) root.appendChild(el("p", "twm-flow-panel__readonly", readOnlyReason()));
-    root.appendChild(paintHeader());
-    if (spec.description) root.appendChild(el("p", "twm-flow-panel__description", spec.description));
-    if (spec.idLine) root.appendChild(el("div", "twm-flow-panel__id", spec.idLine));
+    const margin = sheet ? el("div", "twm-flow-panel__margin") : root;
+    const body = sheet ? el("div", "twm-flow-panel__body") : root;
+    if (sheet) {
+      const grid = el("div", "twm-flow-panel__sheet");
+      grid.append(margin, body);
+      root.appendChild(grid);
+    }
+    margin.appendChild(paintHeader());
+    if (spec.description) margin.appendChild(el("p", "twm-flow-panel__description", spec.description));
+    if (spec.idLine) body.appendChild(el("div", "twm-flow-panel__id", spec.idLine));
     findingsBox = el("ul", "twm-flow-panel__findings");
     findingsBox.hidden = true;
-    root.appendChild(findingsBox);
+    body.appendChild(findingsBox);
     slotBefore = el("div", "twm-flow-panel__slot");
     slotBefore.dataset.slot = "before";
-    root.appendChild(slotBefore);
+    body.appendChild(slotBefore);
     const list = el("div", "twm-flow-panel__fields");
     allFields = Array.isArray(spec.fields) ? spec.fields : fieldsFromSchema(spec.type?.config_schema);
     const drawn = visibleFields(allFields, current);
@@ -2361,10 +2373,10 @@ function createSettingsPanel({
       const anchor = placed(e);
       if (anchor === null || !keys.has(anchor)) drawExtra(e);
     }
-    root.appendChild(list);
+    body.appendChild(list);
     slotAfter = el("div", "twm-flow-panel__slot");
     slotAfter.dataset.slot = "after";
-    root.appendChild(slotAfter);
+    body.appendChild(slotAfter);
     paintSlots();
     applyFindings();
   }