@panphora/bevel 0.3.3 → 0.4.0

package/README.md

@@ -111,6 +111,10 @@ New mutating components emit cancelable `bevel:beforechange`, then `bevel:change
 
 Richclay, Quickcrop and Datastar remain optional. Load their adapters from `integrations/` after `bevel.js`. The Richclay adapter exposes `Bevel.richtext.mount()` and `unmount()`. The Quickcrop adapter exposes `Bevel.crop()`. The Datastar adapter exposes `Bevel.datastar.mount()`, `unmount()`, `control()` and `state()`.
 
+The Sheet add-on is CSS only. Load `integrations/sheet.css` after `bevel.css` for a compact toolbar (`.bevel-toolbar--sheet` on a `.bevel-toolbar`), a phone tool strip (`.bevel-sheet-tools`), a spreadsheet grid (`.bevel-sheet-grid`, or saved `<table grid>` markup with `<td n>` for numbers), sheet tabs (`.bevel-sheet-tabs`) and a flat look picker (`.bevel-sheet-looks`). It adds four selection tokens: `--bevel-sel`, `--bevel-sel-fill`, `--bevel-sel-head` and `--bevel-sel-line`. The application positions `.bevel-sheet-grid__selection` and `.bevel-sheet-grid__editor` over the grid. See `examples/components/sheet.html`.
+
+The application supplies `table-layout: fixed` and a table width when column widths should clip cell content.
+
 Nested Datastar registrations retain their own sessions when an outer registration unmounts. The adapter passes the remaining roots through `Bevel.destroy(root, { preserve: roots })`; those subtrees and their owned rich editors are excluded from teardown. Ordinary `Bevel.destroy(root)` still releases the entire subtree.
 
 For Richclay, load its Squire and DOMPurify scripts followed by its `richclay.js` global build before mounting. Bevel reuses externally mounted instances and never destroys them. It owns newly created instances even when the author supplied `contenteditable`. Repeated mounts reuse the instance; unmount releases its owned editor and theme tracking. A missing peer throws and emits `bevel:error`.

package/examples/components/manifest.json

@@ -1575,11 +1575,16 @@
     {
       "source": "src/components/split-panes/editor-page.html",
       "output": "examples/components/split-panes-editor.html"
+    },
+    {
+      "source": "src/docs/sheet-addon.html",
+      "output": "examples/components/sheet.html"
     }
   ],
   "exampleStyles": [
     "examples/components/context-hypercms.css",
-    "integrations/quickcrop.css"
+    "integrations/quickcrop.css",
+    "integrations/sheet.css"
   ],
   "build": {
     "javascript": [

package/examples/components/sheet.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Sheet add-on · Bevel</title>
+<link rel="stylesheet" href="../../bevel-fonts.css">
+<link rel="stylesheet" href="../../bevel.css">
+<link rel="stylesheet" href="../../integrations/sheet.css">
+<style>
+  .sheet-demo { display: grid; gap: 28px; max-inline-size: 960px; margin-inline: auto; }
+  .sheet-demo .bevel-sheet { block-size: 360px; }
+  .sheet-demo__phone { inline-size: 360px; max-inline-size: 100%; }
+  .sheet-demo__phone .bevel-sheet { block-size: 300px; }
+  .sheet-demo pre { overflow-x: auto; }
+</style>
+</head>
+<body>
+<main class="bevel-example">
+<div class="sheet-demo">
+<header class="bevel-example__header">
+  <div>
+    <h1>Sheet add-on</h1>
+    <p>An optional stylesheet for spreadsheet-like tools: a compact toolbar, a grid with headers that stay in place, a selection, sheet tabs and a flat look picker. Link it after <code>bevel.css</code>. It adds no script.</p>
+  </div>
+</header>
+
+<pre><code>&lt;link rel="stylesheet" href="bevel.css"&gt;
+&lt;link rel="stylesheet" href="integrations/sheet.css"&gt;</code></pre>
+
+<section class="bevel-sheet" aria-label="Budget workbook">
+  <div class="bevel-toolbar bevel-toolbar--sheet" role="toolbar" aria-label="Formatting">
+    <div class="bevel-toolbar__group">
+      <button class="bevel-toolbar__icon" type="button" aria-label="Undo"><svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"/></svg></button>
+      <button class="bevel-toolbar__icon" type="button" aria-label="Redo"><svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z"/></svg></button>
+    </div>
+    <span class="bevel-toolbar__separator" aria-hidden="true"></span>
+    <div class="bevel-toolbar__group">
+      <button class="bevel-button" type="button" aria-haspopup="menu" aria-expanded="false">Currency <svg class="bevel-sheet-caret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true" focusable="false"><path d="m5 9 7 7 7-7"/></svg></button>
+      <button class="bevel-button" type="button" aria-label="Fewer decimals">.0</button>
+      <button class="bevel-button" type="button" aria-label="More decimals">.00</button>
+    </div>
+    <span class="bevel-toolbar__separator" aria-hidden="true"></span>
+    <div class="bevel-toolbar__group">
+      <button class="bevel-toolbar__icon" type="button" aria-label="Bold" aria-pressed="true"><svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M178.48,115.7A44,44,0,0,0,148,40H80a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8h80a48,48,0,0,0,18.48-92.3ZM88,56h60a28,28,0,0,1,0,56H88Zm72,136H88V128h72a32,32,0,0,1,0,64Z"/></svg></button>
+      <button class="bevel-toolbar__icon" type="button" aria-label="Italic" aria-pressed="false"><svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M200,56a8,8,0,0,1-8,8H157.77L115.1,192H144a8,8,0,0,1,0,16H64a8,8,0,0,1,0-16H98.23L140.9,64H112a8,8,0,0,1,0-16h80A8,8,0,0,1,200,56Z"/></svg></button>
+    </div>
+  </div>
+
+  <div class="bevel-sheet__viewport">
+    <table class="bevel-sheet-grid" id="sheet-demo-budget">
+      <colgroup><col style="width:42px"><col style="width:200px"><col style="width:120px"><col style="width:120px"><col style="width:120px"></colgroup>
+      <thead>
+        <tr><th class="bevel-sheet-grid__coord" scope="col"></th><th class="bevel-sheet-grid__coord" scope="col">A</th><th class="bevel-sheet-grid__coord" scope="col" aria-selected="true">B</th><th class="bevel-sheet-grid__coord" scope="col">C</th><th class="bevel-sheet-grid__coord" scope="col">D</th></tr>
+        <tr style="background:var(--bevel-sel-head);font-weight:400;text-align:center;white-space:normal"><th class="bevel-sheet-grid__coord" scope="row">1</th><td>Item</td><td>Planned</td><td>Spent</td><td>Left</td></tr>
+      </thead>
+      <tbody>
+        <tr><th class="bevel-sheet-grid__coord" scope="row">2</th><td>Rent</td><td n>1,200.00</td><td n>1,200.00</td><td n>0.00</td></tr>
+        <tr><th class="bevel-sheet-grid__coord" scope="row" aria-selected="true">3</th><td>Groceries</td><td n aria-selected="true">420.00</td><td n>388.15</td><td n>31.85</td></tr>
+        <tr><th class="bevel-sheet-grid__coord" scope="row" aria-selected="true">4</th><td>Transport</td><td n aria-selected="true">160.00</td><td n>142.60</td><td n>17.40</td></tr>
+        <tr><th class="bevel-sheet-grid__coord" scope="row" aria-selected="true">5</th><td>Utilities</td><td n aria-selected="true">210.00</td><td n>226.30</td><td n>-16.30</td></tr>
+        <tr><th class="bevel-sheet-grid__coord" scope="row">6</th><td>Savings</td><td n>500.00</td><td n>500.00</td><td n>0.00</td></tr>
+        <tr class="bevel-sheet-grid__total"><th class="bevel-sheet-grid__coord" scope="row">7</th><td>Total</td><td n>2,490.00</td><td n>2,457.05</td><td n>32.95</td></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="bevel-sheet-tabs">
+    <div class="bevel-sheet-tabs__list" role="tablist" aria-label="Sheets">
+      <button class="bevel-sheet-tabs__tab" type="button" role="tab" aria-selected="true" aria-controls="sheet-demo-budget">Budget</button>
+      <button class="bevel-sheet-tabs__tab" type="button" role="tab" aria-selected="false" aria-controls="sheet-demo-budget">Trips</button>
+      <button class="bevel-sheet-tabs__add" type="button" aria-label="Add a sheet">+</button>
+    </div>
+    <div class="bevel-sheet-tabs__status"><span>Sum <strong>790.00</strong></span><span>Count <strong>3</strong></span></div>
+  </div>
+</section>
+
+<div class="bevel-sheet-looks" role="group" aria-label="Page look">
+  <div class="bevel-sheet-looks__group">
+    <span class="bevel-sheet-looks__label">Look</span>
+    <button class="bevel-sheet-looks__button" type="button" aria-label="Previous look">&lsaquo;</button>
+    <span class="bevel-sheet-looks__current">Ledger</span>
+    <button class="bevel-sheet-looks__button" type="button" aria-label="Next look">&rsaquo;</button>
+  </div>
+  <button class="bevel-sheet-looks__button bevel-sheet-looks__button--confirm" type="button">Use this look</button>
+</div>
+
+<div class="sheet-demo__phone">
+  <section class="bevel-sheet" aria-label="Budget workbook on a phone">
+    <div class="bevel-sheet-tools" role="toolbar" aria-label="Cell tools">
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Bold" aria-pressed="true"><span class="bevel-sheet-tools__cap">B</span></button>
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Italic" aria-pressed="false"><span class="bevel-sheet-tools__cap">I</span></button>
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Currency"><span class="bevel-sheet-tools__cap">$</span></button>
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Sum"><span class="bevel-sheet-tools__cap">&Sigma;</span></button>
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Undo"><span class="bevel-sheet-tools__cap"><svg width="17" height="17" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"/></svg></span></button>
+    </div>
+    <div class="bevel-sheet__viewport">
+      <table grid>
+        <thead><tr><td>Item</td><td>Planned</td></tr></thead>
+        <tbody>
+          <tr><td>Rent</td><td n>1,200.00</td></tr>
+          <tr><td>Groceries</td><td n>420.00</td></tr>
+          <tr><td>Transport</td><td n>160.00</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</div>
+
+<p>The second grid is plain saved markup, <code>&lt;table grid&gt;</code> with <code>&lt;td n&gt;</code> for numbers. It needs no classes, so a file opened with no script still reads as a sheet.</p>
+</div>
+</main>
+</body>
+</html>

package/integrations/sheet.css

@@ -0,0 +1,99 @@
+/* Bevel add-on: the Sheet look. Optional. Link it after bevel.css.
+   It styles the Sheet template's saved <table grid> markup and plain
+   .bevel-sheet-* classes, so other data apps can use the same look.
+   The full interactive workbook is the Sheet starter template. */
+@layer base, components;
+
+@layer base {
+  :root {
+    --bevel-sel:      light-dark(#1D5B79, #5CA8CC);
+    --bevel-sel-fill: light-dark(#E5F0F6, #182B3A);
+    --bevel-sel-head: light-dark(#D8E8F1, #1E3548);
+    --bevel-sel-line: light-dark(#ADCBE0, #2D4F6C);
+  }
+}
+
+@layer components {
+  .bevel-sheet { display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); color: var(--bevel-ink); font-family: var(--bevel-font-sans); }
+  .bevel-sheet__viewport { position: relative; flex: 1; min-block-size: 0; overflow: auto; overscroll-behavior: contain; background: var(--bevel-surface); }
+
+  .bevel-toolbar--sheet { flex-wrap: nowrap; gap: 4px; min-block-size: 36px; padding: 0 10px; border: 0; border-block-end: 1px solid var(--bevel-line-2); background: var(--bevel-ground); overflow-x: auto; }
+  .bevel-toolbar--sheet .bevel-toolbar__group { gap: 3px; }
+  .bevel-toolbar--sheet .bevel-toolbar__separator { flex: none; block-size: 18px; margin-inline: 5px; }
+  .bevel-toolbar--sheet .bevel-toolbar__icon { inline-size: 26px; block-size: 26px; }
+  .bevel-toolbar--sheet .bevel-toolbar__group .bevel-toolbar__icon + .bevel-toolbar__icon { margin-inline-start: 0; }
+  .bevel-toolbar--sheet .bevel-button { flex: none; gap: 5px; height: 26px; padding: 0 9px; font-size: 12px; line-height: 1; }
+  .bevel-toolbar--sheet .bevel-button[aria-pressed="true"], .bevel-toolbar--sheet .bevel-button[aria-expanded="true"] { border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); background: var(--bevel-face-in); }
+  .bevel-toolbar--sheet svg { flex: none; inline-size: 14px; block-size: 14px; }
+  .bevel-toolbar--sheet .bevel-sheet-caret { inline-size: 11px; block-size: 11px; }
+
+  .bevel-sheet-tools { display: flex; align-items: center; justify-content: space-between; gap: 2px; block-size: 44px; padding: 0 6px; border-block-end: 1px solid var(--bevel-line-2); background: var(--bevel-ground); overflow-x: auto; }
+  .bevel-sheet-tools__button { display: inline-grid; flex: none; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: transparent; color: var(--bevel-ink); cursor: pointer; }
+  .bevel-sheet-tools__button:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
+  .bevel-sheet-tools__cap { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border: 2px solid; border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi); background: var(--bevel-face); font: 600 11.5px/1 var(--bevel-font-sans); }
+  .bevel-sheet-tools__cap svg { inline-size: 17px; block-size: 17px; }
+  .bevel-sheet-tools__button:hover .bevel-sheet-tools__cap { background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%); }
+  .bevel-sheet-tools__button:active .bevel-sheet-tools__cap, .bevel-sheet-tools__button[aria-pressed="true"] .bevel-sheet-tools__cap { border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); background: var(--bevel-face-in); color: var(--bevel-sel); }
+
+  :where(.bevel-sheet-grid, table[grid]) { border-collapse: separate; border-spacing: 0; border-block-start: 1px solid var(--bevel-line); border-inline-start: 1px solid var(--bevel-line); background: var(--bevel-surface); color: var(--bevel-ink); font: 400 13px/1.35 var(--bevel-font-sans); text-align: start; white-space: nowrap; }
+  :where(.bevel-sheet-grid, table[grid]) :is(td, th) { block-size: 26px; padding: 0 8px; border: 0; border-inline-end: 1px solid var(--bevel-line); border-block-end: 1px solid var(--bevel-line); font-size: 13px; line-height: 25px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
+  :where(.bevel-sheet-grid, table[grid]) th { font-weight: inherit; text-align: inherit; }
+  :where(.bevel-sheet-grid, table[grid]) td[n], .bevel-sheet-grid__num { text-align: end; font-family: var(--bevel-font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
+  /* Stacking: frozen cells 2, frozen selection/editor 3, row and column labels 4, corner 5. */
+  :where(.bevel-sheet-grid, table[grid]) thead tr { background: var(--bevel-ground); color: var(--bevel-ink); font-weight: 600; }
+  :where(.bevel-sheet-grid, table[grid]) thead td { position: sticky; inset-block-start: var(--bevel-sheet-frozen-top, 0px); z-index: 2; block-size: 27px; border-block-end: 2px solid var(--bevel-line-3); background: inherit; }
+  :where(.bevel-sheet-grid, table[grid]) td[aria-selected="true"] { background: var(--bevel-sel-fill); }
+  .bevel-sheet-grid:has(.bevel-sheet-grid__coord) { --bevel-sheet-frozen-top: 24px; }
+
+  .bevel-sheet-grid .bevel-sheet-grid__coord { position: sticky; z-index: 4; border-inline-end-color: var(--bevel-line-2); border-block-end-color: var(--bevel-line-2); background: var(--bevel-sunk); color: var(--bevel-muted); font: 500 11px/23px var(--bevel-font-mono); text-align: center; }
+  .bevel-sheet-grid thead .bevel-sheet-grid__coord { inset-block-start: var(--bevel-sheet-frozen-top, 0px); }
+  .bevel-sheet-grid thead tr:first-child .bevel-sheet-grid__coord { inset-block-start: 0; block-size: 24px; }
+  .bevel-sheet-grid .bevel-sheet-grid__coord:first-child { inset-inline-start: 0; padding: 0; }
+  .bevel-sheet-grid thead tr:first-child .bevel-sheet-grid__coord:first-child { z-index: 5; }
+  .bevel-sheet-grid .bevel-sheet-grid__coord[aria-selected="true"] { background: var(--bevel-sel-head); color: var(--bevel-sel); font-weight: 600; }
+  .bevel-sheet-grid tr:has(> .bevel-sheet-grid__coord[aria-selected="true"]):has(+ tr > .bevel-sheet-grid__coord[aria-selected="true"]) > .bevel-sheet-grid__coord[aria-selected="true"] { border-block-end-color: var(--bevel-sel-line); }
+
+  .bevel-sheet-grid tr:has(+ .bevel-sheet-grid__total) > :is(td, th) { border-block-end-color: var(--bevel-line-3); }
+  :where(.bevel-sheet-grid .bevel-sheet-grid__total) > td { block-size: 28px; border-block-end-color: var(--bevel-line-2); background: var(--bevel-ground); font-weight: 600; }
+
+  .bevel-sheet-grid__selection { position: absolute; z-index: 1; box-sizing: border-box; border: 2px solid var(--bevel-sel); pointer-events: none; }
+  .bevel-sheet-grid__handle { position: absolute; inset-inline-end: -5px; inset-block-end: -5px; inline-size: 8px; block-size: 8px; border: 1.5px solid var(--bevel-surface); background: var(--bevel-sel); pointer-events: auto; cursor: crosshair; }
+  .bevel-sheet-grid__editor { position: absolute; z-index: 1; box-sizing: border-box; margin: 0; padding: 0 6px; border: 0; outline: 2px solid var(--bevel-brass); outline-offset: -2px; background: var(--bevel-surface); color: var(--bevel-ink); font: 500 12px/1 var(--bevel-font-mono); box-shadow: var(--bevel-shadow); }
+
+  .bevel-sheet-grid__selection--frozen, .bevel-sheet-grid__editor--frozen { z-index: 3; }
+
+  .bevel-sheet-tabs { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-block-size: 30px; padding: 0 10px; border-block-start: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); }
+  .bevel-sheet-tabs__list { display: flex; align-items: stretch; gap: 2px; min-inline-size: 0; overflow-x: auto; }
+  .bevel-sheet-tabs__tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-inline: 1px solid var(--bevel-line-2); background: transparent; color: var(--bevel-muted); font: 500 12px/1 var(--bevel-font-sans); white-space: nowrap; cursor: pointer; }
+  .bevel-sheet-tabs__tab:hover { background: var(--bevel-ground); color: var(--bevel-ink); }
+  .bevel-sheet-tabs__tab[aria-selected="true"] { margin-block-start: -1px; border-block-start: 1px solid var(--bevel-surface); background: var(--bevel-surface); color: var(--bevel-sel); font-weight: 600; }
+  .bevel-sheet-tabs__add { inline-size: 28px; border: 0; background: transparent; color: var(--bevel-muted); font: 500 15px/1 var(--bevel-font-sans); cursor: pointer; }
+  .bevel-sheet-tabs__add:hover { background: var(--bevel-face); color: var(--bevel-ink); }
+  .bevel-sheet-tabs__tab:focus-visible, .bevel-sheet-tabs__add:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
+  .bevel-sheet-tabs__status { display: flex; align-items: center; gap: 14px; color: var(--bevel-ink-2); font: 11.5px/1 var(--bevel-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .bevel-sheet-tabs__status strong { color: var(--bevel-ink); font-weight: 600; }
+
+  .bevel-sheet-looks { display: flex; align-items: center; justify-content: space-between; gap: 8px; inline-size: 100%; max-inline-size: 440px; padding: 5px 10px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); color: var(--bevel-ink-2); font: 12px/1.2 var(--bevel-font-sans); }
+  .bevel-sheet-looks__group { display: inline-flex; align-items: center; gap: 4px; }
+  .bevel-sheet-looks__label { margin-inline-end: 2px; color: var(--bevel-muted); }
+  .bevel-sheet-looks__current { min-inline-size: 112px; color: var(--bevel-ink); font-weight: 600; text-align: center; }
+  .bevel-sheet-looks__button { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px 7px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--bevel-muted); font: 500 12px/1.2 var(--bevel-font-sans); cursor: pointer; appearance: none; }
+  .bevel-sheet-looks__button:hover { background: var(--bevel-sunk); color: var(--bevel-ink); }
+  .bevel-sheet-looks__button:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
+  .bevel-sheet-looks__button--confirm { color: var(--bevel-sel); font-weight: 600; }
+
+  @media (pointer: coarse) {
+    .bevel-toolbar--sheet .bevel-toolbar__icon { inline-size: 40px; block-size: 40px; }
+    .bevel-sheet-tabs { min-block-size: 44px; }
+    .bevel-sheet-looks__button { min-inline-size: 44px; min-block-size: 44px; }
+  }
+  @media (forced-colors: active) {
+    :where(.bevel-sheet-grid, table[grid]) td[aria-selected="true"] { outline: 1px solid Highlight; outline-offset: -1px; }
+    .bevel-sheet-grid .bevel-sheet-grid__coord[aria-selected="true"], .bevel-sheet-tabs__tab[aria-selected="true"] { text-decoration: underline; }
+  }
+  @media print {
+    .bevel-toolbar--sheet, .bevel-sheet-tools, .bevel-sheet-tabs__add, .bevel-sheet-looks, .bevel-sheet-grid__selection, .bevel-sheet-grid__handle { display: none; }
+    .bevel-sheet__viewport { overflow: visible; }
+    :where(.bevel-sheet-grid, table[grid]) thead td, .bevel-sheet-grid .bevel-sheet-grid__coord { position: static; }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/bevel",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Beveled controls in an editorial page. One stylesheet, one script, no build.",
   "license": "MIT-0",
   "author": "David Miranda",
@@ -450,6 +450,7 @@
     "fonts": "node scripts/vendor-fonts.mjs",
     "vendor:floating": "node scripts/vendor-floating-ui.mjs",
     "check": "node scripts/check.mjs && node scripts/icon-guard.mjs --strict",
+    "sheet-addon": "node --test tests/sheet-addon.test.mjs",
     "check:icons": "node scripts/icon-guard.mjs",
     "contrast": "node scripts/contrast.mjs",
     "roundtrip": "node scripts/roundtrip.mjs",
@@ -458,7 +459,7 @@
     "correction:c1": "node tests/correction-c1.mjs",
     "correction:c2": "node tests/correction-c2.mjs",
     "correction:c2:overlays": "node tests/correction-c2-modal-drawer.mjs",
-    "test": "node scripts/test-guard.mjs && npm run test:build && npm run test:showcase && npm run check && npm run contrast && npm run roundtrip && npm run functional && npm run datastar && npm run correction:c1 && npm run datastar:native && npm run clay:snapshot && npm run datastar:pickers && npm run correction:c2:overlays && npm run correction:c2:pickers && npm run correction:c2:forms && npm run correction:c2:wizard && npm run datastar:lifecycle && npm run datastar:reload && npm run richclay:integration && npm run inline-edit:integration && npm run quickcrop:integration && npm run packaged:peers && npm run upload:integration && npm run correction:c3:navigation && npm run correction:app-shell && npm run file-tree && npm run correction:c3:code-diff && npm run correction:c3:feedback && npm run correction:c3:split && npm run correction:c3:navigation-controls && npm run correction:c3:display && npm run correction:c3:rich-toolbar && npm run correction:c3:grid && npm run correction:c3:kanban && npm run context:hypercms && npm run context:quickcrop && npm run datastar:active && npm run datastar:board && npm run datastar:upload && npm run datastar:grid && npm run datastar:state-reload && npm run acceptance:layout && npm run final-review:regressions",
+    "test": "node scripts/test-guard.mjs && npm run test:build && npm run test:showcase && npm run check && npm run sheet-addon && npm run contrast && npm run roundtrip && npm run functional && npm run datastar && npm run correction:c1 && npm run datastar:native && npm run clay:snapshot && npm run datastar:pickers && npm run correction:c2:overlays && npm run correction:c2:pickers && npm run correction:c2:forms && npm run correction:c2:wizard && npm run datastar:lifecycle && npm run datastar:reload && npm run richclay:integration && npm run inline-edit:integration && npm run quickcrop:integration && npm run packaged:peers && npm run upload:integration && npm run correction:c3:navigation && npm run correction:app-shell && npm run file-tree && npm run correction:c3:code-diff && npm run correction:c3:feedback && npm run correction:c3:split && npm run correction:c3:navigation-controls && npm run correction:c3:display && npm run correction:c3:rich-toolbar && npm run correction:c3:grid && npm run correction:c3:kanban && npm run context:hypercms && npm run context:quickcrop && npm run datastar:active && npm run datastar:board && npm run datastar:upload && npm run datastar:grid && npm run datastar:state-reload && npm run acceptance:layout && npm run final-review:regressions",
     "dev": "node scripts/dev.mjs",
     "datastar:native": "node tests/datastar-native.mjs",
     "correction:c2:pickers": "node tests/correction-c2-pickers.mjs",

package/vendor/richclay/provenance.json

@@ -1,9 +1,9 @@
 {
   "name": "richclay",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "source": "Explicitly supplied local distribution; hashes identify the exact tested bytes, not a published release claim.",
   "files": {
-    "richclay.js": "17d57ae64eac48f8fc57b90f0f18c9112fcb4194ef2b5b20096695d697e629a5",
+    "richclay.js": "cb11c591ef58cec92b7ce7b392606a8a74ba52a972750013a2a9a58eeb3c8c41",
     "richclay.css": "b2aed9608266f6798ea25edfa40c344c84b8f37d65e19ce8484f93ad849cd3c8",
     "LICENSE": "5312a8ef6ff9a844697b8b112612467efd12957e8afba098ce600dec0f8396c4",
     "THIRD-PARTY-NOTICES.md": "3659529614b62297b8336ac7f6189ef9f67425911265bff1cde8d136df21562b",

package/vendor/richclay/richclay.js

@@ -1549,7 +1549,10 @@ var RichClayBundle = (() => {
     currentAnchor() {
       const editor = this.editor;
       if (!editor.active || editor.options.readOnly || editor.dialog) return null;
-      if (editor.element.ownerDocument.hidden) return null;
+      const doc = editor.element.ownerDocument;
+      if (doc.hidden) return null;
+      const live = doc.getSelection?.();
+      if (!live || !live.rangeCount || !editor.element.contains(live.anchorNode)) return null;
       return editor.currentLinkElement();
     }
     update() {