@panphora/clayjs 1.23.0 → 1.24.1

package/src/page/board-style.js

@@ -1,135 +1,135 @@
 export const BOARD_CSS = `
-:where(article[data-page], .page-shell) { --page-board-lane: 274px; --page-board-gap: 14px; --page-board-radius: 8px; --page-board-panel: 360px; }
-.page-editor .page-board { margin-block: 1.1em 1.5em; font-size: 15px; line-height: 1.4; white-space: normal; }
-:is(.page-board, .page-board-panel) .i { flex: none; width: 16px; height: 16px; }
-.page-board-scroll { position: relative; margin: -4px -4px 0; padding: 4px 4px 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--page-chrome-ink-rest) transparent; }
-.page-board-lanes { display: flex; align-items: flex-start; gap: var(--page-board-gap); width: max-content; }
-.page-board-lane { flex: 0 0 var(--page-board-lane); width: var(--page-board-lane); min-width: 0; }
-.page-board-head { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 8px 0 7px; margin-bottom: 10px; border-bottom: 1px solid var(--page-rule); }
-.page-board-name { min-width: 0; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--page-ink-strong); font: 600 14px/20px var(--page-font-heading); overflow-wrap: anywhere; }
-.page-board-count { flex: none; color: var(--page-ink-soft); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
-.page-board-icon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-block: -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--page-ink-faint); cursor: pointer; transition: background-color var(--page-fade), color var(--page-fade); }
-.page-board-icon:hover, .page-board-icon[aria-expanded="true"] { background: var(--page-pop-hover); color: var(--page-ink-soft); }
-.page-board-icon:focus-visible { color: var(--page-ink-soft); }
-.page-board-colmenu { margin-inline: auto -4px; }
-.page-board-cards { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
-.page-board-cards > li { position: relative; }
-.page-board-card { display: block; width: 100%; margin: 0; padding: 10px 12px 11px; border: 1px solid var(--page-rule); border-radius: var(--page-board-radius); background: var(--page-pop-bg); color: var(--page-ink); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--page-fade), border-color var(--page-fade); }
-.page-board-card:hover { background-color: color-mix(in srgb, var(--page-pop-bg) 96%, var(--page-ink)); }
-.page-board-card[aria-expanded="true"] { border-color: var(--page-accent); box-shadow: inset 0 0 0 1px var(--page-accent); }
-.page-board-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 21px; overflow-wrap: anywhere; }
-.page-board-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--page-ink-soft); font-size: 13px; line-height: 20px; }
-.page-board-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
-.page-board-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.page-board-due { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
-.page-board-due[data-due="today"] { color: var(--page-ink); font-weight: 500; }
-.page-board-due[data-due="overdue"] { color: var(--page-ink); }
-.page-board-due[data-due="overdue"]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--page-danger); }
-.page-board-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-.page-board-add { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; margin-top: 6px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--page-ink-soft); font: inherit; font-size: 14px; text-align: start; cursor: pointer; transition: background-color var(--page-fade); }
-.page-board-add .i { width: 14px; height: 14px; color: var(--page-ink-faint); }
-.page-board-add:hover { background: var(--page-pop-hover); }
-.page-board-addcol { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; padding: 0; border: 1px solid var(--page-chrome-line-rest); border-radius: var(--page-chrome-radius); background: var(--page-chrome-bg-rest); color: var(--page-ink-faint); cursor: pointer; transition: color var(--page-fade), background-color var(--page-fade), border-color var(--page-fade); }
-.page-board-addcol:hover { border-color: var(--page-chrome-line-moved); background: var(--page-chrome-bg-moved); color: var(--page-ink-soft); }
-.page-board-addcol .i { width: 14px; height: 14px; }
-.page-board-tray { margin-bottom: 18px; padding: 6px 12px 12px; border-radius: 10px; background: var(--page-callout-bg); }
-.page-board-tray-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 4px; }
-.page-board-tray .page-board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
-.page-board-select { position: relative; display: block; min-width: 0; }
-.page-board-select > .i { position: absolute; inset-inline-end: 8px; top: 50%; margin-top: -8px; color: var(--page-ink-faint); pointer-events: none; }
-.page-board-select select { appearance: none; -webkit-appearance: none; padding-inline-end: 32px; text-overflow: ellipsis; }
-.page-board-move { margin-top: 6px; }
-.page-board-move select { width: 100%; min-height: 32px; padding-inline-start: 10px; border: 1px solid var(--page-pop-line); border-radius: 7px; background: var(--page-pop-bg); color: var(--page-ink); font: inherit; font-size: 14px; cursor: pointer; }
-.page-board-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--page-pop-line); border-radius: 7px; background: none; color: var(--page-pop-ink); font: inherit; font-size: 14px; cursor: pointer; transition: background-color var(--page-fade), color var(--page-fade); }
-.page-board-btn:hover { background: var(--page-pop-hover); }
-.page-board-btn .i { width: 14px; height: 14px; color: var(--page-pop-muted); }
-.page-board-btn:disabled { background: none; color: var(--page-ink-faint); cursor: default; }
-.page-board-btn:disabled .i { color: var(--page-ink-faint); }
-.page-board-restore { flex: none; margin-inline-start: auto; }
-.page-board-deleted { background: none; padding: 0; }
-.page-board-deleted-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
-.page-board-deleted-list { list-style: none; margin: 0; padding: 0 0 0 12px; }
-.page-board-deleted-item { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--page-ink-soft); }
-.page-board :is(button, select, input, textarea):focus-visible, .page-board-panel :is(button, select, input, textarea):focus-visible { outline: 2px solid var(--page-accent); outline-offset: 2px; }
-.page-board-pop { position: absolute; z-index: 6; padding: 6px; border: 1px solid var(--page-pop-line); border-radius: var(--page-pop-radius); background: var(--page-pop-bg); box-shadow: var(--page-pop-shadow); color: var(--page-pop-ink); font-size: 14px; line-height: 1.4; }
-.page-board-menu { top: calc(100% - 2px); inset-inline-end: -6px; width: 208px; }
-.page-board-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 4px 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
-.page-board-option:hover, .page-board-option[aria-selected="true"], .page-board-option[aria-pressed="true"] { background: var(--page-pop-hover); }
-.page-board-option > .i { color: var(--page-pop-muted); }
-.page-board-option.is-danger { color: var(--page-danger); }
-.page-board-option.is-danger > .i { color: inherit; }
-.page-board-option:disabled { color: var(--page-ink-faint); cursor: default; background: none; }
-.page-board-option:disabled > .i { color: var(--page-ink-faint); }
-.page-board-sep { height: 1px; margin: 4px 6px; background: var(--page-pop-line); }
-.page-board-rename { flex: 1 1 auto; min-width: 0; height: 28px; margin: -4px 0 -4px -6px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--page-pop-hover); color: var(--page-ink-strong); font: 600 14px/20px var(--page-font-heading); }
-.page-board-new { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--page-rule); border-radius: var(--page-board-radius); background: var(--page-pop-bg); color: var(--page-ink); font: 500 15px/21px var(--page-font); }
-.page-board-new::placeholder, .page-board-rename::placeholder { color: var(--page-ink-faint); font-weight: 400; }
-.page-board-card, .page-board-name, .page-board-count { -webkit-user-select: none; user-select: none; }
-.page-editor[contenteditable="true"] .page-board-head[data-col] .page-board-name { cursor: grab; }
-.page-board.is-dragging, .page-board.is-dragging * { cursor: grabbing; }
-.page-board .is-drag-source { opacity: 0.45; }
-.page-board-drop { height: 2px; margin-block: -5px; border-radius: 1px; background: var(--page-drop, var(--page-accent)); pointer-events: none; }
-.page-board-drop.is-column { flex: 0 0 2px; align-self: stretch; width: 2px; height: auto; margin-block: 0; margin-inline: calc((var(--page-board-gap) + 2px) / -2); }
-.page-board-ghost { position: fixed; z-index: 6; top: 0; left: 0; box-sizing: border-box; margin: 0; box-shadow: var(--page-pop-shadow); pointer-events: none; }
-.page-board-lane.page-board-ghost { padding: 0 10px 10px; border-radius: var(--page-board-radius); background: var(--page-bg); }
-.page-board-scrim { display: none; position: fixed; inset: 0; z-index: 4; background: var(--page-scrim); }
-.page-board-panel { position: fixed; z-index: 5; inset-block: 0; inset-inline-end: 0; width: var(--page-board-panel); box-sizing: border-box; overflow-y: auto; padding: 18px 20px 24px; border-inline-start: 1px solid var(--page-pop-line); background: var(--page-pop-bg); color: var(--page-pop-ink); font-family: var(--page-font); font-size: 15px; line-height: 1.4; }
-.page-shell.has-board-panel { padding-inline-end: calc(var(--page-board-panel) + 16px); }
-.page-board-panel-top { display: flex; align-items: flex-start; gap: 8px; }
-.page-board-panel-title { flex: 1 1 0; min-width: 0; margin: -4px 0 0 -8px; padding: 4px 8px; border: 0; border-radius: 7px; background: none; color: var(--page-ink-strong); font: 600 20px/28px var(--page-font-heading); field-sizing: content; resize: none; overflow: hidden; }
-.page-board-panel-title:hover { background: var(--page-pop-hover); }
-.page-board-close { width: 32px; height: 32px; margin: -2px -6px 0 0; color: var(--page-ink-soft); }
-.page-board-fields { margin: 18px 0 0; border-top: 1px solid var(--page-pop-line); }
-.page-board-field { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 44px; border-bottom: 1px solid var(--page-pop-line); }
-.page-board-field.is-owner { align-items: start; padding-block: 8px; }
-.page-board-field.is-owner .page-board-label { padding-top: 4px; }
-.page-board-label { color: var(--page-pop-muted); font-size: 14px; }
-.page-board-control { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 34px; margin: 0; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--page-pop-ink); font: inherit; font-size: 15px; text-align: start; cursor: pointer; transition: background-color var(--page-fade); }
-.page-board-control:hover { background: var(--page-pop-hover); }
-.page-board-control > .i:last-child { margin-inline-start: auto; color: var(--page-ink-faint); }
-.page-board-control-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.page-board-none { color: var(--page-ink-faint); }
-.page-board-control .page-board-due { margin: 0; color: var(--page-pop-ink); font-weight: 400; }
-.page-board-due-note { color: var(--page-pop-muted); font-size: 13px; }
-.page-board-control .page-board-due + .page-board-due-note { margin-inline-start: auto; }
-.page-board-control .page-board-due-note + .i { margin-inline-start: 0; }
-.page-board-date { border: 1px solid var(--page-pop-line); cursor: text; }
-.page-board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
-.page-board-delete { margin-inline-start: auto; border-color: transparent; color: var(--page-pop-muted); }
-.page-board-delete:hover { background: var(--page-pop-hover); color: var(--page-danger); }
-.page-board-delete:hover .i { color: inherit; }
+:where(article[data-blockeditor], .blockeditor-shell) { --blockeditor-board-lane: 274px; --blockeditor-board-gap: 14px; --blockeditor-board-radius: 8px; --blockeditor-board-panel: 360px; }
+.blockeditor-editor .blockeditor-board { margin-block: 1.1em 1.5em; font-size: 15px; line-height: 1.4; white-space: normal; }
+:is(.blockeditor-board, .blockeditor-board-panel) .i { flex: none; width: 16px; height: 16px; }
+.blockeditor-board-scroll { position: relative; margin: -4px -4px 0; padding: 4px 4px 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--blockeditor-chrome-ink-rest) transparent; }
+.blockeditor-board-lanes { display: flex; align-items: flex-start; gap: var(--blockeditor-board-gap); width: max-content; }
+.blockeditor-board-lane { flex: 0 0 var(--blockeditor-board-lane); width: var(--blockeditor-board-lane); min-width: 0; }
+.blockeditor-board-head { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 8px 0 7px; margin-bottom: 10px; border-bottom: 1px solid var(--blockeditor-rule); }
+.blockeditor-board-name { min-width: 0; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--blockeditor-ink-strong); font: 600 14px/20px var(--blockeditor-font-heading); overflow-wrap: anywhere; }
+.blockeditor-board-count { flex: none; color: var(--blockeditor-ink-soft); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
+.blockeditor-board-icon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-block: -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--blockeditor-ink-faint); cursor: pointer; transition: background-color var(--blockeditor-fade), color var(--blockeditor-fade); }
+.blockeditor-board-icon:hover, .blockeditor-board-icon[aria-expanded="true"] { background: var(--blockeditor-pop-hover); color: var(--blockeditor-ink-soft); }
+.blockeditor-board-icon:focus-visible { color: var(--blockeditor-ink-soft); }
+.blockeditor-board-colmenu { margin-inline: auto -4px; }
+.blockeditor-board-cards { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.blockeditor-board-cards > li { position: relative; }
+.blockeditor-board-card { display: block; width: 100%; margin: 0; padding: 10px 12px 11px; border: 1px solid var(--blockeditor-rule); border-radius: var(--blockeditor-board-radius); background: var(--blockeditor-pop-bg); color: var(--blockeditor-ink); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--blockeditor-fade), border-color var(--blockeditor-fade); }
+.blockeditor-board-card:hover { background-color: color-mix(in srgb, var(--blockeditor-pop-bg) 96%, var(--blockeditor-ink)); }
+.blockeditor-board-card[aria-expanded="true"] { border-color: var(--blockeditor-accent); box-shadow: inset 0 0 0 1px var(--blockeditor-accent); }
+.blockeditor-board-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 21px; overflow-wrap: anywhere; }
+.blockeditor-board-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--blockeditor-ink-soft); font-size: 13px; line-height: 20px; }
+.blockeditor-board-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.blockeditor-board-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.blockeditor-board-due { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.blockeditor-board-due[data-due="today"] { color: var(--blockeditor-ink); font-weight: 500; }
+.blockeditor-board-due[data-due="overdue"] { color: var(--blockeditor-ink); }
+.blockeditor-board-due[data-due="overdue"]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blockeditor-danger); }
+.blockeditor-board-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.blockeditor-board-add { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; margin-top: 6px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--blockeditor-ink-soft); font: inherit; font-size: 14px; text-align: start; cursor: pointer; transition: background-color var(--blockeditor-fade); }
+.blockeditor-board-add .i { width: 14px; height: 14px; color: var(--blockeditor-ink-faint); }
+.blockeditor-board-add:hover { background: var(--blockeditor-pop-hover); }
+.blockeditor-board-addcol { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; padding: 0; border: 1px solid var(--blockeditor-chrome-line-rest); border-radius: var(--blockeditor-chrome-radius); background: var(--blockeditor-chrome-bg-rest); color: var(--blockeditor-ink-faint); cursor: pointer; transition: color var(--blockeditor-fade), background-color var(--blockeditor-fade), border-color var(--blockeditor-fade); }
+.blockeditor-board-addcol:hover { border-color: var(--blockeditor-chrome-line-moved); background: var(--blockeditor-chrome-bg-moved); color: var(--blockeditor-ink-soft); }
+.blockeditor-board-addcol .i { width: 14px; height: 14px; }
+.blockeditor-board-tray { margin-bottom: 18px; padding: 6px 12px 12px; border-radius: 10px; background: var(--blockeditor-callout-bg); }
+.blockeditor-board-tray-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 4px; }
+.blockeditor-board-tray .blockeditor-board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
+.blockeditor-board-select { position: relative; display: block; min-width: 0; }
+.blockeditor-board-select > .i { position: absolute; inset-inline-end: 8px; top: 50%; margin-top: -8px; color: var(--blockeditor-ink-faint); pointer-events: none; }
+.blockeditor-board-select select { appearance: none; -webkit-appearance: none; padding-inline-end: 32px; text-overflow: ellipsis; }
+.blockeditor-board-move { margin-top: 6px; }
+.blockeditor-board-move select { width: 100%; min-height: 32px; padding-inline-start: 10px; border: 1px solid var(--blockeditor-pop-line); border-radius: 7px; background: var(--blockeditor-pop-bg); color: var(--blockeditor-ink); font: inherit; font-size: 14px; cursor: pointer; }
+.blockeditor-board-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--blockeditor-pop-line); border-radius: 7px; background: none; color: var(--blockeditor-pop-ink); font: inherit; font-size: 14px; cursor: pointer; transition: background-color var(--blockeditor-fade), color var(--blockeditor-fade); }
+.blockeditor-board-btn:hover { background: var(--blockeditor-pop-hover); }
+.blockeditor-board-btn .i { width: 14px; height: 14px; color: var(--blockeditor-pop-muted); }
+.blockeditor-board-btn:disabled { background: none; color: var(--blockeditor-ink-faint); cursor: default; }
+.blockeditor-board-btn:disabled .i { color: var(--blockeditor-ink-faint); }
+.blockeditor-board-restore { flex: none; margin-inline-start: auto; }
+.blockeditor-board-deleted { background: none; padding: 0; }
+.blockeditor-board-deleted-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+.blockeditor-board-deleted-list { list-style: none; margin: 0; padding: 0 0 0 12px; }
+.blockeditor-board-deleted-item { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--blockeditor-ink-soft); }
+.blockeditor-board :is(button, select, input, textarea):focus-visible, .blockeditor-board-panel :is(button, select, input, textarea):focus-visible { outline: 2px solid var(--blockeditor-accent); outline-offset: 2px; }
+.blockeditor-board-pop { position: absolute; z-index: 6; padding: 6px; border: 1px solid var(--blockeditor-pop-line); border-radius: var(--blockeditor-pop-radius); background: var(--blockeditor-pop-bg); box-shadow: var(--blockeditor-pop-shadow); color: var(--blockeditor-pop-ink); font-size: 14px; line-height: 1.4; }
+.blockeditor-board-menu { top: calc(100% - 2px); inset-inline-end: -6px; width: 208px; }
+.blockeditor-board-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 4px 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+.blockeditor-board-option:hover, .blockeditor-board-option[aria-selected="true"], .blockeditor-board-option[aria-pressed="true"] { background: var(--blockeditor-pop-hover); }
+.blockeditor-board-option > .i { color: var(--blockeditor-pop-muted); }
+.blockeditor-board-option.is-danger { color: var(--blockeditor-danger); }
+.blockeditor-board-option.is-danger > .i { color: inherit; }
+.blockeditor-board-option:disabled { color: var(--blockeditor-ink-faint); cursor: default; background: none; }
+.blockeditor-board-option:disabled > .i { color: var(--blockeditor-ink-faint); }
+.blockeditor-board-sep { height: 1px; margin: 4px 6px; background: var(--blockeditor-pop-line); }
+.blockeditor-board-rename { flex: 1 1 auto; min-width: 0; height: 28px; margin: -4px 0 -4px -6px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--blockeditor-pop-hover); color: var(--blockeditor-ink-strong); font: 600 14px/20px var(--blockeditor-font-heading); }
+.blockeditor-board-new { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--blockeditor-rule); border-radius: var(--blockeditor-board-radius); background: var(--blockeditor-pop-bg); color: var(--blockeditor-ink); font: 500 15px/21px var(--blockeditor-font); }
+.blockeditor-board-new::placeholder, .blockeditor-board-rename::placeholder { color: var(--blockeditor-ink-faint); font-weight: 400; }
+.blockeditor-board-card, .blockeditor-board-name, .blockeditor-board-count { -webkit-user-select: none; user-select: none; }
+.blockeditor-editor[contenteditable="true"] .blockeditor-board-head[data-col] .blockeditor-board-name { cursor: grab; }
+.blockeditor-board.is-dragging, .blockeditor-board.is-dragging * { cursor: grabbing; }
+.blockeditor-board .is-drag-source { opacity: 0.45; }
+.blockeditor-board-drop { height: 2px; margin-block: -5px; border-radius: 1px; background: var(--blockeditor-drop, var(--blockeditor-accent)); pointer-events: none; }
+.blockeditor-board-drop.is-column { flex: 0 0 2px; align-self: stretch; width: 2px; height: auto; margin-block: 0; margin-inline: calc((var(--blockeditor-board-gap) + 2px) / -2); }
+.blockeditor-board-ghost { position: fixed; z-index: 6; top: 0; left: 0; box-sizing: border-box; margin: 0; box-shadow: var(--blockeditor-pop-shadow); pointer-events: none; }
+.blockeditor-board-lane.blockeditor-board-ghost { padding: 0 10px 10px; border-radius: var(--blockeditor-board-radius); background: var(--blockeditor-bg); }
+.blockeditor-board-scrim { display: none; position: fixed; inset: 0; z-index: 4; background: var(--blockeditor-scrim); }
+.blockeditor-board-panel { position: fixed; z-index: 5; inset-block: 0; inset-inline-end: 0; width: var(--blockeditor-board-panel); box-sizing: border-box; overflow-y: auto; padding: 18px 20px 24px; border-inline-start: 1px solid var(--blockeditor-pop-line); background: var(--blockeditor-pop-bg); color: var(--blockeditor-pop-ink); font-family: var(--blockeditor-font); font-size: 15px; line-height: 1.4; }
+.blockeditor-shell.has-board-panel { padding-inline-end: calc(var(--blockeditor-board-panel) + 16px); }
+.blockeditor-board-panel-top { display: flex; align-items: flex-start; gap: 8px; }
+.blockeditor-board-panel-title { flex: 1 1 0; min-width: 0; margin: -4px 0 0 -8px; padding: 4px 8px; border: 0; border-radius: 7px; background: none; color: var(--blockeditor-ink-strong); font: 600 20px/28px var(--blockeditor-font-heading); field-sizing: content; resize: none; overflow: hidden; }
+.blockeditor-board-panel-title:hover { background: var(--blockeditor-pop-hover); }
+.blockeditor-board-close { width: 32px; height: 32px; margin: -2px -6px 0 0; color: var(--blockeditor-ink-soft); }
+.blockeditor-board-fields { margin: 18px 0 0; border-top: 1px solid var(--blockeditor-pop-line); }
+.blockeditor-board-field { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 44px; border-bottom: 1px solid var(--blockeditor-pop-line); }
+.blockeditor-board-field.is-owner { align-items: start; padding-block: 8px; }
+.blockeditor-board-field.is-owner .blockeditor-board-label { padding-top: 4px; }
+.blockeditor-board-label { color: var(--blockeditor-pop-muted); font-size: 14px; }
+.blockeditor-board-control { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 34px; margin: 0; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--blockeditor-pop-ink); font: inherit; font-size: 15px; text-align: start; cursor: pointer; transition: background-color var(--blockeditor-fade); }
+.blockeditor-board-control:hover { background: var(--blockeditor-pop-hover); }
+.blockeditor-board-control > .i:last-child { margin-inline-start: auto; color: var(--blockeditor-ink-faint); }
+.blockeditor-board-control-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.blockeditor-board-none { color: var(--blockeditor-ink-faint); }
+.blockeditor-board-control .blockeditor-board-due { margin: 0; color: var(--blockeditor-pop-ink); font-weight: 400; }
+.blockeditor-board-due-note { color: var(--blockeditor-pop-muted); font-size: 13px; }
+.blockeditor-board-control .blockeditor-board-due + .blockeditor-board-due-note { margin-inline-start: auto; }
+.blockeditor-board-control .blockeditor-board-due-note + .i { margin-inline-start: 0; }
+.blockeditor-board-date { border: 1px solid var(--blockeditor-pop-line); cursor: text; }
+.blockeditor-board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
+.blockeditor-board-delete { margin-inline-start: auto; border-color: transparent; color: var(--blockeditor-pop-muted); }
+.blockeditor-board-delete:hover { background: var(--blockeditor-pop-hover); color: var(--blockeditor-danger); }
+.blockeditor-board-delete:hover .i { color: inherit; }
 @media (max-width: 1039.98px) {
-  .page-shell.has-board-panel { padding-inline-end: 16px; }
-  .page-board-scrim { display: block; }
-  .page-board-panel { inset: auto 0 0 0; width: auto; max-width: 640px; max-height: 85%; margin-inline: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border: 1px solid var(--page-pop-line); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: var(--page-pop-shadow); }
-  .page-board-close { width: 44px; height: 44px; margin: -8px -10px 0 0; }
-  .page-board-panel-top { min-height: 36px; }
-  .page-board-field { min-height: 48px; }
-  .page-board-control { min-height: 44px; }
-  .page-board-actions { margin-top: 16px; }
-  .page-board-actions .page-board-btn { flex: 1 1 0; min-height: 44px; }
-  .page-board-actions .page-board-delete { flex: 1 1 100%; margin-inline-start: 0; }
+  .blockeditor-shell.has-board-panel { padding-inline-end: 16px; }
+  .blockeditor-board-scrim { display: block; }
+  .blockeditor-board-panel { inset: auto 0 0 0; width: auto; max-width: 640px; max-height: 85%; margin-inline: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border: 1px solid var(--blockeditor-pop-line); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: var(--blockeditor-pop-shadow); }
+  .blockeditor-board-close { width: 44px; height: 44px; margin: -8px -10px 0 0; }
+  .blockeditor-board-panel-top { min-height: 36px; }
+  .blockeditor-board-field { min-height: 48px; }
+  .blockeditor-board-control { min-height: 44px; }
+  .blockeditor-board-actions { margin-top: 16px; }
+  .blockeditor-board-actions .blockeditor-board-btn { flex: 1 1 0; min-height: 44px; }
+  .blockeditor-board-actions .blockeditor-board-delete { flex: 1 1 100%; margin-inline-start: 0; }
 }
 @media (max-width: 560px) {
-  .page-board-scroll { scroll-snap-type: x proximity; scroll-padding-inline: 4px; }
-  .page-board-lane { scroll-snap-align: start; }
-  .page-board-head { padding: 12px 0 11px; }
-  .page-board-head .page-board-icon { width: 44px; height: 44px; margin-block: -12px; }
-  .page-board-colmenu { margin-inline-end: -12px; }
-  .page-board-card { min-height: 44px; padding: 12px 14px 13px; }
-  .page-board-add { min-height: 44px; padding-inline: 14px; }
-  .page-board-addcol { width: 44px; height: 44px; margin-top: 0; }
-  .page-board-tray-head { min-height: 48px; }
-  .page-board-move select, .page-board-btn { min-height: 44px; }
-  .page-board-move select, .page-board-new { font-size: 16px; }
-  .page-board-option { min-height: 44px; }
-  .page-board-rename { height: 44px; margin-block: -12px; font-size: 16px; }
-  .page-board-panel { border-width: 1px 0 0; }
-  .page-board-panel-title { margin-top: -8px; padding-block: 8px; }
-  .page-board-control { font-size: 16px; }
-  .page-board-label { font-size: 15px; }
+  .blockeditor-board-scroll { scroll-snap-type: x proximity; scroll-padding-inline: 4px; }
+  .blockeditor-board-lane { scroll-snap-align: start; }
+  .blockeditor-board-head { padding: 12px 0 11px; }
+  .blockeditor-board-head .blockeditor-board-icon { width: 44px; height: 44px; margin-block: -12px; }
+  .blockeditor-board-colmenu { margin-inline-end: -12px; }
+  .blockeditor-board-card { min-height: 44px; padding: 12px 14px 13px; }
+  .blockeditor-board-add { min-height: 44px; padding-inline: 14px; }
+  .blockeditor-board-addcol { width: 44px; height: 44px; margin-top: 0; }
+  .blockeditor-board-tray-head { min-height: 48px; }
+  .blockeditor-board-move select, .blockeditor-board-btn { min-height: 44px; }
+  .blockeditor-board-move select, .blockeditor-board-new { font-size: 16px; }
+  .blockeditor-board-option { min-height: 44px; }
+  .blockeditor-board-rename { height: 44px; margin-block: -12px; font-size: 16px; }
+  .blockeditor-board-panel { border-width: 1px 0 0; }
+  .blockeditor-board-panel-title { margin-top: -8px; padding-block: 8px; }
+  .blockeditor-board-control { font-size: 16px; }
+  .blockeditor-board-label { font-size: 15px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .page-board-icon, .page-board-card, .page-board-add, .page-board-addcol, .page-board-btn, .page-board-control { transition: none; }
+  .blockeditor-board-icon, .blockeditor-board-card, .blockeditor-board-add, .blockeditor-board-addcol, .blockeditor-board-btn, .blockeditor-board-control { transition: none; }
 }
 `;

package/src/page/board-view.js

@@ -55,15 +55,15 @@ export function dueLabel(due, today = todayKey(), long = false) {
   return new Date(`${due}T00:00:00Z`).toLocaleDateString("en-US", { ...(long ? { weekday: "short" } : {}), month: "short", day: "numeric", ...(sameYear ? {} : { year: "numeric" }), timeZone: "UTC" });
 }
 export const placeAfter = (ids, index) => (index >= 2 ? ids[index - 2] : null);
-const countOf = (doc, n) => el(doc, "span", "page-board-count", { "aria-label": `${n} ${n === 1 ? "card" : "cards"}` }, String(n));
+const countOf = (doc, n) => el(doc, "span", "blockeditor-board-count", { "aria-label": `${n} ${n === 1 ? "card" : "cards"}` }, String(n));
 const isTyping = (target) => /^(INPUT|TEXTAREA|SELECT)$/.test(target?.tagName ?? "");
 
 function dueBadge(doc, due) {
   const today = todayKey();
   const state = dueState(due, today);
-  const badge = el(doc, "span", "page-board-due", { "data-due": state });
-  badge.append(el(doc, "span", "page-board-sr", {}, "Due "), doc.createTextNode(dueLabel(due, today)));
-  if (state === "overdue") badge.append(el(doc, "span", "page-board-sr", {}, ", overdue"));
+  const badge = el(doc, "span", "blockeditor-board-due", { "data-due": state });
+  badge.append(el(doc, "span", "blockeditor-board-sr", {}, "Due "), doc.createTextNode(dueLabel(due, today)));
+  if (state === "overdue") badge.append(el(doc, "span", "blockeditor-board-sr", {}, ", overdue"));
   return badge;
 }
 
@@ -76,7 +76,7 @@ export class BoardView {
     this.undo = undo;
     this.redo = redo;
     this.panel = panel;
-    this.uid = `page-board-${++boards}`;
+    this.uid = `blockeditor-board-${++boards}`;
     this.menu = null;
     const views = boardViews.get(view) ?? new Map();
     boardViews.set(view, views);
@@ -84,11 +84,11 @@ export class BoardView {
     this.editing = null;
     this.rendering = false;
     const doc = view.dom.ownerDocument;
-    this.dom = el(doc, "div", "page-board", { "data-type": "board", "data-id": node.attrs.id ?? "", role: "group", "aria-label": "Board" });
+    this.dom = el(doc, "div", "blockeditor-board", { "data-type": "board", "data-id": node.attrs.id ?? "", role: "group", "aria-label": "Board" });
     this.dom.contentEditable = "false";
-    this.trays = el(doc, "div", "page-board-trays");
-    this.scroll = el(doc, "div", "page-board-scroll");
-    this.lanes = el(doc, "div", "page-board-lanes");
+    this.trays = el(doc, "div", "blockeditor-board-trays");
+    this.scroll = el(doc, "div", "blockeditor-board-scroll");
+    this.lanes = el(doc, "div", "blockeditor-board-lanes");
     this.scroll.append(this.lanes);
     this.dom.append(this.trays, this.scroll);
     this.dom.addEventListener("click", (event) => this.click(event));
@@ -133,7 +133,7 @@ export class BoardView {
       else this.showDeleted = false;
       const lanes = this.board.columnIds.map((id, index) => this.lane(id, index));
       if (this.editing?.kind === "column") lanes.push(this.newLane());
-      else lanes.push(iconButton(doc, "page-board-addcol", "plus", null, { "aria-label": "Add column", title: "Add column", "data-action": "add-column", "data-focus": "add-column" }));
+      else lanes.push(iconButton(doc, "blockeditor-board-addcol", "plus", null, { "aria-label": "Add column", title: "Add column", "data-action": "add-column", "data-focus": "add-column" }));
       this.lanes.replaceChildren(...lanes);
       if (key && this.focusKey(key) && range) doc.activeElement.setSelectionRange?.(...range);
       this.dragger?.repaint();
@@ -147,16 +147,16 @@ export class BoardView {
     const ids = this.board.lanes.get(colId);
     const name = this.board.columns[colId].name || "Untitled";
     const headingId = `${this.uid}-col-${index}`;
-    const lane = el(doc, "div", "page-board-lane", { role: "group", "aria-labelledby": headingId, "data-col": colId });
-    const head = el(doc, "div", "page-board-head", { "data-col": colId });
+    const lane = el(doc, "div", "blockeditor-board-lane", { role: "group", "aria-labelledby": headingId, "data-col": colId });
+    const head = el(doc, "div", "blockeditor-board-head", { "data-col": colId });
     const renaming = this.editing?.kind === "rename" && this.editing.id === colId;
-    if (renaming) head.append(this.editing.input, el(doc, "span", "page-board-name page-board-sr", { id: headingId }, name), countOf(doc, ids.length));
+    if (renaming) head.append(this.editing.input, el(doc, "span", "blockeditor-board-name blockeditor-board-sr", { id: headingId }, name), countOf(doc, ids.length));
     else {
-      head.append(el(doc, "h4", "page-board-name", { id: headingId }, name), countOf(doc, ids.length));
-      head.append(iconButton(doc, "page-board-icon page-board-colmenu", "more", null, { "aria-haspopup": "menu", "aria-expanded": String(this.menu === colId), "aria-label": `${name} column options`, "data-action": "colmenu", "data-col": colId, "data-focus": `colmenu:${colId}` }));
+      head.append(el(doc, "h4", "blockeditor-board-name", { id: headingId }, name), countOf(doc, ids.length));
+      head.append(iconButton(doc, "blockeditor-board-icon blockeditor-board-colmenu", "more", null, { "aria-haspopup": "menu", "aria-expanded": String(this.menu === colId), "aria-label": `${name} column options`, "data-action": "colmenu", "data-col": colId, "data-focus": `colmenu:${colId}` }));
       if (this.menu === colId) head.append(this.columnMenu(colId, index, name));
     }
-    const list = el(doc, "ol", "page-board-cards");
+    const list = el(doc, "ol", "blockeditor-board-cards");
     for (const id of ids) {
       const item = el(doc, "li");
       item.append(this.card(id));
@@ -164,14 +164,14 @@ export class BoardView {
     }
     lane.append(head, list);
     if (this.editing?.kind === "card" && this.editing.id === colId) lane.append(this.editing.input);
-    else lane.append(iconButton(doc, "page-board-add", "plus", "Add card", { "data-action": "add-card", "data-col": colId, "data-focus": `add:${colId}` }));
+    else lane.append(iconButton(doc, "blockeditor-board-add", "plus", "Add card", { "data-action": "add-card", "data-col": colId, "data-focus": `add:${colId}` }));
     return lane;
   }
 
   newLane() {
     const doc = this.dom.ownerDocument;
-    const lane = el(doc, "div", "page-board-lane", { role: "group", "aria-label": "New column" });
-    const head = el(doc, "div", "page-board-head");
+    const lane = el(doc, "div", "blockeditor-board-lane", { role: "group", "aria-label": "New column" });
+    const head = el(doc, "div", "blockeditor-board-head");
     head.append(this.editing.input);
     lane.append(head);
     return lane;
@@ -180,13 +180,13 @@ export class BoardView {
   card(id) {
     const doc = this.dom.ownerDocument;
     const card = this.board.cards[id];
-    const button = el(doc, "button", "page-board-card", { type: "button", "aria-haspopup": "dialog", "aria-expanded": String(this.isOpen(id)), "data-action": "card", "data-card": id, "data-focus": `card:${id}` });
-    button.append(el(doc, "span", "page-board-title", {}, card.title || "Untitled"));
+    const button = el(doc, "button", "blockeditor-board-card", { type: "button", "aria-haspopup": "dialog", "aria-expanded": String(this.isOpen(id)), "data-action": "card", "data-card": id, "data-focus": `card:${id}` });
+    button.append(el(doc, "span", "blockeditor-board-title", {}, card.title || "Untitled"));
     if (card.owner || card.due) {
-      const meta = el(doc, "span", "page-board-meta");
+      const meta = el(doc, "span", "blockeditor-board-meta");
       if (card.owner) {
-        const owner = el(doc, "span", "page-board-owner");
-        owner.append(cardFace(doc, card.owner), el(doc, "span", "page-board-owner-name", {}, card.owner));
+        const owner = el(doc, "span", "blockeditor-board-owner");
+        owner.append(cardFace(doc, card.owner), el(doc, "span", "blockeditor-board-owner-name", {}, card.owner));
         meta.append(owner);
       }
       if (card.due) meta.append(dueBadge(doc, card.due));
@@ -198,11 +198,11 @@ export class BoardView {
   tray(col, ids, index, removed) {
     const doc = this.dom.ownerDocument;
     const headingId = `${this.uid}-missing-${index}`;
-    const tray = el(doc, "div", "page-board-tray", { role: "group", "aria-labelledby": headingId, "data-col": col });
-    const head = el(doc, "div", "page-board-tray-head");
-    head.append(el(doc, "h4", "page-board-name", { id: headingId }, removed ? `Cards from deleted column “${removed.name || "Untitled"}”` : "Cards from a deleted column"), countOf(doc, ids.length));
-    if (removed) head.append(iconButton(doc, "page-board-btn page-board-restore", "restore", "Restore column", { "data-action": "restore-column", "data-col": col, "data-focus": `restore:${col}` }));
-    const list = el(doc, "ol", "page-board-cards");
+    const tray = el(doc, "div", "blockeditor-board-tray", { role: "group", "aria-labelledby": headingId, "data-col": col });
+    const head = el(doc, "div", "blockeditor-board-tray-head");
+    head.append(el(doc, "h4", "blockeditor-board-name", { id: headingId }, removed ? `Cards from deleted column “${removed.name || "Untitled"}”` : "Cards from a deleted column"), countOf(doc, ids.length));
+    if (removed) head.append(iconButton(doc, "blockeditor-board-btn blockeditor-board-restore", "restore", "Restore column", { "data-action": "restore-column", "data-col": col, "data-focus": `restore:${col}` }));
+    const list = el(doc, "ol", "blockeditor-board-cards");
     for (const id of ids) {
       const item = el(doc, "li");
       item.append(this.card(id), this.moveSelect(id));
@@ -214,16 +214,16 @@ export class BoardView {
 
   deletedTray(ids, cards) {
     const doc = this.dom.ownerDocument;
-    const tray = el(doc, "div", "page-board-tray page-board-deleted", { role: "group", "aria-label": "Deleted cards" });
-    const head = el(doc, "div", "page-board-tray-head");
-    head.append(iconButton(doc, "page-board-btn page-board-deleted-toggle", "chevron", `Deleted cards (${ids.length})`, { "aria-expanded": String(!!this.showDeleted), "data-action": "toggle-deleted", "data-focus": "toggle-deleted" }));
+    const tray = el(doc, "div", "blockeditor-board-tray blockeditor-board-deleted", { role: "group", "aria-label": "Deleted cards" });
+    const head = el(doc, "div", "blockeditor-board-tray-head");
+    head.append(iconButton(doc, "blockeditor-board-btn blockeditor-board-deleted-toggle", "chevron", `Deleted cards (${ids.length})`, { "aria-expanded": String(!!this.showDeleted), "data-action": "toggle-deleted", "data-focus": "toggle-deleted" }));
     tray.append(head);
     if (!this.showDeleted) return tray;
-    const list = el(doc, "ol", "page-board-deleted-list");
+    const list = el(doc, "ol", "blockeditor-board-deleted-list");
     for (const id of ids.sort((a, b) => (cards[a].pos ?? "") < (cards[b].pos ?? "") ? -1 : 1)) {
       const title = cards[id].title || "Untitled";
-      const item = el(doc, "li", "page-board-deleted-item");
-      item.append(el(doc, "span", "page-board-title", {}, title), iconButton(doc, "page-board-btn page-board-restore", "restore", "Restore", { "aria-label": `Restore ${title}`, "data-action": "restore-card", "data-card": id, "data-focus": `restore-card:${id}` }));
+      const item = el(doc, "li", "blockeditor-board-deleted-item");
+      item.append(el(doc, "span", "blockeditor-board-title", {}, title), iconButton(doc, "blockeditor-board-btn blockeditor-board-restore", "restore", "Restore", { "aria-label": `Restore ${title}`, "data-action": "restore-card", "data-card": id, "data-focus": `restore-card:${id}` }));
       list.append(item);
     }
     tray.append(list);
@@ -232,7 +232,7 @@ export class BoardView {
 
   moveSelect(id) {
     const doc = this.dom.ownerDocument;
-    const wrap = el(doc, "span", "page-board-select page-board-move");
+    const wrap = el(doc, "span", "blockeditor-board-select blockeditor-board-move");
     const select = el(doc, "select", null, { "aria-label": `Move ${this.board.cards[id].title || "Untitled"} to column`, "data-action": "orphan-move", "data-card": id, "data-focus": `move:${id}`, disabled: !this.board.columnIds.length });
     select.append(el(doc, "option", null, { value: "", selected: true, disabled: true, hidden: true }, "Move to column"));
     for (const col of this.board.columnIds) select.append(el(doc, "option", null, { value: col }, this.board.columns[col].name || "Untitled"));
@@ -244,9 +244,9 @@ export class BoardView {
   columnMenu(colId, index, name) {
     const doc = this.dom.ownerDocument;
     const last = this.board.columnIds.length - 1;
-    const menu = el(doc, "div", "page-board-pop page-board-menu", { role: "menu", "aria-label": `${name} column` });
-    const item = (action, label, icon, disabled = false) => iconButton(doc, `page-board-option${action === "delete-column" ? " is-danger" : ""}`, icon, label, { role: "menuitem", "data-action": action, "data-col": colId, "data-focus": `${action}:${colId}`, disabled });
-    menu.append(item("rename", "Rename", "pencil"), item("left", "Move left", "left", index === 0), item("right", "Move right", "right", index === last), el(doc, "div", "page-board-sep", { role: "separator" }), item("delete-column", "Delete column", "trash"));
+    const menu = el(doc, "div", "blockeditor-board-pop blockeditor-board-menu", { role: "menu", "aria-label": `${name} column` });
+    const item = (action, label, icon, disabled = false) => iconButton(doc, `blockeditor-board-option${action === "delete-column" ? " is-danger" : ""}`, icon, label, { role: "menuitem", "data-action": action, "data-col": colId, "data-focus": `${action}:${colId}`, disabled });
+    menu.append(item("rename", "Rename", "pencil"), item("left", "Move left", "left", index === 0), item("right", "Move right", "right", index === last), el(doc, "div", "blockeditor-board-sep", { role: "separator" }), item("delete-column", "Delete column", "trash"));
     return menu;
   }
 
@@ -255,19 +255,19 @@ export class BoardView {
   openMenu(colId) {
     this.menu = colId;
     this.render();
-    this.dom.querySelector(".page-board-menu .page-board-option:not(:disabled)")?.focus();
+    this.dom.querySelector(".blockeditor-board-menu .blockeditor-board-option:not(:disabled)")?.focus();
   }
 
   closeMenu(refocus) {
     const colId = this.menu;
     this.menu = null;
-    this.dom.querySelector(".page-board-menu")?.remove();
-    for (const button of this.dom.querySelectorAll(".page-board-colmenu")) button.setAttribute("aria-expanded", "false");
+    this.dom.querySelector(".blockeditor-board-menu")?.remove();
+    for (const button of this.dom.querySelectorAll(".blockeditor-board-colmenu")) button.setAttribute("aria-expanded", "false");
     if (refocus) this.focusKey(`colmenu:${colId}`);
   }
 
   inlineInput(cls, label, key, value = "") {
-    const input = el(this.dom.ownerDocument, "input", cls, { type: "text", "aria-label": label, "data-focus": key, placeholder: cls === "page-board-new" ? "Card title" : "Column name" });
+    const input = el(this.dom.ownerDocument, "input", cls, { type: "text", "aria-label": label, "data-focus": key, placeholder: cls === "blockeditor-board-new" ? "Card title" : "Column name" });
     input.value = value;
     input.addEventListener("keydown", (event) => {
       if (event.isComposing || event.keyCode === 229) return;
@@ -286,7 +286,7 @@ export class BoardView {
     this.menu = null;
     const name = kind === "rename" ? this.board.columns[colId]?.name ?? "" : "";
     const key = kind === "card" ? `new:${colId}` : kind === "column" ? "new-column" : `name:${colId}`;
-    const input = this.inlineInput(kind === "card" ? "page-board-new" : "page-board-rename", kind === "card" ? "New card title" : "Column name", key, name);
+    const input = this.inlineInput(kind === "card" ? "blockeditor-board-new" : "blockeditor-board-rename", kind === "card" ? "New card title" : "Column name", key, name);
     this.editing = { kind, id: colId, input };
     this.render();
     input.focus();
@@ -356,7 +356,7 @@ export class BoardView {
 
   openCard(cardId) {
     this.menu = null;
-    this.dom.querySelector(".page-board-menu")?.remove();
+    this.dom.querySelector(".blockeditor-board-menu")?.remove();
     this.panel?.open(this.blockId, cardId, { commands: this.commands, undo: this.undo, redo: this.redo });
   }
 
@@ -393,14 +393,14 @@ export class BoardView {
       else this.undo?.();
       return;
     }
-    const menu = event.target.closest?.(".page-board-menu");
+    const menu = event.target.closest?.(".blockeditor-board-menu");
     if (!menu) return;
     if (event.key === "Escape" || event.key === "Tab") {
       event.preventDefault();
       this.closeMenu(true);
     } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
       event.preventDefault();
-      const items = [...menu.querySelectorAll(".page-board-option:not(:disabled)")];
+      const items = [...menu.querySelectorAll(".blockeditor-board-option:not(:disabled)")];
       const at = items.indexOf(event.target);
       items[(at + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]?.focus();
     }
@@ -408,7 +408,7 @@ export class BoardView {
 
   focusout(event) {
     if (this.rendering || this.menu === null) return;
-    const menu = this.dom.querySelector(".page-board-menu");
+    const menu = this.dom.querySelector(".blockeditor-board-menu");
     if (menu?.contains(event.target) && !menu.contains(event.relatedTarget)) this.closeMenu(false);
   }