@openleaf-editor/ui 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/overflow.js

@@ -0,0 +1,138 @@
+/**
+ * Collapse overflowing toolbar groups into a "More" menu.
+ *
+ * Wrapping is the default for a reason: a control that moved behind a click is
+ * a control the author does not have. Overflow is therefore opt-in. When it is
+ * on, groups that do not fit the current width are hidden in the bar and
+ * offered in a menu at the end, so a narrow CMS sidebar still has every item
+ * without a two-row bar.
+ */
+import { t } from './i18n.js';
+import { iconElement } from './icons.js';
+export class ToolbarOverflow {
+    #toolbar;
+    #host;
+    #more;
+    #menu;
+    #observer = null;
+    constructor(toolbar, host, doc) {
+        this.#toolbar = toolbar;
+        this.#host = host;
+        toolbar.classList.add('ol-toolbar--overflow');
+        this.#more = doc.createElement('button');
+        this.#more.type = 'button';
+        this.#more.className = 'ol-btn ol-overflow-more';
+        this.#more.setAttribute('aria-label', t('More'));
+        this.#more.setAttribute('aria-haspopup', 'true');
+        this.#more.setAttribute('aria-expanded', 'false');
+        this.#more.hidden = true;
+        this.#more.appendChild(iconElement('more', doc));
+        this.#menu = doc.createElement('div');
+        this.#menu.className = 'ol-menu ol-overflow-menu';
+        this.#menu.setAttribute('role', 'menu');
+        this.#menu.hidden = true;
+        this.#more.addEventListener('click', () => {
+            const open = this.#menu.hidden;
+            this.#menu.hidden = !open;
+            this.#more.setAttribute('aria-expanded', open ? 'true' : 'false');
+        });
+        host.appendChild(this.#menu);
+        toolbar.appendChild(this.#more);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.#observer = new ResizeObserver(() => this.layout());
+            this.#observer.observe(toolbar);
+        }
+        this.layout();
+    }
+    reattach() {
+        if (!this.#more.isConnected)
+            this.#toolbar.appendChild(this.#more);
+        this.layout();
+    }
+    destroy() {
+        this.#observer?.disconnect();
+        this.#more.remove();
+        this.#menu.remove();
+        this.#toolbar.classList.remove('ol-toolbar--overflow');
+        for (const group of this.#groups())
+            group.hidden = false;
+    }
+    layout() {
+        const groups = this.#groups();
+        for (const group of groups)
+            group.hidden = false;
+        this.#more.hidden = true;
+        this.#menu.hidden = true;
+        this.#menu.replaceChildren();
+        const budget = this.#toolbar.clientWidth;
+        if (budget === 0)
+            return;
+        const overflowing = [];
+        for (let i = groups.length - 1; i >= 0; i -= 1) {
+            const fits = this.#toolbar.scrollWidth <= budget + 1;
+            if (fits)
+                break;
+            const group = groups[i];
+            if (!group)
+                break;
+            group.hidden = true;
+            overflowing.unshift(group);
+        }
+        if (overflowing.length === 0)
+            return;
+        this.#more.hidden = false;
+        for (const group of overflowing) {
+            for (const control of group.querySelectorAll('[aria-label], select')) {
+                const item = control.cloneNode(true);
+                item.removeAttribute('tabindex');
+                // cloneNode copies the option elements but not the select's current
+                // value, which the toolbar sets as a property rather than an attribute.
+                // Without this the menu opens showing the first option instead of the
+                // block the caret is actually in.
+                if (control instanceof HTMLSelectElement && item instanceof HTMLSelectElement) {
+                    item.value = control.value;
+                }
+                this.#menu.appendChild(item);
+            }
+        }
+        // Cloning controls duplicates listener-less buttons. Activation on a clone is
+        // forwarded to the original, which still owns the command.
+        this.#menu.onclick = (event) => {
+            const target = event.target;
+            // A <select> is driven by `change`, not `click`. Forwarding a click here
+            // fired before any option was chosen and carried no value with it.
+            if (target?.closest('select'))
+                return;
+            const clone = target?.closest('[data-ol-id]');
+            if (!clone)
+                return;
+            const original = this.#toolbar.querySelector(`[data-ol-id="${clone.dataset['olId']}"]`);
+            original?.click();
+            this.#close();
+        };
+        // The clone has no listeners of its own, so a chosen value has to be written
+        // onto the real control and announced there. Clicking the original was the
+        // previous behaviour and never carried the value, so headings and custom
+        // formats could not be applied from the overflow menu at all.
+        this.#menu.onchange = (event) => {
+            const clone = event.target;
+            if (!(clone instanceof HTMLSelectElement))
+                return;
+            const original = this.#toolbar.querySelector('select');
+            if (!original)
+                return;
+            original.value = clone.value;
+            original.dispatchEvent(new Event('change', { bubbles: true }));
+            this.#close();
+        };
+        void this.#host;
+    }
+    #close() {
+        this.#menu.hidden = true;
+        this.#more.setAttribute('aria-expanded', 'false');
+    }
+    #groups() {
+        return [...this.#toolbar.querySelectorAll(':scope > .ol-group')];
+    }
+}
+//# sourceMappingURL=overflow.js.map

package/dist/overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow.js","sourceRoot":"","sources":["../src/overflow.ts"],"names":[],"mappings":"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"}

package/dist/pickers.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Shared pickers: file, image and media, plus optional link and image lists.
+ *
+ * OpenLeaf has no media library. What it can own is the seam a CMS already has
+ * -- "open our file browser and give me a URL" -- so the link dialog, the
+ * image dialog and the media dialog all call the same function. Registering
+ * three uploaders that each talk to the same endpoint is how this used to go
+ * wrong in every other editor.
+ *
+ * Lists are separate: they are the short, known set of destinations a site
+ * wants to offer (the privacy policy, a hero image), not a replacement for
+ * the library.
+ */
+export type FilePickerKind = 'file' | 'image' | 'media';
+export interface PickedResource {
+    url: string;
+    title?: string;
+    text?: string;
+    alt?: string;
+}
+export type FilePicker = (meta: {
+    kind: FilePickerKind;
+    host: HTMLElement;
+}) => Promise<PickedResource | null>;
+export interface ListedResource {
+    /** Shown in the list. */
+    title: string;
+    /** The URL inserted. */
+    value: string;
+}
+type ListSource = readonly ListedResource[] | (() => readonly ListedResource[]);
+/** Register the shared file picker for every editor on the page. `null` removes it. */
+export declare function registerFilePicker(picker: FilePicker | null): void;
+export declare function filePickerFor(host: HTMLElement | null | undefined): FilePicker | null;
+export declare function registerLinkList(list: ListSource | null): void;
+export declare function registerImageList(list: ListSource | null): void;
+/** Class names offered in the image dialog. Authors can still type others. */
+export declare function registerImageClasses(list: readonly string[] | (() => readonly string[]) | null): void;
+export declare function listedLinks(): ListedResource[];
+export declare function listedImages(): ListedResource[];
+export declare function listedImageClasses(): string[];
+export {};
+//# sourceMappingURL=pickers.d.ts.map

package/dist/pickers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickers.d.ts","sourceRoot":"","sources":["../src/pickers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAEvD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE;IAC9B,IAAI,EAAE,cAAc,CAAA;IACpB,IAAI,EAAE,WAAW,CAAA;CAClB,KAAK,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;AAEpC,MAAM,WAAW,cAAc;IAC7B,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,KAAK,UAAU,GAAG,SAAS,cAAc,EAAE,GAAG,CAAC,MAAM,SAAS,cAAc,EAAE,CAAC,CAAA;AAW/E,uFAAuF;AACvF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAElE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI,CAGrF;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAE9D;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAE/D;AAED,8EAA8E;AAC9E,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,CAAC,MAAM,SAAS,MAAM,EAAE,CAAC,GAAG,IAAI,GACzD,IAAI,CAEN;AAOD,wBAAgB,WAAW,IAAI,cAAc,EAAE,CAE9C;AAED,wBAAgB,YAAY,IAAI,cAAc,EAAE,CAE/C;AAED,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAG7C"}

package/dist/pickers.js

@@ -0,0 +1,52 @@
+/**
+ * Shared pickers: file, image and media, plus optional link and image lists.
+ *
+ * OpenLeaf has no media library. What it can own is the seam a CMS already has
+ * -- "open our file browser and give me a URL" -- so the link dialog, the
+ * image dialog and the media dialog all call the same function. Registering
+ * three uploaders that each talk to the same endpoint is how this used to go
+ * wrong in every other editor.
+ *
+ * Lists are separate: they are the short, known set of destinations a site
+ * wants to offer (the privacy policy, a hero image), not a replacement for
+ * the library.
+ */
+let globalPicker = null;
+let linkList = null;
+let imageList = null;
+let imageClasses = null;
+/** Register the shared file picker for every editor on the page. `null` removes it. */
+export function registerFilePicker(picker) {
+    globalPicker = picker;
+}
+export function filePickerFor(host) {
+    const own = host?.filePicker;
+    return own ?? globalPicker;
+}
+export function registerLinkList(list) {
+    linkList = list;
+}
+export function registerImageList(list) {
+    imageList = list;
+}
+/** Class names offered in the image dialog. Authors can still type others. */
+export function registerImageClasses(list) {
+    imageClasses = list;
+}
+function resolveList(source) {
+    if (!source)
+        return [];
+    return [...(typeof source === 'function' ? source() : source)];
+}
+export function listedLinks() {
+    return resolveList(linkList);
+}
+export function listedImages() {
+    return resolveList(imageList);
+}
+export function listedImageClasses() {
+    if (!imageClasses)
+        return [];
+    return [...(typeof imageClasses === 'function' ? imageClasses() : imageClasses)];
+}
+//# sourceMappingURL=pickers.js.map

package/dist/pickers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickers.js","sourceRoot":"","sources":["../src/pickers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAyBH,IAAI,YAAY,GAAsB,IAAI,CAAA;AAC1C,IAAI,QAAQ,GAAsB,IAAI,CAAA;AACtC,IAAI,SAAS,GAAsB,IAAI,CAAA;AACvC,IAAI,YAAY,GAAyD,IAAI,CAAA;AAM7E,uFAAuF;AACvF,MAAM,UAAU,kBAAkB,CAAC,MAAyB;IAC1D,YAAY,GAAG,MAAM,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAoC;IAChE,MAAM,GAAG,GAAI,IAA0C,EAAE,UAAU,CAAA;IACnE,OAAO,GAAG,IAAI,YAAY,CAAA;AAC5B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAuB;IACtD,QAAQ,GAAG,IAAI,CAAA;AACjB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAuB;IACvD,SAAS,GAAG,IAAI,CAAA;AAClB,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,oBAAoB,CAClC,IAA0D;IAE1D,YAAY,GAAG,IAAI,CAAA;AACrB,CAAC;AAED,SAAS,WAAW,CAAC,MAAyB;IAC5C,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAA;IACtB,OAAO,CAAC,GAAG,CAAC,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAChE,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,OAAO,WAAW,CAAC,QAAQ,CAAC,CAAA;AAC9B,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,WAAW,CAAC,SAAS,CAAC,CAAA;AAC/B,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,IAAI,CAAC,YAAY;QAAE,OAAO,EAAE,CAAA;IAC5B,OAAO,CAAC,GAAG,CAAC,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;AAClF,CAAC"}

package/dist/styles.d.ts

@@ -35,7 +35,7 @@
  * an integrator can act on. A console warning naming the stylesheet is more
  * useful than a mechanism that quietly does nothing.
  */
-export declare const CSS = "\n.ol-editor {\n  /* Two families, named before either is public API. A singular\n     `--openleaf-font` implies \"the\" font, and source view already has a\n     monospace surface -- bolting a mono token on beside a singular name later\n     is the awkward outcome worth avoiding now. `--openleaf-font` is still\n     honoured as a fallback. */\n  --ol-font: var(--openleaf-font-ui, var(--openleaf-font, system-ui, -apple-system, \"Segoe UI\", sans-serif));\n  --ol-font-mono: var(--openleaf-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  --ol-font-size: var(--openleaf-font-size, 14px);\n  --ol-radius: var(--openleaf-radius, 4px);\n  --ol-text: var(--openleaf-color-text, #1f2328);\n  --ol-text-muted: var(--openleaf-color-text-muted, #59636e);\n  --ol-surface: var(--openleaf-color-surface, #ffffff);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #f0f1f3);\n  --ol-surface-active: var(--openleaf-color-surface-active, #dbe9ff);\n  --ol-border: var(--openleaf-color-border, #d1d9e0);\n  --ol-accent: var(--openleaf-color-accent, #0550ae);\n  --ol-focus: var(--openleaf-color-focus, #0969da);\n  --ol-button-size: var(--openleaf-button-size, 32px);\n  --ol-icon-size: var(--openleaf-icon-size, 16px);\n  --ol-gap: var(--openleaf-gap, 2px);\n  /* A 2009 WordPress admin bar sits at z-index 99999 and Drupal's toolbar plays\n     similar games. Without a sanctioned escape hatch integrators fix a toolbar\n     rendered behind a sticky host header with !important -- the exact thing the\n     token API exists to prevent. */\n  --ol-z: var(--openleaf-z-index, 1);\n  /* Thickness and offset, not just colour: \"you can change the colour but not\n     the thickness\" is a poor answer to a Section 508 team citing WCAG 2.2\n     Focus Appearance. */\n  --ol-focus-width: var(--openleaf-focus-width, 2px);\n  --ol-focus-offset: var(--openleaf-focus-offset, 1px);\n\n  display: block;\n  color: var(--ol-text);\n}\n\n/* Three ways into the dark palette, and one way out of it.\n   `data-ol-scheme` is set from the applied skin's declared scheme, and a skin\n   that declares one outranks both the attribute and the system -- it has to,\n   because its tokens have already replaced the palette outright. Without the\n   `:not()` guards a light skin on a dark machine would take these fallbacks for\n   every token it did not itself set, which is a light surface carrying dark-mode\n   muted text. */\n@media (prefers-color-scheme: dark) {\n  .ol-editor:not([data-ol-theme=\"light\"]):not([data-ol-scheme]) {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n}\n\n.ol-editor[data-ol-theme=\"dark\"]:not([data-ol-scheme]) {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n\n.ol-editor[data-ol-scheme=\"dark\"] {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n\n/* Native widget chrome -- the popup a `select` opens, scrollbars, the caret,\n   form control backgrounds -- is painted by the browser from `color-scheme`,\n   not from any property we can hand an integrator. Left alone it follows the\n   page, which is right while the editor's own palette also follows the page and\n   wrong the moment either attribute pins the editor to one world. So it is set\n   exactly when the editor stops following along, and inherited from the host\n   otherwise. */\n.ol-editor[data-ol-theme=\"light\"] { color-scheme: light; }\n.ol-editor[data-ol-theme=\"dark\"] { color-scheme: dark; }\n.ol-editor[data-ol-scheme=\"light\"] { color-scheme: light; }\n.ol-editor[data-ol-scheme=\"dark\"] { color-scheme: dark; }\n\n/* Wrapping, not scrolling and not an overflow menu. Both of those hide\n   controls -- one off-screen, one behind a click -- and a formatting control\n   the author cannot see is a control they do not have. */\n.ol-editor .ol-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ol-gap);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 4px;\n  border: 1px solid var(--ol-border);\n  border-bottom: 0;\n  border-radius: var(--ol-radius) var(--ol-radius) 0 0;\n  background: var(--ol-surface);\n  font: inherit;\n  position: relative;\n  z-index: var(--ol-z);\n}\n\n.ol-editor .ol-group {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ol-gap);\n}\n\n/* The divider is a BORDER on the group, not a standalone flex item.\n   As its own element it could wrap onto the trailing edge of a row with nothing\n   after it -- a stranded line floating at the end of a row. Wrapping begins\n   around 690-740px, well inside ordinary desktop widths (a CMS sidebar, a\n   half-width split pane), so this was not a 360px-only edge case.\n   border-inline-start rather than border-left, so it flips under RTL. */\n.ol-editor .ol-group + .ol-group {\n  border-inline-start: 1px solid var(--ol-border);\n  padding-inline-start: 5px;\n  margin-inline-start: 1px;\n}\n\n/* Every property a host reset or `button {}` rule is likely to touch is set\n   here explicitly. Specificity is (0,2,0) via the descendant selector, which\n   beats a bare element or single-class host rule without resorting to\n   !important. */\n.ol-editor .ol-btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--ol-button-size);\n  height: var(--ol-button-size);\n  min-width: var(--ol-button-size);\n  min-height: var(--ol-button-size);\n  max-width: none;\n  padding: 0;\n  margin: 0;\n  border: 1px solid transparent;\n  border-radius: var(--ol-radius);\n  background: transparent;\n  color: var(--ol-text);\n  font: inherit;\n  font-family: var(--ol-font);\n  font-size: var(--ol-font-size);\n  font-weight: 400;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  text-align: center;\n  text-decoration: none;\n  text-shadow: none;\n  box-shadow: none;\n  opacity: 1;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  outline-offset: var(--ol-focus-offset);\n  -webkit-tap-highlight-color: transparent;\n  transition: background-color 120ms ease, border-color 120ms ease;\n}\n\n.ol-editor .ol-btn:hover {\n  background: var(--ol-surface-hover);\n}\n\n/* :focus-visible only, so a mouse click does not leave a ring behind, but the\n   ring is never removed for keyboard users. */\n.ol-editor .ol-btn:focus-visible {\n  outline: var(--ol-focus-width) solid var(--ol-focus);\n  outline-offset: var(--ol-focus-offset);\n}\n\n/* Pressed state is distinguished from hover by THREE signals, not just colour:\n   a filled background, a visible border, and an inset shadow that reads as\n   physically depressed. Colour alone would fail for a colour-blind author and\n   would be invisible in forced-colours mode. */\n.ol-editor .ol-btn[aria-pressed=\"true\"] {\n  background: var(--ol-surface-active);\n  border-color: var(--ol-accent);\n  color: var(--ol-accent);\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%);\n}\n\n.ol-editor .ol-btn[aria-pressed=\"true\"]:hover {\n  background: var(--ol-surface-active);\n  border-color: var(--ol-accent);\n}\n\n/* aria-disabled rather than the disabled attribute: a disabled button is\n   removed from the roving tabindex and cannot be reached or announced, so an\n   author using a screen reader cannot discover that the control exists. */\n.ol-editor .ol-btn[aria-disabled=\"true\"] {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.ol-editor .ol-btn[aria-disabled=\"true\"]:hover {\n  background: transparent;\n}\n\n.ol-editor .ol-icon {\n  width: var(--ol-icon-size);\n  height: var(--ol-icon-size);\n  display: block;\n  pointer-events: none;\n  flex: 0 0 auto;\n}\n\n/* Block-type select. Sized and coloured to sit level with the icon buttons so\n   it does not read as bolted on, but it stays a native <select> -- a custom\n   listbox is a large amount of ARIA that would then owe real screen reader\n   testing to be worth anything. */\n.ol-editor .ol-select {\n  box-sizing: border-box;\n  height: var(--ol-button-size);\n  max-width: 11em;\n  padding: 0 22px 0 6px;\n  margin: 0;\n  border: 1px solid var(--ol-border);\n  border-radius: var(--ol-radius);\n  background-color: transparent;\n  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position: right 10px center, right 6px center;\n  background-size: 4px 4px, 4px 4px;\n  background-repeat: no-repeat;\n  color: var(--ol-text);\n  font-family: var(--ol-font);\n  font-size: var(--ol-font-size);\n  font-weight: 400;\n  line-height: 1;\n  text-transform: none;\n  letter-spacing: normal;\n  box-shadow: none;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.ol-editor .ol-select:hover {\n  background-color: var(--ol-surface-hover);\n}\n\n.ol-editor .ol-select:focus-visible {\n  outline: var(--ol-focus-width) solid var(--ol-focus);\n  outline-offset: var(--ol-focus-offset);\n}\n\n/* The option list is painted by the OS, which does not inherit our tokens, so\n   give it explicit colours or dark mode shows black text on black. */\n.ol-editor .ol-select option {\n  background: var(--ol-surface);\n  color: var(--ol-text);\n}\n\n.ol-editor .ol-content {\n  box-sizing: border-box;\n  border: 1px solid var(--ol-border);\n  border-radius: 0 0 var(--ol-radius) var(--ol-radius);\n  background: var(--ol-surface);\n}\n\n/* Deliberately minimal: the content area inherits the host's typography, which\n   is the entire reason this project does not use Shadow DOM. Only padding and\n   the focus ring are ours. */\n.ol-editor .ol-content .ProseMirror {\n  padding: 12px;\n  min-height: 8rem;\n  outline: none;\n}\n\n.ol-editor .ol-content:focus-within {\n  outline: 2px solid var(--ol-focus);\n  outline-offset: -1px;\n}\n\n/* Tables.\n   These styles live in core, not in the opt-in table plugin, because table\n   NODES live in core: every deployment reads and renders tables even where\n   editing them is switched off. Unstyled tables would render as runs of\n   undelimited text. */\n.ol-editor .ol-content .ProseMirror table {\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: 100%;\n  margin: 0 0 1em;\n  overflow: hidden;\n}\n\n.ol-editor .ol-content .ProseMirror td,\n.ol-editor .ol-content .ProseMirror th {\n  border: 1px solid var(--ol-border);\n  padding: 6px 8px;\n  vertical-align: top;\n  /* A zero-width cell cannot be clicked into, so it cannot be repaired. */\n  min-width: 2em;\n  position: relative;\n}\n\n.ol-editor .ol-content .ProseMirror th {\n  background: var(--ol-surface-hover);\n  font-weight: 600;\n  text-align: start;\n}\n\n/* prosemirror-tables marks cells in a rectangular selection with this class.\n   An ::after overlay rather than a background so it composes with a cell that\n   already has one, and so a header cell still reads as a header. */\n.ol-editor .ol-content .ProseMirror .selectedCell::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--ol-surface-active);\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n/* The column resize handle, drawn by prosemirror-tables' columnResizing. */\n.ol-editor .ol-content .ProseMirror .column-resize-handle {\n  position: absolute;\n  right: -2px;\n  top: 0;\n  bottom: 0;\n  width: 4px;\n  background: var(--ol-accent);\n  pointer-events: none;\n  z-index: 20;\n}\n\n.ol-editor .ol-content .ProseMirror.resize-cursor {\n  cursor: col-resize;\n}\n\n/* Preserved-but-unrecognised markup, surfaced rather than hidden. */\n.ol-editor .ol-content .ProseMirror-selectednode {\n  outline: 2px solid var(--ol-focus);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.ol-editor .ol-source {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  min-height: 12rem;\n  padding: 12px;\n  border: 1px solid var(--ol-border);\n  border-radius: 0 0 var(--ol-radius) var(--ol-radius);\n  background: var(--ol-surface);\n  color: var(--ol-text);\n  font-family: var(--ol-font-mono);\n  font-size: 13px;\n  line-height: 1.5;\n  resize: vertical;\n  white-space: pre-wrap;\n}\n\n/* Directional icons under RTL.\n   Group order reverses for free with flexbox, but a curved undo arrow does not:\n   in an RTL document \"back\" points the other way. Only genuinely directional\n   icons are flipped -- bold and italic must not be mirrored. */\n.ol-editor[dir=\"rtl\"] .ol-icon--directional,\n[dir=\"rtl\"] .ol-editor .ol-icon--directional {\n  transform: scaleX(-1);\n}\n\n/* The announcement region. Visually hidden but not display:none, which would\n   remove it from the accessibility tree and silence it. */\n.ol-editor .ol-live {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Coarse pointers get a larger target. WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px\n   minimum; 32 clears that on a mouse and 40 is comfortable on a thumb. */\n@media (pointer: coarse) {\n  .ol-editor {\n    --ol-button-size: var(--openleaf-button-size, 40px);\n    --ol-gap: var(--openleaf-gap, 4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ol-editor .ol-btn {\n    transition: none;\n  }\n}\n\n/* Forced colours (Windows high contrast) replaces our palette wholesale. The\n   pressed state must not depend on a background we no longer control, so it is\n   re-expressed as a border, which the mode preserves. */\n@media (forced-colors: active) {\n  .ol-editor .ol-btn {\n    border-color: ButtonBorder;\n    color: ButtonText;\n  }\n  .ol-editor .ol-btn[aria-pressed=\"true\"] {\n    border-color: Highlight;\n    color: Highlight;\n    box-shadow: none;\n  }\n  .ol-editor .ol-btn:focus-visible {\n    outline-color: Highlight;\n  }\n  .ol-editor .ol-btn[aria-disabled=\"true\"] {\n    color: GrayText;\n    opacity: 1;\n  }\n}\n";
+export declare const CSS = "\n.ol-editor {\n  /* Two families, named before either is public API. A singular\n     `--openleaf-font` implies \"the\" font, and source view already has a\n     monospace surface -- bolting a mono token on beside a singular name later\n     is the awkward outcome worth avoiding now. `--openleaf-font` is still\n     honoured as a fallback. */\n  --ol-font: var(--openleaf-font-ui, var(--openleaf-font, system-ui, -apple-system, \"Segoe UI\", sans-serif));\n  --ol-font-mono: var(--openleaf-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  --ol-font-size: var(--openleaf-font-size, 14px);\n  --ol-radius: var(--openleaf-radius, 4px);\n  --ol-text: var(--openleaf-color-text, #1f2328);\n  --ol-text-muted: var(--openleaf-color-text-muted, #59636e);\n  --ol-surface: var(--openleaf-color-surface, #ffffff);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #f0f1f3);\n  --ol-surface-active: var(--openleaf-color-surface-active, #dbe9ff);\n  --ol-border: var(--openleaf-color-border, #d1d9e0);\n  --ol-accent: var(--openleaf-color-accent, #0550ae);\n  --ol-focus: var(--openleaf-color-focus, #0969da);\n  --ol-button-size: var(--openleaf-button-size, 32px);\n  --ol-icon-size: var(--openleaf-icon-size, 16px);\n  --ol-gap: var(--openleaf-gap, 2px);\n  /* A 2009 WordPress admin bar sits at z-index 99999 and Drupal's toolbar plays\n     similar games. Without a sanctioned escape hatch integrators fix a toolbar\n     rendered behind a sticky host header with !important -- the exact thing the\n     token API exists to prevent. */\n  --ol-z: var(--openleaf-z-index, 1);\n  /* Thickness and offset, not just colour: \"you can change the colour but not\n     the thickness\" is a poor answer to a Section 508 team citing WCAG 2.2\n     Focus Appearance. */\n  --ol-focus-width: var(--openleaf-focus-width, 2px);\n  --ol-focus-offset: var(--openleaf-focus-offset, 1px);\n\n  display: block;\n  position: relative;\n  color: var(--ol-text);\n}\n\n/* Three ways into the dark palette, and one way out of it.\n   `data-ol-scheme` is set from the applied skin's declared scheme, and a skin\n   that declares one outranks both the attribute and the system -- it has to,\n   because its tokens have already replaced the palette outright. Without the\n   `:not()` guards a light skin on a dark machine would take these fallbacks for\n   every token it did not itself set, which is a light surface carrying dark-mode\n   muted text. */\n@media (prefers-color-scheme: dark) {\n  .ol-editor:not([data-ol-theme=\"light\"]):not([data-ol-scheme]) {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n}\n\n.ol-editor[data-ol-theme=\"dark\"]:not([data-ol-scheme]) {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n\n.ol-editor[data-ol-scheme=\"dark\"] {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n\n/* Native widget chrome -- the popup a `select` opens, scrollbars, the caret,\n   form control backgrounds -- is painted by the browser from `color-scheme`,\n   not from any property we can hand an integrator. Left alone it follows the\n   page, which is right while the editor's own palette also follows the page and\n   wrong the moment either attribute pins the editor to one world. So it is set\n   exactly when the editor stops following along, and inherited from the host\n   otherwise. */\n.ol-editor[data-ol-theme=\"light\"] { color-scheme: light; }\n.ol-editor[data-ol-theme=\"dark\"] { color-scheme: dark; }\n.ol-editor[data-ol-scheme=\"light\"] { color-scheme: light; }\n.ol-editor[data-ol-scheme=\"dark\"] { color-scheme: dark; }\n\n/* Wrapping, not scrolling and not an overflow menu. Both of those hide\n   controls -- one off-screen, one behind a click -- and a formatting control\n   the author cannot see is a control they do not have. */\n.ol-editor .ol-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ol-gap);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 4px;\n  border: 1px solid var(--ol-border);\n  border-bottom: 0;\n  border-radius: var(--ol-radius) var(--ol-radius) 0 0;\n  background: var(--ol-surface);\n  font: inherit;\n  position: relative;\n  z-index: var(--ol-z);\n}\n\n.ol-editor .ol-group {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ol-gap);\n}\n\n/* The divider is a BORDER on the group, not a standalone flex item.\n   As its own element it could wrap onto the trailing edge of a row with nothing\n   after it -- a stranded line floating at the end of a row. Wrapping begins\n   around 690-740px, well inside ordinary desktop widths (a CMS sidebar, a\n   half-width split pane), so this was not a 360px-only edge case.\n   border-inline-start rather than border-left, so it flips under RTL. */\n.ol-editor .ol-group + .ol-group {\n  border-inline-start: 1px solid var(--ol-border);\n  padding-inline-start: 5px;\n  margin-inline-start: 1px;\n}\n\n/* Every property a host reset or `button {}` rule is likely to touch is set\n   here explicitly. Specificity is (0,2,0) via the descendant selector, which\n   beats a bare element or single-class host rule without resorting to\n   !important. */\n.ol-editor .ol-btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--ol-button-size);\n  height: var(--ol-button-size);\n  min-width: var(--ol-button-size);\n  min-height: var(--ol-button-size);\n  max-width: none;\n  padding: 0;\n  margin: 0;\n  border: 1px solid transparent;\n  border-radius: var(--ol-radius);\n  background: transparent;\n  color: var(--ol-text);\n  font: inherit;\n  font-family: var(--ol-font);\n  font-size: var(--ol-font-size);\n  font-weight: 400;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  text-align: center;\n  text-decoration: none;\n  text-shadow: none;\n  box-shadow: none;\n  opacity: 1;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  outline-offset: var(--ol-focus-offset);\n  -webkit-tap-highlight-color: transparent;\n  transition: background-color 120ms ease, border-color 120ms ease;\n}\n\n.ol-editor .ol-btn:hover {\n  background: var(--ol-surface-hover);\n}\n\n/* :focus-visible only, so a mouse click does not leave a ring behind, but the\n   ring is never removed for keyboard users. */\n.ol-editor .ol-btn:focus-visible {\n  outline: var(--ol-focus-width) solid var(--ol-focus);\n  outline-offset: var(--ol-focus-offset);\n}\n\n/* Pressed state is distinguished from hover by THREE signals, not just colour:\n   a filled background, a visible border, and an inset shadow that reads as\n   physically depressed. Colour alone would fail for a colour-blind author and\n   would be invisible in forced-colours mode. */\n.ol-editor .ol-btn[aria-pressed=\"true\"] {\n  background: var(--ol-surface-active);\n  border-color: var(--ol-accent);\n  color: var(--ol-accent);\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%);\n}\n\n.ol-editor .ol-btn[aria-pressed=\"true\"]:hover {\n  background: var(--ol-surface-active);\n  border-color: var(--ol-accent);\n}\n\n/* aria-disabled rather than the disabled attribute: a disabled button is\n   removed from the roving tabindex and cannot be reached or announced, so an\n   author using a screen reader cannot discover that the control exists. */\n.ol-editor .ol-btn[aria-disabled=\"true\"] {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.ol-editor .ol-btn[aria-disabled=\"true\"]:hover {\n  background: transparent;\n}\n\n.ol-editor .ol-icon {\n  width: var(--ol-icon-size);\n  height: var(--ol-icon-size);\n  display: block;\n  pointer-events: none;\n  flex: 0 0 auto;\n}\n\n/* Block-type select. Sized and coloured to sit level with the icon buttons so\n   it does not read as bolted on, but it stays a native <select> -- a custom\n   listbox is a large amount of ARIA that would then owe real screen reader\n   testing to be worth anything. */\n.ol-editor .ol-select {\n  box-sizing: border-box;\n  height: var(--ol-button-size);\n  max-width: 11em;\n  padding: 0 22px 0 6px;\n  margin: 0;\n  border: 1px solid var(--ol-border);\n  border-radius: var(--ol-radius);\n  background-color: transparent;\n  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position: right 10px center, right 6px center;\n  background-size: 4px 4px, 4px 4px;\n  background-repeat: no-repeat;\n  color: var(--ol-text);\n  font-family: var(--ol-font);\n  font-size: var(--ol-font-size);\n  font-weight: 400;\n  line-height: 1;\n  text-transform: none;\n  letter-spacing: normal;\n  box-shadow: none;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.ol-editor .ol-select:hover {\n  background-color: var(--ol-surface-hover);\n}\n\n.ol-editor .ol-select:focus-visible {\n  outline: var(--ol-focus-width) solid var(--ol-focus);\n  outline-offset: var(--ol-focus-offset);\n}\n\n/* The option list is painted by the OS, which does not inherit our tokens, so\n   give it explicit colours or dark mode shows black text on black. */\n.ol-editor .ol-select option {\n  background: var(--ol-surface);\n  color: var(--ol-text);\n}\n\n.ol-editor .ol-content {\n  box-sizing: border-box;\n  border: 1px solid var(--ol-border);\n  border-radius: 0 0 var(--ol-radius) var(--ol-radius);\n  background: var(--ol-surface);\n}\n\n/* Deliberately minimal: the content area inherits the host's typography, which\n   is the entire reason this project does not use Shadow DOM. Only padding and\n   the focus ring are ours. */\n.ol-editor .ol-content .ProseMirror {\n  padding: 12px;\n  min-height: 8rem;\n  outline: none;\n}\n\n.ol-editor .ol-content:focus-within {\n  outline: 2px solid var(--ol-focus);\n  outline-offset: -1px;\n}\n\n/* Tables.\n   These styles live in core, not in the opt-in table plugin, because table\n   NODES live in core: every deployment reads and renders tables even where\n   editing them is switched off. Unstyled tables would render as runs of\n   undelimited text. */\n.ol-editor .ol-content .ProseMirror table {\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: 100%;\n  margin: 0 0 1em;\n  overflow: hidden;\n}\n\n.ol-editor .ol-content .ProseMirror td,\n.ol-editor .ol-content .ProseMirror th {\n  border: 1px solid var(--ol-border);\n  padding: 6px 8px;\n  vertical-align: top;\n  /* A zero-width cell cannot be clicked into, so it cannot be repaired. */\n  min-width: 2em;\n  position: relative;\n}\n\n/* Presentational valign is otherwise beaten by the rule above, which would\n   make the cell-properties dialog a no-op on screen. */\n.ol-editor .ol-content .ProseMirror td[valign=\"middle\"],\n.ol-editor .ol-content .ProseMirror th[valign=\"middle\"] { vertical-align: middle; }\n.ol-editor .ol-content .ProseMirror td[valign=\"bottom\"],\n.ol-editor .ol-content .ProseMirror th[valign=\"bottom\"] { vertical-align: bottom; }\n.ol-editor .ol-content .ProseMirror td[valign=\"baseline\"],\n.ol-editor .ol-content .ProseMirror th[valign=\"baseline\"] { vertical-align: baseline; }\n\n.ol-editor .ol-content .ProseMirror th {\n  background: var(--ol-surface-hover);\n  font-weight: 600;\n  text-align: start;\n}\n\n/* prosemirror-tables marks cells in a rectangular selection with this class.\n   An ::after overlay rather than a background so it composes with a cell that\n   already has one, and so a header cell still reads as a header. */\n.ol-editor .ol-content .ProseMirror .selectedCell::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--ol-surface-active);\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n/* The column resize handle, drawn by prosemirror-tables' columnResizing. */\n.ol-editor .ol-content .ProseMirror .column-resize-handle {\n  position: absolute;\n  right: -2px;\n  top: 0;\n  bottom: 0;\n  width: 4px;\n  background: var(--ol-accent);\n  pointer-events: none;\n  z-index: 20;\n}\n\n.ol-editor .ol-content .ProseMirror.resize-cursor {\n  cursor: col-resize;\n}\n\n.ol-editor .ol-content .ProseMirror img.ol-float-left {\n  float: left;\n  margin: 0 1em 0.5em 0;\n}\n.ol-editor .ol-content .ProseMirror img.ol-float-right {\n  float: right;\n  margin: 0 0 0.5em 1em;\n}\n.ol-editor .ol-content .ProseMirror img.ol-align-center {\n  display: block;\n  margin: 0 auto 0.5em;\n}\n.ol-editor .ol-content .ProseMirror figure {\n  margin: 0 0 1em;\n}\n.ol-editor .ol-content .ProseMirror figcaption {\n  font-size: .9em;\n  opacity: .8;\n  margin-top: .35em;\n}\n.ol-editor .ol-content .ProseMirror details {\n  border: 1px solid var(--ol-border);\n  border-radius: var(--ol-radius);\n  padding: .5em .75em;\n  margin: 0 0 1em;\n}\n.ol-editor .ol-content .ProseMirror summary {\n  cursor: pointer;\n  font-weight: 600;\n}\n.ol-editor .ol-content .ProseMirror hr.ol-pagebreak {\n  border: 0;\n  border-top: 2px dashed var(--ol-border);\n  margin: 1.5em 0;\n}\n.ol-editor .ol-content .ProseMirror iframe,\n.ol-editor .ol-content .ProseMirror video,\n.ol-editor .ol-content .ProseMirror audio {\n  max-width: 100%;\n}\n\n/* Preserved-but-unrecognised markup, surfaced rather than hidden. */\n.ol-editor .ol-content .ProseMirror-selectednode {\n  outline: 2px solid var(--ol-focus);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.ol-editor .ol-source {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  min-height: 12rem;\n  padding: 12px;\n  border: 1px solid var(--ol-border);\n  border-radius: 0 0 var(--ol-radius) var(--ol-radius);\n  background: var(--ol-surface);\n  color: var(--ol-text);\n  font-family: var(--ol-font-mono);\n  font-size: 13px;\n  line-height: 1.5;\n  resize: vertical;\n  white-space: pre-wrap;\n}\n\n/* Directional icons under RTL.\n   Group order reverses for free with flexbox, but a curved undo arrow does not:\n   in an RTL document \"back\" points the other way. Only genuinely directional\n   icons are flipped -- bold and italic must not be mirrored. */\n.ol-editor[dir=\"rtl\"] .ol-icon--directional,\n[dir=\"rtl\"] .ol-editor .ol-icon--directional {\n  transform: scaleX(-1);\n}\n\n/* The announcement region. Visually hidden but not display:none, which would\n   remove it from the accessibility tree and silence it. */\n.ol-editor .ol-live {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Menubar, menus, floating chrome, visual aids, fullscreen, inline. */\n.ol-editor .ol-menubar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ol-gap);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 2px 4px;\n  border: 1px solid var(--ol-border);\n  border-bottom: 0;\n  border-radius: var(--ol-radius) var(--ol-radius) 0 0;\n  background: var(--ol-surface);\n  position: relative;\n  z-index: var(--ol-z);\n}\n.ol-editor .ol-menubar + .ol-toolbar {\n  border-radius: 0;\n}\n.ol-editor .ol-menu-trigger {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 4px 8px;\n  border: 1px solid transparent;\n  border-radius: var(--ol-radius);\n  background: transparent;\n  color: var(--ol-text);\n  font: inherit;\n  font-family: var(--ol-font);\n  font-size: var(--ol-font-size);\n  cursor: pointer;\n  appearance: none;\n}\n.ol-editor .ol-menu-trigger:hover,\n.ol-editor .ol-menu-trigger[aria-expanded=\"true\"] {\n  background: var(--ol-surface-hover);\n}\n.ol-editor .ol-menu-trigger:focus-visible {\n  outline: var(--ol-focus-width) solid var(--ol-focus);\n  outline-offset: var(--ol-focus-offset);\n}\n.ol-editor .ol-menu {\n  position: absolute;\n  z-index: calc(var(--ol-z) + 20);\n  min-width: 12rem;\n  margin: 0;\n  padding: 4px;\n  border: 1px solid var(--ol-border);\n  border-radius: var(--ol-radius);\n  background: var(--ol-surface);\n  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);\n}\n.ol-editor .ol-menu-item {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: var(--ol-radius);\n  background: transparent;\n  color: var(--ol-text);\n  font: inherit;\n  font-family: var(--ol-font);\n  font-size: var(--ol-font-size);\n  text-align: start;\n  cursor: pointer;\n  appearance: none;\n}\n.ol-editor .ol-menu-item:hover,\n.ol-editor .ol-menu-item:focus-visible {\n  background: var(--ol-surface-hover);\n  outline: none;\n}\n.ol-editor .ol-menu-item[aria-disabled=\"true\"] {\n  opacity: 0.4;\n  cursor: default;\n}\n.ol-editor .ol-menu-sep {\n  height: 1px;\n  margin: 4px 0;\n  background: var(--ol-border);\n}\n.ol-editor .ol-toolbar.ol-floating {\n  position: absolute;\n  flex-wrap: nowrap;\n  border: 1px solid var(--ol-border);\n  border-radius: var(--ol-radius);\n  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);\n  z-index: calc(var(--ol-z) + 10);\n}\n.ol-editor .ol-toolbar.ol-toolbar--overflow {\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n.ol-editor.ol-visual-aids .ol-empty-block {\n  outline: 1px dashed var(--ol-border);\n  outline-offset: 2px;\n  min-height: 1.2em;\n}\n.ol-editor.ol-visual-aids .ol-nbsp {\n  background: color-mix(in srgb, var(--ol-accent) 25%, transparent);\n  box-shadow: inset 0 -1px 0 var(--ol-accent);\n}\n.ol-editor.ol-visual-aids .ol-hidden-structure {\n  outline: 1px dotted var(--ol-accent);\n  outline-offset: 2px;\n}\n.ol-editor .ol-noneditable {\n  cursor: default;\n  background: repeating-linear-gradient(\n    -45deg,\n    transparent,\n    transparent 6px,\n    color-mix(in srgb, var(--ol-border) 35%, transparent) 6px,\n    color-mix(in srgb, var(--ol-border) 35%, transparent) 7px\n  );\n}\n.ol-editor.ol-fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  margin: 0;\n  border-radius: 0;\n  background: var(--ol-surface);\n  display: flex;\n  flex-direction: column;\n}\n.ol-editor.ol-fullscreen .ol-content,\n.ol-editor.ol-fullscreen .ol-source {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.ol-editor.ol-autoresize .ol-content .ProseMirror {\n  overflow: hidden;\n}\n.ol-editor.ol-inline:not(.ol-inline-active) .ol-toolbar,\n.ol-editor.ol-inline:not(.ol-inline-active) .ol-menubar {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n}\n.ol-editor.ol-inline .ol-content {\n  border-radius: var(--ol-radius);\n}\n.ol-help-table {\n  width: 100%;\n  border-collapse: collapse;\n  font: inherit;\n}\n.ol-help-table th,\n.ol-help-table td {\n  padding: 4px 8px;\n  text-align: start;\n  vertical-align: top;\n  border-bottom: 1px solid var(--openleaf-color-border, #d1d9e0);\n}\n.ol-help-table th {\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n/* Coarse pointers get a larger target. WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px\n   minimum; 32 clears that on a mouse and 40 is comfortable on a thumb. */\n@media (pointer: coarse) {\n  .ol-editor {\n    --ol-button-size: var(--openleaf-button-size, 40px);\n    --ol-gap: var(--openleaf-gap, 4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ol-editor .ol-btn {\n    transition: none;\n  }\n}\n\n/* Forced colours (Windows high contrast) replaces our palette wholesale. The\n   pressed state must not depend on a background we no longer control, so it is\n   re-expressed as a border, which the mode preserves. */\n@media (forced-colors: active) {\n  .ol-editor .ol-btn {\n    border-color: ButtonBorder;\n    color: ButtonText;\n  }\n  .ol-editor .ol-btn[aria-pressed=\"true\"] {\n    border-color: Highlight;\n    color: Highlight;\n    box-shadow: none;\n  }\n  .ol-editor .ol-btn:focus-visible {\n    outline-color: Highlight;\n  }\n  .ol-editor .ol-btn[aria-disabled=\"true\"] {\n    color: GrayText;\n    opacity: 1;\n  }\n}\n";
 /**
  * Declare that the integrator has linked `openleaf.css` themselves, so no
  * injection is attempted. Call before the first editor is created.

package/dist/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAqBH,eAAO,MAAM,GAAG,4xdAgZf,CAAA;AAID;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAoCpG;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAM9F"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAqBH,eAAO,MAAM,GAAG,mgpBAwmBf,CAAA;AAID;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAoCpG;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAM9F"}

package/dist/styles.js

@@ -87,6 +87,7 @@ export const CSS = `
   --ol-focus-offset: var(--openleaf-focus-offset, 1px);
 
   display: block;
+  position: relative;
   color: var(--ol-text);
 }
 
@@ -335,6 +336,15 @@ export const CSS = `
   position: relative;
 }
 
+/* Presentational valign is otherwise beaten by the rule above, which would
+   make the cell-properties dialog a no-op on screen. */
+.ol-editor .ol-content .ProseMirror td[valign="middle"],
+.ol-editor .ol-content .ProseMirror th[valign="middle"] { vertical-align: middle; }
+.ol-editor .ol-content .ProseMirror td[valign="bottom"],
+.ol-editor .ol-content .ProseMirror th[valign="bottom"] { vertical-align: bottom; }
+.ol-editor .ol-content .ProseMirror td[valign="baseline"],
+.ol-editor .ol-content .ProseMirror th[valign="baseline"] { vertical-align: baseline; }
+
 .ol-editor .ol-content .ProseMirror th {
   background: var(--ol-surface-hover);
   font-weight: 600;
@@ -369,6 +379,47 @@ export const CSS = `
   cursor: col-resize;
 }
 
+.ol-editor .ol-content .ProseMirror img.ol-float-left {
+  float: left;
+  margin: 0 1em 0.5em 0;
+}
+.ol-editor .ol-content .ProseMirror img.ol-float-right {
+  float: right;
+  margin: 0 0 0.5em 1em;
+}
+.ol-editor .ol-content .ProseMirror img.ol-align-center {
+  display: block;
+  margin: 0 auto 0.5em;
+}
+.ol-editor .ol-content .ProseMirror figure {
+  margin: 0 0 1em;
+}
+.ol-editor .ol-content .ProseMirror figcaption {
+  font-size: .9em;
+  opacity: .8;
+  margin-top: .35em;
+}
+.ol-editor .ol-content .ProseMirror details {
+  border: 1px solid var(--ol-border);
+  border-radius: var(--ol-radius);
+  padding: .5em .75em;
+  margin: 0 0 1em;
+}
+.ol-editor .ol-content .ProseMirror summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+.ol-editor .ol-content .ProseMirror hr.ol-pagebreak {
+  border: 0;
+  border-top: 2px dashed var(--ol-border);
+  margin: 1.5em 0;
+}
+.ol-editor .ol-content .ProseMirror iframe,
+.ol-editor .ol-content .ProseMirror video,
+.ol-editor .ol-content .ProseMirror audio {
+  max-width: 100%;
+}
+
 /* Preserved-but-unrecognised markup, surfaced rather than hidden. */
 .ol-editor .ol-content .ProseMirror-selectednode {
   outline: 2px solid var(--ol-focus);
@@ -417,6 +468,171 @@ export const CSS = `
   border: 0;
 }
 
+/* Menubar, menus, floating chrome, visual aids, fullscreen, inline. */
+.ol-editor .ol-menubar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ol-gap);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 2px 4px;
+  border: 1px solid var(--ol-border);
+  border-bottom: 0;
+  border-radius: var(--ol-radius) var(--ol-radius) 0 0;
+  background: var(--ol-surface);
+  position: relative;
+  z-index: var(--ol-z);
+}
+.ol-editor .ol-menubar + .ol-toolbar {
+  border-radius: 0;
+}
+.ol-editor .ol-menu-trigger {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--ol-radius);
+  background: transparent;
+  color: var(--ol-text);
+  font: inherit;
+  font-family: var(--ol-font);
+  font-size: var(--ol-font-size);
+  cursor: pointer;
+  appearance: none;
+}
+.ol-editor .ol-menu-trigger:hover,
+.ol-editor .ol-menu-trigger[aria-expanded="true"] {
+  background: var(--ol-surface-hover);
+}
+.ol-editor .ol-menu-trigger:focus-visible {
+  outline: var(--ol-focus-width) solid var(--ol-focus);
+  outline-offset: var(--ol-focus-offset);
+}
+.ol-editor .ol-menu {
+  position: absolute;
+  z-index: calc(var(--ol-z) + 20);
+  min-width: 12rem;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid var(--ol-border);
+  border-radius: var(--ol-radius);
+  background: var(--ol-surface);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+.ol-editor .ol-menu-item {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: var(--ol-radius);
+  background: transparent;
+  color: var(--ol-text);
+  font: inherit;
+  font-family: var(--ol-font);
+  font-size: var(--ol-font-size);
+  text-align: start;
+  cursor: pointer;
+  appearance: none;
+}
+.ol-editor .ol-menu-item:hover,
+.ol-editor .ol-menu-item:focus-visible {
+  background: var(--ol-surface-hover);
+  outline: none;
+}
+.ol-editor .ol-menu-item[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: default;
+}
+.ol-editor .ol-menu-sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--ol-border);
+}
+.ol-editor .ol-toolbar.ol-floating {
+  position: absolute;
+  flex-wrap: nowrap;
+  border: 1px solid var(--ol-border);
+  border-radius: var(--ol-radius);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+  z-index: calc(var(--ol-z) + 10);
+}
+.ol-editor .ol-toolbar.ol-toolbar--overflow {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.ol-editor.ol-visual-aids .ol-empty-block {
+  outline: 1px dashed var(--ol-border);
+  outline-offset: 2px;
+  min-height: 1.2em;
+}
+.ol-editor.ol-visual-aids .ol-nbsp {
+  background: color-mix(in srgb, var(--ol-accent) 25%, transparent);
+  box-shadow: inset 0 -1px 0 var(--ol-accent);
+}
+.ol-editor.ol-visual-aids .ol-hidden-structure {
+  outline: 1px dotted var(--ol-accent);
+  outline-offset: 2px;
+}
+.ol-editor .ol-noneditable {
+  cursor: default;
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 6px,
+    color-mix(in srgb, var(--ol-border) 35%, transparent) 6px,
+    color-mix(in srgb, var(--ol-border) 35%, transparent) 7px
+  );
+}
+.ol-editor.ol-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  margin: 0;
+  border-radius: 0;
+  background: var(--ol-surface);
+  display: flex;
+  flex-direction: column;
+}
+.ol-editor.ol-fullscreen .ol-content,
+.ol-editor.ol-fullscreen .ol-source {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+.ol-editor.ol-autoresize .ol-content .ProseMirror {
+  overflow: hidden;
+}
+.ol-editor.ol-inline:not(.ol-inline-active) .ol-toolbar,
+.ol-editor.ol-inline:not(.ol-inline-active) .ol-menubar {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+}
+.ol-editor.ol-inline .ol-content {
+  border-radius: var(--ol-radius);
+}
+.ol-help-table {
+  width: 100%;
+  border-collapse: collapse;
+  font: inherit;
+}
+.ol-help-table th,
+.ol-help-table td {
+  padding: 4px 8px;
+  text-align: start;
+  vertical-align: top;
+  border-bottom: 1px solid var(--openleaf-color-border, #d1d9e0);
+}
+.ol-help-table th {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
 /* Coarse pointers get a larger target. WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px
    minimum; 32 clears that on a mouse and 40 is comfortable on a thumb. */
 @media (pointer: coarse) {

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}

package/dist/toolbar.d.ts

@@ -28,6 +28,7 @@
  *    is blind-Tabbing through the rest of the host's form. `Alt+F10` enters,
  *    Escape leaves, matching TinyMCE and CKEditor 5 so muscle memory transfers.
  */
+import { type FormatSpec } from '@openleaf-editor/core';
 import type { EditorState, Transaction } from 'prosemirror-state';
 import type { EditorView } from 'prosemirror-view';
 export interface ToolbarOptions {
@@ -35,11 +36,30 @@ export interface ToolbarOptions {
     label?: string;
     /** Space-separated item ids, `|` for a separator. */
     layout?: string;
+    /**
+     * Collapse groups that do not fit into a More menu. Off by default: wrapping
+     * keeps every control visible, which is the safer accessibility default.
+     */
+    overflow?: boolean;
+    /** Extra block formats, typically classes from the host's content CSS. */
+    formats?: readonly FormatSpec[];
+    /**
+     * Language for this toolbar's labels, independent of every other editor's.
+     * Absent means the document-wide locale.
+     */
+    locale?: string | null;
 }
 export declare class Toolbar {
     #private;
     readonly el: HTMLDivElement;
     constructor(host: HTMLElement, doc: Document, options?: ToolbarOptions);
+    /**
+     * Change this toolbar's language and rebuild its labels.
+     *
+     * Per toolbar rather than per document, so one editor switching language does
+     * not relabel every other editor on the page.
+     */
+    setLocale(next: string | null): void;
     /** Attach to a view and build the controls. */
     mount(view: EditorView): void;
     destroy(): void;

package/dist/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../src/toolbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAWlD,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAuDD,qBAAa,OAAO;;IAClB,QAAQ,CAAC,EAAE,EAAE,cAAc,CAAA;gBAgBf,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,GAAE,cAAmB;IA8B1E,+CAA+C;IAC/C,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAM7B,OAAO,IAAI,IAAI;IA6Bf,2DAA2D;IAC3D,IAAI,UAAU,IAAI,cAAc,CAE/B;IAiSD;;;;;;;;;OASG;IACH,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI;IAgElD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IA8F9E,iEAAiE;IACjE,YAAY,IAAI,IAAI;IAYpB,mEAAmE;IACnE,oBAAoB,IAAI,IAAI;CAG7B"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../src/toolbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EASL,KAAK,UAAU,EAChB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAalD,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAuDD,qBAAa,OAAO;;IAClB,QAAQ,CAAC,EAAE,EAAE,cAAc,CAAA;gBAsBf,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,GAAE,cAAmB;IAqC1E;;;;;OAKG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOpC,+CAA+C;IAC/C,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAS7B,OAAO,IAAI,IAAI;IA+Bf,2DAA2D;IAC3D,IAAI,UAAU,IAAI,cAAc,CAE/B;IAkUD;;;;;;;;;OASG;IACH,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI;IAkFlD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IA8F9E,iEAAiE;IACjE,YAAY,IAAI,IAAI;IAYpB,mEAAmE;IACnE,oBAAoB,IAAI,IAAI;CAG7B"}