sibujs 3.3.2 → 3.4.0

package/dist/ui.d.cts

@@ -244,26 +244,6 @@ declare function hover(target: HTMLElement): {
     dispose: () => void;
 };
 
-/**
- * scrollLock stacks body scroll locks — useful when a modal / drawer / sheet
- * stack is open and background scroll must be suppressed.
- *
- * Each `lock()` call increments an internal counter and applies
- * `overflow: hidden` + preserves the scrollbar-width padding to prevent
- * layout shift. Calling `unlock()` decrements; when the counter hits zero
- * the previous body style is restored.
- *
- * Safe to call from multiple concurrent overlays — the last one to unlock
- * releases the lock.
- *
- * @example
- * ```ts
- * const lock = scrollLock();
- * lock.lock();
- * // ... modal open
- * lock.unlock();
- * ```
- */
 interface ScrollLockHandle {
     /** Activate a lock. Idempotent per-handle if called twice. */
     lock: () => void;

package/dist/ui.d.ts

@@ -244,26 +244,6 @@ declare function hover(target: HTMLElement): {
     dispose: () => void;
 };
 
-/**
- * scrollLock stacks body scroll locks — useful when a modal / drawer / sheet
- * stack is open and background scroll must be suppressed.
- *
- * Each `lock()` call increments an internal counter and applies
- * `overflow: hidden` + preserves the scrollbar-width padding to prevent
- * layout shift. Calling `unlock()` decrements; when the counter hits zero
- * the previous body style is restored.
- *
- * Safe to call from multiple concurrent overlays — the last one to unlock
- * releases the lock.
- *
- * @example
- * ```ts
- * const lock = scrollLock();
- * lock.lock();
- * // ... modal open
- * lock.unlock();
- * ```
- */
 interface ScrollLockHandle {
     /** Activate a lock. Idempotent per-handle if called twice. */
     lock: () => void;

package/dist/ui.js

@@ -38,7 +38,7 @@ import {
   toast,
   withScopedStyle,
   zipMask
-} from "./chunk-62V653X2.js";
+} from "./chunk-AXFWGY32.js";
 import {
   RenderProp,
   assertType,
@@ -58,20 +58,23 @@ import {
 import {
   createId
 } from "./chunk-CCSJMTRN.js";
-import "./chunk-QCFBIVIQ.js";
-import "./chunk-G6N3LMO2.js";
+import "./chunk-K35BAR4P.js";
+import "./chunk-ITWCTZYH.js";
 import {
-  registerDisposer
-} from "./chunk-5VGSK6D2.js";
+  globalSingleton
+} from "./chunk-7ZHH77QA.js";
 import "./chunk-L3GAGWCC.js";
 import {
   effect
-} from "./chunk-N5TQVEKE.js";
+} from "./chunk-BUKYCWHX.js";
 import "./chunk-S3NFJO6L.js";
+import {
+  registerDisposer
+} from "./chunk-5VGSK6D2.js";
 import {
   signal
-} from "./chunk-JCQG2I2G.js";
-import "./chunk-4NJEAPLI.js";
+} from "./chunk-KZBEVFXZ.js";
+import "./chunk-OOUQUCNN.js";
 import "./chunk-COY6PUD2.js";
 
 // src/ui/formAction.ts
@@ -375,24 +378,27 @@ function hover(target) {
     target.removeEventListener("pointerenter", onEnter);
     target.removeEventListener("pointerleave", onLeave);
   }
+  registerDisposer(target, dispose);
   return { hovered, dispose };
 }
 
 // src/ui/scrollLock.ts
-var lockCount = 0;
-var savedOverflow = null;
-var savedPaddingRight = null;
+var _lock = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.scrollLock.v1"), () => ({
+  count: 0,
+  savedOverflow: null,
+  savedPaddingRight: null
+}));
 function scrollLock() {
   let owned = false;
   function lock() {
     if (owned) return;
     owned = true;
-    lockCount++;
-    if (lockCount !== 1 || typeof document === "undefined") return;
+    _lock.count++;
+    if (_lock.count !== 1 || typeof document === "undefined") return;
     const body = document.body;
     const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-    savedOverflow = body.style.overflow;
-    savedPaddingRight = body.style.paddingRight;
+    _lock.savedOverflow = body.style.overflow;
+    _lock.savedPaddingRight = body.style.paddingRight;
     body.style.overflow = "hidden";
     if (scrollBarWidth > 0) {
       body.style.paddingRight = `${scrollBarWidth}px`;
@@ -401,13 +407,13 @@ function scrollLock() {
   function unlock() {
     if (!owned) return;
     owned = false;
-    lockCount = Math.max(0, lockCount - 1);
-    if (lockCount !== 0 || typeof document === "undefined") return;
+    _lock.count = Math.max(0, _lock.count - 1);
+    if (_lock.count !== 0 || typeof document === "undefined") return;
     const body = document.body;
-    body.style.overflow = savedOverflow ?? "";
-    body.style.paddingRight = savedPaddingRight ?? "";
-    savedOverflow = null;
-    savedPaddingRight = null;
+    body.style.overflow = _lock.savedOverflow ?? "";
+    body.style.paddingRight = _lock.savedPaddingRight ?? "";
+    _lock.savedOverflow = null;
+    _lock.savedPaddingRight = null;
   }
   return { lock, unlock };
 }

package/dist/widgets.cjs

@@ -32,6 +32,14 @@ __export(widgets_exports, {
 });
 module.exports = __toCommonJS(widgets_exports);
 
+// src/core/rendering/createId.ts
+var COUNTER_KEY = /* @__PURE__ */ Symbol.for("sibujs.createId.v1");
+var _counter = globalThis[COUNTER_KEY] ?? (globalThis[COUNTER_KEY] = { n: 0 });
+function createId(prefix = "sibu") {
+  _counter.n++;
+  return `${prefix}-${_counter.n}`;
+}
+
 // src/core/dev.ts
 function isDev() {
   return typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : (
@@ -470,7 +478,7 @@ function forEachSubscriber(signal2, visit) {
 
 // src/reactivity/track.ts
 var _isDev3 = isDev();
-var _runtimeVersion = true ? "3.3.2" : "dev";
+var _runtimeVersion = true ? "3.4.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
@@ -912,7 +920,6 @@ function watch(getter, callback) {
 }
 
 // src/widgets/Combobox.ts
-var comboboxIdCounter = 0;
 var boundComboboxes = /* @__PURE__ */ new WeakMap();
 function combobox(options) {
   const { items, filterFn, itemToString } = options;
@@ -973,7 +980,13 @@ function combobox(options) {
   function bind(els) {
     const existing = boundComboboxes.get(els.input);
     if (existing) return existing;
-    const listboxId = `sibu-combobox-listbox-${++comboboxIdCounter}`;
+    const prevListboxId = els.listbox.id;
+    const prevListboxRole = els.listbox.getAttribute("role");
+    const prevListboxHidden = els.listbox.hidden;
+    const prevInputRole = els.input.getAttribute("role");
+    const prevInputAutocomplete = els.input.getAttribute("aria-autocomplete");
+    const prevInputControls = els.input.getAttribute("aria-controls");
+    const listboxId = createId("sibu-combobox-listbox");
     els.listbox.id = listboxId;
     els.listbox.setAttribute("role", "listbox");
     els.input.setAttribute("role", "combobox");
@@ -1037,10 +1050,14 @@ function combobox(options) {
         if (document.activeElement !== els.input) close();
       }, 100);
     };
+    const onListboxPointerDown = (e) => {
+      e.preventDefault();
+    };
     els.input.addEventListener("input", onInput);
     els.input.addEventListener("keydown", onKey);
     els.input.addEventListener("focus", onFocus);
     els.input.addEventListener("blur", onBlur);
+    els.listbox.addEventListener("mousedown", onListboxPointerDown);
     const teardown = () => {
       boundComboboxes.delete(els.input);
       fxTeardown();
@@ -1048,10 +1065,24 @@ function combobox(options) {
       els.input.removeEventListener("keydown", onKey);
       els.input.removeEventListener("focus", onFocus);
       els.input.removeEventListener("blur", onBlur);
+      els.listbox.removeEventListener("mousedown", onListboxPointerDown);
       if (blurTimer !== null) {
         clearTimeout(blurTimer);
         blurTimer = null;
       }
+      if (prevListboxId === "") els.listbox.removeAttribute("id");
+      else els.listbox.id = prevListboxId;
+      if (prevListboxRole === null) els.listbox.removeAttribute("role");
+      else els.listbox.setAttribute("role", prevListboxRole);
+      els.listbox.hidden = prevListboxHidden;
+      if (prevInputRole === null) els.input.removeAttribute("role");
+      else els.input.setAttribute("role", prevInputRole);
+      if (prevInputAutocomplete === null) els.input.removeAttribute("aria-autocomplete");
+      else els.input.setAttribute("aria-autocomplete", prevInputAutocomplete);
+      if (prevInputControls === null) els.input.removeAttribute("aria-controls");
+      else els.input.setAttribute("aria-controls", prevInputControls);
+      els.input.removeAttribute("aria-expanded");
+      els.input.removeAttribute("aria-activedescendant");
     };
     boundComboboxes.set(els.input, teardown);
     return teardown;
@@ -1387,7 +1418,6 @@ function accordion(options) {
 }
 
 // src/widgets/Popover.ts
-var popoverIdCounter = 0;
 var boundPopovers = /* @__PURE__ */ new WeakMap();
 function popover() {
   const [isOpen, setIsOpen] = signal(false);
@@ -1403,7 +1433,7 @@ function popover() {
   function bind(els) {
     const existing = boundPopovers.get(els.trigger);
     if (existing) return existing;
-    const id = `sibu-popover-${++popoverIdCounter}`;
+    const id = createId("sibu-popover");
     const prevPopoverRole = els.popover.getAttribute("role");
     const prevPopoverId = els.popover.id;
     const prevLabelledBy = els.popover.getAttribute("aria-labelledby");
@@ -1477,7 +1507,6 @@ function popover() {
 }
 
 // src/widgets/Select.ts
-var selectIdCounter = 0;
 var boundSelects = /* @__PURE__ */ new WeakMap();
 function select(options) {
   const { items, multiple = false, itemToString, isDisabled } = options;
@@ -1558,7 +1587,11 @@ function select(options) {
   function bind(els) {
     const existing = boundSelects.get(els.listbox);
     if (existing) return existing;
-    const listboxId = `sibu-select-${++selectIdCounter}`;
+    const prevId = els.listbox.id;
+    const prevRole = els.listbox.getAttribute("role");
+    const prevMultiselectable = els.listbox.getAttribute("aria-multiselectable");
+    const prevTabIndex = els.listbox.getAttribute("tabindex");
+    const listboxId = createId("sibu-select");
     els.listbox.id = listboxId;
     els.listbox.setAttribute("role", "listbox");
     els.listbox.setAttribute("aria-multiselectable", multiple ? "true" : "false");
@@ -1618,6 +1651,15 @@ function select(options) {
       fxTeardown();
       els.listbox.removeEventListener("keydown", onKey);
       if (typeTimer !== null) clearTimeout(typeTimer);
+      if (prevId === "") els.listbox.removeAttribute("id");
+      else els.listbox.id = prevId;
+      if (prevRole === null) els.listbox.removeAttribute("role");
+      else els.listbox.setAttribute("role", prevRole);
+      if (prevMultiselectable === null) els.listbox.removeAttribute("aria-multiselectable");
+      else els.listbox.setAttribute("aria-multiselectable", prevMultiselectable);
+      if (prevTabIndex === null) els.listbox.removeAttribute("tabindex");
+      else els.listbox.setAttribute("tabindex", prevTabIndex);
+      els.listbox.removeAttribute("aria-activedescendant");
     };
     boundSelects.set(els.listbox, teardown);
     return teardown;
@@ -1642,7 +1684,6 @@ function select(options) {
 }
 
 // src/widgets/Tooltip.ts
-var tooltipIdCounter = 0;
 var boundTriggers = /* @__PURE__ */ new WeakMap();
 function tooltip(options) {
   const delay = options?.delay ?? 0;
@@ -1687,7 +1728,7 @@ function tooltip(options) {
   function bind(els) {
     const existing = boundTriggers.get(els.trigger);
     if (existing) return existing;
-    const id = `sibu-tooltip-${++tooltipIdCounter}`;
+    const id = createId("sibu-tooltip");
     els.tooltip.setAttribute("role", "tooltip");
     els.tooltip.id = id;
     const prevDescribedBy = els.trigger.getAttribute("aria-describedby");
@@ -1747,7 +1788,6 @@ function tooltip(options) {
 }
 
 // src/widgets/FileUpload.ts
-var fileUploadIdCounter = 0;
 var boundFileUploads = /* @__PURE__ */ new WeakMap();
 function fileUpload(options) {
   const accept = options?.accept;
@@ -1819,7 +1859,7 @@ function fileUpload(options) {
   function bind(els) {
     const existing = boundFileUploads.get(els.input);
     if (existing) return existing;
-    const id = `sibu-fileupload-${++fileUploadIdCounter}`;
+    const id = createId("sibu-fileupload");
     const restore = [];
     if (accept) els.input.accept = accept;
     els.input.multiple = multiple;
@@ -1948,7 +1988,7 @@ function stripHtml(html) {
 }
 
 // src/widgets/contentEditable.ts
-function contentEditable() {
+function contentEditable(element) {
   const [content, setContentInternal] = signal("");
   const [isFocused, setFocused] = signal(false);
   function setContent(input) {
@@ -1972,6 +2012,7 @@ function contentEditable() {
     const selection = window.getSelection();
     if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
     const range = selection.getRangeAt(0);
+    if (element && !element.contains(range.commonAncestorContainer)) return;
     const ancestor = range.commonAncestorContainer;
     const existingWrap = findAncestorByTag(
       ancestor instanceof HTMLElement ? ancestor : ancestor.parentElement,
@@ -2151,12 +2192,18 @@ function datePicker(options) {
   function bind(els) {
     const existing = boundDatePickers.get(els.grid);
     if (existing) return existing;
+    const prevGridRole = els.grid.getAttribute("role");
+    const prevGridTabIndex = els.grid.getAttribute("tabindex");
+    const prevGridLabel = els.grid.getAttribute("aria-label");
     els.grid.setAttribute("role", "grid");
     if (els.grid.tabIndex < 0) els.grid.tabIndex = 0;
+    let pendingFocus = false;
     const fxTeardown = effect(() => {
       const sel = selectedDate();
       const view = viewDate();
       const days = daysInMonth();
+      els.grid.setAttribute("aria-label", view.toLocaleDateString(void 0, { month: "long", year: "numeric" }));
+      let viewCell = null;
       for (const d of days) {
         const cell = els.cell(d.date);
         if (!cell) continue;
@@ -2164,7 +2211,13 @@ function datePicker(options) {
         cell.setAttribute("aria-selected", sel && isSameCalendarDay(sel, d.date) ? "true" : "false");
         if (d.isDisabled) cell.setAttribute("aria-disabled", "true");
         else cell.removeAttribute("aria-disabled");
-        cell.tabIndex = isSameCalendarDay(view, d.date) ? 0 : -1;
+        const isView = isSameCalendarDay(view, d.date);
+        cell.tabIndex = isView ? 0 : -1;
+        if (isView) viewCell = cell;
+      }
+      if (pendingFocus && viewCell && typeof viewCell.focus === "function") {
+        pendingFocus = false;
+        viewCell.focus();
       }
     });
     function isSameCalendarDay(a, b) {
@@ -2174,6 +2227,9 @@ function datePicker(options) {
       setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth(), prev.getDate() + delta));
     }
     const onKey = (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") {
+        pendingFocus = true;
+      }
       switch (e.key) {
         case "ArrowLeft":
           e.preventDefault();
@@ -2222,6 +2278,12 @@ function datePicker(options) {
       boundDatePickers.delete(els.grid);
       fxTeardown();
       els.grid.removeEventListener("keydown", onKey);
+      if (prevGridRole === null) els.grid.removeAttribute("role");
+      else els.grid.setAttribute("role", prevGridRole);
+      if (prevGridTabIndex === null) els.grid.removeAttribute("tabindex");
+      else els.grid.setAttribute("tabindex", prevGridTabIndex);
+      if (prevGridLabel === null) els.grid.removeAttribute("aria-label");
+      else els.grid.setAttribute("aria-label", prevGridLabel);
     };
     boundDatePickers.set(els.grid, teardown);
     return teardown;

package/dist/widgets.d.cts

@@ -216,8 +216,13 @@ interface SetContentOptions {
  * Uses the modern Selection/Range API instead of the deprecated
  * document.execCommand. Formatting is applied by wrapping the current
  * selection in the appropriate inline element.
+ *
+ * @param element Optional editor element to scope formatting to. When provided,
+ *   `bold()`/`italic()`/`underline()` ignore any selection that lives outside it
+ *   — otherwise a selection elsewhere on the page could be mutated, since the
+ *   Selection API is global.
  */
-declare function contentEditable(): {
+declare function contentEditable(element?: HTMLElement): {
     content: () => string;
     /**
      * Update the reactive content value.

package/dist/widgets.d.ts

@@ -216,8 +216,13 @@ interface SetContentOptions {
  * Uses the modern Selection/Range API instead of the deprecated
  * document.execCommand. Formatting is applied by wrapping the current
  * selection in the appropriate inline element.
+ *
+ * @param element Optional editor element to scope formatting to. When provided,
+ *   `bold()`/`italic()`/`underline()` ignore any selection that lives outside it
+ *   — otherwise a selection elsewhere on the page could be mutated, since the
+ *   Selection API is global.
  */
-declare function contentEditable(): {
+declare function contentEditable(element?: HTMLElement): {
     content: () => string;
     /**
      * Update the reactive content value.

package/dist/widgets.js

@@ -8,14 +8,15 @@ import {
   select,
   tabs,
   tooltip
-} from "./chunk-FJO2ZL4Q.js";
-import "./chunk-RLTFJYDN.js";
-import "./chunk-G6N3LMO2.js";
+} from "./chunk-OAVXAFAY.js";
+import "./chunk-H5FI5WDP.js";
+import "./chunk-CCSJMTRN.js";
+import "./chunk-ITWCTZYH.js";
 import "./chunk-L3GAGWCC.js";
-import "./chunk-N5TQVEKE.js";
+import "./chunk-BUKYCWHX.js";
 import "./chunk-S3NFJO6L.js";
-import "./chunk-JCQG2I2G.js";
-import "./chunk-4NJEAPLI.js";
+import "./chunk-KZBEVFXZ.js";
+import "./chunk-OOUQUCNN.js";
 import "./chunk-COY6PUD2.js";
 export {
   accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sibujs",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "A lightweight, function-based frontend framework that combines the best of React, Svelte, and Vue — with zero VDOM and maximum simplicity. Designed for developers who want fine-grained reactivity and full control without compilation or magic.",
   "keywords": [
     "frontend",
@@ -33,6 +33,8 @@
     "format": "biome format --write src/ tests/",
     "test": "vitest",
     "test:ui": "vitest --ui",
+    "test:browser": "npm run build && playwright test",
+    "test:browser:install": "playwright install chromium firefox webkit",
     "build": "tsup index.ts data.ts browser.ts patterns.ts motion.ts ui.ts widgets.ts ssr.ts devtools.ts performance.ts ecosystem.ts plugins.ts build.ts testing.ts extras.ts --dts --format esm,cjs --out-dir dist --clean && tsup cdn.ts --format iife --globalName Sibu --out-dir dist --no-dts --minify",
     "bench": "node bench.mjs",
     "bench:save": "node bench.mjs --save",
@@ -135,6 +137,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.4.7",
+    "@playwright/test": "^1.61.1",
     "@types/node": "^25.5.0",
     "@vitest/coverage-v8": "^3.1.3",
     "@vitest/ui": "^3.1.3",