@panphora/bevel 0.1.0 → 0.1.1

package/bevel.css

@@ -2295,8 +2295,8 @@
     color: var(--bevel-ink); position: relative; z-index: 1;
   }
   .bevel-seg > .bevel-button[aria-pressed="true"] .bevel-button__label { translate: 1px 1px; }
-  .bevel-seg--links { gap: 0; }
-  .bevel-seg--links > .bevel-button { padding: 5px 13px; color: var(--bevel-muted); }
+  .bevel-seg--links { gap: 0; flex-wrap: wrap; max-width: 100%; padding-left: 2px; }
+  .bevel-seg--links > .bevel-button { padding: 5px 13px; margin-left: -2px; color: var(--bevel-muted); }
   .bevel-seg--links > .bevel-button:hover { background: var(--bevel-face); color: var(--bevel-ink); }
   .bevel-seg--links > .bevel-button[aria-current="page"] {
     background: var(--bevel-face-in);

package/bevel.js

@@ -715,7 +715,15 @@
       sessions.set(root, { ...(sessions.get(root) || {}), trigger, openOrder: ++overlaySequence });
       if (trigger) trigger.setAttribute("aria-expanded", "true");
       setExpanded(root, true);
-      if (!root.matches(".bevel-combobox__listbox")) requestAnimationFrame(() => (root.querySelector("[autofocus]") || focusable(root))?.focus());
+      if (!root.matches(".bevel-combobox__listbox") && (source !== "external" || !document.activeElement || document.activeElement === document.body)) {
+        let interrupted = false;
+        const interrupt = () => { interrupted = true; };
+        document.addEventListener("keydown", interrupt, true); document.addEventListener("pointerdown", interrupt, true);
+        requestAnimationFrame(() => {
+          document.removeEventListener("keydown", interrupt, true); document.removeEventListener("pointerdown", interrupt, true);
+          if (!interrupted) (root.querySelector("[autofocus]") || focusable(root))?.focus();
+        });
+      }
     };
     return transition(root, "open", root.id, false, true, commit, source);
   };
@@ -1850,13 +1858,13 @@
       if(target&&target!==card){session.target=target;const rect=target.getBoundingClientRect();session.before=current.clientY<rect.top+rect.height/2;target.dataset.bevelDropTarget=session.before?'before':'after';}
     };
     const stop=commit=>{
-      if(!sessions.has(card))return;document.removeEventListener('pointermove',move);document.removeEventListener('pointerup',up);document.removeEventListener('pointercancel',cancel);document.removeEventListener('lostpointercapture',cancel);document.removeEventListener('keydown',escape,true);sessions.delete(card);card.removeAttribute('data-bevel-dragging');
+      if(!sessions.has(card))return;document.removeEventListener('pointermove',move);document.removeEventListener('pointerup',up);document.removeEventListener('pointercancel',cancel);document.removeEventListener('lostpointercapture',cancel);document.removeEventListener('keydown',escape,true);document.removeEventListener('dragstart',native,true);sessions.delete(card);card.removeAttribute('data-bevel-dragging');
       const {list,target,before}=session;clear();if(!commit||!session.active||!list||!root.isConnected||!card.isConnected||target&&!target.isConnected)return;
       const siblings=[...list.children].filter(node=>node.matches('.bevel-kanban__card')&&node!==card),index=target?siblings.indexOf(target)+(before?0:1):siblings.length;
       kanbanMove(root,card,list,index);
     };
-    const up=current=>{if(current.pointerId===pointerId)stop(true);},cancel=current=>{if(current.pointerId===pointerId)stop(false);},escape=current=>{if(current.key==='Escape'){current.preventDefault();stop(false);}};
-    sessions.set(card,session);document.addEventListener('pointermove',move);document.addEventListener('pointerup',up);document.addEventListener('pointercancel',cancel);document.addEventListener('lostpointercapture',cancel);document.addEventListener('keydown',escape,true);
+    const native=current=>current.preventDefault(),up=current=>{if(current.pointerId===pointerId)stop(true);},cancel=current=>{if(current.pointerId===pointerId)stop(false);},escape=current=>{if(current.key==='Escape'){current.preventDefault();stop(false);}};
+    sessions.set(card,session);document.addEventListener('pointermove',move);document.addEventListener('pointerup',up);document.addEventListener('pointercancel',cancel);document.addEventListener('lostpointercapture',cancel);document.addEventListener('keydown',escape,true);document.addEventListener('dragstart',native,true);
   });
 
   const cancelGridEdit = (cell, focus = true) => { const session=sessions.get(cell); if(!session)return; session.editor.remove(); cell.removeAttribute("data-bevel-editing"); cell.removeAttribute("data-bevel-invalid"); sessions.delete(cell); const error=cell.querySelector(".bevel-grid__cell-error");if(error)error.hidden=true;if (focus && session.button?.isConnected) session.button.focus(); };

package/dist/react/theme.css

@@ -5732,11 +5732,11 @@ ol.bevel-r-list--small:where([data-bevel-appearance="bevel"]) > li::before { fon
 
 
 
-.bevel-r-seg--links:where([data-bevel-appearance="bevel"]) { gap: 0; }
+.bevel-r-seg--links:where([data-bevel-appearance="bevel"]) { gap: 0; flex-wrap: wrap; max-width: 100%; padding-left: 2px; }
 
 
 
-.bevel-r-seg--links > .bevel-r-button:where([data-bevel-appearance="bevel"]) { padding: 5px 13px; color: var(--bevel-muted); }
+.bevel-r-seg--links > .bevel-r-button:where([data-bevel-appearance="bevel"]) { padding: 5px 13px; margin-left: -2px; color: var(--bevel-muted); }
 
 
 

package/integrations/richclay.js

@@ -41,12 +41,12 @@
       }
       if (id === "blockMenu") {
         const option = item.def.options.find(option => option.isActive?.(record.editor));
-        const markup = (option?.icon || icons.blockMenu) + menuCaret;
+        const optionIcons = [icons.paragraph, icons.h1, icons.h2, icons.h3, icons.quote, icons.code];
+        const markup = (optionIcons[item.def.options.indexOf(option)] || icons.blockMenu) + menuCaret;
         if (face.dataset.blockValue !== (option?.value || "P")) {
           face.innerHTML = markup;
           face.dataset.blockValue = option?.value || "P";
         }
-        const optionIcons = [icons.paragraph, icons.h1, icons.h2, icons.h3, icons.quote, icons.code];
         for (const [index, markup] of optionIcons.entries()) {
           const button = item.menu?.querySelector(`[data-richclay-option-index="${index}"]`);
           if (!button || button.hasAttribute("data-bevel-richclay-icon")) continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/bevel",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Beveled controls in an editorial page. One stylesheet, one script, no build.",
   "license": "MIT-0",
   "author": "David Miranda",
@@ -458,7 +458,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": "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 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",
@@ -517,7 +517,8 @@
     "file-tree:bench": "node tests/react/file-tree-bench.mjs",
     "vendor:richclay": "node scripts/vendor-richclay-fixture.mjs ../richclay",
     "vendor:quickcrop": "node scripts/vendor-quickcrop-fixture.mjs ../quickcrop",
-    "vendor:hypercms": "node scripts/vendor-hypercms-fixture.mjs ../hypercms ../clayjs"
+    "vendor:hypercms": "node scripts/vendor-hypercms-fixture.mjs ../hypercms ../clayjs",
+    "prepublishOnly": "testbox run"
   },
   "devDependencies": {
     "@floating-ui/core": "1.8.0",