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

package/dist/openleaf.css

@@ -14,8 +14,11 @@
   --ol-surface-hover: var(--openleaf-color-surface-hover, #f0f1f3);
   --ol-surface-active: var(--openleaf-color-surface-active, #dbe9ff);
   --ol-border: var(--openleaf-color-border, #d1d9e0);
+  /* Control boundaries, not decoration. See "Two border tokens" above. */
+  --ol-border-strong: var(--openleaf-color-border-strong, #6e7781);
   --ol-accent: var(--openleaf-color-accent, #0550ae);
   --ol-focus: var(--openleaf-color-focus, #0969da);
+  --ol-danger: var(--openleaf-color-danger, #cf222e);
   --ol-button-size: var(--openleaf-button-size, 32px);
   --ol-icon-size: var(--openleaf-icon-size, 16px);
   --ol-gap: var(--openleaf-gap, 2px);
@@ -31,6 +34,7 @@
   --ol-focus-offset: var(--openleaf-focus-offset, 1px);
 
   display: block;
+  position: relative;
   color: var(--ol-text);
 }
 
@@ -49,8 +53,10 @@
   --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);
   --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);
   --ol-border: var(--openleaf-color-border, #3d444d);
+  --ol-border-strong: var(--openleaf-color-border-strong, #8b949e);
   --ol-accent: var(--openleaf-color-accent, #79c0ff);
   --ol-focus: var(--openleaf-color-focus, #79c0ff);
+  --ol-danger: var(--openleaf-color-danger, #ff8182);
 }
 }
 
@@ -61,8 +67,10 @@
   --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);
   --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);
   --ol-border: var(--openleaf-color-border, #3d444d);
+  --ol-border-strong: var(--openleaf-color-border-strong, #8b949e);
   --ol-accent: var(--openleaf-color-accent, #79c0ff);
   --ol-focus: var(--openleaf-color-focus, #79c0ff);
+  --ol-danger: var(--openleaf-color-danger, #ff8182);
 }
 
 .ol-editor[data-ol-scheme="dark"] {
@@ -72,8 +80,10 @@
   --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);
   --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);
   --ol-border: var(--openleaf-color-border, #3d444d);
+  --ol-border-strong: var(--openleaf-color-border-strong, #8b949e);
   --ol-accent: var(--openleaf-color-accent, #79c0ff);
   --ol-focus: var(--openleaf-color-focus, #79c0ff);
+  --ol-danger: var(--openleaf-color-danger, #ff8182);
 }
 
 /* Native widget chrome -- the popup a `select` opens, scrollbars, the caret,
@@ -99,7 +109,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 4px;
-  border: 1px solid var(--ol-border);
+  border: 1px solid var(--ol-border-strong);
   border-bottom: 0;
   border-radius: var(--ol-radius) var(--ol-radius) 0 0;
   background: var(--ol-surface);
@@ -120,7 +130,12 @@
    after it -- a stranded line floating at the end of a row. Wrapping begins
    around 690-740px, well inside ordinary desktop widths (a CMS sidebar, a
    half-width split pane), so this was not a 360px-only edge case.
-   border-inline-start rather than border-left, so it flips under RTL. */
+   border-inline-start rather than border-left, so it flips under RTL.
+
+   This selector is why the renderer emits NO element between groups. It used to
+   emit an .ol-sep div, which made the two groups non-adjacent and stopped this
+   rule from ever matching -- so no divider rendered in any theme, and every bar
+   carried inert empty divs. Adding a separator element back here breaks this. */
 .ol-editor .ol-group + .ol-group {
   border-inline-start: 1px solid var(--ol-border);
   padding-inline-start: 5px;
@@ -199,7 +214,7 @@
    removed from the roving tabindex and cannot be reached or announced, so an
    author using a screen reader cannot discover that the control exists. */
 .ol-editor .ol-btn[aria-disabled="true"] {
-  opacity: 0.4;
+  opacity: 0.55;
   cursor: default;
 }
 
@@ -225,7 +240,7 @@
   max-width: 11em;
   padding: 0 22px 0 6px;
   margin: 0;
-  border: 1px solid var(--ol-border);
+  border: 1px solid var(--ol-border-strong);
   border-radius: var(--ol-radius);
   background-color: transparent;
   background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
@@ -246,6 +261,10 @@
   -webkit-appearance: none;
 }
 
+.ol-editor .ol-select--wide {
+  max-width: 14em;
+}
+
 .ol-editor .ol-select:hover {
   background-color: var(--ol-surface-hover);
 }
@@ -264,7 +283,7 @@
 
 .ol-editor .ol-content {
   box-sizing: border-box;
-  border: 1px solid var(--ol-border);
+  border: 1px solid var(--ol-border-strong);
   border-radius: 0 0 var(--ol-radius) var(--ol-radius);
   background: var(--ol-surface);
 }
@@ -306,6 +325,15 @@
   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;
@@ -314,7 +342,13 @@
 
 /* prosemirror-tables marks cells in a rectangular selection with this class.
    An ::after overlay rather than a background so it composes with a cell that
-   already has one, and so a header cell still reads as a header. */
+   already has one, and so a header cell still reads as a header.
+
+   The ring, not the tint, is the indicator -- see "Cell selection" above. */
+.ol-editor .ol-content .ProseMirror .selectedCell {
+  outline: 2px solid var(--ol-accent);
+  outline-offset: -2px;
+}
 .ol-editor .ol-content .ProseMirror .selectedCell::after {
   content: "";
   position: absolute;
@@ -340,6 +374,47 @@
   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);
@@ -353,7 +428,7 @@
   width: 100%;
   min-height: 12rem;
   padding: 12px;
-  border: 1px solid var(--ol-border);
+  border: 1px solid var(--ol-border-strong);
   border-radius: 0 0 var(--ol-radius) var(--ol-radius);
   background: var(--ol-surface);
   color: var(--ol-text);
@@ -388,6 +463,215 @@
   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-strong);
+  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;
+  /* Capped, so a deep menu opened low on a short window can be flipped above
+     its trigger instead of running off the bottom of the page. */
+  max-height: 60vh;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid var(--ol-border-strong);
+  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 {
+  background: var(--ol-surface-hover);
+}
+/* Was outline:none plus a 1.13:1 background swap. See "Menu focus" above. */
+.ol-editor .ol-menu-item:focus-visible {
+  background: var(--ol-surface-hover);
+  outline: var(--ol-focus-width) solid var(--ol-focus);
+  outline-offset: -2px;
+}
+/* 0.55, not 0.4: see "Disabled is not invisible" above. */
+.ol-editor .ol-menu-item[aria-disabled="true"] {
+  opacity: 0.55;
+  cursor: default;
+}
+.ol-editor .ol-menu-sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--ol-border);
+}
+/* `display: flex` on .ol-toolbar above outranks the UA's `[hidden]` rule --
+   a class selector beats an attribute selector on specificity -- so setting
+   `el.hidden = true` in floating.ts styled a hidden bar and showed it anyway.
+   Both floating bars sat over the prose at rest, with no selection to format.
+   The overflow panel needed the same rule for the same reason; see below. */
+.ol-editor .ol-toolbar.ol-floating[hidden] {
+  display: none;
+}
+.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;
+}
+/* The More panel. Positioned in viewport coordinates from script, because the
+   bar it belongs to may live inside a host with `overflow: hidden` -- which is
+   the situation the whole feature exists for. */
+.ol-editor .ol-overflow-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--ol-gap);
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.ol-editor .ol-overflow-menu[hidden] {
+  display: none;
+}
+/* Vertical: the panel exists because there is no horizontal room left. */
+.ol-editor .ol-overflow-menu .ol-group {
+  flex-direction: column;
+  align-items: stretch;
+}
+.ol-editor .ol-overflow-menu .ol-group + .ol-group {
+  border-inline-start: 0;
+  border-block-start: 1px solid var(--ol-border);
+  padding-inline-start: 0;
+  margin-inline-start: 0;
+  padding-block-start: 4px;
+  margin-block-start: 3px;
+}
+.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) {
@@ -423,4 +707,38 @@
     color: GrayText;
     opacity: 1;
   }
+  .ol-editor .ol-menu-item:focus-visible {
+    outline-color: Highlight;
+  }
+  .ol-editor .ol-menu-item[aria-disabled="true"] {
+    color: GrayText;
+    opacity: 1;
+  }
+  .ol-editor .ol-menu-trigger[aria-expanded="true"] {
+    border-color: Highlight;
+    color: Highlight;
+  }
+  .ol-editor .ol-content .ProseMirror .selectedCell {
+    outline-color: Highlight;
+  }
+  .ol-editor .ol-content .ProseMirror .selectedCell::after {
+    background: transparent;
+  }
+  .ol-editor .ol-content .ProseMirror .column-resize-handle {
+    background: Highlight;
+  }
+  .ol-editor.ol-visual-aids .ol-nbsp {
+    background: transparent;
+    box-shadow: inset 0 -2px 0 Highlight;
+  }
+  .ol-editor.ol-visual-aids .ol-hidden-structure {
+    outline-color: Highlight;
+  }
+  .ol-editor.ol-visual-aids .ol-empty-block {
+    outline-color: GrayText;
+  }
+  .ol-editor .ol-noneditable {
+    background: transparent;
+    outline: 1px dashed GrayText;
+  }
 }

package/dist/overflow.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Collapse overflowing toolbar groups into a "More" panel.
+ *
+ * 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 moved out of the bar and
+ * offered in a panel at the end, so a narrow CMS sidebar still has every item
+ * without a two-row bar.
+ *
+ * ## Why the real controls move rather than being cloned
+ *
+ * The first implementation cloned each control into a `role="menu"`. Cloning a
+ * live control produces a listener-free copy that has to forward every
+ * interaction back to an original it can only find by id, duplicates that id
+ * and the accessible name, and goes stale the moment the caret moves -- three
+ * bugs that only exist because there were two of everything. Moving the group
+ * node itself has none of them: the control in the panel IS the control, so it
+ * carries its own listeners, its own state and its own accessible name, and
+ * nothing can drift.
+ *
+ * ## The keyboard pattern
+ *
+ * The panel is a vertical `role="toolbar"`, not a `role="menu"`: a menu owns a
+ * content model of `menuitem` children, and a `<select>` is not one -- the
+ * default bar has four. So the panel is the same widget as the bar it came
+ * from, turned ninety degrees, and it keeps the same contract: one tab stop,
+ * arrow keys to move, Home/End to the ends, Escape back to the trigger. Tab
+ * closes, because a panel a keyboard user can walk out of and leave open is the
+ * failure mode of every hand-rolled popup.
+ *
+ * Up/Down are taken from a `<select>` inside the panel the same way Left/Right
+ * are taken from one in the bar; Alt+Down still opens its list, and typeahead
+ * still selects. Home/End are left to the select, which uses them for its own
+ * first and last option.
+ */
+export declare class ToolbarOverflow {
+    #private;
+    constructor(toolbar: HTMLElement, host: HTMLElement, doc: Document, onLayout?: () => void);
+    /** Re-home the trigger after the toolbar rebuilt its children. */
+    reattach(): void;
+    destroy(): void;
+    layout(): void;
+}
+//# sourceMappingURL=overflow.d.ts.map

package/dist/overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow.d.ts","sourceRoot":"","sources":["../src/overflow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAUH,qBAAa,eAAe;;gBAiBd,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI;IA+CzF,kEAAkE;IAClE,QAAQ,IAAI,IAAI;IA6BhB,OAAO,IAAI,IAAI;IAcf,MAAM,IAAI,IAAI;CAyLf"}