@things-factory/board-ui 10.1.41 → 10.1.42

package/dist-client/setting-let/board-modeller-setting-let.js

@@ -0,0 +1,144 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/radio/radio.js';
+import '@operato/i18n/ox-i18n.js';
+import '@things-factory/setting-base';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { clientSettingStore } from '@operato/shell/object-store.js';
+export const BOARD_MODELLER_SETTING_KEY = 'board-modeller';
+/** Where the modeller keeps its editing tools: next to the selection (default) or in the top bar. */
+export async function getModellerToolbarMode() {
+    try {
+        const { toolbar = 'contextual' } = (await clientSettingStore.get(BOARD_MODELLER_SETTING_KEY))?.value || {};
+        return toolbar === 'toolbar' || toolbar === 'docked' ? toolbar : 'contextual';
+    }
+    catch {
+        return 'contextual';
+    }
+}
+/**
+ * The setting behind the modeller's two toolbar layouts. Both are the same verbs; this only decides
+ * whether they float next to what is selected or sit in one fixed row across the top.
+ */
+let BoardModellerSettingLet = class BoardModellerSettingLet extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.mode = 'contextual';
+    }
+    static { this.styles = [
+        css `
+      [options] {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      label {
+        display: flex;
+        gap: 10px;
+        align-items: flex-start;
+        cursor: pointer;
+
+        font: var(--label-font);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      label md-radio {
+        flex: none;
+        margin-top: -2px;
+      }
+
+      label b {
+        display: block;
+        font-weight: 500;
+      }
+
+      label small {
+        display: block;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.board modeller setting">Modeller contextual edit toolbar</ox-i18n>
+
+        <div slot="content" options>
+          <label>
+            <md-radio
+              name="modeller-toolbar"
+              value="contextual"
+              ?checked=${this.mode === 'contextual'}
+              @change=${() => this.onChange('contextual')}
+            ></md-radio>
+            <span>
+              <b>${i18next.t('label.modeller toolbar contextual', { defaultValue: 'Floating, next to the selection' })}</b>
+              <small>
+                ${i18next.t('text.modeller toolbar contextual', {
+            defaultValue: 'Shows only the tools that apply to what is selected. The top row keeps undo, redo, fit, preview and the panel.'
+        })}
+              </small>
+            </span>
+          </label>
+
+          <label>
+            <md-radio
+              name="modeller-toolbar"
+              value="docked"
+              ?checked=${this.mode === 'docked'}
+              @change=${() => this.onChange('docked')}
+            ></md-radio>
+            <span>
+              <b>${i18next.t('label.modeller toolbar docked', { defaultValue: 'Docked at the top of the canvas' })}</b>
+              <small>
+                ${i18next.t('text.modeller toolbar docked', {
+            defaultValue: 'The same selection tools, pinned top-centre of the canvas so they never cover a shape or a handle.'
+        })}
+              </small>
+            </span>
+          </label>
+
+          <label>
+            <md-radio
+              name="modeller-toolbar"
+              value="toolbar"
+              ?checked=${this.mode === 'toolbar'}
+              @change=${() => this.onChange('toolbar')}
+            ></md-radio>
+            <span>
+              <b>${i18next.t('label.modeller toolbar fixed', { defaultValue: 'Classic toolbar with every tool' })}</b>
+              <small>
+                ${i18next.t('text.modeller toolbar fixed', {
+            defaultValue: 'Every tool in one row across the top, all the time.'
+        })}
+              </small>
+            </span>
+          </label>
+        </div>
+      </setting-let>
+    `;
+    }
+    async firstUpdated() {
+        this.mode = await getModellerToolbarMode();
+    }
+    async onChange(mode) {
+        this.mode = mode;
+        try {
+            await clientSettingStore.put({ key: BOARD_MODELLER_SETTING_KEY, value: { toolbar: mode } });
+        }
+        catch (e) {
+            console.error('Failed to update board modeller setting (toolbar):', e);
+        }
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardModellerSettingLet.prototype, "mode", void 0);
+BoardModellerSettingLet = __decorate([
+    customElement('board-modeller-setting-let')
+], BoardModellerSettingLet);
+export { BoardModellerSettingLet };
+//# sourceMappingURL=board-modeller-setting-let.js.map

package/dist-client/setting-let/board-modeller-setting-let.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-modeller-setting-let.js","sourceRoot":"","sources":["../../client/setting-let/board-modeller-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/radio/radio.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@things-factory/setting-base'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { clientSettingStore } from '@operato/shell/object-store.js'\n\nexport type ModellerToolbarMode = 'contextual' | 'docked' | 'toolbar'\n\nexport const BOARD_MODELLER_SETTING_KEY = 'board-modeller'\n\n/** Where the modeller keeps its editing tools: next to the selection (default) or in the top bar. */\nexport async function getModellerToolbarMode(): Promise<ModellerToolbarMode> {\n  try {\n    const { toolbar = 'contextual' } = (await clientSettingStore.get(BOARD_MODELLER_SETTING_KEY))?.value || {}\n    return toolbar === 'toolbar' || toolbar === 'docked' ? toolbar : 'contextual'\n  } catch {\n    return 'contextual'\n  }\n}\n\n/**\n * The setting behind the modeller's two toolbar layouts. Both are the same verbs; this only decides\n * whether they float next to what is selected or sit in one fixed row across the top.\n */\n@customElement('board-modeller-setting-let')\nexport class BoardModellerSettingLet extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      [options] {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n\n      label {\n        display: flex;\n        gap: 10px;\n        align-items: flex-start;\n        cursor: pointer;\n\n        font: var(--label-font);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      label md-radio {\n        flex: none;\n        margin-top: -2px;\n      }\n\n      label b {\n        display: block;\n        font-weight: 500;\n      }\n\n      label small {\n        display: block;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n    `\n  ]\n\n  @state() private mode: ModellerToolbarMode = 'contextual'\n\n  render() {\n    return html`\n      <setting-let>\n        <ox-i18n slot=\"title\" msgid=\"title.board modeller setting\">Modeller contextual edit toolbar</ox-i18n>\n\n        <div slot=\"content\" options>\n          <label>\n            <md-radio\n              name=\"modeller-toolbar\"\n              value=\"contextual\"\n              ?checked=${this.mode === 'contextual'}\n              @change=${() => this.onChange('contextual')}\n            ></md-radio>\n            <span>\n              <b>${i18next.t('label.modeller toolbar contextual', { defaultValue: 'Floating, next to the selection' })}</b>\n              <small>\n                ${i18next.t('text.modeller toolbar contextual', {\n                  defaultValue: 'Shows only the tools that apply to what is selected. The top row keeps undo, redo, fit, preview and the panel.'\n                })}\n              </small>\n            </span>\n          </label>\n\n          <label>\n            <md-radio\n              name=\"modeller-toolbar\"\n              value=\"docked\"\n              ?checked=${this.mode === 'docked'}\n              @change=${() => this.onChange('docked')}\n            ></md-radio>\n            <span>\n              <b>${i18next.t('label.modeller toolbar docked', { defaultValue: 'Docked at the top of the canvas' })}</b>\n              <small>\n                ${i18next.t('text.modeller toolbar docked', {\n                  defaultValue: 'The same selection tools, pinned top-centre of the canvas so they never cover a shape or a handle.'\n                })}\n              </small>\n            </span>\n          </label>\n\n          <label>\n            <md-radio\n              name=\"modeller-toolbar\"\n              value=\"toolbar\"\n              ?checked=${this.mode === 'toolbar'}\n              @change=${() => this.onChange('toolbar')}\n            ></md-radio>\n            <span>\n              <b>${i18next.t('label.modeller toolbar fixed', { defaultValue: 'Classic toolbar with every tool' })}</b>\n              <small>\n                ${i18next.t('text.modeller toolbar fixed', {\n                  defaultValue: 'Every tool in one row across the top, all the time.'\n                })}\n              </small>\n            </span>\n          </label>\n        </div>\n      </setting-let>\n    `\n  }\n\n  async firstUpdated() {\n    this.mode = await getModellerToolbarMode()\n  }\n\n  private async onChange(mode: ModellerToolbarMode) {\n    this.mode = mode\n\n    try {\n      await clientSettingStore.put({ key: BOARD_MODELLER_SETTING_KEY, value: { toolbar: mode } })\n    } catch (e) {\n      console.error('Failed to update board modeller setting (toolbar):', e)\n    }\n  }\n}\n"]}

package/dist-client/styles/board-card-styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The one card look for every board catalog - board list, play list, template list.
+ *
+ * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The
+ * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is
+ * exactly the "why does this page look different" complaint this suite keeps hearing, so the
+ * tokens now live once, here, and a page adds only what is its own (a FAB, a chip strip).
+ *
+ * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.
+ */
+export declare const BoardCardStyles: import("lit").CSSResult;

package/dist-client/styles/board-card-styles.js

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+/**
+ * The one card look for every board catalog - board list, play list, template list.
+ *
+ * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The
+ * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is
+ * exactly the "why does this page look different" complaint this suite keeps hearing, so the
+ * tokens now live once, here, and a page adds only what is its own (a FAB, a chip strip).
+ *
+ * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.
+ */
+export const BoardCardStyles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    overflow: hidden;
+
+    --data-card-min-width: 240px;
+    --data-card-record-card-border-radius: 6px;
+    --data-card-record-card-padding: 0;
+    --data-card-thumbnail-aspect: 16 / 9;
+    --data-card-thumbnail-padding: 0;
+    --data-card-thumbnail-radius: 6px 6px 0 0;
+    /* The card's two surfaces. The theme raises both in dark (--board-card-surface / -plate in
+     * operato-board's board-accent.css): the light defaults - white card, light plate - become
+     * black on black there, and a card that does not lift off its page is not a card. */
+    --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));
+    --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));
+    /* The right margin clears the corner where the action icons sit (below). */
+    --data-card-item-margin: 10px 52px 10px 12px;
+    --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');
+    --data-card-item-name-color: var(--md-sys-color-on-surface);
+    --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
+    /* The second line under the name is a side note, not a rival to it. */
+    --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
+    --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    /* A page's own FAB and the grid's scroll-to-top FAB share the bottom-right corner by default;
+     * push the scroll button up so the two never collide. */
+    --data-card-fab-position-vertical: 64px;
+    /* record-card.ts reads these two with no fallback - unset means no hover feedback at all. */
+    --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline-variant);
+    --data-card-record-card-boxshadow-hover: 0 2px 8px rgba(0, 0, 0, 0.16);
+    /* Card actions are secondary to the picture and the name: small, in the quiet outline tone. */
+    --data-card-gutter-icon-size: 16px;
+    --data-card-gutter-icon-color: var(--md-sys-color-outline);
+    /* One or two small icons do not deserve a row of their own under the text: park them in the
+     * bottom-right corner, level with the meta line, so the information area stays two lines tall. */
+    --data-card-gutters-position: absolute;
+    --data-card-gutters-inset: auto 8px 9px auto;
+    --data-card-gutters-margin: 0;
+  }
+
+  /* .page-fill is WorkSurfacePageStyles' own class (flex: 1; min-height: 0) - the min-height half
+   * is what lets ox-grist's internal scroller, not the page, be the thing that scrolls. */
+
+  /* The extended FAB every catalog uses for its one primary action - a pill with an icon and a
+   * label, not a bare circle, so a first-time visitor does not have to guess what the + makes. */
+  button[fab] {
+    position: absolute;
+    right: var(--spacing-large, 12px);
+    bottom: var(--spacing-large, 12px);
+    z-index: 10;
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 18px 10px 14px;
+    font: var(--label-font, inherit);
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: var(--md-sys-color-on-primary-container);
+    background-color: var(--md-sys-color-primary-container);
+    border: none;
+    border-radius: var(--md-sys-shape-corner-full, 999px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+    cursor: pointer;
+  }
+
+  button[fab]:hover {
+    color: var(--md-sys-color-on-primary, #fff);
+    background-color: var(--md-sys-color-primary);
+  }
+
+  button[fab] md-icon {
+    --md-icon-size: 20px;
+  }
+`;
+//# sourceMappingURL=board-card-styles.js.map

package/dist-client/styles/board-card-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-card-styles.js","sourceRoot":"","sources":["../../client/styles/board-card-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EjC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * The one card look for every board catalog - board list, play list, template list.\n *\n * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The\n * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is\n * exactly the \"why does this page look different\" complaint this suite keeps hearing, so the\n * tokens now live once, here, and a page adds only what is its own (a FAB, a chip strip).\n *\n * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.\n */\nexport const BoardCardStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n\n    overflow: hidden;\n\n    --data-card-min-width: 240px;\n    --data-card-record-card-border-radius: 6px;\n    --data-card-record-card-padding: 0;\n    --data-card-thumbnail-aspect: 16 / 9;\n    --data-card-thumbnail-padding: 0;\n    --data-card-thumbnail-radius: 6px 6px 0 0;\n    /* The card's two surfaces. The theme raises both in dark (--board-card-surface / -plate in\n     * operato-board's board-accent.css): the light defaults - white card, light plate - become\n     * black on black there, and a card that does not lift off its page is not a card. */\n    --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n    --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));\n    /* The right margin clears the corner where the action icons sit (below). */\n    --data-card-item-margin: 10px 52px 10px 12px;\n    --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');\n    --data-card-item-name-color: var(--md-sys-color-on-surface);\n    --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n    /* The second line under the name is a side note, not a rival to it. */\n    --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n    --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n    /* A page's own FAB and the grid's scroll-to-top FAB share the bottom-right corner by default;\n     * push the scroll button up so the two never collide. */\n    --data-card-fab-position-vertical: 64px;\n    /* record-card.ts reads these two with no fallback - unset means no hover feedback at all. */\n    --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline-variant);\n    --data-card-record-card-boxshadow-hover: 0 2px 8px rgba(0, 0, 0, 0.16);\n    /* Card actions are secondary to the picture and the name: small, in the quiet outline tone. */\n    --data-card-gutter-icon-size: 16px;\n    --data-card-gutter-icon-color: var(--md-sys-color-outline);\n    /* One or two small icons do not deserve a row of their own under the text: park them in the\n     * bottom-right corner, level with the meta line, so the information area stays two lines tall. */\n    --data-card-gutters-position: absolute;\n    --data-card-gutters-inset: auto 8px 9px auto;\n    --data-card-gutters-margin: 0;\n  }\n\n  /* .page-fill is WorkSurfacePageStyles' own class (flex: 1; min-height: 0) - the min-height half\n   * is what lets ox-grist's internal scroller, not the page, be the thing that scrolls. */\n\n  /* The extended FAB every catalog uses for its one primary action - a pill with an icon and a\n   * label, not a bare circle, so a first-time visitor does not have to guess what the + makes. */\n  button[fab] {\n    position: absolute;\n    right: var(--spacing-large, 12px);\n    bottom: var(--spacing-large, 12px);\n    z-index: 10;\n\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 18px 10px 14px;\n    font: var(--label-font, inherit);\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--md-sys-color-on-primary-container);\n    background-color: var(--md-sys-color-primary-container);\n    border: none;\n    border-radius: var(--md-sys-shape-corner-full, 999px);\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n    cursor: pointer;\n  }\n\n  button[fab]:hover {\n    color: var(--md-sys-color-on-primary, #fff);\n    background-color: var(--md-sys-color-primary);\n  }\n\n  button[fab] md-icon {\n    --md-icon-size: 20px;\n  }\n`\n"]}

package/dist-client/themes/board-theme.css

@@ -1,5 +1,5 @@
 body {
-  --board-renderer-border: 1px solid rgba(0, 0, 0, 0.1);
+  --board-renderer-border: 1px solid var(--md-sys-color-outline-variant);
   --board-renderer-max-width: 120px;
   --board-renderer-name-background-color: var(--secondary-text-color);
   --board-renderer-name-font: normal 13px var(--theme-font);
@@ -8,7 +8,7 @@ body {
   --board-renderer-font: bold 16px/25px var(--md-icon-font, 'Material Symbols Outlined');
 
   /* list page style*/
-  --board-list-star-color: rgba(0, 0, 0, 0.4);
+  --board-list-star-color: var(--md-sys-color-outline);
   --board-list-star-active-color: var(--status-warning-color);
 
   --card-list-rows-height: 180px;
@@ -28,30 +28,43 @@ body {
   --card-list-create-label-color: var(--md-sys-color-secondary);
   --card-list-create-input-font: normal 14px var(--theme-font);
   --card-list-create-input-color: var();
-  --card-list-create-input-border: 1px solid rgba(0, 0, 0, 0.2);
+  --card-list-create-input-border: 1px solid var(--md-sys-color-outline-variant);
   --card-list-create-input-border-radius: var(--border-radius);
   --card-list-create-input-padding: 2px 9px;
   --card-list-create-margin: 0 0 7px 0;
 
-  /* board modeler page style */
-  --edit-toolbar-background-color: var(--md-sys-color-secondary);
+  /*
+   * Modeller chrome - toolbar, palette rail, property panel - sits on the neutral surface scale.
+   * It used to wear the accent roles (secondary, secondary-container): fine as a warm grey in
+   * light, but in dark those roles are the *light* colours of the palette, so the toolbar became
+   * a tan bar and the panel a brown block on a black page (2026-09-24). The accent belongs to the
+   * selection and the pressed tool, not to the furniture.
+   */
+  --edit-toolbar-background-color: var(--md-sys-color-surface-container-high);
   --edit-toolbar-bigger-icon-size: 45px;
-  --edit-toolbar-bigger-icon-line: 1px solid rgba(0, 0, 0, 0.1);
-  --component-toolbar-background-color: var(--md-sys-color-background);
-  --component-toolbar-icon-size: 45px;
-  --component-toolbar-border: 1px solid rgba(0, 0, 0, 0.1);
-  --component-menu-background-color: var(--md-sys-color-secondary-container);
-  --component-menu-border-color: var(--md-sys-color-secondary);
+  --edit-toolbar-bigger-icon-line: 1px solid var(--md-sys-color-outline-variant);
+  --component-toolbar-background-color: var(--md-sys-color-surface-container-low);
+  /* Wide enough for a glyph with a caption under it. */
+  --component-toolbar-icon-size: 64px;
+  --component-toolbar-border: 1px solid var(--md-sys-color-outline-variant);
+  --component-toolbar-icon-color: var(--md-sys-color-on-surface-variant);
+  --component-toolbar-active-background: var(--md-sys-color-secondary-container);
+  --component-toolbar-hover-background: var(--md-sys-color-surface-container-high);
+  --component-menu-title-background: var(--md-sys-color-surface-container-highest);
+  --component-menu-title-color: var(--md-sys-color-on-surface);
+  --component-menu-background-color: var(--md-sys-color-surface-container-high);
+  --component-detail-background-color: var(--md-sys-color-surface-container-high);
+  --component-menu-border-color: var(--md-sys-color-outline-variant);
   --component-menu-title: bold 11px/16px var(--theme-font);
-  --component-menu-item-color: var(--md-sys-color-secondary);
-  --component-menu-item-hover-color: var(--md-sys-color-secondary);
+  --component-menu-item-color: var(--md-sys-color-on-surface-variant);
+  --component-menu-item-hover-color: var(--md-sys-color-on-surface);
   --component-menu-item-icon-size: 20px;
-  --property-sidebar-background-color: var(--md-sys-color-secondary-container);
-  --property-sidebar-tab-icon-color: var(--md-sys-color-secondary);
-  --property-sidebar-fieldset-border: 1px solid rgba(0, 0, 0, 0.2);
-  --property-sidebar-fieldset-label: normal 12px/16px var(--theme-font);
-  --property-sidebar-fieldset-legend-color: var(--md-sys-color-on-secondary-container);
-  --property-sidebar-fieldset-legend: bold 13px var(--theme-font);
+  --property-sidebar-background-color: var(--md-sys-color-surface-container);
+  --property-sidebar-tab-icon-color: var(--md-sys-color-on-surface-variant);
+  --property-sidebar-fieldset-border: 1px solid var(--md-sys-color-outline-variant);
+  --property-sidebar-fieldset-label: normal 0.78rem/1.3 var(--theme-font);
+  --property-sidebar-fieldset-legend-color: var(--md-sys-color-on-surface);
+  --property-sidebar-fieldset-legend: 600 0.74rem/1.4 var(--theme-font);
   /*
    * 씬 아웃라인은 목록/트리라서 본문 성격이다. 강조 역할(secondary·primary)을 글자색과 칩 배경에
    * 쓰고 있어서 패널 전체가 브랜드색으로 물들고, 다크에서는 그 역할들이 밝아져 더 튀었다.