@formicoidea/labre-core 0.42.0 → 0.43.1

package/dist/_pkgs/affine-components/icons/list.js

@@ -1,3 +1,9 @@
+/**
+ * The chrome accent, reached through its token rather than written as a hex:
+ * the six-dot burst is chrome, so it has to follow the host's theme (DESIGN.md,
+ * The Borrowed Blue Rule).
+ */
+const ACCENT = 'var(--affine-primary-color)';
 export const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {}) => {
     const sparkingEl = document.createElement('div');
     sparkingEl.classList.add('affine-check-animation');
@@ -14,7 +20,7 @@ export const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {
     refElement.append(sparkingEl);
     await sparkingEl.animate([
         {
-            boxShadow: '0 -18px 0 -8px #1e96eb, 16px -8px 0 -8px #1e96eb, 16px 8px 0 -8px #1e96eb, 0 18px 0 -8px #1e96eb, -16px 8px 0 -8px #1e96eb, -16px -8px 0 -8px #1e96eb',
+            boxShadow: `0 -18px 0 -8px ${ACCENT}, 16px -8px 0 -8px ${ACCENT}, 16px 8px 0 -8px ${ACCENT}, 0 18px 0 -8px ${ACCENT}, -16px 8px 0 -8px ${ACCENT}, -16px -8px 0 -8px ${ACCENT}`,
         },
     ], { duration: 240, easing: 'ease', fill: 'forwards' }).finished;
     await sparkingEl.animate([

package/dist/_pkgs/affine-components/size-dropdown-menu/dropdown-menu.js

@@ -218,9 +218,14 @@ let SizeDropdownMenu = (() => {
             const { sizes, format, type, icon, resolvedLabel: label, size$: { value: size }, } = this;
             const isCheckType = type === 'check';
             const placeholder = format?.(Math.trunc(size)) ?? Math.trunc(size);
+            // `class` is STATIC. It used to be `${label.toLowerCase()}-menu`, which
+            // made a CSS class depend on the host's language the day `label` joined
+            // the translation seam (#390) — `échelle-menu` in French. Nothing in the
+            // repo selects it (checked across the styles and both test suites): it is
+            // the stable identifier it was always meant to be.
             return html `
       <editor-menu-button
-        class="${`${label.toLowerCase()}-menu`}"
+        class="size-menu"
         .contentPadding="${'8px'}"
         .button=${html `
           <editor-icon-button

package/dist/_pkgs/affine-components/toolbar/index.d.ts

@@ -1,7 +1,7 @@
 export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
-export { EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
+export { EDITOR_MENU_TOGGLE, EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
 export { MenuContext } from './menu-context.js';
 export { type PickerMenu, type PickerMenuItem, renderCurrentPickerItemWith, renderPickerMenu, renderPickerMenuItems, } from './picker-menu.js';
 export { EditorToolbarSeparator } from './separator.js';

package/dist/_pkgs/affine-components/toolbar/index.js

@@ -6,7 +6,7 @@ import { Tooltip } from './tooltip.js';
 export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
-export { EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
+export { EDITOR_MENU_TOGGLE, EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
 export { MenuContext } from './menu-context.js';
 export { renderCurrentPickerItemWith, renderPickerMenu, renderPickerMenuItems, } from './picker-menu.js';
 export { EditorToolbarSeparator } from './separator.js';

package/dist/_pkgs/affine-components/toolbar/menu-button.d.ts

@@ -1,5 +1,12 @@
 import { type ButtonPopperOptions } from '../../affine-shared/utils/index.js';
 import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * A panel in a toolbar opened or closed, announced across shadow boundaries.
+ *
+ * `detail` is whether it is now open, and the deepest element of
+ * `composedPath()` is the button it belongs to.
+ */
+export declare const EDITOR_MENU_TOGGLE = "editor-menu-toggle";
 declare const EditorMenuButton_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EditorMenuButton extends EditorMenuButton_base {
     static styles: import("lit").CSSResult;

package/dist/_pkgs/affine-components/toolbar/menu-button.js

@@ -37,6 +37,13 @@ import { createButtonPopper, } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement, } from 'lit';
 import { property, query } from 'lit/decorators.js';
+/**
+ * A panel in a toolbar opened or closed, announced across shadow boundaries.
+ *
+ * `detail` is whether it is now open, and the deepest element of
+ * `composedPath()` is the button it belongs to.
+ */
+export const EDITOR_MENU_TOGGLE = 'editor-menu-toggle';
 let EditorMenuButton = (() => {
     let _classSuper = WithDisposable(LitElement);
     let __content_decorators;
@@ -97,6 +104,20 @@ let EditorMenuButton = (() => {
                     else {
                         delete this.dataset.open;
                     }
+                    // Said again, out loud, for whoever is holding this button — the row
+                    // it sits on has to know, and `data-open` alone cannot tell it: a
+                    // picker keeps its menu button inside its OWN shadow root, where no
+                    // `querySelector` and no `MutationObserver` of the row's reaches. This
+                    // one bubbles AND is composed, so it crosses every boundary between
+                    // here and the row. See `EditorToolbar`, which stops clipping while a
+                    // panel is open. The `toggle` event above is deliberately left as it
+                    // is: it does not bubble, and things listen for it by that name.
+                    this.dispatchEvent(new CustomEvent(EDITOR_MENU_TOGGLE, {
+                        detail: opened,
+                        bubbles: true,
+                        cancelable: false,
+                        composed: true,
+                    }));
                 },
                 mainAxis: 0,
                 offsetHeight: 6 * 4,
@@ -184,6 +205,15 @@ export class EditorMenuContent extends LitElement {
     .content-wrapper {
       overscroll-behavior: contain;
       overflow-y: auto;
+      /* Spelled out because CSS Overflow computes a visible axis to auto as
+       * soon as the other one is not visible: the overflow-y above would
+       * silently make this popup scrollable SIDEWAYS too. Anything animated by
+       * a positive translateX inside it — the palette carousel's incoming page,
+       * see color-picker/palette-carousel.ts — then grows the scrollable
+       * region for the length of the animation and flashes a horizontal
+       * scrollbar (issue #392). Not clip: combined with overflow-y: auto the
+       * spec falls it back to hidden anyway. */
+      overflow-x: hidden;
       padding: var(--content-padding, 0 6px);
     }
 

package/dist/_pkgs/affine-components/toolbar/picker-menu.d.ts

@@ -38,6 +38,21 @@ export type PickerMenu<T> = {
     label: string;
     icon?: TemplateResult;
     tooltip?: string;
+    /**
+     * The accessible name of the MENU shell (`aria-label` on
+     * `editor-menu-button`), which the caller supplies whole (#390).
+     *
+     * It used to be sewn together here as `` `${label.toLowerCase()}-menu` ``.
+     * That was a stable identifier while {@link label} was an English literal;
+     * once the caller started handing over a TRANSLATED label it became half a
+     * sentence in each language ("changer le type de forme-menu"). A menu's
+     * accessible name is its own wording, never a composition — the precedent
+     * is `ROOT_ALIGNMENT_MENU_ARIA` in `blocks/root`.
+     *
+     * Left out, the name is composed from {@link label} as before, so a caller
+     * that still passes an English literal is unaffected.
+     */
+    menuAria?: string;
     items: PickerMenuItem<T>[];
     currentValue: T;
     onPick: (value: T) => void;
@@ -51,5 +66,5 @@ export type PickerMenu<T> = {
 };
 /** The field of the item that currently matches — its icon, usually. */
 export declare function renderCurrentPickerItemWith<T, F extends keyof PickerMenuItem<T>>(items: PickerMenuItem<T>[], currentValue: T, field: F): PickerMenuItem<T>[F] | undefined;
-export declare function renderPickerMenu<T>({ label, tooltip, icon, items, currentValue, onPick, testId, }: PickerMenu<T>): TemplateResult<1>;
+export declare function renderPickerMenu<T>({ label, tooltip, menuAria, icon, items, currentValue, onPick, testId, }: PickerMenu<T>): TemplateResult<1>;
 export declare function renderPickerMenuItems<T>(items: PickerMenuItem<T>[], currentValue: T, onPick: (value: T) => void, testId?: string): unknown;

package/dist/_pkgs/affine-components/toolbar/picker-menu.js

@@ -6,11 +6,11 @@ import { EditorChevronDown } from './chevron-down.js';
 export function renderCurrentPickerItemWith(items, currentValue, field) {
     return items.find(({ value }) => value === currentValue)?.[field];
 }
-export function renderPickerMenu({ label, tooltip, icon, items, currentValue, onPick, testId, }) {
+export function renderPickerMenu({ label, tooltip, menuAria, icon, items, currentValue, onPick, testId, }) {
     return html `
     <editor-menu-button
       data-testid=${ifDefined(testId)}
-      aria-label="${`${label.toLowerCase()}-menu`}"
+      aria-label="${menuAria ?? `${label.toLowerCase()}-menu`}"
       .button=${html `
         <editor-icon-button
           data-testid=${ifDefined(testId ? `${testId}-button` : undefined)}

package/dist/_pkgs/affine-components/toolbar/toolbar.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 declare const EditorToolbar_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EditorToolbar extends EditorToolbar_base {
+    #private;
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-components/toolbar/toolbar.js

@@ -2,6 +2,7 @@ import { panelBaseStyle } from '../../affine-shared/styles/index.js';
 import { stopPropagation } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement } from 'lit';
+import { EDITOR_MENU_TOGGLE } from './menu-button.js';
 export class EditorToolbar extends WithDisposable(LitElement) {
     static { this.styles = css `
     ${panelBaseStyle(':host')}
@@ -13,6 +14,27 @@ export class EditorToolbar extends WithDisposable(LitElement) {
       height: 36px;
       box-sizing: content-box;
       flex-wrap: nowrap;
+      /* And never outside its own background. The row's width is a max-width
+         the positioner writes; entries keep their natural width (below), so a
+         row that has nothing left to give up would otherwise paint its last
+         icons over the document, past the border and the shadow — which is
+         what a 420px window used to show.
+
+         Clipped on the X axis alone: overflow-x hidden would make the row a
+         scroll container on BOTH axes (a visible paired with a hidden computes
+         to auto) and swallow the dropdown panels, which are positioned inside
+         the row and hang above and below it. */
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
+    /* ...except while one of those panels is open. A clipping box is also what
+       floating-ui fits a panel into, so left in place the rule above would
+       squeeze a 176px menu into the width of the row that opened it — or, for
+       a dropdown at one end of the row, cut half of it off. See
+       syncOpenMenus below, which is what raises this attribute. */
+    :host([data-menu-open]) {
+      overflow: visible;
     }
 
     :host([data-without-bg]) {
@@ -35,6 +57,38 @@ export class EditorToolbar extends WithDisposable(LitElement) {
       fill: currentColor;
     }
   `; }
+    /** The panels open in this row right now, whatever opened them. */
+    #openMenus = new Set();
+    /**
+     * Says, on the row itself, whether one of its panels is open.
+     *
+     * Why an attribute at all: the row cannot ask the question in CSS. `:host()`
+     * takes a COMPOUND selector and `:has()` is not one, so
+     * `:host(:has([data-open]))` is not a rule browsers honour (Chromium
+     * 2026-09: it matches from the document, never from inside the shadow root).
+     *
+     * Why not a `querySelector` for `data-open`, which the buttons do raise:
+     * because it answers only for the buttons the row holds DIRECTLY. A colour
+     * picker keeps its menu button inside its own shadow root, where neither a
+     * `querySelector` nor a `MutationObserver` of this row can see it — and that
+     * is the row whose panel the clip was cutting in half
+     * (`framework-palette-carousel.spec.ts`). {@link EDITOR_MENU_TOGGLE} is
+     * composed, so it crosses every boundary, and it is raised before the panel
+     * is ever positioned.
+     *
+     * A panel whose button is taken off the row by a re-render never says it
+     * closed, so the set is swept of anything no longer in a document.
+     */
+    #syncOpenMenus() {
+        for (const menu of this.#openMenus) {
+            if (!menu.isConnected)
+                this.#openMenus.delete(menu);
+        }
+        if (this.#openMenus.size > 0)
+            this.dataset.menuOpen = 'true';
+        else
+            delete this.dataset.menuOpen;
+    }
     connectedCallback() {
         super.connectedCallback();
         this._disposables.addFromEvent(this, 'pointerdown', (e) => {
@@ -44,6 +98,19 @@ export class EditorToolbar extends WithDisposable(LitElement) {
         this._disposables.addFromEvent(this, 'wheel', stopPropagation, {
             passive: false,
         });
+        this._disposables.addFromEvent(this, EDITOR_MENU_TOGGLE, (e) => {
+            // The deepest element of the path, not `target`: a composed event that
+            // crosses a shadow boundary is retargeted to the host it came out of,
+            // and one host may hold more than one panel.
+            const menu = e.composedPath()[0];
+            if (!(menu instanceof Element))
+                return;
+            if (e.detail)
+                this.#openMenus.add(menu);
+            else
+                this.#openMenus.delete(menu);
+            this.#syncOpenMenus();
+        });
     }
     render() {
         return html `<slot></slot>`;

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card-title-editor.js

@@ -138,7 +138,7 @@ let FrameCardTitleEditor = (() => {
                 background: 'var(--affine-background-primary-color)',
                 border: '1px solid var(--affine-primary-color)',
                 color: 'var(--affine-text-primary-color)',
-                boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30)',
+                boxShadow: '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)',
                 zIndex: '1',
                 display: 'block',
             });

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card.js

@@ -69,7 +69,7 @@ const styles = css `
   }
 
   .frame-card-container.selected .frame-card-body {
-    border: 2px solid var(--light-brand-color, #1e96eb);
+    border: 2px solid var(--affine-primary-color);
   }
 
   .frame-card-container.dragging {

package/dist/_pkgs/affine-gfx-brush/toolbar/components/eraser/icons.js

@@ -45,7 +45,7 @@ export const EdgelessEraserLightIcon = html `<svg
   />
   <path
     d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
-    fill="#1E96EB"
+    fill="var(--affine-primary-color)"
   />
   <path
     d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"

package/dist/_pkgs/affine-gfx-connector/direction/direction-reveal.d.ts

@@ -41,11 +41,20 @@ import { type TypedEdge } from './typed-edge.js';
  * a `@local()` field. The reveal is session state and leaves with the pointer.
  */
 /**
- * The one colour the reveal is drawn in — the house primary, i.e. the colour of
+ * The one colour the reveal is drawn in — the chrome accent, i.e. the colour of
  * an affordance rather than of ink. Deliberately NOT the framework's palette:
  * the label is the tool talking about the drawing, not part of the drawing.
+ *
+ * A TOKEN, not a hex: the chip is rendered in the DOM (`direction-widget.ts`),
+ * so it follows whatever the host sets `--affine-primary-color` to. The accent
+ * is AFFiNE's and due to be replaced — DESIGN.md, The Borrowed Blue Rule.
+ *
+ * It is the colour of EVERY typed edge of every framework: no role declares a
+ * `chipColor` any more (PO recette of 23/09/2026, after one that did produced
+ * two blues on one map). `affine/all/src/__tests__/direction-chip-accent.unit.spec.ts`
+ * reads the mounted vocabularies and keeps it that way.
  */
-export declare const EDGE_DIRECTION_COLOR = "#1e96eb";
+export declare const EDGE_DIRECTION_COLOR = "var(--affine-primary-color)";
 /**
  * Where the label sits on a typed edge, and how it is turned.
  *

package/dist/_pkgs/affine-gfx-connector/direction/direction-reveal.js

@@ -40,11 +40,20 @@ import { asTypedEdge, edgeIsBound, roleVocabularies, } from './typed-edge.js';
  * a `@local()` field. The reveal is session state and leaves with the pointer.
  */
 /**
- * The one colour the reveal is drawn in — the house primary, i.e. the colour of
+ * The one colour the reveal is drawn in — the chrome accent, i.e. the colour of
  * an affordance rather than of ink. Deliberately NOT the framework's palette:
  * the label is the tool talking about the drawing, not part of the drawing.
+ *
+ * A TOKEN, not a hex: the chip is rendered in the DOM (`direction-widget.ts`),
+ * so it follows whatever the host sets `--affine-primary-color` to. The accent
+ * is AFFiNE's and due to be replaced — DESIGN.md, The Borrowed Blue Rule.
+ *
+ * It is the colour of EVERY typed edge of every framework: no role declares a
+ * `chipColor` any more (PO recette of 23/09/2026, after one that did produced
+ * two blues on one map). `affine/all/src/__tests__/direction-chip-accent.unit.spec.ts`
+ * reads the mounted vocabularies and keeps it that way.
  */
-export const EDGE_DIRECTION_COLOR = '#1e96eb';
+export const EDGE_DIRECTION_COLOR = 'var(--affine-primary-color)';
 const pathOf = (model) => {
     const path = model.absolutePath;
     return Array.isArray(path) && path.length >= 2 ? path : null;

package/dist/_pkgs/affine-gfx-connector/text/edgeless-connector-label-editor.js

@@ -245,10 +245,11 @@ let EdgelessConnectorLabelEditor = (() => {
       transform-origin: center;
       z-index: 10;
       padding: ${VERTICAL_PADDING}px ${HORIZONTAL_PADDING}px;
-      border: ${BORDER_WIDTH}px solid var(--affine-primary-color, #1e96eb);
+      border: ${BORDER_WIDTH}px solid var(--affine-primary-color);
       background: var(--affine-background-primary-color, #fff);
       border-radius: 2px;
-      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
       box-sizing: border-box;
       overflow: visible;
 

package/dist/_pkgs/affine-gfx-connector/toolbar/config.js

@@ -2,7 +2,7 @@ import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
 import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
 import { createTextActions, normalizeTextBound } from '../../affine-gfx-text/index.js';
 import { ConnectorElementModel, ConnectorMode, DEFAULT_FRONT_ENDPOINT_STYLE, DEFAULT_REAR_ENDPOINT_STYLE, DefaultTheme, LineWidth, PointStyle, resolveColor, StrokeStyle, } from '../../affine-model/index.js';
-import { CONNECTOR_SOURCE_LABEL, CONNECTOR_TARGET_LABEL, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
+import { CONNECTOR_SOURCE_LABEL, CONNECTOR_TARGET_LABEL, MENU_ARIA_STYLE, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../affine-shared/utils/index.js';
 import { getRootBlock, LINE_STYLE_LIST, renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { Bound } from '../../global/gfx/index.js';
@@ -15,7 +15,7 @@ import { INVERT_EDGE_DIRECTION, invertEdgeDirection, } from '../direction/invert
 import { asTypedEdge, edgeIsBound, roleVocabularies, } from '../direction/typed-edge.js';
 import { mountConnectorLabelEditor } from '../text/index.js';
 import { EndPointDiamondHollowIcon, EndPointTriangleHollowIcon, StartPointDiamondHollowIcon, StartPointTriangleHollowIcon, } from './hollow-endpoint-icons.js';
-import { CONNECTOR_ADD_TEXT, CONNECTOR_LABEL_END_POINT_STYLE, CONNECTOR_LABEL_SHAPE, CONNECTOR_LABEL_START_POINT_STYLE, CONNECTOR_LABEL_STROKE_STYLE, CONNECTOR_LABEL_STYLE, CONNECTOR_MODE_WORDING, CONNECTOR_TOOLTIP_CONNECTOR_SHAPE, CONNECTOR_TOOLTIP_FLIP_DIRECTION, } from '../translations.js';
+import { CONNECTOR_ADD_TEXT, CONNECTOR_END_POINT_STYLE_MENU_ARIA, CONNECTOR_LABEL_END_POINT_STYLE, CONNECTOR_LABEL_SHAPE, CONNECTOR_LABEL_START_POINT_STYLE, CONNECTOR_LABEL_STROKE_STYLE, CONNECTOR_LABEL_STYLE, CONNECTOR_MODE_WORDING, CONNECTOR_SHAPE_MENU_ARIA, CONNECTOR_START_POINT_STYLE_MENU_ARIA, CONNECTOR_TOOLTIP_CONNECTOR_SHAPE, CONNECTOR_TOOLTIP_FLIP_DIRECTION, } from '../translations.js';
 /**
  * Every `PointStyle` must appear in BOTH lists.
  *
@@ -204,10 +204,16 @@ export const connectorToolbarConfig = {
                     updateModelsWith(ctx, models, field, value);
                 };
                 return renderMenu({
-                    label: translateKey(ctx.std, ...CONNECTOR_LABEL_STYLE),
+                    // `label` stays the ENGLISH literal and `labelWording` carries the
+                    // key: `renderMenu` resolves it, and the menu shell's accessible
+                    // name no longer has to be sewn onto a translated word (#390).
+                    label: CONNECTOR_LABEL_STYLE[1],
+                    labelWording: CONNECTOR_LABEL_STYLE,
+                    menuAriaWording: MENU_ARIA_STYLE,
                     items: LINE_STYLE_LIST,
                     currentValue: rough,
                     onPick,
+                    std: ctx.std,
                 });
             },
         },
@@ -226,10 +232,13 @@ export const connectorToolbarConfig = {
                             updateModelsWith(ctx, models, field, value);
                         };
                         return renderMenu({
-                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_START_POINT_STYLE),
+                            label: CONNECTOR_LABEL_START_POINT_STYLE[1],
+                            labelWording: CONNECTOR_LABEL_START_POINT_STYLE,
+                            menuAriaWording: CONNECTOR_START_POINT_STYLE_MENU_ARIA,
                             items: FRONT_ENDPOINT_STYLE_LIST,
                             currentValue: pointStyle,
                             onPick,
+                            std: ctx.std,
                         });
                     },
                 },
@@ -293,10 +302,13 @@ export const connectorToolbarConfig = {
                             updateModelsWith(ctx, models, field, value);
                         };
                         return renderMenu({
-                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_END_POINT_STYLE),
+                            label: CONNECTOR_LABEL_END_POINT_STYLE[1],
+                            labelWording: CONNECTOR_LABEL_END_POINT_STYLE,
+                            menuAriaWording: CONNECTOR_END_POINT_STYLE_MENU_ARIA,
                             items: REAR_ENDPOINT_STYLE_LIST,
                             currentValue: pointStyle,
                             onPick,
+                            std: ctx.std,
                         });
                     },
                 },
@@ -361,11 +373,15 @@ export const connectorToolbarConfig = {
                             key: translateKey(ctx.std, ...CONNECTOR_MODE_WORDING[item.value]),
                         }));
                         return renderMenu({
-                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_SHAPE),
-                            tooltip: translateKey(ctx.std, ...CONNECTOR_TOOLTIP_CONNECTOR_SHAPE),
+                            label: CONNECTOR_LABEL_SHAPE[1],
+                            labelWording: CONNECTOR_LABEL_SHAPE,
+                            menuAriaWording: CONNECTOR_SHAPE_MENU_ARIA,
+                            tooltip: CONNECTOR_TOOLTIP_CONNECTOR_SHAPE[1],
+                            tooltipWording: CONNECTOR_TOOLTIP_CONNECTOR_SHAPE,
                             items,
                             currentValue: mode,
                             onPick,
+                            std: ctx.std,
                         });
                     },
                 },

package/dist/_pkgs/affine-gfx-connector/translations.d.ts

@@ -20,9 +20,12 @@ export declare const CONNECTOR_LABEL_CONNECTOR: ChromeWording;
 export declare const CONNECTOR_LABEL_STROKE_STYLE: ChromeWording;
 export declare const CONNECTOR_LABEL_STYLE: ChromeWording;
 export declare const CONNECTOR_LABEL_START_POINT_STYLE: ChromeWording;
+export declare const CONNECTOR_START_POINT_STYLE_MENU_ARIA: ChromeWording;
 export declare const CONNECTOR_TOOLTIP_FLIP_DIRECTION: ChromeWording;
 export declare const CONNECTOR_LABEL_END_POINT_STYLE: ChromeWording;
+export declare const CONNECTOR_END_POINT_STYLE_MENU_ARIA: ChromeWording;
 export declare const CONNECTOR_LABEL_SHAPE: ChromeWording;
+export declare const CONNECTOR_SHAPE_MENU_ARIA: ChromeWording;
 export declare const CONNECTOR_TOOLTIP_CONNECTOR_SHAPE: ChromeWording;
 /**
  * "Add text" — the contextual-toolbar action AND the label editor's own

package/dist/_pkgs/affine-gfx-connector/translations.js

@@ -44,6 +44,18 @@ export const CONNECTOR_LABEL_START_POINT_STYLE = [
     'com.labre.connector.toolbar.start-point-style',
     'Start point style',
 ];
+/* ── The menu shells' accessible names (#390) ─────────────────────────────
+ *
+ * Each `aria-label` is its own wording rather than `` `${label}-menu` ``: the
+ * four labels above go through the seam, so the composition read "style de
+ * point de départ-menu" on a French host. Fallbacks are the exact identifiers
+ * the composition produced in English. The plain "Style" menu reuses the
+ * shared `MENU_ARIA_STYLE` — three toolbars draw that same menu.
+ */
+export const CONNECTOR_START_POINT_STYLE_MENU_ARIA = [
+    'com.labre.connector.toolbar.start-point-style-menu',
+    'start point style-menu',
+];
 export const CONNECTOR_TOOLTIP_FLIP_DIRECTION = [
     'com.labre.connector.toolbar.flip-direction',
     'Flip direction',
@@ -52,10 +64,18 @@ export const CONNECTOR_LABEL_END_POINT_STYLE = [
     'com.labre.connector.toolbar.end-point-style',
     'End point style',
 ];
+export const CONNECTOR_END_POINT_STYLE_MENU_ARIA = [
+    'com.labre.connector.toolbar.end-point-style-menu',
+    'end point style-menu',
+];
 export const CONNECTOR_LABEL_SHAPE = [
     'com.labre.connector.toolbar.shape',
     'Shape',
 ];
+export const CONNECTOR_SHAPE_MENU_ARIA = [
+    'com.labre.connector.toolbar.shape-menu',
+    'shape-menu',
+];
 export const CONNECTOR_TOOLTIP_CONNECTOR_SHAPE = [
     'com.labre.connector.toolbar.connector-shape',
     'Connector shape',
@@ -72,8 +92,11 @@ export const CONNECTOR_WORDINGS = [
     CONNECTOR_LABEL_CONNECTOR,
     CONNECTOR_LABEL_STROKE_STYLE,
     CONNECTOR_LABEL_START_POINT_STYLE,
+    CONNECTOR_START_POINT_STYLE_MENU_ARIA,
     CONNECTOR_TOOLTIP_FLIP_DIRECTION,
     CONNECTOR_LABEL_END_POINT_STYLE,
+    CONNECTOR_END_POINT_STYLE_MENU_ARIA,
     CONNECTOR_LABEL_SHAPE,
+    CONNECTOR_SHAPE_MENU_ARIA,
     CONNECTOR_TOOLTIP_CONNECTOR_SHAPE,
 ];

package/dist/_pkgs/affine-gfx-mindmap/indicator-overlay/index.js

@@ -1,7 +1,7 @@
 import { Overlay } from '../../affine-block-surface/index.js';
 import { PathGenerator } from '../../affine-gfx-connector/index.js';
 import { ConnectorMode, LayoutType, } from '../../affine-model/index.js';
-import { ThemeProvider } from '../../affine-shared/services/index.js';
+import { CHROME_ACCENT_CSS_VARIABLE, ThemeProvider, } from '../../affine-shared/services/index.js';
 import { isVecZero, PointLocation, toRadian, Vec, } from '../../global/gfx/index.js';
 import last from 'lodash-es/last.js';
 import { NODE_HORIZONTAL_SPACING, NODE_VERTICAL_SPACING } from '../view/layout.js';
@@ -101,7 +101,11 @@ export class MindMapIndicatorOverlay extends Overlay {
         }
         const targetPos = this.targetBound;
         const points = this._generatePath();
-        const color = this.themeService.getColorValue('--affine-primary-color', '#1E96EB', true);
+        // The accent read from the theme, not a literal: a canvas context cannot
+        // take a `var(…)`, so the token is resolved here (DESIGN.md, The Borrowed
+        // Blue Rule). The hex used to sit here as a `getColorValue` fallback that
+        // could never fire — the variable name always resolves.
+        const color = this.themeService.getCssVariableColor(CHROME_ACCENT_CSS_VARIABLE);
         ctx.strokeStyle = color;
         ctx.fillStyle = color;
         ctx.lineWidth = 3;

package/dist/_pkgs/affine-gfx-mindmap/toolbar/config.js

@@ -1,9 +1,9 @@
 import { hasGrouped } from '../../affine-gfx-shape/index.js';
 import { LayoutType, MindmapElementModel, MindmapStyle, ShapeElementModel, } from '../../affine-model/index.js';
-import { STYLE_MENU_LABEL, ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
+import { MENU_ARIA_STYLE, STYLE_MENU_LABEL, ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
 import { getMostCommonValue } from '../../affine-shared/utils/index.js';
 import { renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
-import { MINDMAP_LAYOUT_LABEL, MINDMAP_LAYOUT_LEFT, MINDMAP_LAYOUT_RADIAL, MINDMAP_LAYOUT_RIGHT, } from '../translations.js';
+import { MINDMAP_LAYOUT_LABEL, MINDMAP_LAYOUT_MENU_ARIA, MINDMAP_LAYOUT_LEFT, MINDMAP_LAYOUT_RADIAL, MINDMAP_LAYOUT_RIGHT, } from '../translations.js';
 import { RadiantIcon, RightLayoutIcon, StyleIcon } from '@blocksuite/icons/lit';
 import { BlockFlavourIdentifier } from '../../std/index.js';
 import { MindmapStyleFour, MindmapStyleOne, MindmapStyleThree, MindmapStyleTwo, } from '../view/index.js';
@@ -58,6 +58,7 @@ export const createMindmapStyleActionMenu = (ctx, models) => {
     return renderMenu({
         label: 'Style',
         labelWording: STYLE_MENU_LABEL,
+        menuAriaWording: MENU_ARIA_STYLE,
         icon: StyleIcon(),
         items: MINDMAP_STYLE_LIST,
         currentValue: style,
@@ -77,6 +78,7 @@ export const createMindmapLayoutActionMenu = (ctx, models) => {
     return renderMenu({
         label: 'Layout',
         labelWording: MINDMAP_LAYOUT_LABEL,
+        menuAriaWording: MINDMAP_LAYOUT_MENU_ARIA,
         items: MINDMAP_LAYOUT_LIST,
         currentValue: layoutType,
         onPick,

package/dist/_pkgs/affine-gfx-mindmap/translations.d.ts

@@ -57,6 +57,12 @@ export declare const MINDMAP_TEMPLATE_NAME_STYLE_2: ChromeWording;
 export declare const MINDMAP_TEMPLATE_NAME_STYLE_3: ChromeWording;
 export declare const MINDMAP_TEMPLATE_NAME_STYLE_4: ChromeWording;
 export declare const MINDMAP_LAYOUT_LABEL: ChromeWording;
+/**
+ * The accessible name of the layout menu SHELL (#390) — its own wording, not
+ * `` `${MINDMAP_LAYOUT_LABEL}-menu` ``, which read "disposition-menu" in
+ * French. The fallback is the exact identifier that composition produced.
+ */
+export declare const MINDMAP_LAYOUT_MENU_ARIA: ChromeWording;
 /**
  * The three layout directions — a different concept from `gfx/text`'s own
  * "Left" / "Right" text alignment (`TEXT_ALIGN_LEFT`/`RIGHT`), so kept as

package/dist/_pkgs/affine-gfx-mindmap/translations.js

@@ -102,6 +102,15 @@ export const MINDMAP_LAYOUT_LABEL = [
     'com.labre.mindmap.toolbar.layout',
     'Layout',
 ];
+/**
+ * The accessible name of the layout menu SHELL (#390) — its own wording, not
+ * `` `${MINDMAP_LAYOUT_LABEL}-menu` ``, which read "disposition-menu" in
+ * French. The fallback is the exact identifier that composition produced.
+ */
+export const MINDMAP_LAYOUT_MENU_ARIA = [
+    'com.labre.mindmap.toolbar.layout-menu',
+    'layout-menu',
+];
 /**
  * The three layout directions — a different concept from `gfx/text`'s own
  * "Left" / "Right" text alignment (`TEXT_ALIGN_LEFT`/`RIGHT`), so kept as
@@ -159,6 +168,7 @@ export const MINDMAP_CHROME_WORDINGS = [
     MINDMAP_TEMPLATE_NAME_STYLE_3,
     MINDMAP_TEMPLATE_NAME_STYLE_4,
     MINDMAP_LAYOUT_LABEL,
+    MINDMAP_LAYOUT_MENU_ARIA,
     MINDMAP_LAYOUT_LEFT,
     MINDMAP_LAYOUT_RADIAL,
     MINDMAP_LAYOUT_RIGHT,

package/dist/_pkgs/affine-gfx-shape/toolbar/config.js

@@ -2,7 +2,7 @@ import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
 import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
 import { createTextActions } from '../../affine-gfx-text/index.js';
 import { DefaultTheme, FontFamily, getShapeName, getShapeRadius, getShapeType, isTransparent, LineWidth, MindmapElementModel, resolveColor, ShapeElementModel, ShapeStyle, ShapeType, StrokeStyle, TextFitMode, } from '../../affine-model/index.js';
-import { STYLE_MENU_LABEL, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
+import { MENU_ARIA_STYLE, STYLE_MENU_LABEL, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
 import { getMostCommonValue } from '../../affine-shared/utils/index.js';
 import { getRootBlock, LINE_STYLE_LIST, renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { Bound } from '../../global/gfx/index.js';
@@ -15,7 +15,7 @@ import { ShapeElementView } from '../element-view.js';
 import { applyTextFitMode, nextTextFitMode } from '../text-fit.js';
 import { mountShapeTextEditor } from '../text/edgeless-shape-text-editor.js';
 import { ShapeComponentConfig } from './shape-menu-config.js';
-import { SHAPE_ADD_TEXT_TOOLTIP, SHAPE_EDIT_VERTICES_TOOLTIP, SHAPE_SWITCH_TYPE_LABEL, SHAPE_TEXT_FIT_ARIA, SHAPE_TEXT_FIT_CONTAINED, SHAPE_TEXT_FIT_GROW, SHAPE_TEXT_FIT_OVERFLOW, SHAPE_TEXT_FIT_TOOLTIP, } from '../translations.js';
+import { SHAPE_ADD_TEXT_TOOLTIP, SHAPE_EDIT_VERTICES_TOOLTIP, SHAPE_SWITCH_TYPE_LABEL, SHAPE_SWITCH_TYPE_MENU_ARIA, SHAPE_TEXT_FIT_ARIA, SHAPE_TEXT_FIT_CONTAINED, SHAPE_TEXT_FIT_GROW, SHAPE_TEXT_FIT_OVERFLOW, SHAPE_TEXT_FIT_TOOLTIP, } from '../translations.js';
 /** Icon + wording per text fit mode for the cycling toolbar button. */
 const TEXT_FIT_UI = {
     [TextFitMode.Grow]: { icon: AutoHeightIcon(), wording: SHAPE_TEXT_FIT_GROW },
@@ -60,6 +60,7 @@ export const shapeToolbarConfig = {
                     icon: ShapeIcon(),
                     label: 'Switch shape type',
                     labelWording: SHAPE_SWITCH_TYPE_LABEL,
+                    menuAriaWording: SHAPE_SWITCH_TYPE_MENU_ARIA,
                     items: ShapeComponentConfig.map(item => ({
                         key: item.tooltip,
                         keyWording: item.tooltipWording,
@@ -96,6 +97,7 @@ export const shapeToolbarConfig = {
                 return renderMenu({
                     label: 'Style',
                     labelWording: STYLE_MENU_LABEL,
+                    menuAriaWording: MENU_ARIA_STYLE,
                     items: LINE_STYLE_LIST,
                     currentValue: shapeStyle === ShapeStyle.Scribbled,
                     onPick,