smartrte-react 1.0.0-beta.9 → 1.1.1

package/dist/theme.d.ts

@@ -1,3 +1,3 @@
 export type SrteTheme = 'light' | 'dark';
-export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n  --srte-background: var(--card, #ffffff);\n  --srte-canvas: var(--background, #ffffff);\n  --srte-foreground: var(--foreground, #0f172a);\n  --srte-muted: var(--muted, #f1f5f9);\n  --srte-muted-foreground: var(--muted-foreground, #64748b);\n  --srte-ring: var(--ring, #0284c7);\n  --srte-radius: var(--radius, 0.625rem);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #e2e8f0);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n  --srte-modal-backdrop-filter: blur(2px);\n  --srte-modal-bg: var(--card, #ffffff);\n  --srte-modal-text: var(--foreground, #000000);\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  --srte-accent: #0284c7;\n  --srte-accent-bg: rgba(2, 132, 199, 0.12);\n  --srte-danger: #dc2626;\n  --srte-primary: #2563eb;\n  /* --srte-primary on --srte-accent-bg measures 4.43:1, under WCAG AA's\n     4.5:1 for normal text - used only for the pressed toolbar-button state\n     (see .srte-tool-button[aria-pressed=\"true\"]), not a replacement for\n     --srte-primary generally. */\n  --srte-primary-pressed: #1d4ed8;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #f3f4f6;\n  --srte-code-bg: #f6f8fa;\n  --srte-code-text: #24292f;\n}\n.srte-editor.srte-dark {\n  --srte-background: var(--card, #1e293b);\n  --srte-canvas: var(--background, #0f172a);\n  --srte-foreground: var(--foreground, #f8fafc);\n  --srte-muted: var(--muted, #334155);\n  --srte-muted-foreground: var(--muted-foreground, #94a3b8);\n  --srte-ring: var(--ring, #38bdf8);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #334155);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.22);\n  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n  --srte-modal-bg: var(--card, #1e293b);\n  --srte-modal-text: var(--foreground, #e0e0e0);\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n  --srte-accent: #38bdf8;\n  --srte-accent-bg: rgba(56, 189, 248, 0.16);\n  --srte-danger: #ef4444;\n  --srte-primary: #3b82f6;\n  --srte-primary-pressed: var(--srte-primary);\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #333333;\n  --srte-code-bg: #111827;\n  --srte-code-text: #e5e7eb;\n}\n.srte-editor {\n  border-radius: var(--srte-radius);\n  font-family: \"IBM Plex Sans\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  container: srte-editor / inline-size;\n}\n.srte-canonical-authority > .srte-editor[contenteditable] {\n  width: 100%;\n  padding: 16px 20px;\n  box-sizing: border-box;\n  border: 1px solid var(--srte-border);\n  border-radius: 0 0 var(--srte-radius) var(--srte-radius);\n  outline: none;\n  background: var(--srte-canvas);\n  color: var(--srte-foreground);\n  caret-color: var(--srte-foreground);\n  line-height: 1.6;\n}\n.srte-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  min-height: 48px;\n  padding: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--srte-border);\n  background: var(--srte-background);\n  color: var(--srte-foreground);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.srte-toolbar-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n}\n.srte-toolbar-group + .srte-toolbar-group::before {\n  content: \"\";\n  width: 1px;\n  height: 20px;\n  margin: 0 5px 0 3px;\n  background: var(--srte-border);\n}\n.srte-tool-button,\n.srte-toolbar select {\n  height: 32px;\n  min-width: 32px;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--srte-foreground);\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.srte-tool-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n}\n.srte-toolbar select {\n  max-width: 132px;\n  padding: 0 26px 0 9px;\n  border-color: var(--srte-border);\n  background: var(--srte-input-bg);\n  cursor: pointer;\n}\n.srte-tool-button:hover,\n.srte-toolbar select:hover,\n.srte-toolbar-menu[open] > .srte-menu-trigger {\n  background: var(--srte-muted);\n  border-color: var(--srte-border);\n}\n.srte-tool-button.srte-active,\n.srte-tool-button[aria-pressed=\"true\"] {\n  /* var(--srte-primary) (#2563eb) on var(--srte-accent-bg) measured 4.43:1,\n     just under WCAG AA's 4.5:1 for normal text (axe-core, Phase 11 Tier 3) -\n     a dedicated, darker pressed-state color keeps the same hue family\n     while clearing the threshold, without changing --srte-primary's other,\n     already-compliant usages (e.g. against solid backgrounds). */\n  color: var(--srte-primary-pressed);\n  background: var(--srte-accent-bg);\n  border-color: color-mix(in srgb, var(--srte-primary) 35%, transparent);\n}\n.srte-tool-button:focus-visible,\n.srte-toolbar select:focus-visible,\n.srte-menu-item:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 1px;\n}\n.srte-tool-button:disabled,\n.srte-menu-item:disabled,\n.srte-toolbar select:disabled {\n  cursor: not-allowed;\n  opacity: .4;\n}\n.srte-toolbar-menu {\n  position: relative;\n}\n.srte-toolbar-menu > summary {\n  list-style: none;\n}\n.srte-toolbar-menu > summary::-webkit-details-marker {\n  display: none;\n}\n.srte-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 80;\n  min-width: 210px;\n  padding: 4px;\n  overflow: hidden;\n  border: 1px solid var(--srte-border);\n  border-radius: 12px;\n  background: var(--srte-menu-bg);\n  color: var(--srte-menu-text);\n  box-shadow: var(--srte-menu-shadow);\n}\n/*\n * ToolbarDropdown's own menu panel (docs/bugs/\n * toolbar-dropdown-clipped-by-host-overflow-hidden.md): position:fixed with\n * JS-measured left/top (ToolbarPrimitives.tsx) instead of the default\n * position:absolute above, so it always escapes an ancestor host container's\n * own overflow:hidden regardless of DOM depth - MobileMoreMenu's overflow\n * menu (no data-srte-menu-fixed attribute) is unaffected and keeps its\n * existing position:absolute/right-anchored behavior.\n */\n.srte-menu[data-srte-menu-fixed=\"true\"] {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n.srte-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n  text-align: left;\n  white-space: nowrap;\n}\n.srte-menu-item:hover {\n  background: var(--srte-muted);\n}\n.srte-menu-check {\n  margin-left: auto;\n  color: var(--srte-primary);\n  font-weight: 700;\n}\n.srte-menu-separator {\n  height: 1px;\n  margin: 4px;\n  background: var(--srte-border);\n}\n.srte-mobile-more { display: none; }\n.srte-toolbar .srte-command-proxy { display: none; }\n.srte-split-control {\n  display: inline-flex;\n}\n.srte-split-control > .srte-tool-button:first-child {\n  border-radius: 8px 0 0 8px;\n}\n.srte-split-control > select {\n  width: 27px;\n  padding: 0;\n  border-radius: 0 8px 8px 0;\n  border-left: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  color: transparent;\n  background-color: var(--srte-muted);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li {\n  display: grid;\n  grid-template-columns: 1.1em minmax(0, 1fr);\n  column-gap: .45em;\n  align-items: start;\n  padding-left: 0;\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, upper-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, upper-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, upper-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, decimal) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal-leading-zero) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: \"\u25CF  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: \"\u25CB  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: \"\u25A0  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-outline\"] > li::marker {\n  content: counters(list-item, \".\") \".  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u2756  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u27A2  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u25A1  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25A3  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25AA  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u279C  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25C6  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25CF  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u2605  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25CB  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u27A2  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25CB  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check] {\n  display: inline-flex;\n  grid-column: 1;\n  grid-row: 1;\n  align-items: center;\n  justify-content: center;\n  width: 1.1em;\n  height: 1.6em;\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  margin: 0;\n  line-height: 1.6;\n  vertical-align: top;\n  position: relative;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]::before {\n  content: \"\";\n  width: .9em;\n  height: .9em;\n  box-sizing: border-box;\n  border: 1.5px solid var(--srte-muted-foreground);\n  border-radius: 3px;\n  background: var(--srte-canvas);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::before {\n  border-color: var(--srte-primary);\n  background: var(--srte-primary);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srte-on-primary) 25%, transparent);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  width: .42em;\n  height: .22em;\n  border-left: 1.5px solid var(--srte-on-primary);\n  border-bottom: 1.5px solid var(--srte-on-primary);\n  transform: translateY(-.08em) rotate(-45deg);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre) {\n  grid-column: 2;\n  min-width: 0;\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(ul,ol) {\n  grid-column: 2;\n}\n.srte-editor:focus-within {\n  border-color: var(--srte-ring) !important;\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);\n}\n/*\n * @container (element width), not @media (viewport width): a host can embed\n * the editor at any fraction of the browser window - a split pane next to a\n * preview panel is the case that surfaced this (docs/bugs/\n * toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md). A\n * plain @media breakpoint here would fire based on the *window*, wrongly\n * switching tiers for an editor instance that's actually much narrower (or\n * wider) than the window - .srte-editor already establishes its own\n * container: srte-editor / inline-size (see the .srte-editor rule above),\n * so @container always reflects this specific instance's real rendered width regardless of host\n * layout, with no @media fallback needed (container queries have full\n * support across this project's three target engines).\n */\n@container srte-editor (max-width: 639px) {\n  .srte-toolbar { gap: 3px; padding: 6px; }\n  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n  .srte-toolbar-group[data-srte-priority=\"3\"],\n  .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n  .srte-mobile-more { display: block; }\n  /* left/top are no longer set here - ToolbarPrimitives.tsx now computes\n     them via inline style (JS-measured, position:fixed, viewport-clamped;\n     see MobileMoreMenu's own doc comment), which always wins over any\n     value set here regardless of specificity or source order. Sizing/\n     scroll behavior stays defined here since inline positioning doesn't\n     touch those properties. */\n  .srte-mobile-more .srte-menu {\n    width: min(280px, calc(100vw - 16px));\n    min-width: 0;\n    max-height: min(70dvh, 480px);\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n  .srte-menu-item { height: 40px; }\n}\n/*\n * Wide-viewport promotion (docs/bugs/toolbar-priority-collapse-fixed-threshold-no-wide-promotion.md):\n * below this, the single 639px breakpoint above was this system's ONLY\n * threshold - every dropdown-grouped tool stayed hidden inside its dropdown\n * at every width from 640px up to and past a 2200px+ desktop, since nothing\n * ever measured or scaled with the extra room. A handful of tools frequent\n * enough to matter once there's genuinely spare room (Superscript,\n * Subscript, Text colour, Background colour, Font size, Font family, Remove\n * link, Insert formula, Special characters) get a standalone always-visible\n * ToolbarButton copy (data-srte-wide-promote, rendered directly in the\n * toolbar row) that appears past this breakpoint, while their existing\n * dropdown/mobile-menu ToolbarMenuItem copy (the exact same\n * data-srte-wide-promote attribute, on the .srte-menu-item element instead)\n * hides so the tool isn't offered twice. Below this breakpoint - including\n * all of mobile AND the 640-1439px tablet/typical-laptop band, which keeps\n * today's grouped-dropdown layout unchanged - the standalone copy stays\n * hidden and the dropdown copy is what's reachable.\n *\n * 1440px, not 1280px: Playwright's own default test viewport is exactly\n * 1280x720, and the vast majority of this suite's toolbar interactions run\n * at that default without ever calling page.setViewportSize - a 1280px\n * threshold would have flipped nearly every existing toolbar test's\n * dropdown-item locators (role=menuitem) over to CSS display:none out from\n * under them. 1440px clears that default with room to spare while still\n * comfortably covering \"wide desktop\" (the ~2264px width the original\n * report was filed against).\n *\n * @container only, no @media fallback - same reasoning as the mobile tier\n * above (docs/bugs/toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md):\n * a plain @media(min-width:1440px) fired whenever the *browser window* was\n * wide, even when this editor instance was embedded in a much narrower\n * split pane - promoting 9 extra buttons into a group with no room for\n * them, which squeezed/overlapped the group's existing buttons instead of\n * wrapping cleanly.\n */\n.srte-tool-button[data-srte-wide-promote=\"true\"] { display: none; }\n@container srte-editor (min-width: 1440px) {\n  .srte-tool-button[data-srte-wide-promote=\"true\"] { display: inline-flex; }\n  .srte-menu-item[data-srte-wide-promote=\"true\"] { display: none; }\n}\n.srte-editor [contenteditable] blockquote {\n  border-left: 4px solid var(--srte-accent);\n  margin: 0.75em 0;\n  padding: 0.5em 1em;\n  /* --srte-muted, not the retired --srte-surface-subtle (docs/bugs/\n     srte-surface-subtle-not-host-theme-aware.md): every other neutral\n     surface/text token here (--srte-background, --srte-foreground,\n     --srte-muted, --srte-border) is defined as var(--host-token, fallback)\n     so it correctly follows a host's OWN light/dark state even if\n     .srte-dark never gets applied for some host-side wiring reason -\n     --srte-surface-subtle was the one exception, a bare hardcoded hex with\n     no host integration, which is exactly what let a real host (dark mode,\n     .srte-dark not reaching this editor instance) render this blockquote\n     with a light-mode background and dark-mode text simultaneously. */\n  background: var(--srte-muted);\n  color: var(--srte-text);\n}\n.srte-editor [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  color: inherit;\n}\n.srte-editor [contenteditable] p {\n  display: block;\n  margin: 0 0 0.75em;\n  font-size: 1em;\n  font-weight: 400;\n  line-height: 1.6;\n}\n.srte-editor [contenteditable] p[data-srte-caret-boundary=\"true\"] {\n  min-height: 1.6em;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  display: block;\n  margin: 0.75em 0 0.4em;\n  font-weight: 700;\n  line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n  font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n  font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n  font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n  list-style-type: disc;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n  list-style-type: decimal;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n  display: list-item;\n  margin: 0.25em 0;\n  padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n  color: currentColor;\n}\n.srte-editor [contenteditable] table {\n  width: 100%;\n  margin: 0.75em 0;\n  border-collapse: collapse;\n}\n.srte-editor [contenteditable] th,\n.srte-editor [contenteditable] td {\n  padding: 8px;\n  border: 1px solid var(--srte-border);\n  vertical-align: top;\n}\n.srte-editor [contenteditable] [data-smart-cell-selected=\"true\"] {\n  background: color-mix(in srgb, var(--srte-primary) 12%, var(--srte-canvas));\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--srte-primary) 65%, transparent);\n}\n.srte-editor [contenteditable][data-smart-cell-selection-active] ::selection {\n  background: transparent;\n  color: inherit;\n}\n.srte-editor [contenteditable] th {\n  background: var(--srte-muted);\n  font-weight: 600;\n  text-align: left;\n}\n.srte-editor [contenteditable] td > h1,\n.srte-editor [contenteditable] td > h2,\n.srte-editor [contenteditable] td > h3,\n.srte-editor [contenteditable] th > h1,\n.srte-editor [contenteditable] th > h2,\n.srte-editor [contenteditable] th > h3 {\n  margin: 0 0 0.4em;\n  overflow-wrap: anywhere;\n}\n.srte-editor [contenteditable] pre {\n  display: block;\n  margin: 0.75em 0;\n  padding: 12px 14px;\n  overflow-x: auto;\n  border: 1px solid var(--srte-border);\n  border-radius: 6px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n  line-height: 1.55;\n  white-space: pre-wrap;\n}\n.srte-editor [contenteditable] pre code {\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n.srte-editor [contenteditable] code:not(pre code) {\n  padding: 0.1em 0.35em;\n  border-radius: 3px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n}\n.srte-editor [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n  color: var(--srte-primary) !important;\n  text-decoration: underline !important;\n  text-decoration-thickness: 1px !important;\n  text-underline-offset: 2px !important;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n  color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n  outline: 2px solid var(--srte-accent);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n  line-height: 0;\n}\n";
+export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n  --srte-background: var(--card, #ffffff);\n  --srte-canvas: var(--background, #ffffff);\n  --srte-foreground: var(--foreground, #0f172a);\n  --srte-muted: var(--muted, #f1f5f9);\n  --srte-muted-foreground: var(--muted-foreground, #64748b);\n  --srte-ring: var(--ring, #0284c7);\n  --srte-radius: var(--radius, 0.625rem);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #e2e8f0);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n  --srte-modal-backdrop-filter: blur(2px);\n  --srte-modal-bg: var(--card, #ffffff);\n  --srte-modal-text: var(--foreground, #000000);\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  --srte-accent: #0284c7;\n  --srte-accent-bg: rgba(2, 132, 199, 0.12);\n  --srte-danger: #dc2626;\n  --srte-primary: #2563eb;\n  /* --srte-primary on --srte-accent-bg measures 4.43:1, under WCAG AA's\n     4.5:1 for normal text - used only for the pressed toolbar-button state\n     (see .srte-tool-button[aria-pressed=\"true\"]), not a replacement for\n     --srte-primary generally. */\n  --srte-primary-pressed: #1d4ed8;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #f3f4f6;\n  --srte-code-bg: #f6f8fa;\n  --srte-code-text: #24292f;\n}\n.srte-editor.srte-dark {\n  --srte-background: var(--card, #1e293b);\n  --srte-canvas: var(--background, #0f172a);\n  --srte-foreground: var(--foreground, #f8fafc);\n  --srte-muted: var(--muted, #334155);\n  --srte-muted-foreground: var(--muted-foreground, #94a3b8);\n  --srte-ring: var(--ring, #38bdf8);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #334155);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.22);\n  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n  --srte-modal-bg: var(--card, #1e293b);\n  --srte-modal-text: var(--foreground, #e0e0e0);\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n  --srte-accent: #38bdf8;\n  --srte-accent-bg: rgba(56, 189, 248, 0.16);\n  --srte-danger: #ef4444;\n  --srte-primary: #3b82f6;\n  --srte-primary-pressed: var(--srte-primary);\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #333333;\n  --srte-code-bg: #111827;\n  --srte-code-text: #e5e7eb;\n}\n.srte-editor {\n  border-radius: var(--srte-radius);\n  font-family: \"IBM Plex Sans\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  container: srte-editor / inline-size;\n}\n.srte-canonical-authority > .srte-editor[contenteditable] {\n  width: 100%;\n  padding: 16px 20px;\n  box-sizing: border-box;\n  border: 1px solid var(--srte-border);\n  border-radius: 0 0 var(--srte-radius) var(--srte-radius);\n  outline: none;\n  background: var(--srte-canvas);\n  color: var(--srte-foreground);\n  caret-color: var(--srte-foreground);\n  line-height: 1.6;\n}\n.srte-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  min-height: 48px;\n  padding: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--srte-border);\n  background: var(--srte-background);\n  color: var(--srte-foreground);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.srte-toolbar-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n}\n.srte-toolbar-group + .srte-toolbar-group::before {\n  content: \"\";\n  width: 1px;\n  height: 20px;\n  margin: 0 5px 0 3px;\n  background: var(--srte-border);\n}\n.srte-tool-button,\n.srte-toolbar select {\n  height: 32px;\n  min-width: 32px;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--srte-foreground);\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.srte-tool-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n}\n.srte-toolbar select {\n  max-width: 132px;\n  padding: 0 26px 0 9px;\n  border-color: var(--srte-border);\n  background: var(--srte-input-bg);\n  cursor: pointer;\n}\n.srte-tool-button:hover,\n.srte-toolbar select:hover,\n.srte-toolbar-menu[open] > .srte-menu-trigger {\n  background: var(--srte-muted);\n  border-color: var(--srte-border);\n}\n.srte-tool-button.srte-active,\n.srte-tool-button[aria-pressed=\"true\"] {\n  /* var(--srte-primary) (#2563eb) on var(--srte-accent-bg) measured 4.43:1,\n     just under WCAG AA's 4.5:1 for normal text (axe-core, Phase 11 Tier 3) -\n     a dedicated, darker pressed-state color keeps the same hue family\n     while clearing the threshold, without changing --srte-primary's other,\n     already-compliant usages (e.g. against solid backgrounds). */\n  color: var(--srte-primary-pressed);\n  background: var(--srte-accent-bg);\n  border-color: color-mix(in srgb, var(--srte-primary) 35%, transparent);\n}\n.srte-tool-button:focus-visible,\n.srte-toolbar select:focus-visible,\n.srte-menu-item:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 1px;\n}\n.srte-tool-button:disabled,\n.srte-menu-item:disabled,\n.srte-toolbar select:disabled {\n  cursor: not-allowed;\n  opacity: .4;\n}\n.srte-toolbar-menu {\n  position: relative;\n}\n.srte-toolbar-menu > summary {\n  list-style: none;\n}\n.srte-toolbar-menu > summary::-webkit-details-marker {\n  display: none;\n}\n.srte-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 80;\n  min-width: 210px;\n  padding: 4px;\n  overflow: hidden;\n  border: 1px solid var(--srte-border);\n  border-radius: 12px;\n  background: var(--srte-menu-bg);\n  color: var(--srte-menu-text);\n  box-shadow: var(--srte-menu-shadow);\n}\n/*\n * ToolbarDropdown's own menu panel (docs/bugs/\n * toolbar-dropdown-clipped-by-host-overflow-hidden.md): position:fixed with\n * JS-measured left/top (ToolbarPrimitives.tsx) instead of the default\n * position:absolute above, so it always escapes an ancestor host container's\n * own overflow:hidden regardless of DOM depth - MobileMoreMenu's overflow\n * menu (no data-srte-menu-fixed attribute) is unaffected and keeps its\n * existing position:absolute/right-anchored behavior.\n */\n.srte-menu[data-srte-menu-fixed=\"true\"] {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n.srte-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n  text-align: left;\n  white-space: nowrap;\n}\n.srte-menu-item:hover {\n  background: var(--srte-muted);\n}\n.srte-menu-check {\n  margin-left: auto;\n  color: var(--srte-primary);\n  font-weight: 700;\n}\n.srte-menu-separator {\n  height: 1px;\n  margin: 4px;\n  background: var(--srte-border);\n}\n.srte-mobile-more { display: none; }\n.srte-toolbar .srte-command-proxy { display: none; }\n.srte-split-control {\n  display: inline-flex;\n}\n.srte-split-control > .srte-tool-button:first-child {\n  border-radius: 8px 0 0 8px;\n}\n.srte-split-control > select {\n  width: 27px;\n  padding: 0;\n  border-radius: 0 8px 8px 0;\n  border-left: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  color: transparent;\n  background-color: var(--srte-muted);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li {\n  display: grid;\n  grid-template-columns: 1.1em minmax(0, 1fr);\n  column-gap: .45em;\n  align-items: start;\n  padding-left: 0;\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, upper-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, upper-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, upper-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, decimal) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal-leading-zero) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: \"\u25CF  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: \"\u25CB  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: \"\u25A0  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-outline\"] > li::marker {\n  content: counters(list-item, \".\") \".  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u2756  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u27A2  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u25A1  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25A3  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25AA  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u279C  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25C6  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25CF  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u2605  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25CB  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u27A2  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25CB  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check] {\n  display: inline-flex;\n  grid-column: 1;\n  grid-row: 1;\n  align-items: center;\n  justify-content: center;\n  width: 1.1em;\n  height: 1.6em;\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  margin: 0;\n  line-height: 1.6;\n  vertical-align: top;\n  position: relative;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]::before {\n  content: \"\";\n  width: .9em;\n  height: .9em;\n  box-sizing: border-box;\n  border: 1.5px solid var(--srte-muted-foreground);\n  border-radius: 3px;\n  background: var(--srte-canvas);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::before {\n  border-color: var(--srte-primary);\n  background: var(--srte-primary);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srte-on-primary) 25%, transparent);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  width: .42em;\n  height: .22em;\n  border-left: 1.5px solid var(--srte-on-primary);\n  border-bottom: 1.5px solid var(--srte-on-primary);\n  transform: translateY(-.08em) rotate(-45deg);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre) {\n  grid-column: 2;\n  min-width: 0;\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(ul,ol) {\n  grid-column: 2;\n}\n.srte-editor:focus-within {\n  border-color: var(--srte-ring) !important;\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);\n}\n/*\n * @container (element width), not @media (viewport width): a host can embed\n * the editor at any fraction of the browser window - a split pane next to a\n * preview panel is the case that surfaced this (docs/bugs/\n * toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md). A\n * plain @media breakpoint here would fire based on the *window*, wrongly\n * switching tiers for an editor instance that's actually much narrower (or\n * wider) than the window - .srte-editor already establishes its own\n * container: srte-editor / inline-size (see the .srte-editor rule above),\n * so @container always reflects this specific instance's real rendered width regardless of host\n * layout, with no @media fallback needed (container queries have full\n * support across this project's three target engines).\n */\n@container srte-editor (max-width: 639px) {\n  .srte-toolbar { gap: 3px; padding: 6px; }\n  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n  .srte-toolbar-group[data-srte-priority=\"3\"],\n  .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n  .srte-mobile-more { display: block; }\n  /* left/top are no longer set here - ToolbarPrimitives.tsx now computes\n     them via inline style (JS-measured, position:fixed, viewport-clamped;\n     see MobileMoreMenu's own doc comment), which always wins over any\n     value set here regardless of specificity or source order. Sizing/\n     scroll behavior stays defined here since inline positioning doesn't\n     touch those properties. */\n  .srte-mobile-more .srte-menu {\n    width: min(280px, calc(100vw - 16px));\n    min-width: 0;\n    max-height: min(70dvh, 480px);\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n  .srte-menu-item { height: 40px; }\n}\n/*\n * The Bulleted/Numbered list buttons' split-control style picker (a native\n * <select> chevron next to the button - see .srte-split-control) needs\n * ~16px more room than the absolute minimum toolbar width supports.\n * Empirically bisected (not guessed): the toolbar's own \"no button should\n * render narrower than its content\" test only starts failing (Checklist\n * squeezed) at exactly 340-349px container width, and is clean at 350px and\n * every width above it. An earlier version of this fix reused the much\n * wider 639px mobile-tier breakpoint above to hide the select, which \"fixed\"\n * the failing test but also hid the feature across the entire ~340-639px\n * range - it was never actually needed past ~349px, and hiding it that\n * broadly is what caused a live report (\"below 680px it's not showing\n * dropdown icons at list tools\"). Scoped tightly here instead (359px, a\n * small safety margin past the measured 349px floor) so the picker is only\n * absent in the sliver of widths that actually can't fit it - the presets\n * remain reachable via the mobile \"List preset\" control regardless, once\n * .srte-mobile-more takes over at 639px anyway.\n */\n@container srte-editor (max-width: 359px) {\n  .srte-split-control > select { display: none; }\n  .srte-split-control > .srte-tool-button:first-child { border-radius: 8px; }\n}\n/*\n * Below 480px, the block-structure controls (Paragraph/Heading style,\n * Bulleted list, Numbered list, Checklist) drop their text label and show\n * icon-only - \"visible enough to understand\" plus the existing title/\n * aria-label as a real tooltip, not a silent accessibility loss. Scoped to\n * just these four (via data-srte-narrow-icon-only on the buttons, and a\n * dedicated class on the block-type select) rather than every always-\n * visible button, since only these were reported as needing it - Bold/\n * Italic/etc. keep their labels at every width, unchanged.\n *\n * The block-type control is a native <select> (its shown text is the\n * selected option's value, not a separate label node that can be hidden on\n * its own), so it gets the same treatment .srte-split-control's own select\n * already uses: transparent text plus a background-image icon standing in\n * for it - here, the Pilcrow glyph (already in toolbarIcons as\n * \"paragraphStyle\" but otherwise unused). The native option list itself is\n * unaffected and still shows full text when opened.\n */\n@container srte-editor (max-width: 479px) {\n  .srte-tool-button[data-srte-narrow-icon-only=\"true\"] span { display: none; }\n  .srte-toolbar select.srte-block-type-select {\n    appearance: none;\n    -webkit-appearance: none;\n    color: transparent;\n    width: 40px;\n    min-width: 40px;\n    max-width: 40px;\n    padding: 0;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4v16'/%3E%3Cpath d='M17 4v16'/%3E%3Cpath d='M19 4H9.5a4.5 4.5 0 0 0 0 9H13'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n}\n/*\n * Wide-viewport promotion (docs/bugs/toolbar-priority-collapse-fixed-threshold-no-wide-promotion.md):\n * below this, the single 639px breakpoint above was this system's ONLY\n * threshold - every dropdown-grouped tool stayed hidden inside its dropdown\n * at every width from 640px up to and past a 2200px+ desktop, since nothing\n * ever measured or scaled with the extra room. A handful of tools frequent\n * enough to matter once there's genuinely spare room (Superscript,\n * Subscript, Text colour, Background colour, Font size, Font family, Remove\n * link, Insert formula, Special characters) get a standalone always-visible\n * ToolbarButton copy (data-srte-wide-promote, rendered directly in the\n * toolbar row) that appears past this breakpoint, while their existing\n * dropdown/mobile-menu ToolbarMenuItem copy (the exact same\n * data-srte-wide-promote attribute, on the .srte-menu-item element instead)\n * hides so the tool isn't offered twice. Below this breakpoint - including\n * all of mobile AND the 640-1439px tablet/typical-laptop band, which keeps\n * today's grouped-dropdown layout unchanged - the standalone copy stays\n * hidden and the dropdown copy is what's reachable.\n *\n * 1440px, not 1280px: Playwright's own default test viewport is exactly\n * 1280x720, and the vast majority of this suite's toolbar interactions run\n * at that default without ever calling page.setViewportSize - a 1280px\n * threshold would have flipped nearly every existing toolbar test's\n * dropdown-item locators (role=menuitem) over to CSS display:none out from\n * under them. 1440px clears that default with room to spare while still\n * comfortably covering \"wide desktop\" (the ~2264px width the original\n * report was filed against).\n *\n * @container only, no @media fallback - same reasoning as the mobile tier\n * above (docs/bugs/toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md):\n * a plain @media(min-width:1440px) fired whenever the *browser window* was\n * wide, even when this editor instance was embedded in a much narrower\n * split pane - promoting 9 extra buttons into a group with no room for\n * them, which squeezed/overlapped the group's existing buttons instead of\n * wrapping cleanly.\n */\n.srte-tool-button[data-srte-wide-promote=\"true\"] { display: none; }\n@container srte-editor (min-width: 1440px) {\n  .srte-tool-button[data-srte-wide-promote=\"true\"] { display: inline-flex; }\n  .srte-menu-item[data-srte-wide-promote=\"true\"] { display: none; }\n}\n.srte-editor [contenteditable] blockquote {\n  border-left: 4px solid var(--srte-accent);\n  margin: 0.75em 0;\n  padding: 0.5em 1em;\n  /* --srte-muted, not the retired --srte-surface-subtle (docs/bugs/\n     srte-surface-subtle-not-host-theme-aware.md): every other neutral\n     surface/text token here (--srte-background, --srte-foreground,\n     --srte-muted, --srte-border) is defined as var(--host-token, fallback)\n     so it correctly follows a host's OWN light/dark state even if\n     .srte-dark never gets applied for some host-side wiring reason -\n     --srte-surface-subtle was the one exception, a bare hardcoded hex with\n     no host integration, which is exactly what let a real host (dark mode,\n     .srte-dark not reaching this editor instance) render this blockquote\n     with a light-mode background and dark-mode text simultaneously. */\n  background: var(--srte-muted);\n  color: var(--srte-text);\n}\n.srte-editor [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  color: inherit;\n}\n.srte-editor [contenteditable] p {\n  display: block;\n  margin: 0 0 0.75em;\n  font-size: 1em;\n  font-weight: 400;\n  line-height: 1.6;\n}\n.srte-editor [contenteditable] p[data-srte-caret-boundary=\"true\"] {\n  min-height: 1.6em;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  display: block;\n  margin: 0.75em 0 0.4em;\n  font-weight: 700;\n  line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n  font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n  font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n  font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n  list-style-type: disc;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n  list-style-type: decimal;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n  display: list-item;\n  margin: 0.25em 0;\n  padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n  color: currentColor;\n}\n.srte-editor [contenteditable] table {\n  width: 100%;\n  margin: 0.75em 0;\n  border-collapse: collapse;\n}\n.srte-editor [contenteditable] th,\n.srte-editor [contenteditable] td {\n  padding: 8px;\n  border: 1px solid var(--srte-border);\n  vertical-align: top;\n}\n.srte-editor [contenteditable] [data-smart-cell-selected=\"true\"] {\n  background: color-mix(in srgb, var(--srte-primary) 12%, var(--srte-canvas));\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--srte-primary) 65%, transparent);\n}\n.srte-editor [contenteditable][data-smart-cell-selection-active] ::selection {\n  background: transparent;\n  color: inherit;\n}\n.srte-editor [contenteditable] th {\n  background: var(--srte-muted);\n  font-weight: 600;\n  text-align: left;\n}\n.srte-editor [contenteditable] td > h1,\n.srte-editor [contenteditable] td > h2,\n.srte-editor [contenteditable] td > h3,\n.srte-editor [contenteditable] th > h1,\n.srte-editor [contenteditable] th > h2,\n.srte-editor [contenteditable] th > h3 {\n  margin: 0 0 0.4em;\n  overflow-wrap: anywhere;\n}\n.srte-editor [contenteditable] pre {\n  display: block;\n  margin: 0.75em 0;\n  padding: 12px 14px;\n  overflow-x: auto;\n  border: 1px solid var(--srte-border);\n  border-radius: 6px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n  line-height: 1.55;\n  white-space: pre-wrap;\n}\n.srte-editor [contenteditable] pre code {\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n.srte-editor [contenteditable] code:not(pre code) {\n  padding: 0.1em 0.35em;\n  border-radius: 3px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n}\n.srte-editor [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n  color: var(--srte-primary) !important;\n  text-decoration: underline !important;\n  text-decoration-thickness: 1px !important;\n  text-underline-offset: 2px !important;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n  color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n  outline: 2px solid var(--srte-accent);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n  line-height: 0;\n}\n/*\n * A page break has no native visual meaning in a continuously-scrolling\n * web editor - its entire purpose is what happens at export/print time\n * (see atom/formats.ts's atomToHtml doc comment). This gives it a clearly\n * distinct live-editor appearance from the plain solid <hr> a horizontal\n * line renders as by default, so the two are never confused: a dashed\n * line with an explicit \"Page break\" label, per the feature's own design\n * decision.\n */\n.srte-editor [contenteditable] [data-smart-type=\"page_break\"] {\n  display: block;\n  position: relative;\n  height: 0;\n  margin: 1.5em 0;\n  border: none;\n  border-top: 2px dashed var(--srte-border);\n  cursor: default;\n}\n.srte-editor [contenteditable] [data-smart-type=\"page_break\"]::after {\n  content: \"Page break\";\n  position: absolute;\n  top: -0.7em;\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--srte-canvas);\n  padding: 0 0.6em;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--srte-text-muted);\n  white-space: nowrap;\n}\n";
 export declare function ensureStyleSheet(): void;

package/dist/theme.js

@@ -443,6 +443,61 @@ export const SRTE_DEFAULT_CSS = `
   }
   .srte-menu-item { height: 40px; }
 }
+/*
+ * The Bulleted/Numbered list buttons' split-control style picker (a native
+ * <select> chevron next to the button - see .srte-split-control) needs
+ * ~16px more room than the absolute minimum toolbar width supports.
+ * Empirically bisected (not guessed): the toolbar's own "no button should
+ * render narrower than its content" test only starts failing (Checklist
+ * squeezed) at exactly 340-349px container width, and is clean at 350px and
+ * every width above it. An earlier version of this fix reused the much
+ * wider 639px mobile-tier breakpoint above to hide the select, which "fixed"
+ * the failing test but also hid the feature across the entire ~340-639px
+ * range - it was never actually needed past ~349px, and hiding it that
+ * broadly is what caused a live report ("below 680px it's not showing
+ * dropdown icons at list tools"). Scoped tightly here instead (359px, a
+ * small safety margin past the measured 349px floor) so the picker is only
+ * absent in the sliver of widths that actually can't fit it - the presets
+ * remain reachable via the mobile "List preset" control regardless, once
+ * .srte-mobile-more takes over at 639px anyway.
+ */
+@container srte-editor (max-width: 359px) {
+  .srte-split-control > select { display: none; }
+  .srte-split-control > .srte-tool-button:first-child { border-radius: 8px; }
+}
+/*
+ * Below 480px, the block-structure controls (Paragraph/Heading style,
+ * Bulleted list, Numbered list, Checklist) drop their text label and show
+ * icon-only - "visible enough to understand" plus the existing title/
+ * aria-label as a real tooltip, not a silent accessibility loss. Scoped to
+ * just these four (via data-srte-narrow-icon-only on the buttons, and a
+ * dedicated class on the block-type select) rather than every always-
+ * visible button, since only these were reported as needing it - Bold/
+ * Italic/etc. keep their labels at every width, unchanged.
+ *
+ * The block-type control is a native <select> (its shown text is the
+ * selected option's value, not a separate label node that can be hidden on
+ * its own), so it gets the same treatment .srte-split-control's own select
+ * already uses: transparent text plus a background-image icon standing in
+ * for it - here, the Pilcrow glyph (already in toolbarIcons as
+ * "paragraphStyle" but otherwise unused). The native option list itself is
+ * unaffected and still shows full text when opened.
+ */
+@container srte-editor (max-width: 479px) {
+  .srte-tool-button[data-srte-narrow-icon-only="true"] span { display: none; }
+  .srte-toolbar select.srte-block-type-select {
+    appearance: none;
+    -webkit-appearance: none;
+    color: transparent;
+    width: 40px;
+    min-width: 40px;
+    max-width: 40px;
+    padding: 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4v16'/%3E%3Cpath d='M17 4v16'/%3E%3Cpath d='M19 4H9.5a4.5 4.5 0 0 0 0 9H13'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+}
 /*
  * Wide-viewport promotion (docs/bugs/toolbar-priority-collapse-fixed-threshold-no-wide-promotion.md):
  * below this, the single 639px breakpoint above was this system's ONLY
@@ -637,6 +692,39 @@ export const SRTE_DEFAULT_CSS = `
 .srte-editor [contenteditable] sup {
   line-height: 0;
 }
+/*
+ * A page break has no native visual meaning in a continuously-scrolling
+ * web editor - its entire purpose is what happens at export/print time
+ * (see atom/formats.ts's atomToHtml doc comment). This gives it a clearly
+ * distinct live-editor appearance from the plain solid <hr> a horizontal
+ * line renders as by default, so the two are never confused: a dashed
+ * line with an explicit "Page break" label, per the feature's own design
+ * decision.
+ */
+.srte-editor [contenteditable] [data-smart-type="page_break"] {
+  display: block;
+  position: relative;
+  height: 0;
+  margin: 1.5em 0;
+  border: none;
+  border-top: 2px dashed var(--srte-border);
+  cursor: default;
+}
+.srte-editor [contenteditable] [data-smart-type="page_break"]::after {
+  content: "Page break";
+  position: absolute;
+  top: -0.7em;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--srte-canvas);
+  padding: 0 0.6em;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--srte-text-muted);
+  white-space: nowrap;
+}
 `;
 const SRTE_STYLE_ID = 'srte-theme-defaults';
 export function ensureStyleSheet() {

package/dist/toolbarTools.d.ts

@@ -47,6 +47,8 @@ export interface ToolbarTools {
     alignCenter: boolean;
     alignRight: boolean;
     alignJustify: boolean;
+    /** The line-spacing dropdown (1/1.15/1.5/2/2.5 presets plus a custom value). */
+    lineHeight: boolean;
     quote: boolean;
     bulletedList: boolean;
     numberedList: boolean;
@@ -63,6 +65,10 @@ export interface ToolbarTools {
     audio: boolean;
     insertFormula: boolean;
     specialCharacters: boolean;
+    /** Inserts a `divider` atom (a horizontal rule) - see docs/bugs/ for the toolbar-tools feature this was added alongside. */
+    horizontalLine: boolean;
+    /** Inserts a `page_break` atom - a print/export pagination marker, distinct from `horizontalLine`. */
+    pageBreak: boolean;
     /** Requires the schema to actually have the table plugin (EditorCapabilityPreset) - see resolveToolbarTools. */
     insertTable: boolean;
     import: boolean;

package/dist/toolbarTools.js

@@ -2,9 +2,10 @@
 export const DEFAULT_TOOLBAR_TOOLS = {
     bold: true, italic: true, underline: true, strikethrough: true, code: true,
     superscript: true, subscript: true, textColor: true, backgroundColor: true, fontSize: true, fontFamily: true,
-    blockType: true, alignLeft: true, alignCenter: true, alignRight: true, alignJustify: true, quote: true,
+    blockType: true, alignLeft: true, alignCenter: true, alignRight: true, alignJustify: true, lineHeight: true, quote: true,
     bulletedList: true, numberedList: true, checklist: true, listPreset: true,
-    link: true, removeLink: true, image: true, video: true, audio: true, insertFormula: true, specialCharacters: true, insertTable: true,
+    link: true, removeLink: true, image: true, video: true, audio: true, insertFormula: true, specialCharacters: true,
+    horizontalLine: true, pageBreak: true, insertTable: true,
     import: true, saveAsHtml: true, saveAsMarkdown: true, saveAsWord: true, saveAsPdf: true, saveAsSmartRte: true,
     versionHistory: true, comments: true, suggestions: true,
     undo: true, redo: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "1.0.0-beta.9",
+  "version": "1.1.1",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",
@@ -84,7 +84,7 @@
     "lucide-react": "^1.35.0",
     "mammoth": "^1.11.0",
     "pdfjs-dist": "^5.4.530",
-    "smartrte-core": "^1.0.0-beta.3"
+    "smartrte-core": "^1.1.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.json",