@luxalgo/vela 0.6.3 → 0.6.4

package/dist/ui.cjs

@@ -186,8 +186,13 @@ var STATIC_CSS = `
 ${STATIC_DECLS}
     font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
     box-sizing: border-box;
+    /* Chrome text (titles, buttons, menus, readouts) is UI, not copy \u2014 never selectable. */
+    user-select: none;
+    -webkit-user-select: none;
 }
 .vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
+/* Text ENTRY is the one exception: selection is part of editing. */
+.vela-ui :is(input, textarea), .vela-ui-layer :is(input, textarea) { user-select: text; -webkit-user-select: text; }
 .vela-icon { display: inline-flex; align-items: center; flex: none; }
 .vela-icon svg { display: block; }
 `;
@@ -666,6 +671,23 @@ var MENU_CSS = `
     background: var(--vela-hover-strong);
     color: var(--vela-fg-bright);
 }
+/* Checkmark mode (context/action menus): every row reserves the leading mark column so
+   labels align; a checked row fills it with a \u2713 and brightens its ink \u2014 the row surface
+   stays free for the hover wash. */
+.vela-menu-item .vela-menu-mark {
+    width: 14px;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.vela-menu-item .vela-menu-mark .vela-icon {
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    color: var(--vela-fg-bright);
+}
+.vela-menu-item[data-checkmark] { color: var(--vela-fg-bright); }
 /* Switch rows (boolean settings in a dropdown): a right-aligned toggle pill \u2014 the
    same control language as the settings dialog's toggles. */
 .vela-menu-switch {
@@ -734,6 +756,7 @@ var Surface = class _Surface {
     this.host = opts.host;
     this.onSelect = opts.onSelect;
     this.onFavorite = opts.onFavorite;
+    this.checkmarks = opts.checkmarks === true;
     this.positioner = doc.createElement("div");
     this.positioner.className = "vela-ui-layer";
     this.list = doc.createElement("ul");
@@ -812,6 +835,7 @@ var Surface = class _Surface {
   build() {
     const doc = this.doc;
     this.list.replaceChildren();
+    const markable = this.checkmarks && this.items.some((i) => !(i.submenu && i.submenu.length > 0) && !i.toggle && i.checked !== void 0);
     for (const item of this.items) {
       if (item.separatorBefore) {
         const sep = doc.createElement("li");
@@ -825,7 +849,16 @@ var Surface = class _Surface {
       li.dataset.veiId = item.id;
       if (item.toggle) {
         li.dataset.toggle = "1";
-      } else if (!branch && item.checked) {
+      }
+      if (markable) {
+        const mark = doc.createElement("span");
+        mark.className = "vela-menu-mark";
+        if (!branch && !item.toggle && item.checked) {
+          mark.appendChild(iconEl("check", doc));
+          li.dataset.checkmark = "1";
+        }
+        li.appendChild(mark);
+      } else if (!branch && !item.toggle && item.checked) {
         li.dataset.checked = "1";
       }
       if (item.icon) li.appendChild(iconEl(item.icon, doc));
@@ -874,6 +907,7 @@ var Surface = class _Surface {
           placement: "right-start",
           onSelect: this.onSelect,
           onFavorite: this.onFavorite,
+          checkmarks: this.checkmarks,
           id: `${this.mid}--${item.id}`
         });
         sub.setItems(item.submenu ?? []);
@@ -898,7 +932,8 @@ var Menu = class {
       triggerId: opts.triggerId,
       id: opts.id,
       minWidth: opts.minWidth,
-      onFavorite: opts.onFavorite
+      onFavorite: opts.onFavorite,
+      checkmarks: opts.checkmarks
     });
     this.root.setItems(opts.items);
   }
@@ -2189,6 +2224,9 @@ var NUMBER_CSS = `
     transition: border-color 0.12s ease, box-shadow 0.12s ease;
     -moz-appearance: textfield;
     appearance: textfield;
+    /* Selectable even under a user-select:none host (chart wrapper, .vela-ui). */
+    user-select: text;
+    -webkit-user-select: text;
 }
 .vela-num input::-webkit-inner-spin-button, .vela-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
 .vela-num input:hover { border-color: var(--vela-fg-muted); }
@@ -2401,6 +2439,9 @@ var TEXT_CSS = `
     overflow: hidden;
     text-overflow: ellipsis;
     transition: border-color 0.12s ease, box-shadow 0.12s ease;
+    /* Selectable even under a user-select:none host (chart wrapper, .vela-ui). */
+    user-select: text;
+    -webkit-user-select: text;
 }
 .vela-text-field:hover { border-color: var(--vela-fg-muted); }
 .vela-text-field:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
@@ -2770,6 +2811,9 @@ var TEXTAREA_CSS = `
     resize: vertical;
     outline: none;
     transition: border-color 0.12s ease, box-shadow 0.12s ease;
+    /* Selectable even under a user-select:none host (chart wrapper, .vela-ui). */
+    user-select: text;
+    -webkit-user-select: text;
 }
 .vela-textarea-field:hover { border-color: var(--vela-fg-muted); }
 .vela-textarea-field:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
@@ -3047,6 +3091,8 @@ var FIELD_CSS = `
     font-size: 14px;
 }
 .vela-field-label[data-size='sm'] { font-size: inherit; opacity: 0.85; }
+/* Titles are fully inert: spans, not label[for] \u2014 native labels propagate :hover and
+   clicks onto their control, and both belong to the input alone. */
 .vela-field-cell { display: flex; align-items: center; gap: 8px; justify-self: start; }
 .vela-field-bool { display: flex; align-items: center; gap: 8px; min-height: 22px; }
 .vela-field-stacked { display: flex; flex-direction: column; gap: 8px; }
@@ -3105,11 +3151,17 @@ function fieldSeparator() {
   return el;
 }
 function labelEl(text, opts) {
-  const el = opts.id ? document.createElement("label") : document.createElement("span");
-  if (opts.id && el instanceof HTMLLabelElement) el.htmlFor = opts.id;
+  const el = document.createElement("span");
   el.className = "vela-field-label";
   if (opts.size) el.dataset.size = opts.size;
   el.textContent = text;
+  const id = opts.id;
+  if (id) {
+    el.id = `${id}--title`;
+    queueMicrotask(() => {
+      el.ownerDocument.getElementById(id)?.setAttribute("aria-labelledby", el.id);
+    });
+  }
   return el;
 }
 function asList(control) {
@@ -3138,9 +3190,7 @@ function fieldRow(opts) {
       it.className = "vela-field-inline-item";
       if (item.toggleFirst) it.style.flexDirection = "row-reverse";
       if (item.label) {
-        const lbl = labelEl(item.label, { id: item.id, size });
-        if (item.toggleFirst) lbl.style.cursor = "pointer";
-        it.appendChild(lbl);
+        it.appendChild(labelEl(item.label, { id: item.id, size }));
       }
       if (item.fit) it.appendChild(item.control);
       else {
@@ -3165,7 +3215,7 @@ function fieldRow(opts) {
       tone: "bright",
       onChange: (v) => opts.toggle?.onChange(v)
     });
-    wrap2.append(sw.el, labelEl(opts.label, { size }));
+    wrap2.append(sw.el, labelEl(opts.label, { id: opts.toggle?.id ?? opts.id, size }));
     if (opts.info) wrap2.appendChild(opts.info);
     if (opts.toggle?.get) {
       const get = opts.toggle.get;
@@ -3204,7 +3254,7 @@ function fieldRow(opts) {
         if (controls.length > 0) dimControls(controls, v);
       }
     });
-    left.append(sw.el, labelEl(opts.label, { size }));
+    left.append(sw.el, labelEl(opts.label, { id: opts.toggle.id ?? opts.id, size }));
     wrap.appendChild(left);
     if (controls.length > 0) dimControls(controls, opts.toggle.checked);
     if (opts.toggle.get) {

package/dist/ui.d.cts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-BqGeFHtp.cjs';
+import { c as VelaTheme } from './options-YdiaaVjt.cjs';
 import { MachineSchema, Service, Machine } from '@zag-js/core';
 export { a as KeyBindingDescriptor, K as KeymapManager, b as KeymapOptions, R as ResolvedBinding } from './keymap-CGOz5F5f.cjs';
 import * as tooltip from '@zag-js/tooltip';
@@ -91,7 +91,8 @@ interface MenuItemDescriptor {
     /** Right-aligned hint (e.g. a shortcut display from KeymapManager). */
     hint?: string;
     /** Selected state (undefined = plain item). A plain checked item renders as a
-     *  highlighted row (brighter surface + bright ink). */
+     *  highlighted row (brighter surface + bright ink) — or, in a menu built with
+     *  `checkmarks`, as a leading ✓ with the row surface left free for hover. */
     checked?: boolean;
     /** Render as a SWITCH row (a right-aligned toggle pill reflecting `checked`)
      *  instead of the selected-row highlight, and keep the menu OPEN on selection —
@@ -152,6 +153,13 @@ interface MenuOptions extends MenuControllerOptions {
     /** Star-toggle reports from items carrying `favorite` (the menu stays open — starring
      *  is a side action on a row, never a selection). */
     onFavorite?: (id: string, on: boolean) => void;
+    /** Mark checked items with a leading ✓ instead of the selected-row background wash —
+     *  the shape for pointer-anchored action menus (right-click context menus), where a
+     *  washed row reads as hover state. A level holding checkable rows reserves the mark
+     *  column on all its rows so labels align; an all-action level keeps its natural left
+     *  edge. Submenus inherit the mode. Dropdown menus (a trigger button opening a
+     *  picker) keep the default wash. */
+    checkmarks?: boolean;
 }
 declare class Menu {
     private readonly root;

package/dist/ui.d.ts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-BqGeFHtp.js';
+import { c as VelaTheme } from './options-YdiaaVjt.js';
 import { MachineSchema, Service, Machine } from '@zag-js/core';
 export { a as KeyBindingDescriptor, K as KeymapManager, b as KeymapOptions, R as ResolvedBinding } from './keymap-CGOz5F5f.js';
 import * as tooltip from '@zag-js/tooltip';
@@ -91,7 +91,8 @@ interface MenuItemDescriptor {
     /** Right-aligned hint (e.g. a shortcut display from KeymapManager). */
     hint?: string;
     /** Selected state (undefined = plain item). A plain checked item renders as a
-     *  highlighted row (brighter surface + bright ink). */
+     *  highlighted row (brighter surface + bright ink) — or, in a menu built with
+     *  `checkmarks`, as a leading ✓ with the row surface left free for hover. */
     checked?: boolean;
     /** Render as a SWITCH row (a right-aligned toggle pill reflecting `checked`)
      *  instead of the selected-row highlight, and keep the menu OPEN on selection —
@@ -152,6 +153,13 @@ interface MenuOptions extends MenuControllerOptions {
     /** Star-toggle reports from items carrying `favorite` (the menu stays open — starring
      *  is a side action on a row, never a selection). */
     onFavorite?: (id: string, on: boolean) => void;
+    /** Mark checked items with a leading ✓ instead of the selected-row background wash —
+     *  the shape for pointer-anchored action menus (right-click context menus), where a
+     *  washed row reads as hover state. A level holding checkable rows reserves the mark
+     *  column on all its rows so labels align; an all-action level keeps its natural left
+     *  edge. Submenus inherit the mode. Dropdown menus (a trigger button opening a
+     *  picker) keep the default wash. */
+    checkmarks?: boolean;
 }
 declare class Menu {
     private readonly root;

package/dist/ui.js

@@ -1,3 +1,3 @@
-export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-TP56QRMK.js';
-export { ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-QHZ7IXFL.js';
+export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-2R7BANEM.js';
+export { ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-OICPLNU7.js';
 export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-PN5KWFZ4.js';