stilo-editor 0.0.0-stage → 0.2.0

package/dist/style.css

@@ -0,0 +1,1395 @@
+/* Stilo content styles: ProseMirror base CSS and defaults for the editable content. */
+
+/*
+ * prosemirror-view/style/prosemirror.css and prosemirror-gapcursor/style/gapcursor.css.
+ * Copyright (C) 2015-2017 by Marijn Haverbeke and others, MIT license. Adapted to the lint
+ * rules: no `white-space: pre-wrap` fallback before `break-spaces`, and the separator image
+ * rule gains specificity instead of `!important`.
+ */
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+/* See https://code.haverbeke.berlin/prosemirror/prosemirror/issues/1421#issuecomment-1759320191 */
+.ProseMirror [draggable][contenteditable="false"] {
+  user-select: text;
+}
+
+.ProseMirror-selectednode {
+  outline: 2px solid #8cf;
+}
+
+/* Make sure li selections wrap around markers */
+
+li.ProseMirror-selectednode {
+  outline: none;
+}
+
+li.ProseMirror-selectednode:after {
+  content: "";
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid #8cf;
+  pointer-events: none;
+}
+
+/* Protect against generic img rules */
+
+.ProseMirror img.ProseMirror-separator {
+  display: inline;
+  border: none;
+  margin: 0;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+/*
+ * prosemirror-tables/style/tables.css. Copyright (C) 2015-2016 by Marijn Haverbeke and others,
+ * MIT license. Adapted: one `cursor` value, the colors from the Stilo custom properties.
+ */
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+
+.ProseMirror table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ProseMirror td,
+.ProseMirror th {
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
+.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
+  min-width: var(--default-cell-min-width);
+}
+
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  z-index: 20;
+  background-color: var(--stilo-color-focus, #0969da);
+  pointer-events: none;
+}
+
+.ProseMirror.resize-cursor {
+  cursor: col-resize;
+}
+
+.ProseMirror .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--stilo-color-selected-cell, rgb(9 105 218 / 0.12));
+  pointer-events: none;
+}
+
+/* Stilo content defaults */
+
+/* Lists: list items hold paragraphs, which must not add their own margins. */
+.stilo-content ul,
+.stilo-content ol {
+  margin: 0.5em 0;
+  padding-left: 1.75em;
+}
+
+.stilo-content li > p,
+.stilo-content li > ul,
+.stilo-content li > ol,
+.stilo-content .stilo-task-item__content > p,
+.stilo-content .stilo-task-item__content > ul,
+.stilo-content .stilo-task-item__content > ol {
+  margin: 0;
+}
+
+/* Task lists: a checkbox in place of the bullet, done items struck through. In the editor the
+   item is a flex row: its <input> checkbox, then the content (ProseMirror needs a container that
+   holds only the content). Content shown elsewhere under the class stilo-content gets a box drawn
+   from data-checked instead. Either way the box is centered on the first line, not on the whole
+   item, which may hold more paragraphs and sub-lists. */
+.stilo-content ul[data-type="taskList"] {
+  list-style: none;
+}
+
+.stilo-content.ProseMirror ul[data-type="taskList"] {
+  padding-left: 0.25em;
+}
+
+.stilo-content.ProseMirror ul[data-type="taskList"] > li {
+  display: flex;
+  gap: 0.5em;
+}
+
+.stilo-task-item__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Form controls have their own font: inherit it, so that em and lh are those of the text. */
+.stilo-task-item__checkbox {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  margin: calc(0.5lh - 0.5em) 0 0;
+  font-size: inherit;
+  line-height: inherit;
+  accent-color: var(--stilo-color-focus, #0969da);
+  cursor: pointer;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li {
+  position: relative;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li::before {
+  content: "";
+  display: flex;
+  position: absolute;
+  top: calc(0.5lh - 0.5em);
+  left: -1.5em;
+  box-sizing: border-box;
+  width: 1em;
+  height: 1em;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--stilo-color-muted, #59636e);
+  border-radius: 0.2em;
+  color: #ffffff;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li[data-checked="true"]::before {
+  content: "\2713";
+  border-color: var(--stilo-color-focus, #0969da);
+  background: var(--stilo-color-focus, #0969da);
+}
+
+.stilo-content [data-checked="true"] > .stilo-task-item__content > p:first-child,
+.stilo-content:not(.ProseMirror) [data-checked="true"] > p:first-child,
+.stilo-content:not(.ProseMirror) [data-checked="true"]:not(:has(> p)) {
+  color: var(--stilo-color-muted, #59636e);
+  text-decoration: line-through;
+}
+
+.stilo-content blockquote {
+  margin: 0.5em 0;
+  padding-left: 1em;
+  border-left: 3px solid var(--stilo-color-border, #d1d9e0);
+  color: var(--stilo-color-muted, #59636e);
+}
+
+.stilo-content hr {
+  margin: 1em 0;
+  border: none;
+  border-top: 1px solid var(--stilo-color-border, #d1d9e0);
+}
+
+.stilo-content code {
+  padding: 0.1em 0.3em;
+  border-radius: 0.25em;
+  background: var(--stilo-color-hover, #eef1f4);
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+}
+
+/* Code block: the <code> inside it drops the inline code box. */
+.stilo-content pre {
+  margin: 0.5em 0;
+  padding: 0.75em 1em;
+  border-radius: 0.375em;
+  background: var(--stilo-color-hover, #eef1f4);
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+
+.stilo-content pre code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+}
+
+/* Tables: a cell holds blocks, whose outer margins would pad the cell twice. */
+.stilo-content .tableWrapper {
+  margin: 1em 0;
+}
+
+.stilo-content td,
+.stilo-content th {
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border, #d1d9e0);
+}
+
+.stilo-content th {
+  background: var(--stilo-color-table-header, #f6f8fa);
+  font-weight: 600;
+  text-align: start;
+}
+
+.stilo-content td > :first-child,
+.stilo-content th > :first-child {
+  margin-top: 0;
+}
+
+/* The resize handle shown on hover is the last child of its cell: the block before it is the last
+   block, otherwise its margin would come back and the table grow under the mouse. */
+.stilo-content td > :last-child,
+.stilo-content th > :last-child,
+.stilo-content td > :has(+ .column-resize-handle:last-child),
+.stilo-content th > :has(+ .column-resize-handle:last-child) {
+  margin-bottom: 0;
+}
+
+/* Images: never wider than the content; with width and height they keep their ratio. */
+.stilo-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Image in the editor: two side handles, inside the image (a top-level block clips what
+   overflows it, see "Large documents" below), shown while the image is selected. Only a selected
+   image is positioned: a positioned element paints over the caret placed right after it. */
+.stilo-image {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.stilo-image.ProseMirror-selectednode {
+  position: relative;
+}
+
+.stilo-image img {
+  display: block;
+}
+
+.stilo-image__handle {
+  display: none;
+  position: absolute;
+  top: 50%;
+  width: 6px;
+  height: min(48px, 50%);
+  min-height: 16px;
+  transform: translateY(-50%);
+  border: 1px solid #ffffff;
+  border-radius: 3px;
+  background: var(--stilo-color-text, #1f2328);
+  opacity: 0.7;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.stilo-image__handle--left {
+  left: 6px;
+}
+
+.stilo-image__handle--right {
+  right: 6px;
+}
+
+.stilo-content[contenteditable="true"] .stilo-image.ProseMirror-selectednode .stilo-image__handle {
+  display: block;
+}
+
+.stilo-image__handle:hover {
+  opacity: 1;
+}
+
+/* Placeholder: shown only while the content is editable. */
+.stilo-content[contenteditable="true"] .stilo-placeholder::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--stilo-color-muted, #59636e);
+  pointer-events: none;
+}
+
+/*
+ * Large documents (ADR 0003): the browser skips style, layout and paint of the top-level blocks
+ * outside the viewport. Real typing in 10k paragraphs went from 144 ms to 24 ms per key (median,
+ * Chromium). A skipped block is 3em tall until it has been rendered once.
+ */
+.stilo-content > * {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 3em;
+}
+
+/* Containment stops margins from collapsing through a block: trim them inside a blockquote. */
+.stilo-content blockquote > :first-child {
+  margin-top: 0;
+}
+
+.stilo-content blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+/* Find and replace (T-043): the matches and the selected one */
+.stilo-search-match {
+  background: var(--stilo-color-search-match, #fff1a8);
+}
+
+.stilo-search-match--current {
+  background: var(--stilo-color-search-current, #ffb347);
+}
+
+/* Stilo default UI styles. */
+
+/*
+ * Default values of the custom properties (docs/UI.md §7). `:where()` has no specificity, so any
+ * rule of the host page that sets them wins, whatever the order of the stylesheets.
+ */
+:where(:root) {
+  --stilo-font-family: system-ui, sans-serif;
+  --stilo-font-size: 14px;
+
+  --stilo-color-text: #1f2328;
+  --stilo-color-muted: #59636e;
+  --stilo-color-bg: #ffffff;
+  --stilo-color-toolbar-bg: #f9fbfd;
+  --stilo-color-border: #d1d9e0;
+  --stilo-color-separator: #e4e8ec;
+  --stilo-color-hover: #eef1f4;
+  --stilo-color-hover-group: #f5f7f9;
+  --stilo-color-active: #dde4ee;
+  --stilo-color-focus: #0969da;
+  --stilo-color-error: #d1242f;
+
+  --stilo-radius: 6px;
+
+  --stilo-toolbar-padding-x: 2px;
+  --stilo-toolbar-padding-y: 4px;
+  --stilo-toolbar-gap: 2px;
+  --stilo-toolbar-group-gap: 4px;
+  --stilo-toolbar-separator-height: 18px;
+  --stilo-toolbar-sticky-top: 0;
+  --stilo-toolbar-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
+  --stilo-z-toolbar: 1001;
+
+  --stilo-button-size: 30px;
+  --stilo-icon-size: 18px;
+
+  --stilo-popover-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+  --stilo-z-popover: 1000;
+
+  --stilo-menu-h1-size: 1.5em;
+  --stilo-menu-h2-size: 1.3em;
+  --stilo-menu-h3-size: 1.15em;
+  --stilo-menu-h4-size: 1em;
+  --stilo-menu-h5-size: 1em;
+  --stilo-menu-h6-size: 1em;
+}
+
+/* Toolbar */
+.stilo-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--stilo-toolbar-group-gap);
+  padding: var(--stilo-toolbar-padding-y) var(--stilo-toolbar-padding-x);
+  background: var(--stilo-color-toolbar-bg);
+}
+
+/*
+ * The toolbar and its sticky container have a background: their top corners follow the element
+ * that holds them, so that a rounded editor box keeps its corners (no `overflow` on the host,
+ * which would cut the popovers).
+ */
+.stilo-toolbar-host,
+.stilo-toolbar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+/* Sticky toolbar container (option `sticky`) */
+.stilo-toolbar-host {
+  position: sticky;
+  top: var(--stilo-toolbar-sticky-top);
+  z-index: var(--stilo-z-toolbar);
+  background: var(--stilo-color-bg);
+  container-type: scroll-state;
+}
+
+/*
+ * A shadow while the toolbar is stuck at the top of the scrolling page. Pure CSS: browsers
+ * without scroll-state container queries ignore it and show the toolbar without shadow.
+ */
+@container scroll-state(stuck: top) {
+  .stilo-toolbar {
+    box-shadow: var(--stilo-toolbar-shadow);
+  }
+}
+
+/* Group */
+.stilo-toolbar__group {
+  display: flex;
+  gap: var(--stilo-toolbar-gap);
+}
+
+/* Separator: a short line, vertically centered, before every group after the first */
+.stilo-toolbar__group:not(:first-child) {
+  position: relative;
+  padding-left: var(--stilo-toolbar-group-gap);
+}
+
+.stilo-toolbar__group:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 1px;
+  height: var(--stilo-toolbar-separator-height);
+  background: var(--stilo-color-separator);
+  transform: translateY(-50%);
+}
+
+/* Button */
+.stilo-toolbar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stilo-button-size);
+  min-width: var(--stilo-button-size);
+  height: var(--stilo-button-size);
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: var(--stilo-color-text);
+  cursor: pointer;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  padding: 0;
+  margin: 0;
+  transition: background-color 0.15s;
+}
+
+.stilo-toolbar__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-toolbar__button:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 2px;
+}
+
+.stilo-toolbar__button.stilo-toolbar__button--active {
+  background: var(--stilo-color-active);
+}
+
+/* The find button while its bar is open (T-043) */
+.stilo-toolbar__button[data-item="find"][aria-expanded="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-toolbar__button[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.stilo-toolbar__button[aria-disabled="true"]:hover {
+  background: transparent;
+}
+
+/* Icon */
+.stilo-icon {
+  width: var(--stilo-icon-size);
+  height: var(--stilo-icon-size);
+  color: var(--stilo-color-text);
+}
+
+/* Popover */
+.stilo-popover-host {
+  position: relative;
+}
+
+.stilo-popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  background: var(--stilo-color-bg);
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  box-shadow: var(--stilo-popover-shadow);
+  z-index: var(--stilo-z-popover);
+  padding: 4px;
+}
+
+/* A component class with its own `display` must not show a closed popover. */
+.stilo-popover[hidden] {
+  display: none;
+}
+
+/* Dropdown */
+.stilo-dropdown__trigger {
+  width: auto;
+  min-width: 120px;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 0 8px;
+}
+
+.stilo-dropdown__trigger[data-item="fontFamily"] {
+  width: 120px;
+}
+
+/* A long value is truncated, the chevron keeps its size */
+.stilo-dropdown__trigger .stilo-icon {
+  flex-shrink: 0;
+}
+
+.stilo-dropdown__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.stilo-dropdown__menu {
+  min-width: 160px;
+}
+
+.stilo-dropdown__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--stilo-radius);
+  cursor: pointer;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-dropdown__option:hover,
+.stilo-dropdown__option:focus-visible {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-dropdown__option:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -2px;
+}
+
+.stilo-dropdown__option[aria-checked="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-dropdown__option[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.stilo-dropdown__option[aria-disabled="true"]:hover {
+  background: transparent;
+}
+
+.stilo-dropdown__label {
+  flex: 1;
+}
+
+.stilo-dropdown__shortcut {
+  font-size: 0.85em;
+  color: var(--stilo-color-muted);
+}
+
+/* Heading preview */
+.stilo-dropdown__option--h1 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h1-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h2 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h2-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h3 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h3-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h4 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h4-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h5 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h5-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h6 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h6-size);
+  font-weight: 600;
+}
+
+/* Font size control: − field + */
+.stilo-font-size {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stilo-toolbar-gap);
+}
+
+.stilo-font-size__input {
+  box-sizing: border-box;
+  width: 2.5em;
+  height: calc(var(--stilo-button-size) - 4px);
+  padding: 0 4px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: var(--stilo-color-text);
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  text-align: center;
+  font-weight: 600;
+}
+
+.stilo-font-size__input:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -1px;
+}
+
+.stilo-font-size__input[aria-invalid="true"] {
+  border-color: var(--stilo-color-error);
+}
+
+.stilo-font-size__input[aria-disabled="true"] {
+  opacity: 0.4;
+}
+
+.stilo-font-size__list {
+  min-width: 4.5em;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.stilo-font-size__option {
+  padding: 4px 12px;
+  border-radius: var(--stilo-radius);
+  cursor: pointer;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+  text-align: center;
+}
+
+.stilo-font-size__option:hover,
+.stilo-font-size__option--active {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-font-size__option[aria-selected="true"] {
+  background: var(--stilo-color-active);
+}
+
+/* Icon menu (text alignment): the options in a row. An icon dropdown (line spacing) has the same
+   trigger. */
+.stilo-icon-menu__trigger,
+.stilo-dropdown__trigger--icon {
+  width: auto;
+  min-width: var(--stilo-button-size);
+  gap: 2px;
+  padding: 0 4px;
+}
+
+.stilo-icon-menu {
+  display: flex;
+  gap: var(--stilo-toolbar-gap);
+}
+
+.stilo-icon-menu__trigger .stilo-icon:last-child,
+.stilo-dropdown__trigger--icon .stilo-icon:last-child {
+  width: 12px;
+  height: 12px;
+}
+
+/* Link popover */
+.stilo-link-popover__form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  width: 320px;
+  padding: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-link-popover__url {
+  flex: 1 1 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: inherit;
+  font: inherit;
+}
+
+.stilo-link-popover__url:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -1px;
+}
+
+.stilo-link-popover__url[aria-invalid="true"] {
+  border-color: var(--stilo-color-error);
+}
+
+.stilo-link-popover__new-tab {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.stilo-link-popover__actions {
+  display: flex;
+  gap: 4px;
+}
+
+.stilo-link-popover__button {
+  padding: 4px 10px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.stilo-link-popover__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-link-popover__button:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-link-popover__button--primary,
+.stilo-link-popover__button--primary:hover {
+  border-color: var(--stilo-color-focus);
+  background: var(--stilo-color-focus);
+  color: #ffffff;
+}
+
+/* Link bubble: small and unobtrusive */
+.stilo-link-bubble {
+  display: flex;
+  gap: 1px;
+  padding: 2px;
+}
+
+.stilo-link-bubble__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: var(--stilo-color-text);
+  cursor: pointer;
+}
+
+.stilo-link-bubble__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-link-bubble__button .stilo-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Character picker: 10 columns (COLUMNS in character-picker.ts) */
+.stilo-char-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-char-picker__search {
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  font: inherit;
+}
+
+.stilo-char-picker__search:focus-visible,
+.stilo-char-picker__tab:focus-visible,
+.stilo-char-picker__char:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -2px;
+}
+
+.stilo-char-picker__tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--stilo-color-border);
+}
+
+.stilo-char-picker__tabs[hidden] {
+  display: none;
+}
+
+.stilo-char-picker__tab {
+  padding: 6px 10px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--stilo-color-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.stilo-char-picker__tab[aria-selected="true"] {
+  border-bottom-color: var(--stilo-color-focus);
+  color: var(--stilo-color-text);
+}
+
+.stilo-char-picker__panel {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.stilo-char-picker__heading {
+  margin: 8px 0 4px;
+  color: var(--stilo-color-muted);
+  font-size: 0.85em;
+}
+
+.stilo-char-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(10, 32px);
+  gap: 2px;
+}
+
+.stilo-char-picker__char {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.stilo-char-picker__char:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-char-picker__empty {
+  margin: 8px 0;
+  color: var(--stilo-color-muted);
+}
+
+/* Table menu (T-045): insert grid of 10 columns (GRID_COLUMNS in table-menu.ts), operations */
+.stilo-table-menu {
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-table-menu__picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px;
+}
+
+.stilo-table-menu__picker[hidden],
+.stilo-table-menu__actions[hidden] {
+  display: none;
+}
+
+.stilo-table-menu__grid {
+  display: grid;
+  grid-template-columns: repeat(10, 18px);
+  gap: 3px;
+}
+
+.stilo-table-menu__cell {
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: 3px;
+  background: var(--stilo-color-bg);
+  cursor: pointer;
+}
+
+.stilo-table-menu__cell--active {
+  border-color: var(--stilo-color-focus);
+  background: var(--stilo-color-active);
+}
+
+.stilo-table-menu__cell:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-table-menu__size {
+  text-align: center;
+  color: var(--stilo-color-muted);
+}
+
+.stilo-table-menu__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.stilo-table-menu__actions {
+  min-width: 200px;
+}
+
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked] {
+  background: transparent;
+}
+
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked]:hover,
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked]:focus-visible {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked]::after {
+  content: "✓";
+  margin-left: auto;
+  visibility: hidden;
+}
+
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked="true"]::after {
+  visibility: visible;
+}
+
+/* Table handles (T-049): row, column and corner, over the editor */
+.stilo-table-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--stilo-z-popover);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: var(--stilo-color-muted);
+  cursor: pointer;
+}
+
+.stilo-table-handle[hidden] {
+  display: none;
+}
+
+.stilo-table-handle:hover,
+.stilo-table-handle[aria-expanded="true"] {
+  border-color: var(--stilo-color-focus);
+  color: var(--stilo-color-focus);
+}
+
+.stilo-table-handle .stilo-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.stilo-table-handle-menu {
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-table-menu__separator {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--stilo-color-separator);
+}
+
+/* Color split button (T-026): the main part shows the last used color under its icon */
+.stilo-split {
+  display: flex;
+}
+
+/* Group hover: hovering one part lightly highlights both; the hovered part stays darker */
+.stilo-split:hover
+.stilo-toolbar__button:not(.stilo-toolbar__button--active, [aria-disabled="true"]) {
+  background: var(--stilo-color-hover-group);
+}
+
+.stilo-split
+  .stilo-toolbar__button:not(.stilo-toolbar__button--active, [aria-disabled="true"]):hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-toolbar__button.stilo-split__main {
+  flex-direction: column;
+  gap: 1px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.stilo-split__main .stilo-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.stilo-split__color {
+  width: 16px;
+  height: 4px;
+  border-radius: 1px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+}
+
+.stilo-toolbar__button.stilo-split__arrow {
+  width: 20px;
+  min-width: 20px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.stilo-split__arrow .stilo-icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* Color picker: 8 columns (COLUMNS in color-button.ts) */
+.stilo-color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-color-picker__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.stilo-color-picker__none,
+.stilo-color-picker__default {
+  flex: 1;
+  padding: 4px 8px;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+}
+
+.stilo-color-picker__none:hover,
+.stilo-color-picker__default:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-color-picker__default[aria-pressed="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-color-picker__default mark {
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.stilo-color-picker__separator {
+  width: 1px;
+  height: 18px;
+  background: var(--stilo-color-separator);
+}
+
+.stilo-color-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 22px);
+  gap: 4px;
+}
+
+.stilo-color-picker__swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+  cursor: pointer;
+}
+
+.stilo-color-picker__swatch:hover {
+  transform: scale(1.15);
+}
+
+.stilo-color-picker__swatch[aria-pressed="true"] {
+  outline: 2px solid var(--stilo-color-text);
+  outline-offset: 1px;
+}
+
+.stilo-color-picker__none:focus-visible,
+.stilo-color-picker__default:focus-visible,
+.stilo-color-picker__swatch:focus-visible,
+.stilo-color-picker__value:focus-visible,
+.stilo-color-picker__native:focus-visible,
+.stilo-color-picker__apply:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-color-picker__custom {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin: 0;
+}
+
+.stilo-color-picker__native {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  cursor: pointer;
+}
+
+.stilo-color-picker__value {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  font: inherit;
+}
+
+.stilo-color-picker__value[aria-invalid="true"] {
+  border-color: var(--stilo-color-error);
+}
+
+.stilo-color-picker__apply {
+  padding: 4px 10px;
+  border: 1px solid var(--stilo-color-focus);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-focus);
+  color: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+/*
+ * Find bar (T-043): a floating panel at the top right, just under the toolbar, over the content
+ * (the content does not move). It lives in the toolbar container, so it stays at the top with a
+ * sticky toolbar; without `sticky` the container is made a positioned ancestor.
+ */
+.stilo-find-bar-host:not(.stilo-toolbar-host) {
+  position: relative;
+}
+
+.stilo-find-bar {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 8px;
+  /* Under the popovers of the toolbar (character picker, colors, menus), which open over it. */
+  z-index: calc(var(--stilo-z-popover) - 1);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: calc(100% - 16px);
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  box-shadow: var(--stilo-popover-shadow);
+  color: var(--stilo-color-text);
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    display 0.15s allow-discrete;
+}
+
+/* Slides in from above; browsers without @starting-style show it at once. */
+@starting-style {
+  .stilo-find-bar {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stilo-find-bar {
+    transition: none;
+  }
+}
+
+.stilo-find-bar__row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stilo-find-bar[hidden] {
+  display: none;
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.stilo-find-bar__row[hidden] {
+  display: none;
+}
+
+.stilo-find-bar__input {
+  box-sizing: border-box;
+  width: 200px;
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 4px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: inherit;
+  font: inherit;
+}
+
+.stilo-find-bar__input:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -1px;
+}
+
+.stilo-find-bar__count {
+  min-width: 7em;
+  color: var(--stilo-color-muted);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+.stilo-find-bar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.stilo-find-bar__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-find-bar__button:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-find-bar__toggle[aria-pressed="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-find-bar__button--text {
+  padding: 0 10px;
+  white-space: nowrap;
+  border: 1px solid var(--stilo-color-border);
+  background: var(--stilo-color-bg);
+}
+
+/* Status bar (T-043): word and character count under the editor */
+.stilo-status-bar {
+  display: flex;
+  gap: 16px;
+  padding: 4px 12px;
+  border-top: 1px solid var(--stilo-color-separator);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  background: var(--stilo-color-toolbar-bg);
+  color: var(--stilo-color-muted);
+  font-family: var(--stilo-font-family);
+  font-size: 12px;
+}