@panphora/bevel 0.1.0 → 0.2.0

package/README.md

@@ -48,6 +48,14 @@ const labelled = bevelIcon('warning', { size: 20, label: 'Warning' })
 
 `size` defaults to 16 and sets both dimensions. Without `label`, the result is hidden from assistive technology. With `label`, it has `role="img"` and the supplied `aria-label`. Every drawing inherits `currentColor`.
 
+`bevelIcon` reaches every drawing through `ICONS`, so a bundle that imports it carries all of them. To bundle only the icons you use, import each drawing by name and render it with `renderIcon`. The export name is `icon` followed by the public name in PascalCase:
+
+```js
+import { renderIcon, iconComment, iconChevronLeft } from '@panphora/bevel/icons'
+
+const comment = renderIcon(iconComment, { size: 17 })
+```
+
 The `@panphora/bevel/icons.svg` export contains one symbol per name. Copy or serve it as an asset, then reference `#bevel-icon-<name>`:
 
 ```html

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/icons/icons.d.ts

@@ -9,9 +9,136 @@ export interface BevelIconDefinition {
 
 export const ICONS: Readonly<Record<BevelIconName, BevelIconDefinition>>;
 
+export const iconPlus: BevelIconDefinition;
+export const iconMore: BevelIconDefinition;
+export const iconSearch: BevelIconDefinition;
+export const iconFilter: BevelIconDefinition;
+export const iconChevron: BevelIconDefinition;
+export const iconCheck: BevelIconDefinition;
+export const iconClock: BevelIconDefinition;
+export const iconComment: BevelIconDefinition;
+export const iconFlag: BevelIconDefinition;
+export const iconBoard: BevelIconDefinition;
+export const iconLock: BevelIconDefinition;
+export const iconDoc: BevelIconDefinition;
+export const iconShare: BevelIconDefinition;
+export const iconSort: BevelIconDefinition;
+export const iconArrow: BevelIconDefinition;
+export const iconTemplate: BevelIconDefinition;
+export const iconCollapseLeft: BevelIconDefinition;
+export const iconCollapseRight: BevelIconDefinition;
+export const iconChevronLeft: BevelIconDefinition;
+export const iconChevronRight: BevelIconDefinition;
+export const iconChevronUp: BevelIconDefinition;
+export const iconChevronDown: BevelIconDefinition;
+export const iconFolder: BevelIconDefinition;
+export const iconArrowUp: BevelIconDefinition;
+export const iconUnlink: BevelIconDefinition;
+export const iconGrid: BevelIconDefinition;
+export const iconShareNodes: BevelIconDefinition;
+export const iconSpinner: BevelIconDefinition;
+export const iconSettings: BevelIconDefinition;
+export const iconHome: BevelIconDefinition;
+export const iconStar: BevelIconDefinition;
+export const iconKey: BevelIconDefinition;
+export const iconCheckCircle: BevelIconDefinition;
+export const iconXCircle: BevelIconDefinition;
+export const iconMenu: BevelIconDefinition;
+export const iconCrop: BevelIconDefinition;
+export const iconInfo: BevelIconDefinition;
+export const iconBell: BevelIconDefinition;
+export const iconGlobe: BevelIconDefinition;
+export const iconSun: BevelIconDefinition;
+export const iconCloud: BevelIconDefinition;
+export const iconDatabase: BevelIconDefinition;
+export const iconMinus: BevelIconDefinition;
+export const iconSidebar: BevelIconDefinition;
+export const iconFolderPlus: BevelIconDefinition;
+export const iconFilePlus: BevelIconDefinition;
+export const iconFolderOpen: BevelIconDefinition;
+export const iconMove: BevelIconDefinition;
+export const iconRename: BevelIconDefinition;
+export const iconSplit: BevelIconDefinition;
+export const iconPalette: BevelIconDefinition;
+export const iconZoomIn: BevelIconDefinition;
+export const iconCrown: BevelIconDefinition;
+export const iconUsers: BevelIconDefinition;
+export const iconUserPlus: BevelIconDefinition;
+export const iconBilling: BevelIconDefinition;
+export const iconPaintBrush: BevelIconDefinition;
+export const iconClearFormatting: BevelIconDefinition;
+export const iconDocs: BevelIconDefinition;
+export const iconBug: BevelIconDefinition;
+export const iconShieldCheck: BevelIconDefinition;
+export const iconWrap: BevelIconDefinition;
+export const iconFloppyDisk: BevelIconDefinition;
+export const iconParagraph: BevelIconDefinition;
+export const iconUpload: BevelIconDefinition;
+export const iconDiscover: BevelIconDefinition;
+export const iconSparkle: BevelIconDefinition;
+export const iconChartBarHorizontal: BevelIconDefinition;
+export const iconPlay: BevelIconDefinition;
+export const iconH1: BevelIconDefinition;
+export const iconH2: BevelIconDefinition;
+export const iconH3: BevelIconDefinition;
+export const iconClip: BevelIconDefinition;
+export const iconTimeline: BevelIconDefinition;
+export const iconLink: BevelIconDefinition;
+export const iconClose: BevelIconDefinition;
+export const iconImage: BevelIconDefinition;
+export const iconGroup: BevelIconDefinition;
+export const iconBlocked: BevelIconDefinition;
+export const iconExpand: BevelIconDefinition;
+export const iconPencil: BevelIconDefinition;
+export const iconCopy: BevelIconDefinition;
+export const iconArchive: BevelIconDefinition;
+export const iconTrash: BevelIconDefinition;
+export const iconOffline: BevelIconDefinition;
+export const iconUser: BevelIconDefinition;
+export const iconGrip: BevelIconDefinition;
+export const iconHighlight: BevelIconDefinition;
+export const iconRefresh: BevelIconDefinition;
+export const iconHistory: BevelIconDefinition;
+export const iconHelp: BevelIconDefinition;
+export const iconMail: BevelIconDefinition;
+export const iconMoon: BevelIconDefinition;
+export const iconTerminal: BevelIconDefinition;
+export const iconFileCode: BevelIconDefinition;
+export const iconSignOut: BevelIconDefinition;
+export const iconExternal: BevelIconDefinition;
+export const iconDownload: BevelIconDefinition;
+export const iconEye: BevelIconDefinition;
+export const iconPin: BevelIconDefinition;
+export const iconTag: BevelIconDefinition;
+export const iconWarning: BevelIconDefinition;
+export const iconCalendar: BevelIconDefinition;
+export const iconEyeOff: BevelIconDefinition;
+export const iconUndo: BevelIconDefinition;
+export const iconRedo: BevelIconDefinition;
+export const iconHeading: BevelIconDefinition;
+export const iconBold: BevelIconDefinition;
+export const iconItalic: BevelIconDefinition;
+export const iconUnderline: BevelIconDefinition;
+export const iconStrikethrough: BevelIconDefinition;
+export const iconCode: BevelIconDefinition;
+export const iconList: BevelIconDefinition;
+export const iconListNumbers: BevelIconDefinition;
+export const iconQuote: BevelIconDefinition;
+export const iconOutdent: BevelIconDefinition;
+export const iconIndent: BevelIconDefinition;
+export const iconTeam: BevelIconDefinition;
+export const iconLinkSimple: BevelIconDefinition;
+export const iconQrCode: BevelIconDefinition;
+export const iconFileHtml: BevelIconDefinition;
+export const iconCursor: BevelIconDefinition;
+export const iconInvite: BevelIconDefinition;
+export const iconHyperclayLocal: BevelIconDefinition;
+
 export interface BevelIconOptions {
   size?: number | string;
   label?: string;
 }
 
 export function bevelIcon(name: BevelIconName | string, options?: BevelIconOptions): string;
+
+export function renderIcon(icon: BevelIconDefinition, options?: BevelIconOptions): string;